2025.06.14

TIL(TODAY I LEARN)

---

• 오늘한 내용 : 리액트 설정 및 테일윈드 설치

• WEEK 14 : 실력 다지기 - 알고리즘, 프레임워크 공부

---

React 설치

• node.js 버전 22.16.0 LTS 설치

코딩 애플 리액트 React 설치와 개발환경 셋팅

폴더 생성
cmd
-----
C:\Krafton_Jungle\week.14\test>npm create vite@latest

> npx
> create-vite

|
o  Project name:
|  crud_board
|
o  Select a framework:
|  React
|
o  Select a variant:
|  JavaScript
|
o  Scaffolding project in C:\Krafton_Jungle\week.14\test\crud_board...
|
—  Done. Now run:

  cd crud_board
  npm install
  npm run dev

React Router 라우팅 기본 설정 예시

cmd > npm install react-router-dom
-----
"dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.6.2"
  }

백엔드 라우팅 vs 프론트엔드 라우팅

구분	백엔드 라우팅	프론트엔드 라우팅
실행 위치	서버(Node.js, Spring 등)	브라우저(React 등)
역할	URL에 따라 서버가 HTML, JSON 반환	URL에 따라 컴포넌트를 변경
예시	/posts/3 → 서버가 게시글 3번 JSON 반환	/posts/3 → 게시글 상세 컴포넌트 보여줌

• React 라우팅
  • SPA(Single Page Application) 스타일 라우팅
  • React 내부에서 "어떤 컴포넌트를 보여줄지 결정하 는 것

폴더 구조 (React + Tailwind 기준)

src/
├── pages/             # 라우팅 대상이 되는 화면 단위
│   ├── BoardList.jsx       ← 메인 페이지
│   ├── PostDetail.jsx      ← 상세보기(게시물 읽기)
│   ├── CreatePost.jsx      ← 글 작성(게시물 작성)
│   ├── Login.jsx           ← 로그인
│   └── Signup.jsx          ← 회원가입
├── components/        # 재사용 UI 단위
│   ├── Header.jsx
│   ├── PostCard.jsx
│   └── CommentBox.jsx
├── api/               # 서버 요청 함수 모음 (fetch/axios)
│   └── posts.js
├── App.jsx            # 라우팅 설정
├── main.jsx           # 렌더링 시작점
├── index.css          # Tailwind import 포함
└── tailwind.config.js

개발 순서 (혼자 할 때)

1. 라우팅 뼈대 잡기 (App.jsx)
2. Header 컴포넌트 만들기 (로그인/글쓰기 버튼 포함)
3. 메인 페이지 (게시판 목록) 구현
4. 게시글 카드 컴포넌트 만들기 → 목록에 렌더링
5. 작성/상세/로그인/회원가입 페이지 스켈레톤만 먼저 만들기
6. 하나씩 기능 구현 + 폼 연결 + API 연결