React 18에서는 여러 업데이트가 이루어졌습니다. Concurrency 개념도 포함이 되었고... 서버측 렌더링 기능에 대한 내용도 있고요. 이러한 리액트 18 업데이트와 연관된 Next.js 13의 변경사항들도 눈에 띄는데, 리액트 18과 Next.js 13은 어떤 연관성이 있는지, 어떤 방향성을 가지고 무엇이 바뀌었는지 이해해보고 싶었습니다. Next.js, 뭐가 그렇게 좋은데? 그거 SSR 원툴 프레임워크 아냐? 예전엔 그런 느낌이 있었던 것 같기도… 처음 Next.js를 공부해서 사용할 때만 해도, 몇년 전까지만 해도 Next.js는 주로 리액트만으로 만든 애플리케이션의 한계인 SEO 최적화와 초기 페이지 로드속도 향상을 위한 SSR을 위해 사용하는 것이 가

입사 첫 주차가 지나갔다. 앞으로 매주 TWIL과 회고를 진행하려고 하는데, 오늘은 회사의 코드를 파악하면서 익숙하지 않은 새로운 개념들을 하나씩 정리해두려고 한다. 회사에서는 Next.js를 별도로 사용하고 있지는 않고 React 자체에서 코드 스플리팅을 사용하고 있다. 이 부분에 대해 정리해보자. 코드 스플리팅 SPA에서는 모든 코드를 처음 접속했을 때 서버에서 클라이언트로 요청해 받아온다. 즉, 사용자가 접속하지 않은 페이지에 관련된 코드도 함께 전송 받기 때문에, 프로젝트의 규모가 크다면 다운받는 코드의 용량이 커진다는 단점이 있다. 이 때 사용할 수 있는 것이 코드 스플리팅으로, 접속한 페이지에서 당장 필요한 코드만 받고, 나머지는 필요할 때만 요청해서 새로 받아 사용하는 기법을 말한다. >CRA에서 제공하는 Split Chunks로도 코드 스플리팅이 기본적으로 되기는 하나, 이러한 용도로 사용하기는 어렵다. Split Chunks? CRA에서는 기본 설

지난 프로젝트까지는 상대경로를 사용했더니, 단점이 있었다. import문이 지저분해진다. 파일의 위치를 파악하기 어렵다. 파일의 위치를 변경했을 때 import문을 수정하기 어렵다. 그래서 대체할 방법을 찾아보니, 절대경로를 사용하는 방법이 있었다. 1. jsonconfig.json 프로젝트 루트에 jsonconfig.json 파일을 만들고 아래 코드를 추가해준다. > 그러나... 다른 문제가 있었다. 윈도우를 사용하는 팀원분의 노트북에서는 에러가 발생했다. 다른 방법을 찾아보자. 2. cross-env를 이용한 NODE_ENV 주입 🔸 cross-env 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입하는 방법 🔸 사용법 사용할 명령어 앞에 cross-env [=, ...]를 붙여 작성해준다. 🔸 예시 🔸 적

원래는 Switch를 사용해 이렇게 작성했었지만, Switch가 export되지 않아 사용할 수 없었기 때문에 Switch 대신 Routes를 사용해 감싸주었다. 대신 component가 아닌 element를, {Home} 이 아닌 {}과 같은 방식으로 표기해주어야 한다. Reference https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom?rq=1

자바스크립트로 프로젝트할 때는 fontawsome을 사용해 아이콘을 넣었는데, 리액트로 진행할 때는 어려움이 있었다. fontawesome은 html에 kit script를 심어준 다음 사용해야 하는데 리액트에 적용하기는 어려웠다. 이를 해결하기 위해서는 여러 복잡한 과정을 거쳐야 했었는데, react-icons로 간단하게 아이콘을 삽입할 수 있다는 걸 알게 됐다. 설치 yarn add react-icons --save 필요한 아이콘을 검색하면 된다. 원하는 아이콘의 이름을 써주고, import할 때는 react-icons/뒤에 아이콘 이름의 앞 두 알파벳을 소문자로 써준다. FaUserCircle의 앞 두자리 알파벳 Fa를 소문자로 써서 react-icons/fa로 import 해주면 된다