@2023/10/19 안녕하세요 lika-7입니다이번시간에는 Next.js 13에서 바뀐 내용을 다루겠습니다.app 폴더Next.js 13버전은 pages 폴더 대신에 app 폴더를 이용해 페이지 구성과 라우팅을 구현 할 수 있습니다.File System Routing파일 시스템 라우팅을 구성하는 방법은 크게 3가지가 있습니다. home/abc.com/home일반 라우팅[slug]/abc.com/{slug}동적 라우팅(group)/abc.com/라우팅 경로에 영향을 주지 않음일반 라우팅을 위한 파일 구성동적 라우팅을 위한 파일 구성그룹을 만들기 위한 파일 구성파일의 그룹을 만들기 위해 사용되며, 라우팅 경로에 영향을 주지 않습니다.app/ ├── layout.tsx ├── (marketing)/ │ ├─..

@2023/10/17 안녕하세요 lika-7입니다이번시간에는 Next.js에서 라우터를 사용하는 방법을 설명하겠습니다,.Next.js에서 라우터를 사용하는 방법Next.js에서 route는 파일 시스템 기반 라우터를 지원하여 라우팅 설정을 간단하게 만듭니다.이 방식을 사용하면 페이지 컴포넌트를 프로젝트의 디렉토리 구조와 일치시키고 URL 경로에 따라 페이지가 자동으로 연결됩니다.작동 방식 - 파일 기반 네비게이션pages/ ├── index.tsx ├── about.tsx └── products/ ├── index.tsx ├── product1.tsx └── product2.tsx페이지 컴포넌트는 pages 디렉토리에 저장됩니다.이 디렉토리 아래에 새로운 디렉토리를 만들고 해당 디렉토리에 페이지 컴포넌트..

@2023/10/17 안녕하세요 lika-7입니다이번시간에는 Next.js에서 데이터를 가져오는 방법을 설명하겠습니다,.Next.js에서 데이터를 가져오는 방법Next.js에서 데이터를 가져오는 방법을 data fetching이라고 합니다 react.js에서 데이터를 가져오는 방법은 보통 useEffect를 통해서 데이터를 가져 옵니다.Next.js 또한 비슷한 방법을 통해서 데이터를 가져올 수 있습니다.react.js에서 데이터를 가져오기React.js 에서 useEffect를 이용해 함수형 컴포넌트에서 데이터 가져오기, 구독 설정, 수동 DOM 조작을 수행하기 위한 Hook 중 하나 입니다.//JSX import React, { useState, useEffect } from 'react'; func..

@2023/10/15 안녕하세요 lika-7입니다이번시간에는 Next.js 설치 방법을 정리하겠습니다설치방법일반 설치 법npx create-next-app@latestoryarn create-next-app타입스크립트용 설치 법npx create-next-app@latest --typescriptoryarn create-next-app --typescript 현재 디렉토리에 설치하려면 npx create-next-app@latest --typescript ./ TypeScript: YesESLint: YesTailWind Css: Nosrc/ directory: YesApp Router: Noimport alias: No

@2023/10/15 안녕하세요 lika-7입니다이번시간에는 Next.js가 무엇인지 정리하겠습니다Next.JS란 / 사용 이유React의 SSR(Server Side Rendering)을 쉽게 구형할수 있도록 도와주는 프레임워크React는 라이브러리이고, Next.JS는 프레임워크React로 개발 할 때 SPA(Single Page Application)을 이용해 CSR(Client Side Rendering)을 하면 좋은점도 있는데검색엔진 최적화(Search Engin Optimazation) 부분에서 문제가 생깁니다.CSR은 첫페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기 때문에 포탈 검색에 거의 노출 안되는 문제가 있습니다.하지만 Next.js에서 Pre-Rendering을 ..