Node.js 설치 및 React 프로젝트 생성

 

Next.js로 프론트를 진행하려고하는데, 아래 프로젝트 생성부터 간단히 정리해보겠습니다.

​​

1. 준비물: Node.js 설치

​

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

 

• 윈도우에서 작업하고 있는데 msi 다운받음.

​

​

• msi 더블 클릭 후 설치 진행

​

​

​

 

​

​

​

​

• 설치 후 cmd에서 "node -v" 명령어로 설치 확인

​

​

• 프로젝트 폴더를 생성할 폴더로 이동한다.

​

npx create-next-app@latest life

└┘ └───────────────┬┘ └───────────────┬─────────────

실행도우미 패키지이름@버전태그 새 프로젝트 폴더명

​

​

1) TypeScript — Yes

• 자바스크립트에 타입(숫자/문자 등)을 붙여서 버그를 줄여주는 언어.

​

2) ESLint — Yes

• 코드 문법/스타일 검사기. 실수(미사용 변수, 오타 등)를 저장할 때 잡아줌.

​

3) Tailwind CSS — Yes

• 클래스 이름으로 바로 스타일을 붙이는 유틸리티 CSS 프레임워크.

​

4) src/ directory — No (초보는 단순하게)

• 프로젝트 폴더 구조를 src/ 안에 다 넣을지 말지 선택.
• Yes: src/app/...처럼 하나 더 디렉터리가 생김.
• No: app/...가 프로젝트 루트에 바로 생김. (경로가 한 단계 더 짧아져서 단순)

​

5) App Router — Yes

• Next.js의 최신 라우팅 시스템(app/ 디렉터리 기반). SSR/SSG, 서버 액션, 레이아웃 같은 최신 기능이 여기.

​

6) import alias — @/

• 긴 상대경로 대신 짧은 절대경로로 임포트하는 설정.
• 없으면: import PostCard from '../../../components/PostCard'
• 있으면: import PostCard from '@/components/PostCard'

​

​

• 인텔리제이에서 프로젝트 생성하는거랑 같다.

 

​

• 생성한 프로젝트 폴더로 이동한다.
• npm run dev

​

• localhost:3000 으로 접속
• 완료데쓰~

​

​

1) 지금 구조에서 꼭 알아둘 폴더들

• app/ : 페이지들이 들어가는 최상위 폴더.
  • app/page.tsx → / (메인)
  • app/post/[id]/page.tsx → /post/123 (동적 라우트)
  • app/write/page.tsx → /write
  • app/layout.tsx → 모든 페이지 공통 레이아웃(헤더/푸터 자리)
• public/ : 정적 파일(이미지, 아이콘). /logo.png 처럼 URL로 바로 접근.
• .next/ : 빌드 결과물(자동 생성/수정 X).
• node_modules/ : 라이브러리들(자동 생성/수정 X).
• package.json : 스크립트/의존성.
• tsconfig.json : TypeScript 설정(여기서 @/ 별칭도 설정되어 있음).
• next.config.ts : Next.js 설정.

Thymeleaf는 “템플릿 파일 + 컨트롤러 매핑” 방식이었죠.

Next.js는 폴더 경로가 바로 URL이 되고, 각 폴더의 page.tsx가 화면을 렌더링한다고 이해하면 편합니다.

​

​

“page.tsx = 메인(/)인가요?” 라우팅 개념 정리

• App Router 규칙(중요):
  • app/page.tsx → URL / (메인)
  • app/xxx/page.tsx → URL /xxx
  • app/post/[id]/page.tsx → URL /post/123(동적 세그먼트)
  • app/layout.tsx → 모든 하위 페이지의 공통 레이아웃
• Thymeleaf와의 차이:
  • Thymeleaf는 @Controller가 "/"로 매핑해서 main.html을 리턴했죠.
  • Next.js(App Router)는 **“폴더 구조가 곧 라우트”**라서, 컨트롤러 없이 app/page.tsx 파일이 자동으로 **“/”**가 됩니다.
• 그럼 컨트롤러가 전혀 없나요?
  • 프론트 렌더링엔 필요 없음.
  • 다만 API가 필요하면 두 가지 중 택1:
    1. Next.js Route Handlers: app/api/**/route.ts에 API 엔드포인트 구현(간단 핸들러/SSR용).
    2. 별도 백엔드: Spring Boot에 REST/WebSocket 구현 → 프론트에서 호출/연결.
  • 우리는 최종적으로 Spring Boot(WebSocket) 를 쓸 계획이라, 화면은 Next.js, 실시간 통신은 Spring이 담당하게 될 거예요.

​

​

1. JavaScript란?

• 웹 브라우저에서 동작하는 기본 언어
• → HTML(구조), CSS(디자인), JS(동작)
• 웹 페이지를 동적으로 바꾸고, 서버와 통신하고, 버튼 클릭 시 이벤트 처리 등을 할 수 있어요.
• 약점: 유연하지만 너무 자유로움
• → 변수에 숫자를 넣었다가, 문자열을 넣었다가… 문법적으로 에러가 안 나는데 런타임에서 에러가 터질 수 있음.

​

2. TypeScript란?

• JavaScript에 타입(type) 개념을 추가한 언어
• 즉, **"JS + 안전장치"**라고 보면 됩니다.
• 마이크로소프트가 만들었고, 현재 대규모 프로젝트(Next.js, React, Angular 등)에서 거의 표준처럼 쓰여요.

​

3. 왜 TypeScript를 쓰나?

• 장점
  1. 에러를 미리 잡는다 → 코드 작성 단계에서 IDE가 오류 알려줌.
  2. 자동완성/코드 인텔리센스 강력 → 변수, 함수, 객체 구조를 IDE가 똑똑하게 추론.
  3. 대규모 프로젝트 관리 용이 → 많은 사람이 동시에 작업해도 “이 함수가 뭘 받는지/내보내는지” 명확.
  4. 리팩토링 편함 → 타입 기반으로 안전하게 변경 가능.
• 단점
  1. JS보다 문법이 조금 더 엄격(처음엔 귀찮음).
  2. 빌드 과정 필요 → 브라우저가 직접 이해 못 해서 결국 TS → JS로 변환(트랜스파일) 해서 실행됨.

​

4. .ts 와 .tsx 파일 차이

• .ts: 순수 TypeScript 파일 (함수, 로직, 타입 정의)
• .tsx: TypeScript + JSX (React 컴포넌트처럼 <div> 태그가 들어가는 파일)

​

즉,

• UI 컴포넌트 → .tsx
• 유틸 함수, 타입 정의 → .ts