기존 사이트 분석하여 개발하기

1. 기존 사이트의 기능 및 아키텍처 분석

✅ 1-1. 핵심 기능 파악 (비즈니스 로직 중심)

먼저 새 프로젝트에서 반드시 구현해야 할 기능을 정리해야 합니다.
이를 위해 기존 사이트를 사용하면서 주요 기능을 파악합니다.

📌 분석할 주요 기능 예시

• ✅ 로그인 및 인증 방식 (JWT, OAuth, 세션 기반인지 확인)
• ✅ 유저 권한 관리 (일반 사용자, 관리자 등)
• ✅ 데이터 저장 방식 (DB 구조 및 데이터 모델)
• ✅ 검색 기능 (어떤 방식으로 데이터를 검색하는지)
• ✅ API 호출 패턴 (REST, GraphQL, WebSocket 사용 여부)
• ✅ 비즈니스 로직 (예: 주문, 결제, 추천 시스템 등)

📌 도구 추천

• 직접 사이트를 사용하면서 주요 기능 정리 (노션, Miro 등 사용)
• 주요 페이지에서 발생하는 API 요청 분석 (Chrome DevTools → Network 탭 활용)

1-2. 기존 사이트의 API 분석

새로운 프로젝트에서 기존 사이트의 기능을 유사하게 구현하려면, 핵심 기능을 먼저 파악해야 한다.
하지만, 핵심 기능은 결국 API를 통해 제공되므로, API부터 분석하는 것이 가장 효과적이다.

📌 API를 분석하면 다음을 알 수 있음

 

1. API 엔드포인트 URL 구조
   • GET /api/v1/products
   • POST /api/v1/auth/login
   • PUT /api/v1/user/profile
2. Request & Response 데이터 형식
   • 요청 시 전달하는 Query Parameters / Request Body
   • 응답 데이터 구조 및 필요한 필드 확인
3. 인증 방식 확인
   • Authorization: Bearer <JWT_TOKEN> → JWT 토큰 기반인가?
   • Set-Cookie: JSESSIONID=xyz → 세션 기반인가?
   • X-CSRF-TOKEN → CSRF 방어가 적용되어 있는가?

📌 API 분석 방법

• 🟢 Chrome DevTools → Network 탭 (XHR 필터)
• 🟢 Postman으로 API 요청 재현 및 데이터 확인
• 🟢 Burp Suite / Mitmproxy를 활용한 트래픽 캡처

 

 

 

 

 

📌 1. API 분석 단계

📌 기존 사이트의 API를 분석하는 단계는 다음과 같습니다.

✅ 1-1. API 요청 흐름 확인 (Chrome DevTools 활용)

1. 웹사이트를 열고 F12 (Chrome DevTools) 실행
2. Network 탭 이동 → XHR / Fetch 필터 선택
3. 웹사이트에서 로그인, 검색, 데이터 조회 등 주요 기능 수행
4. API 요청 URL, 메서드(GET, POST 등), 요청/응답 데이터를 확인

📌 분석해야 할 요소

• API 엔드포인트(URL)
• 요청 방식 (GET, POST, PUT, DELETE)
• Request Header / Body (인증 토큰, 쿠키 포함 여부)
• 응답 데이터 구조 (JSON, XML 등)
• HTTP 상태 코드 (200, 403, 404, 500 등)

---

✅ 1-2. API 정리 (문서화)

API를 하나씩 분석하면서 각 엔드포인트를 정리합니다.

📌 정리할 문서 예시 (Notion, Confluence, Excel 등 활용 가능)

기능HTTP 메서드URL요청 데이터응답 데이터설명

로그인	POST	/api/v1/auth/login	{ "email": "test@test.com", "password": "1234" }	{ "token": "JWT_TOKEN" }	JWT 기반 로그인
회원 정보 조회	GET	/api/v1/users/me	Authorization: Bearer <TOKEN>	{ "id": 1, "name": "John" }	로그인한 사용자 정보 조회
게시글 목록	GET	/api/v1/posts?page=1	없음	[ { "id": 1, "title": "Test" } ]	페이징된 게시글 목록
게시글 상세	GET	/api/v1/posts/1	없음	{ "id": 1, "title": "Test", "content": "Hello" }	특정 게시글 상세
검색 기능	GET	/api/v1/search?query=test	없음	[ { "id": 1, "title": "Test" } ]	검색 API

✅ 이렇게 정리하면 새 프로젝트에서 어떤 API를 구현해야 할지 명확해짐!

---

✅ 1-3. API 직접 호출 및 테스트

API의 동작을 보다 정확히 이해하기 위해 Postman이나 cURL을 활용해 직접 호출하여 테스트합니다.

📌 Postman을 활용한 API 호출

• POST /api/v1/auth/login 요청 테스트
• GET /api/v1/posts?page=1 호출하여 게시글 데이터 확인
• GET /api/v1/users/me 호출 → 응답값에서 사용자 정보 확인