시작하며...중급 프로젝트에서 Toast 를 react-toastify 라이브러리와 Styled Components 를 사용해서 커스텀하여 사용하였다. 그러나 간혈적으로 토스트가 생기지 않고 갑자기 다른 곳에서 생기는 등(?) 이상한 현상이 발생하였다.주강사님께 여쭤보니깐 아마 Next.js Hydration 에러인 것 같다고 해서 Context 를 사용해서 구현해 보라고 피드백을 주셨다. 당시에 토스트를 다시 구현할 시간이 없어서 나중에 기회가 되면 직접 Toast 컴포넌트를 구현하고 싶었는데,마침 이번 프로젝트에서 Jotai 라는 상태 관리 라이브러리를 사용하여 직접 구현하게 되었다. 구현하기참고로 나는 토스트가 스택처럼 여러 개 쌓이는 걸 별로 안 좋아한다..그리고 다른 팀원분도 토스트가 쌓이지 않..

시작하며...이전 프로젝트에서 Menu 와 DropDown 컴포넌트를 구현하였다. 그러나 공통 컴포넌트라는 성격과 거리가 멀었다. 그래서 이번 프로젝트에서 DropDown 공통 컴포넌트를 범용성이 좋게 만들기 위해 컴파운드(Compound) 패턴으로 만들게 되었다!  컴파운드(Compound) 패턴컴파운드 패턴이란?컴파운드 패턴이란 무엇일까? 컴파운드 패턴React에서 복잡한 컴포넌트를 효율적으로 관리하고 재사용성을 높이기 위한 디자인 패턴DropDown 이나 Select 등 컴포넌트를 여러 작은 컴포넌트로 분리하여 부모/자식 관계로 이루어진 컴포넌트를 독립적이면서 통합되어 하나의 컴포넌트처럼 사용할 수 있게 만드는 디자인 패턴 중 하나이다. 장점유연성 증가가독성 증가유지보수성 증가재사용성 향상컴포넌트 ..

시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다.  해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) React 개발 도구 설치React 에서 디버깅을 하기 위해 크롬 확장 프로그램 중에서 React Developer Tools를 설치해야 한다. 정상적으로 설치가 되면 크롬 우측 상단 확장 도구 모음에 React 로고가 생긴 것을 확인할 수 있게 된다. 현재 티스토리 블로그도 React 로 만들어졌기 때문에 활성화된 것을 확인할 수 있고만약 React 개발 모드라면 로고가 빨간색으로 되어 있으며React 로 만들어지지 않는 웹사이트는 회색으로 표시되게 된다. React 개발 도구 활용하기 React Developer Tools를 설치하게 되면 이제 개발자 도구에서 Components 와 Profiler 메뉴가 추가된다. Com..

React 에서의 SVG그동안 React 에서 SVG 를 사용할 때 컴포넌트로 만들어서 사용하였다.컴포넌트로 만들고 해당 SVG 의 width, height, 색상을 직접 조절할 수 있게 아래 코드처럼 만들어 사용하였다.그런데 svg 를 jsx 컴포넌트로 만드는 과정은 매우 귀찮고 번거롭다 🥲 반면 Next.js 에서는 SVG 를 다루는 과정이 React 보다 너무 쉽고 간편하다! Next.js 에서의 SVGNext.js 에서 SVG 를 컴포넌트로 사용하려면 아래 단계를 거쳐야 한다. @svgr/webpack 설치SVG 를 컴포넌트로 변환시켜 주는 플러그인 패키지인 @svgr/webpack 를 다운로드한다.npm install @svgr/webpack 웹팩 설정 추가next.config.js 에 웹팩..