Im Bay

10 Next.js - Styling (TailwindCSS & Shadcn) shadcn/ui 설치 cmd 창 next 프로젝트 최상단 디렉터리에서 npx shadcn-ui@latest init 입력 style: Default 선택 color: Slate 선택 CSS variables: yes 선택 shadcn/ui 사용 shadcn/ui는 필요한 컴포넌트를 바로바로 install 하여 사용할 수 있다. https://ui.shadcn.com/docs/components/accordion 에서 필요한 컴포넌트 검색 후 install 하기 예시 버튼 사용하기 npx shadcn-ui@latest add button 입력 자동으로 button.tsx 생성 완료 11 Next.js - Server API와 ..

09 Next.js - CSR, SSR, SSG, ISR Data Fetch Sample CSR (Client Side Rendering) 파일에 최상단에 ‘use client’; 작성 SSG (Static Site Generation) getStaticProps cache: “no-store” SSR (Server Side Rendering) getServerSideProps cache: “force-cache” ISR next: { revalidate: 초, } 프론트엔드 실습 과제 풀이 시간 구현하지 못한 내역 세션 컨텍스트 구현하지 못한 것 풀이 코드 (session-context.tsx) import { createContext, PropsWithChildren, useContext, useEf..

05 Next.js (v14) 시작하기 Next.js란 React 기반 풀스택 웹 개발 프레임워크 PageRouter, AppRouter Multiple Rendering Types (SSG, CSR, SSR, ISR) TailwindCSS, TypeScript, Optimization(Image, Font, Scripts, Core Web Vitals) Next Rendering Methods SSG (Static Site Generation) Build시 미리 생성 (getStaticProps) SSR (Server Side Rendering) 요청(request)시 생성해서 응답 (getServerSideProps) ISR (Incremental Static Regeneration) SSG를 점진적..