Hi, I'm Hyunsu 👋

1. 들어가며 리액트 테스팅 라이브러리를 사용하다보면, screen , render , fireEvent 등의 메서드를 사용하게 됩니다. 이 메서드들은 자주 사용되는데요. scrren의 예로 screen.getByText 에 접근할 때 …

들어가면서 읽기 쉬운 코드라는 책의 서평 이벤트에 당첨되어 책을 받았다. 책의 서문에서는 이 책의 핵심 독자는 엔터프라이즈 개발자(특히 백엔드 개발자)라고 말하는데, 개발자로서 공통적으로 가지는 부분에 대해선 이견 없이 읽을 수 있었다. 예제 코…

월간 CS CI/CD 나는 왜 시작했나? 운영 중인 베이킹 예약 웹 어플리케이션은 현재 AWS Elasticbeanstalk 에 배포 되어 관리 하고 있다. 배포의 자동화는 아니지만, 그래도 aws cli를 이용하여 배포를 진행하고 있었고 잦은 수정…

문제 설명 길이가 같은 두 개의 큐가 주어집니다. 하나의 큐를 골라 원소를 추출(pop)하고, 추출된 원소를 다른 큐에 집어넣는(insert) 작업을 통해 각 큐의 원소 합이 같도록 만들려고 합니다. 이때 필요한 작업의 최소 횟수를 구하고자 합니다.…

들어가면서 이 글은 1편 '기본형 데이터와 참조형 데이터를 알아야 하는 이유'에 대한 후속편입니다. Java나 C, C++ 언어에서는 기본형은 스택에, 참조형은 힙에 들어간다고 알고 있고, JS 또한 기본형은 스택, 참조형은 힙에 할당된다고 주장하는…

99코테 스터디를 시작했다. 매주 월,목 저녁 9시에 모여 11시까지 주어진 문제들을 그 자리에서 풀고, 스터디장님이 풀이를 설명해 준다. 오늘은 2022 카카오 인턴십 코딩 테스트 문제이다. 문제 문제 출처 : 프로그래머스 2022 카카오 인턴…

문제 출처 : 846. Hand of Straights 문제 Alice has some number of cards and she wants to rearrange the cards into groups so that each group is of …

들어가며 코어자바스크립트 책의 챕터 1. 데이터 타입 을 읽고 난 후 이해한 점을 바탕으로 재구성하여 쓴 글이다. 이 챕터를 읽으면서 왜 기본형 데이터와 참조형 데이터를 알아야 하는 건지, 그리고 이 지식을 알았을 때 어떤 가치를 가져다 주는지를 …

들어가면서 이번 글은, closure에 대한 오해 경험과 알아가면서 생긴 궁금증들을 정리하는 글이다. 이 글은 시리즈로 작성 되어질 예정이다. 지금 글은 렉시컬 스코프와 클로저 개념의 연결점을 중심으로 클로저가 관찰 되는 상태와 아닌 상태를 구분 …

골든래빗 코딩 테스트 합격자 되기 파이썬 편의 15장 써머리가 포함되어 있습니다. 마지막 챕터이다. 같이 스터디한 멤버들과 팀장님께 고마운 인사를 올린다. 문제부터 풀면서 greedy에 익숙해 지는 것이 목표이다. 몸풀기 문제 거스름돈 주기 거스름…

