개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-15 - 23-05-22 Repo PR & Review 🛍️ 장바구니 📚 스토리북 미션회고 다음은 장바구니 미션 2단계의 필수 요구 사항이다. 1. 장바구니 페이지 - 장바구니 페이지 마크업을 완성하고, 상품 목록 페이지와 함께 모바일 환경 대응 2. MSW를 활용한 API Mocking - MSW를 활용하여 실제 서버와 연동될 수 있는 API Mocking을 구현 - 단순한 Endpoint 변경으로 실제 API 사용이 가능하도록 작업 3. 테스트 - 장바구니 페이지에서 다양한 사용자 인터렉션에 대한 테스트 케이스를 고민하고, 선택한 도구를 이용하여 검증 4. 사용자 경험 - 새로..
리액트에는 상태라는 개념이 존재합니다. 시도 때도 없이 바뀌는 이런 상태를 어떻게 다루어야 버그 없는 컴포넌트를 만들 수 있을까요? 물론 상태를 대~~충 다루어도 컴포넌트를 만들고 상태를 다루는 데는 큰 무리가 없을 겁니다. 하지만 서비스의 규모가 점점 커지다 보면 어느 순간 내가 만들었던 상태들이 제멋대로 변하면서 원치 않는 상황을 마주하는 경험을 하게 될 것입니다. 그제야 상태의 구조를 바꾸기 위해 뜯어고치기 시작한다면 그땐, 이미 상태가 꼬일 대로 꼬이지 않았을까요? 그래서 저희는 상태를 잘 구조화하여 리팩터링을 쉽게 할 수 있게 해야 하며, 오류 없이 상태를 업데이트를 할 수 있어야 합니다. 그러면 어떻게 상태를 만들어야 할까요? 가이드라인은 가까운 곳에 있습니다. 바로 리액트 공식문서입니다. 리..
들어가기 전 21년 말, react-router-dom을 사용할 땐 v6.3이었다. 현재는 메이저 버전은 동일하지만 v6.4를 기점으로 기존에 없던 새로운 기능이 추가되어 이를 소개하고자 한다. 아래의 사진에서 보는 것과 같이 React Router 공식 문서에서도 v6.4에 대해 무엇이 새로운지 소개하고 있다. React Router 공홈 바로가기 현재 react-router-dom의 최신 버전은 v6.11.1이다. 얼마나 자주 업데이트 되는지 궁금해서 Version History를 찾아봤는데, v6.11.1은 현재기준(23년 5월 16일) 12일 전에 공개가 되었다. 그리고 v6.4.0은 8개월 전인 22년 9월에 공개되었다. 꾸준히 기능이 업데이트되고 있다고 생각한다. 더 재밌는 점은 이전의 v5의..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-09 - 23-05-14 Repo PR & Review 🛍️ 장바구니 📚 스토리북 미션 회고 레벨 2의 세 번째 미션은 장바구니 페이지를 만드는 것이다. 이번 미션을 바탕으로 백엔드와 협업 미션도 진행을 한다. 즉, 서버에 있는 데이터를 받아 상품 목록을 보여주고 장바구니에 상품을 담고, 삭제하는 과정도 구현해야 한다. 이를 위한 본격적인 기능 구현은 2단계에서 진행을 하게 된다. 1단계에서는 장바구니 마크업을 완성하고 상태를 관리하기 위한 빌드업 과정이라고 생각하며 미션에 임했다. 장바구니 1단계 미션의 필수 요구 사항은 다음과 같다. 1. 상품 목록 페이지 상품 목록 페이지에 ..
개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-05-02 - 23-05-08 Repo PR & Review 💳 페이먼츠 📚스토리북 미션회고 페이먼츠 미션의 마지막 단계의 필수 요구사항은 다음과 같다. 1. 사용하던 모달을 분리해서 npm으로 배포하고, 그 라이브러리를 집접 import 해서 사용하기 2. 문서로서 스토리북을 고도화하기 위해 리팩터링 3. '카드를 등록 중입니다.' 스피너 추가 2, 3번의 요구사항보다 1번 요구사항에 초점을 두고 3단계를 진행하였다. 간략히 말하자면 스토리북은 7 버전으로 업데이트를 한 뒤, autodocs 기능을 사용하였. '카드를 등록 중입니다.' 스피너는 피그마에 있는 요구사항을 그대로 반영..
개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-04-24 - 23-05-01 Repo PR & Review 💳 페이먼츠 📚스토리북 미션회고 페이먼츠 2단계 미션의 필수 요구사항은 다음과 같다. 1. 주요 컴포넌트에 대한 Storybook 상호 작용 테스트 2. Controlled & Uncontrolled Components에 입각하여 Form 핸들링 3. Context API를 활용하여 전역 상태 관리 및 계층 재구성 이중 가장 부족했던 부분은 Storybook 상호 작용 테스트이다. 현재 스토리북을 보면 컴포넌트가 개별적으로만 테스트하고 있다. 여러 컴포넌트를 묶어 상호 작용 테스트는 미흡하다고 할 수 있다. 부족한 것을 알..
이장에서의 핵심은 라이브러리를 작성중일 때, 의존이 필요한 라이브러리가 구현과 상관없이 타입만 필요하다면 모든 라이브러리를 불러오지 않고 구조적 타이핑을 활용하여 필요한 메서드와 속성만 별도로 작성하자라고 느껴졌다. Buffer 예시 Buffer 타입을 예시로 살펴보자. Buffer는 노드 개발자를 위한 것이다. Buffer 타입을 불러오기 위해 @types/node(NodeJS 타입 선언) 모듈을 설치해야 한다. 이를 설치하게 된다면 다음과 같은 개발자에게 문제가 생긴다. 1. 자바스크립트 개발자: NodeJS, @types와 무관하다. 2. 타입스크립트 개발자: NodeJS와 무관하다. 즉, 각자가 사용하지 않는 모듈이 포함되어 있기 때문에 혼란스러울 것이다. Buffer는 NodeJS 개발자에게만 ..
오버로딩 타입이란? 오버로딩 타입은 아이템 3에서 다루었던 개념이다. 다시 정리하자면 다음과 같다. 우선 함수 오버로딩이란 동일한 이름에 매개변수만 다른 여러 버전의 함수를 허용하는 것이다. 하지만 타입스크립트에서는 불가능하다. 타입스크립트에 비슷한 기능을 지원하지만 이는 타입 수준에서만 동작하므로 오버로딩 타입이라고 한다. 즉, 하나의 함수에 대해 여러 개의 선언문을 작성할 수 있지만, 구현체는 오직 하나뿐이다. function add(a: number, b: number): number; // add 함수에 대한 선언문 1 function add(a: string, b: string): string; // add 함수에 대한 선언문 2 // add 함수 구현체 function add(a, b) { r..
😵💫 복잡해질 수도 있는 경로 프로젝트를 진행하다 보면 폴더의 구조가 복잡해질 가능성이 충분히 존재한다. 규모가 큰 프로젝트일수록 더욱 원하는 파일에 접근하기 위해 이리저리 움직여야 한다. 특히, 하위 폴더에 접근하는 것이 아니라 형제 폴더, 부모의 형제 폴더에 접근하는 것은 더욱 까다롭다. 다행히 vscode는 이런 복잡한 문제를 자동 import를 할 수 있는 기능을 제공해 주기 때문에 쉽게 해결 가능하다. import 하고 싶은 모듈을 타이핑을 하다 보면 자동으로 import 하는 기능을 모두 다 사용해 봤을 것이다. 이를 활용하면 다음과 같이 vscode가 알아서 모듈의 위치를 찾아 import를 해준다. import CreditCard from '../../components/CreditCar..
개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-04-18 - 23-04-23 Repo PR & Review 💳 페이먼츠 📚스토리북 미션 회고 리액트 온보딩 미션이 끝나고 두 번째 미션인 페이먼츠 미션이 시작되었다. 페이먼츠 미션은 총 3단계로 이루어져 있다. 지금까지는 2단계가 마지막이었는데, 3단계까지 있는 것을 보니 하나의 서비스에 대해서 더 많은 고민을 할 수 있게 될 것 같다. 페이먼츠 미션의 필수 요구 사항은 다음과 같다. 1. Storybook으로 UI 컴포넌트 렌더링 2. REQUIREMENTS.md에 요구 사항 도출 3. 재사용 가능한 Component 작성 📚 Storybook 새로운 키워드가 등장했다. 바로 S..
