holajjm

[환경 변수 / .env / (constants/env.ts) / env.d.ts]1. 난 처음에 프로젝트의 최상위 경로에 .env 파일을 생성해서 각종 환경 변수들을 생성하고 컴포넌트에서 필요한 환경 변수를 새로운 변수에 할당하여 사용했었다. 하지만 프로젝트 고도화, 최적화를 진행하다보니 .env 파일에 직접 접근하여 사용하는 것보다, 환경 변수 자체를 ENV라는 하나의 객체 상수로 생성하여 내부 값을 참조하여 사용하는 방식을 권장한다. 2. 그래서 난 프로젝트 폴더 구조에 constants라는 상수,변수들을 관리하는 폴더에 env.ts라는 파일을 통해 래핑하여 .env 파일의 환경 변수들을 참조하는 필드들을 가진 ENV 객체를 생성하였다. 모양새는 다음과 같다.export const ENV = { ..

[#1 - Parallel Route]Parallel Route(병렬 라우트)- Parallel Route란 병렬 라우트라는 의미로 한 개의 페이지 내에서 여러 페이지 컴포넌트들을 병렬로 구조화 할 수 있게 해주는 NextJS의 고급 라우팅 패턴 중 하나이다. NextJS는 라우팅 구조를 폴더 구조를 통해서 자동적으로 지원해주기 때문에 서로 다른 페이지 컴포넌트가 하나의 페이지에 공존할 수 없다는 특징을 갖고 있다. 따라서 그 한계점을 해결해주기 위한 라우팅 패턴이라고 볼 수 있다. Slot(슬롯)- 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더- @{folderName} 형태로 지정한다.- Route Group과 동일하게 URL 경로에는 아무런 영향을 미치지 않는 폴더이다. Parallel Rout..

[#1 - Server Action]Server Action(서버 액션)서버 액션이란 브라우저 측에서 호출할 수 있는 서버에서 실행되는 비동기 함수를 의미한다. 서버 액션을 활용하면 별도의 API 호출 없이도 간단한 함수 하나만으로 NextJS 서버측에서 실행되는 함수를 직접 호출이 가능해지는 것이다.서버 액션은 우리가 form 양식을 사용할 때 유용하게 사용할 수 있다. 우리가 간단한 form 양식을 통해 서버측에 데이터를 전달하거나 전달한 데이터를 받아서 사용하기에 굉장히 편리한 방법이다. 세부적으로 살펴보자. form action우리가 사용하는 form 태그에는 기본적으로 action이라는 속성이 존재한다. 이 속성은 form 태그 내부의 요소들에 입력된 값들을 처리하는 방식을 의미한다. 따라서 데..

[#1 - Streaming]StreamingStreaming이란 개천,하천이라는 뜻을 가진 Stream이라는 단어에서 유래된 용어로, 데이터를 개천이 흐르듯이 순차적으로 보내준다는 의미를 갖는다. Streaming은 NextJS에서 오래 걸리는 컴포넌트의 렌더링을 사용자가 좀 더 좋은 환경에서 기다릴 수 있도록 렌더링이 빠르게 가능한 요소들부터 순차적으로 출력해주는 방식으로 동작한다. 예를 들어 데이터 호출을 통해 받아오는 데이터의 양이 방대한 경우 페이지 전체의 로딩이 길어지는데 그에 따라 사용자가 접속 요청을 보냈음에도 불구하고 빈 회색 화면을 보고만 있는 것 보다는 기다릴 필요 없는 요소들을 먼저 보여주는 느낌이다.특히 Streaming은 렌더링 된 페이지를 캐싱해놓는 기능인 Full Route ..

[#1 - Full Route Cache]Full Route CacheFull Route Cache란 Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능을 말한다. Page Router 버전의 SSG 방식과 유사한 느낌이다. 프로젝트 빌드 타임에 Pre-Rendering을 진행하며 백엔드 서버로부터 요청했던 데이터들을 모두 받아와 데이터 캐싱도 Set하여 완료해두고 페이지 렌더링을 모두 완료한 뒤 Full Route Cache로 렌더링 완료된 페이지 자체를 캐싱해두는 것이다. 그에 따라 사용자의 페이지 초기 접속 요청이 발생하였을 때 백엔드 서버에게로 데이터 요청과 응답받은 데이터를 캐싱해두고 페이지를 렌더링 해두는 과정 필요없이 바로 캐싱되어있던 완성된 페이지를 사용자에게 매우..

[#1 - App Router Data Fetching]Page Router에서 Data Fetching을 할 때에는 Pre-Rendering을 통해서 데이터를 받아왔었다. 그 중에서도 SSG,SSR,ISR 등 필요한 방식에 따라 getServerSideProps, getStaticProps, getStaticPath 등 사용 방식에 맞는 함수를 사용하여 데이터를 호출한 뒤 필요한 하위 컴포넌트에 Props 형태로 데이터를 전달해주는 로직을 구성했었다. 하지만 App Router에서는 Server Component가 생겨남과 동시에 새로운 Data Fetching 방식이 생겨났다.함수형 컴포넌트를 사용하고 있음에 따라 컴포넌트에 async 키워드를 붙여줌으로써 해당 컴포넌트 내에서 Data Fetchin..

앞서 살펴본 NextJS의 Page Router는 NextJs의 12버전까지 사용하던 라우팅 방식이다. 13버전부터는 Page 폴더를 기반으로 하는 라우팅 구조가 아닌 App 폴더를 기준으로 라우팅 구조가 생성되는 App Rouer를 사용할 수 있게 되었으며 Page Router와 달라진 부분이나 새로 추가된 부분이 있기에 새로 공부해보고자 한다.[#1 - App Router]npx create-next-app@rc {Folder Name}위의 커맨드 명령어의 @rc라는 부분은 현재 NextJs가 15버전이 출시되지 않았지만 추후에 출시가 될 것을 고려하여 미리 가장 비슷한 버전의 프레임워크를 설치하고자 입력해주는 명령어이다. 만약 가장 최신 버전을 설치하고 싶다면 @latest 명령어를 입력해주면 된다..

[#1 - SEO(Search Engine Optimization)]SEOSEO란 Search Engine Optimization의 약자로 검색 엔진 최적화라는 뜻을 가진다. 검색 엔진 최적화는 우리가 배포하고 운용 중인 웹 페이지가 구글이나 네이버 같이 검색 엔진에게 잘 노출이 되도록 웹 페이지의 정보들을 코드에 입력해 줌으로써 사용자들의 검색 결과에 더 빈번하고 쉽게 노출되도록 설정해주는 작업을 의미한다.웹 페이지의 정보를 담고 있는 태그는 HTML에서 다루어 보았던 meta 태그이다. NextJS에서도 마찬가지로 meta 태그를 활용하여 페이지의 UI를 담고 있는 index 파일들에 SEO를 적용해 볼 예정인데 그 전에 한가지 개념이 필요하다. HeadHTML을 공부했던 때로 되돌아 가보자. 기본 ..

[#1 - Pre-Rendering & Data Fetching]우리가 이전에 React를 사용해서 Data Fetching을 하는 과정을 되짚어보면 다음과 같이 정리할 수 있다.1. 호출한 데이터를 보관할 State 생성2. Data Fetching을 위한 함수 생성3. Component의 Mount 시점에 Data Fetching 함수 호출4. Data Loading 과정의 예외 처리 React는 CSR 방식으로 동작하고 위의 과정은 Component가 Mount 되는 시점에 Data Fetching을 실행하기 때문에 사용자가 데이터를 받기까지 시간이 오래 걸린다는 단점이 있었다. 첨언하자면 CSR로 인해 느린 FCP에 더해 그 이후 Data Fetching을 실행하기 때문에 데이터를 받기까지 시간이..

본 포스팅은 Inflearn(인프런) 이정환님의 한 입 크기로 잘라먹는 NextJS(15+) 강의를 참고하여 작성되었습니다.[#1 - Page Router] Page Router Page Router는 말그대로 pages 폴더의 구조를 기반으로 Page Routing을 제공하는 구조를 말한다. UI를 그려주는 메인 파일명을 index라는 파일명으로 설정을 해주어야 한다. 아래 표는 NextJS 14버전부터 사용 가능한 App Router와 이전 버전의 Page Router을 간단하게 비교해둔 표이다.App RouterPage Routerapp 폴더(최상위 폴더)page 폴더(최상위 폴더)page 파일(UI)index 파일(UI)-_app 파일(React의 App.jsx 파일 역할)-_document 파일..