골든래빗 코딩 테스트 합격자 되기 파이썬 편의 15장 써머리가 포함되어 있습니다. 동적계획법은 모든 문제를 다 풀진 못했다. 어렵기도 했지만, DP의 잘 알려진 연습 문제에 익숙해 지는 것이 목표이다. 동적계획법 문제 조건 최적 부분 구조(Opti…

시뮬레이션 문제는 주어진 상황을 완벽하게 이해 하고 이를 코드로 구현 하는 과정으로 구현에 중점이 맞춰져 있다. 그래서 바로 문제풀이로 넘어가볼까 한다. 이진 변환 반복하기 출처: 프로그래머스 문제 설명 0과 1로 이루어진 어떤 문자열 x에 대한 …

들어가며 이번 주는 인터뷰 과제 구현을 겸하느라 문제를 많이 풀진 못했다. 밸런스를 유지하는게 쉽진 않은 것 같다. 설연휴에 정렬 부분을 다시 봐야겠다. 문제 풀이로 바로 넘어가겠다. 문자열 내 마음대로 정렬하기 출처 프로그래머스 바로가기 문제 써머…

백트래킹 알고리즘 핵심은 '해가 될 가능성을 판단'하는 것이다. 여기서의 가능성은 유망 함수를 정의하면서 판단한다. 문제를 풀면서 익숙해지는게 중요한것 같다. 문제 풀이 피로도 문제 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며,…

이슈 : ReactDOMServer does not yet support Suspense 이렇게 Next.js에서 에러가 나오고 에러가 발생된 근원지를 알려준다면, 디버깅의 기법중 역추적에 의한 디버깅(Debugging by backtracking…

저번 주에 익힌 개념을 바탕으로 이번주엔 프로그래머스 문제를 풀어보았다. 게임 맵 최단거리 - 프로그래머스 문제 바로 보러 가기 (문제 출처 : 프로그래머스 ) 문제에서 요구하는 것은 상대 팀 진영인 maps[n-1][n-1] 에 도착 하기 까지…

그래프 개념 그래프는 노드와 간선을 이용한 비선형 데이터 구조 그래프는 데이터 간의 관계를 표현하는 데 사용. 데이터를 노드, 노드간의 관계나 흐름을 간선으로 표현 방향성 :방향이 있을 수도 있고 없을 수도 있다. 가중치 : 노드간의 관계에서 가중…

이 글은 골든래빗 코딩 테스트 합격자 되기 파이썬 편의 10장 써머리입니다. 개념 정리 집합의 개념 순서와 중복이 없는 원소들을 갖는 자료구조. ex {1,6,6,6,4,3} -> {1,6,4,3} 으로 생각해야 한다. 상호배타적집합 은 교집합이 …

골든래빗 코딩 테스트 합격자 되기 파이썬 편의 9장 써머리가 포함되어 있습니다. 개념 정리 이진트리 표현하기 이진 트리는 트리의 한 종류로 모든 노드의 최대 차수가 2를 넘지 않는 트리. 즉, 최대 2개의 자식 노드를 가질 수 있다. (자식 노드 0…

이 글은 골든래빗 코딩 테스트 합격자 되기 파이썬 편의 8장 써머리입니다. 해시의 특징 단반향으로 동작 - 키 -> 값 ✅, 값 -> 키 ❌ 키는 해시함수에의해 인덱스가 되므로 처음부터 하나씩 찾아보는 과정이 필요없다. 하나씩 찾아보는 순차탐색의 …

들어가며 문제를 풀 때 문제의 정확도와 효율성을 고려한 자료구조를 생각해 내는게 쉽진 않다. 이번 스터디에서 스택,큐를 진행하면서 코딩테스트 합격자되기에 수록 되어 있는 문제인 2021 카카오 채택 연계형 인턴쉽 문제 "표 편집"에서 부분적으로 스…

2D Array 다루기 이 글은 골든래빗 코딩 테스트 합격자 되기 파이썬 편의 5장 써머리입니다. 2차원 배열은 1차원 배열을 확장한 것이다. 1차원 배열을 확장했다는 것은 2차원 배열도 1차원공간에 저장하고 메모리에 연속 적으로 할당했다고 볼 수…

들어가며 최근 혼자서 준비하던 알고리즘 공부가 시간 대비 집중이 잘안되고 점점 늘어 지고 있었다. 마침, 알고리즘 스터디원을 모집하는 글이 눈에 들어왔고, 주저 없이 신청하였는데 멤버가 되었다. (아마 문닫고 들어온 멤버가 아닐까 한다) 스터디는 최…

들어가면서 대부분의 참고 서적에서 this를 다룰 때 함수의 호출 방식에 대한 이야기와 함께 this를 설명하죠. this를 알고싶은데 자꾸만 함수의 호출 방식을 이야기 합니다. 함수 혹은 함수 호출이 왜 중요할까요? 자바스크립트에서 함수와 함수…

안녕하세요, 오늘은 데이터 수집 과정에서 발생한 문제와 그 해결책, 그리고 타입스크립트를 도입하여 얻은 개선 기회에 대해 이야기하려고 합니다. 문제점 파악 문제를 파악하기 위해 코드와 이벤트 명세서를 살펴보았습니다. 그 결과, 무려 100개가 넘는 …

1.배경 소미에는 배송정보 요청하기라는 기능이 있다. 아직까지 서비스에선 배송정보를 미리 알려주지 않고 배송 정보 요청을 원하는 유저에게만 기능을 제공하고 있다. 기능이 고도화 되진 않아 어드민이 요청 처리를 하기 위해선 일련의 수동작업을 거치게 된…

들어가며 이 글은 Next.js에서 페이지 렌더링 방식을 이해하기 위해서 혼자 playground에서 실험 해보다 배우게 된 부분을 기록 하였습니다. 다소 글이 전문적 이지 않을 수도 있고 틀린 부분도 있습니다. 넌 CSR이니 SSR이니 또는 SSG…

1. 이슈 현재 블로그는 gatsby.js를 이용한 프로젝트입니다.각 포스팅의 프리뷰 섹션에서 이미지를 감싸는 wrapper 요소에 border-radius css 속성을 적용하였을때 webkit엔진을 사용하는 safari 브라우저에선 적용이 …

댄 밴더캄의 이펙티브 타입스크립트 도서의 아이템11,12 읽고 정리한 내용입니다. 아이템 12. 함수 표현식에 타입 적용하기 타입스크립트에서는 함수 선언문 보다 함수 표현식을 사용하는 것이 좋습니다. 그 이유는 함수 타입 선언은 함수 표현식에 재사용…

리액트 훅을 사용하면서 부수효과에 대해 생각을 하다보니 함수형 프로그래밍 사고와 어떻게 접근해야 하는지에 대해 알아보기 위해 함수형 자바스크립트 책을 접했습니다. 어플리케이션 설계시 자문해봐야할 요소들 확장성 : 추가기능을 지원하기 위해 계속 리팩터…

위의 사진은 맥 기준의 시스템 설정입니다. 사용자는 이렇게 보여질 뷰를 light 또는 dark모드로 선택을 할 수 있습니다. 제 블로그를 방문하는 사람들에게 미리 사용자가 적용한 설정에 맞추어 뷰를 제공한다면 더 나은 사용자 경험을 전달 할 수 있…

이 글을 쓰게된 계기는 구글 웹폰트를 적용한 후 페이지 렌더링시 깜빡임 현상을 해결하는 과정에서 구글 웹폰트의 동작원리 그리고 웹폰트 성능 최적화에 대해 알게되면서 적용한 과정 이다. 잘못된 부분이나 더 괜찮은 방법 또는 의견을 나누고 싶다면 바로 …

댄 밴더캄의 이펙티브 타입스크립트 도서의 아이템2.타입스크립트 설정 이해하기 파트를 읽고 정리한 내용입니다. 오류없이 타입 체커를 통과할 수있을까 ? tsconfig에서 설정이 어떻게 되어 있는지 모른다면 대답할 수 없을 것입니다. 타입스크립트 컴파…

Jest를 선택하기 까지 가장 안정적이고 널리 알려진 Mocha와의 성능차이를 비교한 가운데, 테스팅 속도 또한 의견이 분분 하였습니다. 사실 저희 프로젝트에 맞는 결정적 요인이 내려지지 않았습니다. 점유율을 확인 후, JEST가 높은 가운데 테스트…

Kent C. Dodds 님의 Static vs Unit vs Integration vs E2E Testing for Frontend Apps 을 읽고 추가적으로 더 필요한 부분과 같이 정리한 글입니다. 저의 이해도를 높이기 위해 보충 설명이 되어…

playwright 공식 문서를 참고하여 썼습니다. 글을 쓴 시점의 version은 1.13.0 / 언어 및 환경은 Node.js 입니다. 다른 언어를 참조 하시려면 https://playwright.dev/ 에서 언어를 선택하시면 됩니다…

이 글은 제가 최근에 시작한 테스트 프로젝트에 playwright를 사용하게 되면서 브라우저 테스팅과 puppeteer, playwright, selenium 에 대하여 적어보았습니다. 잘못된 정보를 담고 있다면 꼭 알려주시면 감사하겠습니다. 브라우…

이 포스트는 카일심슨의 YOU DON'T KNOW JS, 정진욱님의 타입스크립트 퀵스타트를 참고 하여 이해한 바탕으로 적은 노트입니다. 발전하는 개발자가 될 수 있도록 설명이 잘못 되었다거나 조금 더 보충설명이 필요 하시다고 생각되시면 댓글 남겨 주…

이 포스트는 자바스크립트의 객체지향을 공부하면서 적은 노트 입니다. 발전하는 개발자가 될 수 있도록 설명이 잘못되었다거나 조금 더 보충설명이 필요하시다고 생각되시면 댓글 남겨 주세요. 언제든지 환영입니다 😄 캡슐화는 위 이미지의 캡슐과 같이 클래스 …

리액트 공식문서를 참고하여 의역한 부분과 조금 쉽게 풀어보았습니다 How declarative UI compares to imperative 먼저 명령형 볼게요. 다음과 같은 UI 인터랙션이 있다고 생각해보세요. form 에 무언가를 입력하면 "제출…