[정슬기] sprint3

[juengseulki]

요구사항

공통

• Github에 스프린트 미션 PR을 만들어 주세요.
  • 'https://panda-market-api-crud.vercel.app/docs/#/Article' API를 이용하여 아래 함수들을 구현해 주세요.
    • getArticleList() : GET 메서드를 사용해 주세요.
      • page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
    • getArticle() : GET 메서드를 사용해 주세요.
    • createArticle() : POST 메서드를 사용해 주세요.
      • request body에 title, content, image 를 포함해 주세요.
    • patchArticle() : PATCH 메서드를 사용해 주세요.
    • deleteArticle() : DELETE 메서드를 사용해 주세요.
  • fetch 혹은 axios 를 이용해 주세요.
    • 응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.
• .then() 메서드를 이용하여 비동기 처리를 해주세요.
• .catch() 를 이용하여 오류 처리를 해주세요.
• 'https://panda-market-api-crud.vercel.app/docs/#/Product' API를 이용하여 아래 함수들을 구현해 주세요.
  • getProductList() : GET 메서드를 사용해 주세요.
    • page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
  • getProduct() : GET 메서드를 사용해 주세요.
  • createProduct() : POST 메서드를 사용해 주세요.
    • request body에 name, description, price, tags, images 를 포함해 주세요.
  • patchProduct() : PATCH 메서드를 사용해 주세요.
  • deleteProduct() : DELETE 메서드를 사용해 주세요.
  • async/await 을 이용하여 비동기 처리를 해주세요.
• try/catch 를 이용하여 오류 처리를 해주세요.
• 구현한 함수들을 아래와 같이 파일을 분리해 주세요.
  • export를 활용해 주세요.
  • ProductService.js 파일 Product API 관련 함수들을 작성해 주세요.
  • ArticleService.js 파일에 Article API 관련 함수들을 작성해 주세요.
• 이외의 코드들은 모두 main.js 파일에 작성해 주세요.
  • import를 활용해 주세요.
  • 각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요.

1,2차 미션 피드백

• viewport 설정 수정
  ➡ 의 content에 device-width가 누락되어 있어
  width=device-width, initial-scale=1.0로 수정
• reset.css 링크 오류 수정
  ➡ rel="reset" → rel="stylesheet"로 변경하여 스타일 정상 적용
• 헤더 고정 처리
  ➡ .header에 position: sticky; top: 0; 적용하여 스크롤 시 상단 고정
• CSS 변수 적용 (유지보수 개선)
  ➡ main.css에서 하드코딩된 색상값 제거
  ➡ :root에 정의된 CSS 변수로 통일
• Google Analytics 누락 수정
  ➡ index.html에도 GA 스크립트 추가하여 페이지 간 일관성 확보
• 외부 링크 보안 강화
  ➡ SNS 링크에 rel="noopener noreferrer" 추가
• README 파일명 수정
  ➡ READEME-basic-정슬기.md → README.md로 오타 수정

주요 변경사항

1. API 기능 구현

• Article / Product API 연동 기능 구현
• CRUD 기능 전체 구현
• getList, get, create, patch, delete
• 쿼리 파라미터 (page, pageSize, keyword) 적용
• 요청 body에 필요한 데이터 포함하여 전송

2. 비동기 처리 및 에러 핸들링

• Article API
• .then(), .catch() 기반 비동기 처리
• Product API
• async/await, try/catch 기반 비동기 처리
• 응답 상태 코드가 2XX가 아닐 경우 에러 로그 출력

3. 코드 구조 개선 (모듈 분리)

• API 로직을 파일별로 분리
• ArticleService.js
• ProductService.js
• export / import를 활용한 모듈 구조 적용
• 실행 및 테스트 코드는 main.js에서 관리

4. 멘토 피드백 반영

• viewport 설정 수정 (width=device-width)
• reset.css 링크 오류 수정 (rel="stylesheet")
• header sticky 적용 (position: sticky; top: 0)
• CSS 변수 적용으로 스타일 관리 개선
• Google Analytics index.html에 추가
• 외부 링크 보안 속성 (noopener noreferrer) 적용
• README 파일명 오타 수정

멘토에게

미션을 진행하면서 기능 구현에는 큰 문제는 없었지만,
코드를 더 효율적으로 구조화하고 관리하는 방법에 대해 고민하게 되었습니다.

추후 리팩토링 시 참고할 만한 구조 설계 방식이 있다면 알고 싶습니다.😊

[iamjaeholee]

스프린트 미션3 수행하느라 수고하셨어요 🥇

js/services/, js/pages/ 로 폴더까지 나눠서 파일을 정리해주신 구조가 인상적이에요!
handleResponse 함수로 에러 처리 로직을 분리해주신 것도 좋고,
main.js에서 Article CRUD를 .then() 체이닝으로 순서대로 실행하신 방식도 깔끔해요 : -)

몇 가지 참고해주시면 좋을 부분을 파일별 코멘트로 남겨드릴게요!

[iamjaeholee]

Product API는 이번 미션에서 axios를 활용하도록 요구하고 있었는데, fetch로 구현하셨어요.
axios를 한번 익혀두시면 더 넓은 경험이 될 것 같아요 : -)

[iamjaeholee]

BASE_URL과 handleResponse 함수가 ArticleService.js에도 동일하게 선언되어 있어요.

두 파일에서 같은 코드가 반복되면, URL이 바뀌거나 에러 처리 방식을 수정할 때 두 곳을 모두 수정해야 해요.
js/services/api.js 같은 공통 파일로 분리해서 import해서 쓰면 더 깔끔해질 것 같아요 : -)

handleResponse 추상화 아이디어를 공유 모듈로 발전시켜 보세요!

[iamjaeholee]

catch 블록에서 에러를 로그만 찍고 끝내면, 에러가 호출부까지 전달되지 않아요.
main.js에서 마지막에 .catch()를 달아 두셨지만, 이 경우엔 서비스 함수 안에서 에러가 "삼켜져서" 실제로 실행되지 않을 수 있어요.

에러를 로그한 뒤 다시 던져주시면 호출부에서도 처리할 수 있어요.

.catch((error) => {
  console.error("getArticleList error:", error);
  throw error;  // ← 이렇게 re-throw 해주세요
});

ProductService.js의 try/catch도 동일하게 적용해 주시면 좋을 것 같아요!