0) DB: 화면설계(UI)와 데이터 구조(ERD) (1)

1) api 호출하기 sql+node(back)+front

2) react-query로 캐싱

3) CORS 경험하기

폴더구조부터 db저장+api 호출 방식까지 새롭게 다시 작업합니다 =u= 허허

폴더 구조는

"Bulletproof React"의 구조를 차용한 "Feature-Based Modular 구조" 로 변경

• Container/Presenter 패턴을 유지하면서 컴포넌트를 분리하려다 보니, 파일 개수가 2배로 늘어나고 관리가 힘들어지는 전형적인 '패턴의 함정'에 빠졌기 때문….
• 예시 구조

├── app/
│   ├── api/
│   │   ├── auth/
│   │   │   └── route.ts
│   │   └── posts/
│   │       └── route.ts        # 여기서 api GET으로 가져오는것으로 변경
│   │                           # - (SELECT * FROM posts 등 sql문 쿼리로 조건 분기)
├── lib/
│   └── db.ts                   # 여기서 3001 띄우던 설정 넣기 (기존 노드로 띄우던거 종료)
├── features/ 
│   ├── posts/
│   │   ├── api/
**│   │   │**   └──  ****postsApi.ts     # await fetch(`/api/posts?type=${type}`);
│   │   ├── hooks/              
**│   │   │**   └──  ****usePosts.ts     # useEffect로 setPosts에 데이터 넣기
│   │   ├── components/
**│   │   │   ├──** TopShared.tsx    # hooks 호출해서 그리기1
│   │   │   ├── Categories.tsx   # hooks 호출해서 그리기2
│   │   │   └── Series.tsx       # hooks 호출해서 그리기3
│   │   └── types/
│   │   │   └── postType.ts

(구버전 ▼)

src/
├── app/ (Next.js App Router)
│   ├── donday/
│   │   ├── page.tsx          # 여기서 각 Feature의 '컴포넌트'만 불러옴(# 메인 페이지 (localhost:3000/donday))  
│   │   ├── search/
│   │   │   └── page.tsx      # 검색 결과 페이지 (localhost:3000/donday/search?q=...)
│   │   └── [id]/
│   │       └── page.tsx      # 상세 페이지 (localhost:3000/donday/123)
├── features/                 # 핵심 로직 집합소
│   ├── auth/                 # 회원가입/로그인 관련 (UI + API + Hooks)
│   ├── posts/                # dd_post 관련 (가장 중요!)
│   │   ├── api/              # fetchPosts, fetchPostDetail, usePosts (React Query)
│   │   ├── components/       # PostSlider, PostCategory, PostDetail
│   │   ├── types/            # Post 관련 타입 정의
│   │   └── index.ts          # 외부(page)에서 쓸 것들만 export
│   └── subscription/         # 구독 관련
├── components/               # 프로젝트 전역에서 쓰이는 순수 UI (Atomic의 Atoms/Molecules)
│   ├── common/               # Button, Input, Modal
│   └── slider/               # 공통 스와이퍼 프레임워크 (로직 없음)
└── shared/                   # 공통 유틸, 상수

├── app/
│   ├── api/
│   │   ├── auth/
│   │   │   └── route.ts
│   │   └── posts/
│   │       └── route.ts      # 여기서 api GET으로 가져오는것으로 변경
├── lib/
│   └── db.ts                 # 여기서 3001 띄우던 설정 넣기 (기존 노드로 띄우던거 종료)
├── features/
│   ├── auth/
│   │   ├── components/        
│   │   │   ├── SingIn.tsx    # await fetch('/api/auth') 로 데이터 갖고와서 그리기
│   │   │   └── SignUp.tsx
│   │   └── types/
│   │   │   └── authType.ts
│   ├── posts/
│   │   ├── api/
**│   │   │   ├──** postsApi.ts     # await fetch(`/api/posts?type=${type}`);
│   │   ├── hooks/              
**│   │   │   ├──** usePosts.ts     # useEffect -> setPosts
│   │   ├── components/
**│   │   │   ├──** TopShared.tsx   # hooks 호출해서 그리기1
│   │   │   ├── Categories.tsx  # hooks 호출해서 그리기2
│   │   │   └── Series.tsx      # hooks 호출해서 그리기3
│   │   └── types/
│   │   │   └── postType.ts
│   ├── kewwords/
│   │   ├── components/
│   │   │   └── keyslide.tsx
│   │   └── types/
│   │   │   └── keywordType.ts
│   ├── banner/
│   │   ├── components/
│   │   │   └── Banner.tsx
│   │   └── types/
│   │      └── bannerType.ts

일단, root에서 바로 donday 메인 화면이 나오고 하위 도메인 주소를 정해보자