경험하는 IT

Next.js - routing

Next.js 라우팅 Next.js에서 라우팅은 페이지의 경로를 정의하고 해당 경로에 맞는 컴포넌트를 렌더링하는 방법을 의미한다. 라우팅에 방법은 두가지 이다. "App Router"와 "Pages Router" 이다. 각각에 대해 설명해보자. App Router 상태를 유지하고 리렌더링을 방지하면서 자체 경로 안의 컴포넌트와 UI를 쉽게 공유할 수 있다. App Router를 이용하기 위해서는 /app 디렉토리에 파일을 생성해야 한다. 다음과 같이 원하는 파일명을 만든 뒤 그 파일에 page.tsx를 작성하면 된다. 원하는 폴더 안에 page에 파일 확장자는 js, jsx, tsx를 쓸 수 있다. main이라는 폴더에 page UI를 작성 후 직접 실행해 확인해보면 정상적으로 작동하는 것을 볼 수 있다..

Next.js 설치 및 개발환경 셋팅

개발 환경 셋팅 1. Node.js 설치 2024.02.19 - [👨‍💻 node.js] - Node.js 설치 이전 글을 참조하면 된다. 2. VScode 설치 Next.js 프로젝트 생성 1. 터미널 창을 명령어를 입력해준다. npx create-next-app@latest 명령어를 입력해주면 위와 같이 뜬다. Ok to proceed? (y) => y를 눌러준다. What is your project named? [원하는 프로젝트 명] Would you like to use TypeScript? 타입스크립트를 사용할 건지 물어보는 것이다. 원하는 것을 선택하면 된다. Would you like to use ESLint? ESLint를 사용할 건지 물어보는 것이다. 원하는 것을 선택하면 된다. Wou..

Next.js를 사용하는 이유?

🖥️ Next.js를 사용하는 이유? Next.js를 쓰는 이유에 대해서 간단히 알아보자. 프론트엔드 만으로 살아남을 수 없다. 요즘은 프론트엔드만 안다고 취업시켜주는 시대가 점점 끝나고 있다. 외주 개발 맡기면 훨씬 저렴하고 GPT와 같이 AI가 코드를 훨씬 잘 짜준다. SSR(Server-Side Rendering) 기존 React는 Client-side Rendering을 써왔다. 사용시 이쁘고 부드러운 사이트를 만들 수 있지만 첫 페이지 로딩속도 저하, 검색노출 어려움과 같은 단점이 있어서 웹사이트의 bounce rate 지표들이 낮아지고 트래픽을 잡으려고 광고비도 많이든다. 그래서 투자대비 수입지표가 낮아질 수 밖에 없다. 반면 Next.js는 SSR을 사용해 서버에서 HTML을 미리 만들어주기..