반응형 프론트엔드/넥스트9 [NextJs] Chapter 3: 핵심 개념 (2) - React 기초 다지기 Chapter 3: 핵심 개념 (2) - React 기초 다지기Next.js는 React라는 도서관 위에 지어진 집과 같습니다. 집의 구조를 이해하려면 먼저 도서관(React)의 핵심 개념을 알아야 합니다. 여기서는 Spring 개발자에게 생소할 수 있는 React의 기본 문법 4가지를 소개합니다.1. 컴포넌트(Component): UI를 조립하는 부품컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 부품입니다. JavaScript 함수 형태로 만들며, HTML처럼 보이는 JSX를 반환합니다. 잘게 쪼개진 여러 개의 컴포넌트를 조립하여 하나의 완전한 페이지를 만듭니다.2. JSX: JavaScript와 HTML의 만남JavaScript 파일 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 확장 .. 2025. 9. 17. [NextJs] Chapter 2: 핵심 개념 (1) - 페이지와 라우팅 Chapter 2: 핵심 개념 (1) - 페이지와 라우팅Next.js의 가장 큰 특징 중 하나는 파일 시스템 기반 라우팅입니다. Spring에서 @Controller와 @GetMapping 어노테이션으로 URL을 매핑하던 방식과는 완전히 다른, 직관적인 접근법을 배웁니다.1. 파일 시스템 기반 라우팅: Controller가 사라졌다!src/pages 폴더 안에 파일을 만들면 그 파일의 경로가 그대로 URL 주소가 됩니다.src/pages/index.js → /src/pages/about.js → /aboutsrc/pages/posts/first-post.js → /posts/first-postSpring에서 URL 매핑을 위해 컨트롤러 클래스와 메소드를 만들던 과정이, Next.js에서는 파일을 생성하는.. 2025. 9. 17. [NextJs] Chapter 1: 개발 환경 설정 및 첫 프로젝트 Chapter 1: 개발 환경 설정 및 첫 프로젝트Spring 개발자가 Next.js의 세계로 첫발을 내딛는 단계입니다. Java의 JDK를 설치하듯 Node.js를 설정하고, 첫 프로젝트를 생성하며 구조를 살펴보겠습니다.1. 필수 도구 설치Node.js: JavaScript 런타임입니다. Java의 JDK와 같습니다. nodejs.org에서 LTS 버전을 설치하세요. 설치 후 터미널(cmd 또는 PowerShell)에서 node -v 와 npm -v 명령어로 설치를 확인합니다.VS Code: 추천하는 코드 에디터입니다. code.visualstudio.com에서 다운로드할 수 있습니다.2. create-next-app으로 프로젝트 시작하기터미널을 열고 원하는 경로로 이동한 뒤, 다음 명령어를 실행하세요.. 2025. 9. 16. 이전 1 2 다음 반응형