SPRINT1,2 Review

목표

• class, constructor, 상속, 다형성 등 OOP 개념을 직접 코드에 적용

• 외부 API와 연동해 데이터 CRUD 구현

• fetch와 axios를 사용한 비동기 통신 + 에러 처리 훈련

• 코드를 기능 단위로 나누어 파일로 구조화하고 export/import 연습

주요 구현 내용

1. 클래스 설계 및 객체지향 프로그래밍

• Product 클래스

  • 프로퍼티: name, description, price, tags, images, favoriteCount

  • 기능: .favorite() 메서드를 호출하면 favoriteCount가 +1 증가

• ElectronicProduct 클래스

  • Product 클래스를 상속받고, manufacturer(제조사) 프로퍼티 추가

• Article 클래스

  • 프로퍼티: title, content, writer, likeCount, createdAt

  • 기능: .like() 메서드를 호출하면 likeCount가 +1 증가

  • 생성 시점에 createdAt에 현재 시간이 자동 저장됨

  • 각 클래스마다 constructor를 작성하고, 캡슐화와 상속 구조를 잘 반영했어요.

2. API 연동 (RESTful 방식)

• Article API

  • getArticleList: GET 방식, page, pageSize, keyword 사용 가능

  • getArticle: 개별 게시글 조회

  • createArticle: 게시글 등록 (title, content, image 포함)

  • patchArticle: 게시글 수정

  • deleteArticle: 게시글 삭제

• Product API

  • getProductList: GET 방식, page, pageSize, keyword 지원

  • getProduct: 개별 상품 조회

  • createProduct: 상품 등록 (name, description, price, tags, images 포함)

  • patchProduct: 상품 수정

  • deleteProduct: 상품 삭제

3. 비동기 처리 방식

• axios 혹은 fetch 사용

• .then() & .catch() 기반 비동기 처리 방식 연습

• async/await + try/catch 방식도 병행해 사용

• 응답 코드가 200대(2XX)가 아닐 경우, 콘솔에 에러 메시지 출력

4. 상품 리스트 불러오기 & 클래스 인스턴스화

• getProductList()로 받아온 상품 데이터를 바탕으로

  • tags 배열에 "전자제품"이 포함된 상품은 ElectronicProduct 클래스로 인스턴스 생성

  • 그 외 상품은 기본 Product 클래스를 사용

• 이렇게 만든 인스턴스를 products 배열에 저장

5. 파일 구조 분리

• ProductService.js: 상품 관련 API 함수들 정의

• ArticleService.js: 게시글 관련 API 함수들 정의

• main.js: 실제 실행 코드 작성

  • 각각의 함수 import 해서 테스트 및 실행

6. 디렉토리 구조

SPRINT2/
├── main.js                 # 앱 초기 실행 파일
├── Product.js              # 상품 클래스 정의
├── ElectronicProduct.js    # 전자제품 상품 클래스 (Product 상속)
├── ProductService.js       # 상품 관련 API 함수 정의
├── Article.js              # 게시글 클래스 정의
├── ArticleService.js       # 게시글 관련 API 함수 정의
├── package.json
└── package-lock.json

7. 실행방법

의존성 설치
npm install

실행 (nodemon 기반 자동 재실행)
npm run dev

결과 확인: 콘솔 로그로 클래스 인스턴스 및 API 결과 확인

8. 개발 포인트 요약

• ESM import/export 기반 모듈 설계
• 클래스 상속과 캡슐화 (#field, getter)
• fetch 기반 비동기 API 통신 구조화
• 인스턴스와 API를 연결한 초기화 로직 구현

9. 테스트 예시