문제 https://school.programmers.co.kr/learn/courses/30/lessons/150368?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(users, emoticons) { /** 1. 이모티콘마다 다른 할인율을 적용했을 때, 유저 이모티콘 구매 비용과 서비스 가입 여부를 확인 2. 전체 구매 비용, 서비스 가입자 수를 확인 3. 서비스 가입자 수가 더 많거나 || (가입자 수는 같고 && 이모티콘 구매비용 더 많으면) 답 교체 */ const disc..
들어가며 [1편]에서 테스트 환경 구축 시 사용되는 패키지의 설정 파일을 살펴보았습니다. [2편]에서는 먼저 Vite, TypeScript, React Testing Library, Jest를 사용해 테스트 환경을 구축하고, 패키지 간 의존성과 설정 파일 문제로 발생했던 에러와 해결책을 공유하고자 합니다. React 테스트 환경 구축하기(Vite, TS, Jest, React Testing Library) Vite 프로젝트 설치 npm create vite@latest test-config -- --template react-ts cd test-config npm install code . // vscode 열기 테스트 관련 패키지 설치 // 2-1 Jest 관련 패키지 설치 npm i -D jest j..
MYCHELIN 프로젝트에서 가게 상세 페이지를 맡아 진행하면서 해당 가게에 대한 댓글과 저장 데이터를 서버에서 받아와 렌더링하고, 추가, 삭제 등의 mutation을 해야 했다. 이때 React Query를 이용해 받아온 데이터를 캐싱해 사용했다. 유저가 해당 가게를 저장하거나 저장을 취소하고, 댓글을 남기거나 삭제했을 때 즉각적인 피드백을 하기 위해 useMutation, setQueryData, 그리고 invalidateQueries를 통한 낙관적 업데이트를 했다. TL;DR useQuery로 고유한 쿼리 키를 사용해 데이터를 캐싱한다. useMutation으로 서버 데이터를 업데이트한다. mutation 이후에 화면을 바로 업데이트할 필요가 없다면 useMutation에 mutationFn을 전달..
Git&Github 실무 활용 완벽 가이드프로젝트를 다른 사람들과 함께 진행할 때는 Git과 GitHub가 필수적입니다. 이 도구들은 여러 기능을 동시에 추가하거나, 다양한 버전의 파일을 관리할 필요가 있을 때 특히 유용합니다. 개발을 처음 시작할 때는 당장 눈앞에 있는 언어나 프레임워크를 익히는 것만으로도 벅찬 경우가 많습니다. 그래서 Git에 관한 강의를 들어도 처음에는 필요성이 와닿지 않을 수 있습니다. 그러다 시간이 지나 막상 프로젝트를 시작하고 나면 GitHub를 사용하면서 발생하는 충돌로 당황스러울 때가 있습니다. 필요할 때마다 자주 쓰이는 명령어들을 검색하여 사용하는 것도 유효한 방법이지만, 이 강의를 수강한 후에는 단순히 명령어를 사용하는 것을 넘어 전체적인 흐름이 이해할 수 있을 것입니다..
최근 Context API와 Recoil을 비교하면서 위 주제에 대해 이야기하게 되었다. 이에 대한 의견이 나뉘어서 이에 대해 직접 확인해 보는 시간을 가졌다. 먼저 Context의 개념을 알아보고, 코드를 보면서 상태 변화에 따른 렌더링이 어떻게 발생하는지 알아보자. 그 이후에 useMemo, memo 등을 적용해 보면서 최적화하고, Context가 상태 관리 라이브러리를 대체할 수 있는지 생각해 보자. Context 알아보기 Context란 props drilling: 상위 컴포넌트에서 제공하는 데이터를 하위 컴포넌트로 필요한 위치까지 계속해서 넘기는 것 Context API는 이를 극복하기 위해 등장한 개념이다. 명시적 props 전달 없이도 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 ..
