✔️ 들어가기 전
6월 챌린지 3회차 강의에서는 Next.js에 대한 내용을 전체적으로 간단하게 살펴보고 실제로 실습해보는 시간을 가졌습니다. 이번 글에서는 강의에서 들은 내용들을 간단하게 적어보겠습니다.
📑 3회차 강의 내용
Next.js
- Next.js의 장점과 구조
- SPA와의 차별점
실습
- Next.js를 활용한 입력폼 개발
🏘️ Next.js 구조와 장점
Next.js는 React 프레임워크 중 하나로 풀 스택 웹 애플리케이션 개발을 위한 도구 자동 설정 및 구성을 제공합니다.
서버 사이드 렌더링(SSR)
서버 사이드 렌더링에 대해 쉽게 설명하자면 화면에 표출 될 데이터들을 서버에서 가공한 뒤 브라우저에 보내주는 방식입니다.
주된 사용 목적은 '빠른 페이지 렌더링 속도'와 '검색 엔진 최적화' 입니다.
정적 사이트 생성(SSG)
블로그와 같이 간단한게 작성된 데이터들은 화면에 보여주기만 하면 되기 때문에 웹을 빌드 할 시점에 모든 파일을 정적인 HTML 파일로 생성하고 서버에 업로드합니다. 그런 다음 클라이언트의 요청에 알맞는 정적 파일을 전송하는 방식입니다.
App Path Routing
Next.js 12.2 버전부터 도입되었습니다. app 폴더 내부의 파일 경로를 기반으로 라우팅을 지원합니다. 여러가지 예약된 파일 이름을 통해 지정된 작업을 할 수 있어 매우 편리합니다.
File Base Dynamic Routing
본래 Next.js에서 제공하는 라우팅 기법입니다. 파일 구조에 따라 자동으로 라우트를 생성하는 방식입니다. getServerSideProps 및 getStaticProps와 같은 api 를 사용하여 서버사이드에서 데이터를 페칭 할 수 있습니다.
Server Components
Next.js에서는 기본적으로 Server Components입니다. 아래는 몇 가지 장점입니다.
- UI를 서버에서 렌더링 및 캐싱 가능
- Next.js에서는 라우트 세그먼트 별로 렌더링 작업 분할
- 스트리밍 및 부분 렌더링 지원
🚀 프론트엔드 개발자로 성장하기 위한 방법
지속적인 학습과 최신기술 습득
- 최신 프레임워크와 라이브러리 학습
- 기술블로그, 온라인강의, 세미나참여
- 개인 프로젝트를 통한 실전 경험 쌓기
문제 해결 능력 향상
- 코드 리뷰와 협업 경험
- 알고리즘 문제 풀이
- 다양한 기술 스택 경험
커뮤니티 참여와 네트워킹
- 개발자 커뮤니티 참여
- 오픈 소스 프로젝트 기여
- 기술 컨퍼런스 및 해커톤 참여
✏️ 마무리
이번 강의에서는 전체적으로 Next.js에 대한 기본적인 내용을 작게 체험해보는 내용이 주된 내용이었습니다. 아직 Next.js로 프로젝트를 해본적은 없지만 여러 곳에서 많이 듣기도 했고, 이제는 프론트엔드 개발자에게 필수가 되었다는 생각이 들어 학습할 생각입니다.
또한 프론트엔드 개발자로서 학습해야 할 방향이라던가, 개발자로서 뿐만이 아니라 사람으로서 발전하는데 도움이 될만한 이야기를 들을 수 있어서 스스로 좋은 방향으로 고민할 수 있는 시간을 가졌습니다.
