글쓰는쿼카의 PM 여정
🐤[베이직] Next.js - 간단하게 훑기 (2024. 6. 28.) 본문
#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)
학습주제 : Next.js
학습내용 : 넥스트제이에스 설치, 폴더분석
학습일 : 2024. 6. 28.
<Next.js 소개>
결론, Next.js 가 코딩을 쉽게 만들어주기 때문!
- 공식 홈페이지 : https://nextjs.org/
<Next.js 사용 이유>
1) 쉬운 설정
2) Full Stack
3) 유용한 기법 제공
4) Data Fetching
5) 쉬운 베포
<Youtube 소개 영상>
- 코딩애플 : https://youtu.be/jYJ3ygUfPrU?si=wAQFStQ94KL7QRH_
- 노마드코더 : https://youtu.be/t0UocUiR5-8?si=0zIkjCFZu0U4o5fs
- 메타코드M : https://youtu.be/1w70c7x62BI?si=hMfF77lwg8Ev6Lw0
<강의자료>
- 기본강의: https://teamsparta.notion.site/Next-js-fb9ff662c50841fd82db629a04ae4b1b
배운 내용 요약
1. Next.js 설치 및 초기 세팅
// Terminal - Bash
npx create-next-app@latest
What is your project named? my-app(원하는 폴더 이름 설정)
Would you like to use TypeScript? No / "Yes"
Would you like to use ESLint? No / "Yes"
Would you like to use Tailwind CSS? No /"Yes"
Would you like to use `src/` directory? "No" / Yes
Would you like to use App Router? (recommended) No / "Yes"
Would you like to customize the default import alias (@/*)? "No" / Yes
What import alias would you like configured? @/*
2. Next.js 프레임워크(Framework = 사용틀) 폴더 분석
1) 최상위 폴더 : app, pages(권장x), public, (src)
- app : 앱 라우터
- pages : 페이지 라우터
- public : 제공될 정적 자산
- src : 선택적인 애플리케이션 소스 폴더
2) 최상위 파일 :
최상위 파일은 애플리케이션 구성, 종속성 관리, 미들웨어 실행, 모니터링 도구 통합 및 환경 변수 정의에 사용
3) app 라우팅 규칙 : [folder], (folder), _folder
** 동적 경로 : [folder] ---- 페이지 주소로 표시됨
** 경로 그룹 및 개인 폴더 : (folder), _folder
(folder) 경우
_folder 경우
오늘의 회고
- 칭찬 : 개인과제(favorite countries)에서 보완점(카드 원래 위치로 돌아오기) 완료! tailwindcss 첫 시도 완료!
- 반성 : 일어나자마자 바로 머리감을 것!
(세부설명 : 개인과제를 다 끝내지 못 했다는 불안함 마음에 새벽에 눈을 떴긴 했지만 침대에 누워 있어 귀한 새벽시간을 낭비한 것이 아까움)
- 보충 : Next.js의 Layout 작성법에 대해 강의보기, CSS 기본 사용법 설명듣기, 개인과제(favorite countries) 2회독
'개발 > Next.js' 카테고리의 다른 글
| [FP] 마이페이지의 닉네임 변경하기 (2024. 7. 29.) (0) | 2024.07.29 |
|---|---|
| [FP] Context API 로 유저 상태 관리하기 (2024. 7. 25.) (0) | 2024.07.25 |
