Vue.js로 만든 Poke-App

1. 개발 환경

Vue.js

2. 디렉토리

src
├── api                              
├── components                         
    └── common 
├── router
├── views   
└── store   

3. 컴포넌트 구성

메인 / poke list

scrap list

not found

PokeSearch

포켓몬 검색 컴포넌트
기능 : 검색

NavBar

메뉴 컴포넌트
기능 : 페이지 이동

PokeList

포켓몬 리스트 컴포넌트
기능 : 페이지로드 (포켓몬 리스트, 스크랩 리스트)

Poke

포켓몬 리스트에 노출되는 포켓몬별 컴포넌트
기능 : data 노출, 스크랩

PokeDetail

포켓몬 상세정보 컴포넌트
기능 : data 노출

common/Modal

검색시 유효성 체크, 상세 정보 노출에서 Modal 사용

4. 페이지 구성

• list: 포켓몬 리스트 노출
• scrap: 스크랩 리스트 노출
• else : 404 not found 페이지 노출

5. localStorage

스크랩한 것만 모아보기시(SHOW SCRAP LIST) API 통신을 줄이고자 id, name을 localStorage 에 저장
구분값 scraplist.id

수정전

• id만 저장하여 스크랩 리스트 로드시, api 통신하여 스크랩된 내용만 노출하려 하였으나 ex) id = 100 인 포켓몬을 위해 여러번 api 통신을 해야하는 문제점 발생

수정후

• 리스트 API통신시 가져오는 값은 id, name 두가지이기 때문에 스크랩을 위한 api통신은 필요 없다고 판단. id, name을 저장하여 localstorage 에서 리스트를 추출하여 불필요한 API 통신을 하지 않고, 사용자가 설정한 순서대로 스크랩 내용 노출.

localStorage 구조

6. 기능

1. 페이지로드

• 사용자가 스크롤을 진행함에 따라 api 통신하여 다음 페이지의 리스트를 불러옴
  • 스크랩 리스트일 경우 localStorage에서 데이터 불러옴
  • 포켓몬 리스트일 경우 외부 API 통신하여 데이터 불러옴
• 포켓몬 이미지 클릭시 관련 포켓몬 정보가 포켓몬 상세 내용 모달창에 노출
• 스크랩, 포켓몬 리스트 동일하게 로드시 limit = 20 통일
  => 리스트에 type별 배경 색상을 노출하려 했으나, 오직 type값을 추출하기 위하여 포켓몬 별 추가 api 통신은 불필요하다 판단하여 상세 정보에서만 배경색 노출되도록 수정

2. 검색

• 숫자 검색시 관련 포켓몬 정보 포켓몬 상세 내용 모달창에 노출
• 유효성 검사 결과 모달창에서 error 내용 노출
  • 빈값 여부, 0, 숫자 여부

3. 포켓몬 상세 정보

• 모달창에서 상세 정보 노출
• 노출 data
  • 이미지, 이름, ID, 키, 몸무게
• 각 포켓몬별 type에 맞는 배경색상 노출

4. 스크랩

• 포켓몬 리스트에서 하트모양 스크랩 기능 노출
  • 스크랩된 포켓몬 : red
  • 스크랩되지 않은 포켓몬 : black
• 클릭시 스크랩 <-> !스크랩 변경

5. 리스트

• Poke List: 포켓몬 리스트 노출
• Scrap List: 스크랩 리스트 노출

7. 결과 화면

메인화면 및 포켓몬 리스트 페이지 화면

스크랩 리스트 페이지 화면

404 not found 페이지 화면

포켓몬 상세 정보 결과 화면 - 포켓몬별 type에 따라 배경색 다르게 노출

검색시 유효성 체크 결과 화면 - 모달창 이용

+) 추가

---

Poke API 에 더 추가해 보고 싶은 것들

swagger

https://swagger.io/
개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 도와주는 대형 도구 생태계의 지원을 받는 오픈 소스 소프트웨어 프레임워크
'캡틴판교 - Vue.js 끝장내기 실무에 필요한 모든 것' 에서 알게된 것
장점

• API 문서화 시간을 줄일 수 있다.
• API 시각화