Additional information or tagline
A brief description of your project, what it is used for and how does life get awesome when someone starts to use it.
- 새 NextJS 프로젝트를 만들고, New York Times Best Seller 목록 탐색 App을 빌드하세요
- 홈페이지 (/) : 베스트셀러 전체 리스트를 보여주세요
- 상세 페이지 (/list/[id]) : 베스트셀러 각 카테고리별 책 리스트를 보여주세요
- 어바웃 페이지 (/about) : About 페이지
- Layout Component를 사용해야 합니다
- CSS Modules를 이용해 꾸며주어야 합니다.
- 포기하지 마세요!
- 베스트셀러 목록 가져오는 API https://books-api.nomadcoders.workers.dev/lists
- 하드커버 커버 분야 이미지 목록을 가져올 때 https://books-api.nomadcoders.workers.dev/list?name=hardcover-fiction
- [category] here https://books-api.nomadcoders.workers.dev/list?name=[category]
- #4.0 ~ #4.6 을 시청하고 Vercel에 작업물을 배포하세요
- 제출 URL 형태는 다음과 같습니다 [project-name].vercel.app
- 제출기간 : 04/01(월) 06:00 까지
- 가장 기본적인 app 디렉터리 외에 구조화할 폴더 구조를 참고하고 싶어서 찾아보게 되었다
- NextJS 기본 폴더 규칙 https://nextjs.org/docs/getting-started/project-structure
- How to structure scalable Next.js project architecture https://blog.logrocket.com/structure-scalable-next-js-project-architecture/
- NextJS 14 Folder Structure https://medium.com/@mertenercan/nextjs-13-folder-structure-c3453d780366
-
여러 CSS Reset 라이브러리 종류 https://www.webfx.com/blog/web-design/css-reset-stylesheets/
-
CSS Reset 라이브러리별 트렌드 https://npmtrends.com/modern-normalize-vs-normalize.css-vs-reset-css-vs-sanitize.css
-
Normalize.css에서 Sanitize.css로 갈아탄 이유 https://iamdtms.medium.com/css-reset-to-normalize-css-to-sanitize-css-e74ed173ae6
-
New CSS Reset https://elad2412.github.io/the-new-css-reset/
-
A (more) Modern CSS Reset https://piccalil.li/blog/a-more-modern-css-reset/
-
Enhancing Web Applications with CSS Resets: A Guide For Next.js https://medium.com/@bryomajor/enhancing-web-applications-with-css-resets-a-guide-for-next-js-9417624a5eb9
-
[Next.js] css 적용 방법들 https://velog.io/@iberis/Next.js-css-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95%EB%93%A4
-
Next.js 13 프론트엔드 구성하기 https://velog.io/@gwak2837/Next.js-13-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0
-
여러 CSS Reset 라이브러리를 비교한 결과, 가장 널리 사용되면서 Update가 이루어지고 있고, 크게 건드릴 필요가 없는 sanitize.css를 선택하기로 결정
$ pnpm add sanitize.css 1) /app/globals.css 파일 내용을 /styles/global.css로 옮기기 2) /styles/global.css 최상단에 아래 내용 import @import '~sanitize.css'; @import '~sanitize.css/forms.css'; @import '~sanitize.css/typography.css';
-
추가로 cssnano 관련 패키지 추가
$ pnpm add -D cssnano cssnano-preset-advanced 💡 cssnano : PostCSS 기반의 모듈식 CSS 최적화 도구 1) CSS 코드를 분석하고, 여러 최적화 기법을 적용하여 최종 결과물을 최대한 작게 만들어 줍니다. 2) 프로덕션 환경에서 웹사이트의 로딩 시간을 줄이고, 성능을 향상시키는 데 도움이 됩니다. 3) CSS 파일 크기 줄이기, 불필요한 공백 제거, 색상 코드를 압축하며, 주석을 제거하는 등 최적화 기법을 제공합니다. 4) 프로젝트의 요구사항에 맞게 최적화 수준을 조정할 수 있습니다
- vercel 홈페이지 https://vercel.com/
- JSON to Typescript https://json-5.com/json-to-typescript/
- References : https://basarat.gitbook.io/typescript/styleguide
- 변수 : camelCase
- 상수 : SCREAM_SNAKE_CASE
- 함수 : camelCase
- 클래스 : PascalCase
- 클래스의 멤버 변수 : camelCase
- 클래스의 메서드 : camelCase
- 인터페이스 : PascalCase
- 인터페이스의 멤버 변수 : camelCase
- 인터페이스를 알리는 I를 사용하지 마십시오!(헝가리안 표기법 안써도 인터페이스임이 명확함)
- 타입
- 타입 이름 : PascalCase
- 타입의 멤버 변수 : camelCase
- 네임스페이스 : PascalCase
- 열거형(enum)
- 열거형 이름 : PascalCase
- 열거형의 멤버 변수 : PascalCase
- 파일
- 일반적으로 : camelCase
- 리액트 컴포넌트 : PascalCase
- 모듈 : snake_case
- URL : kebab-case
- HTML Tag : kebab-case
| 행위 | 서버 컴포넌트 | 클라이언트 컴포넌트 |
|---|---|---|
| 데이터 가져오기 | ✅ | ❌ |
| 백엔드 리소스에 (직접) 액세스 | ✅ | ❌ |
| 민감 정보(Access Token, API Key 등) 저장 | ✅ | ❌ |
| 서버에 대한 큰 의존성 유지 / 클라이언트 측 JavaScript 감소 | ✅ | ❌ |
| 상호작용 및 이벤트 리스너(onClick(), onChange()등) 추가 | ❌ | ✅ |
| 상태 및 수명주기 효과 사용(useState(), useReducer(), useEffect()등) | ❌ | ✅ |
| 브라우저 전용 API 사용 | ❌ | ✅ |
| 상태, 효과 또는 브라우저 전용 API에 따라 달라지는 사용자 정의 후크를 사용 | ❌ | ✅ |
| React 클래스 구성요소 사용 | ❌ | ✅ |
- NextJS 정리 : https://velog.io/@bicco2/%EC%8B%A4%EC%A0%84%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-%EC%93%B0%EB%8A%94-Next-js-%EC%A0%95%EB%A6%AC-1
- Next.js에서 Script Component 효과적으로 사용하기 : https://velog.io/@parksil0/Next.js%EC%97%90%EC%84%9C-Script-Component-%ED%9A%A8%EA%B3%BC%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
- NextJS 서버 컴포넌트의 이해 : https://ui-log.github.io/docs/Nextjs/2024-02-11-Nextjs%EC%9D%98-%EC%84%9C%EB%B2%84%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/
-
next-themes를 이용한 다크모드 관리 : https://dev.to/topboyasante/setting-up-dark-mode-in-next-js-with-tailwindcss-1bk1
-
TailwindCSS와 NextJS에서 다크모드 : https://daniloleal.co/my-world/thinking/darkmode-next-tailwind
-
웹에서 다크모드 지원하기 : https://fe-developers.kakaoent.com/2021/211118-dark-mode/
-
관련 패키지 설치
$pnpm i next-themes react-icons -
tailwind.config.ts 파일 수정
const config: Config = { ~~~~ 중략 ~~~~ theme: { extend: { darkMode: 'class' // 👈 이 부분 추가 ~~~~ 후략 ~~~~ } -
팁 1. VSCode 보랴, 화면 확인하러 크롬 들어가는게 불편할 때
VSCode 보기 - 명령 팔레트(shift+cmd+a / 윈도우는 ctrl+shift+p)에서 > Simple Browser: Show 선택 - URL 입력(http://localhost:3000 등) 👏 간단한 브라우저 창을 드래그하여 수정사항 미리보기 가능 -
팁 2. TailwindCSS 기본 컬러셋 말고 내가 고른 컬러 팔레트 만들고 싶을 때 Material Design V2 Color Palettes : https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
-
Vercel Client 설치
$ pnpm i -g vercel 또는 $ brew install vercel-cli
-
Vercel Build
$cd ~/{ProjectDirectory} && vercel build
-
Vercel Deploy
$cd ~/{ProjectDirectory} && vercel deploy 💡 이미 Deploy 된 것을 최신 Build 버전으로 선택하려면 deploy 대신 아래 사용 $vercel --prod
-
Connect Github Repository
-
프로젝트 파일 스테이징 영역에 추가
$cd ~/{ProjectDirectory} && git add .
-
프로젝트 파일 커밋
gitmoji가 없을 경우 설치 $ brew install gitmoji $ gitmoji -c > 🚀 Deploy Stuff 선택 커밋 제목, 타이틀 입력 후 commit!
-
Github Repository 연결
프로젝트 생성 시 원격 Repository 연결이 없었다면 추가 $ git remote add origin <원격 저장소 URL> 원격 Repository에 변경사항 반영 $ git push origin main
-