(해당 게시글은 모던 리액트 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 에 웹팩..