✔️ 들어가기 전
지난 회차 강의에서는 Next.js의 전체적인 특징과 장점 및 간단한 실습을 했습니다. 이번에 진행된 마지막 강의에서는 Next.js에서 공식적으로 지원하는 기초 강좌를 강사님과 같이 실습하는 시간을 가졌습니다. 아래의 링크로 따라가시면 기초 강좌를 시작할 수 있습니다.
📋 개요
Next.js 기초 강좌 개요입니다. 강사님과의 강의 시간이 짧아 '양식 유효성 검사 및 접근성' 부분까지만 학습하였습니다.
- 스타일링
Next.js에서 애플리케이션의 스타일을 지정하는 다양한 방법 - 최적화
이미지, 링크, 글꼴을 최적화하는 방법 - 라우팅
파일 시스템 라우팅을 사용하여 중첩된 레이아웃과 페이지를 만드는 방법 - 데이터 가져오기
Vercel에서 데이터베이스를 설정하는 방법과 가져오기 및 스트리밍 모범 사례 - 검색 및 페이지 매김
URL 검색 매개변수를 사용하여 검색 및 페이지 매김을 구현하는 방법 - 데이터 변경 변경
React Server Actions를 사용하여 데이터를 변경하고 Next.js 캐시를 재검증하는 방법 - 오류 처리
일반적인 오류와 찾을 수 없는 오류를 처리하는 방법 - 양식 유효성 검사 및 접근성
서버 측 양식 유효성 검사를 수행하는 방법과 접근성 향상을 위한 팁 - 인증
NextAuth.js를 이용하여 애플리케이션에 인증을 추가하는 방법 - 메타데이터
메타데이터를 추가하고 소셜 공유를 위해 애플리케이션을 준비하는 방법
💡 장점 및 주요 내용
연습 문제
각 챕터마다 아래와 같이 연습 문제를 제공하여 배우는 내용을 제대로 학습할 수 있도록 도와주고 있어 실습하기 좋았습니다.
추천 학습
챕터에서 배운 지식에 대해 더욱 배우고 싶은 사람들을 위해 관련 지식이 정리되어 있는 링크들을 제공합니다.
pnpm (performant-npm)
이번 강의를 통해 pnpm을 처음 알았습니다. performant의 정확한 번역을 찾을 수 없었지만 의역하자면 '성능이 좋은 npm' 정도로 이해했습니다. npm보다 좋은점이 2가지 있는데 하나는 '적은 디스크 용량 사용'과 '일관적인 폴더 구조 유지'입니다. 관련된 내용을 학습하다가 잘 정리된 글을 찾았습니다. 김정환님의 블로그
이미지 최적화
Image 요소는 HTML 태그인 img의 확장 버전으로 아래와 같은 자동 이미지 최적화 기능을 제공합니다.
- 이미지가 로드될 때 자동으로 레이아웃 이동 방지
- 뷰포트가 더 작은 영역에 큰 이미지가 전달되는 것을 방지하기 위해 이미지 크기 조정
- 기본적으로 이미지 지연 로딩(이미지가 뷰포트에 들어갈 때 로드됨)
- WebP와 같은 최신 형식으로 이미지 제공(브라우저가 지원하는 경우)
스트리밍
스트리밍은 경로를 더 작은 "청크"로 나누고 준비가 되면 서버에서 클라이언트로 점진적으로 스트리밍할 수 있는 데이터 전송 기술입니다. 스트리밍하면 느린 데이터 요청이 전체 페이지를 차단하는 것을 방지할 수 있습니다. 이를 통해 사용자는 UI가 사용자에게 표시되기 전에 모든 데이터가 로드될 때까지 기다리지 않고 페이지의 일부를 보고 상호 작용할 수 있습니다.
Next.js에서 스트리밍을 구현하는 방법에는 두 가지가 있습니다.
1. 페이지 수준에서 loading.tsx파일을 사용
2. 특정 구성 요소의 경우 Suspense
서버 작업 (Mutating Data)
React Server Actions를 사용하면 서버에서 직접 비동기 코드를 실행할 수 있습니다. 데이터를 변경하기 위해 API 엔드포인트를 생성할 필요가 없습니다. 대신 서버에서 실행되고 클라이언트 또는 서버 구성 요소에서 호출될 수 있는 비동기 함수 작성이 필요합니다.
웹 애플리케이션은 다양한 부분에 취약할 수 있어 보안이 중요합니다. 이런 부분을 해결하고자 서버 작업이 필요합니다. 서버 작업은 효과적인 보안 솔루션을 제공하여 다양한 유형의 공격으로부터 보호하고 데이터를 보호하며 승인된 액세스를 보장합니다. 서버 작업은 POST 요청, 암호화된 폐쇄, 엄격한 입력 확인, 오류 메시지 해싱 및 호스트 제한과 같은 기술을 통해 이를 달성하며 모두 함께 작동하여 앱의 안전성을 크게 향상시킵니다.
참고 사항
Next.js 기초 강좌에서는 데이터베이스 연결 및 sql에 대해서도 배우지만 프론트엔드 강의인 만큼 이 글에서는 언급하지 않고 다른 글에서 따로 정리하겠습니다.
🍯 강사님의 팁
강사님께서 강의 시간이 지났는데도 불구하고 면접 성공을 위한 이력서(경력기술서) 작성 방법에 대해 알려주셨습니다.
- 궁금증을 유발하고 준비된 답변으로 유도하자
- 불확실하고 애매한 부분은 과감히 삭제하자
- 모집 공고에 나온 우대사항 부분을 내 장점으로 살리기
✏️ 마무리
Next.js에 대해
Next.js로 간단한 앱을 테스트용 정도로 만들기만 해봤고 실질적인 프로젝트를 해보지 않았습니다. 그럼에도 장점이 매우 많은 풀스택 프레임워크라는 것을 여러가지 경로를 통해 듣고 알았습니다. 특히 최고의 강점이 '간단함'이라고 알고 있었기 때문에 배우기 시작한다면 매우 쉬울거라 예상했었습니다.
실제로 기초 강좌를 들으면 학습해보니 간단한건 눈에 보이는 부분만 그랬던 것이고, 조금만 깊게 배우기 시작하자 생각보다 많은 기초 지식을 필요로 했습니다. 물론 배우는 입장에서는 기초 지식을 새로 배우거나 복습한다는 점에서 저에게 매우 도움이 되었습니다. '간단해 보이는 내용일수록 여러가지 단단단 기초 지식으로 이루어져 있다.' 제 자신에게 되새길 말입니다.
다하지 못한 기초 강좌
강사님과 끝까지 기초 강좌 실습을 하지 못해 아쉽습니다. 앞에서 배운 내용들을 다시 한 번 살펴보고 관련된 기초 지식을 습득한 뒤에 혼자서 마무리를 할 생각입니다. 또한 다음 프로젝트는 Next.js로 할 예정입니다.
