참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 😀 섹션6 . authjs(NextAuth)를 활용한 인증 기능 구현 ⭐️ 44강 (강의 번호가 이상해...) auth(nextauth) 설정 - AWS.js 라이브러리 사용하기 npm install next-auth 📚 경로 - app/auth/[...nextauth]/route.ts - 위에 경로로 잡으면 api-auth로 시작하는 모든 경로에 대한 요청을 처리할 수 있음 📚 환경변수 설정 - .env 파일에서 openssl rand -base64 32 - openssl 임의의 바이트 시퀀스를 사용할 수 있음 -rand 무작위로 생성 - base64: base64 알고리즘을 사용하여 인코딩 -32는 32바이..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 😀 섹션4 . 프리즈마를 활용한 데이터베이스 구축 ⭐️30강 MySQL 설치 ⭐️31강 Prisma 설치 - 프리즈마는 ORM, 객체 관계 매핑 도구 - 데이터베이스 작업을 좀 더 쉽게 - 애플리케이션 코드와 데이터베이스 사이의 연결을 매끄럽게 - 쿼리 전송이나 데이터 조작 과정을 추상화하고 간소화 ⭐️32강 데이터 모델 정의 ✨데이터모델링 - 만들고자 하는 애플리케이션 핵심요소, 엔티티 정의하는 과정 💡) 쇼핑몰: 제품, 고객, 장바구니, 주문 - Pascal Case로 작성할 것 ex) FirstName, UserAge ✅ npx prisma init ✅ npx prisma format ⭐️ 32강 마이그레..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 😀 섹션2. 라우팅과 네비게이션 ⭐️ 13강 - 라우팅 동작 방식 📚가능한 파일 이름 - page.tsx - layout.tsx - loading.tsx - route.tsx : API을 만들때 - not-found.tsx - error.tsx - ✅ 공통 컴포넌트 "components" 폴더에 저장하고 단독으로 쓰인다면, 라우터 안의 폴더에 저장할 것 ⭐️ 14강 다이나믹 라우트 - 폴더를 "users/[id]" 를 넣으면 매개변수에 대한 페이지 - users/id/photos/photosId 의 라우터 주소 일 때, id와 photosId는 둘 다 매개변수 ⭐️ 15강 catch-all segments 💡 ..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 ⭐️ 3강 라우팅과 네비게이션 ✨ Link component ⭐️ 4강 - 클라이언트 컴포넌트와 서버 컴포넌트 ✨ 서버 사이드 컴포넌트 - 서버에 요청이 들어왔을 때 필요한 컴포넌트만을 클라이언트로 전송하면서 작은 번들 사이즈로 리소스 양 최소화 - 서버에서 모든 html 마크업을 생성해 클라이언트로 전송하기 때문에 검색 엔진 최적화 가능 - API 키와 같은 민감한 데이터를 서버에서 유지하면서 높은 보안성 유지 - 단점: 브라우저 이벤트 추적 불가, 상태관리 훅 불가, BrowserAPI 접근 불가 - 부라우저 API 접근 불가. 그렇기 때문에 클릭 이벤트를 추가하면 오류 발생 ⭐️ 5강 - 데이터 패칭 📚 ..

글쓴이가 헷갈리는 부분, 중요한 부분을 담은 블로깅입니다. 모든 내용이 들어간 것이 아닌 딱 요점만! 기억해야 하는 부분만! 정리해서 업로드한 것이니 참고 바라며, 출처는 이 곳에 남기겠습니다. 😎 Learn Next.js | Next.js by Vercel - The React Framework Next.js by Vercel is the full-stack React framework for the web. nextjs.org * 사용한 이모지들의 의미 😎 ✨ : 단어 의미 📚 : 소제목 ✅ : 소제목 안의 키워드 및 설명 ❓ : '만약'이라는 의미 ‼️: 중요 ! 1. 1장 세팅 (건너뛰기) 2. 2장 css 스타일링 📚 clsx 라이브러리 사용 status 상태가 pending이거나 paid일 경..