[개인 미니 프로젝트] PokeAPI로 포켓몬 도감 만들기 (4) 3일차 - 검색, 찜하기, 다크 모드 기능 추가하기

오늘은 계획된 프로젝트의 마지막 날!

마지막날이어도 ... 추가 하고 싶은 기능이 조금씩 있어서 방치하진 않을거다.

이번 프로젝트를 통해 배운점이 꽤 많다 !

컴포넌트별로 분리해서 코드를 작성하는 것과, 라우팅, API 사용법(이걸 알았다고 해야하나), JS로 프로젝트 만들기 .. 등등

나는 몇 달째 코딩을 하고 있는데 정작 프로그래밍을 할 줄은 모른다고 생각하고 있었는데, 하면 되는구나 하고 자신감이 붙었다.

코딩 테스트는 간단하게 집중해서 풀기 좋아서 코테 문제는 조금씩 꾸준히 하면 되겠거니 싶은데, 개발자를 하려면 개발 실력이 좋아야 하는게 제일 중요하니까..! 개발을 안 해봐서 못하는건가 싶었는데 괜한 걱정이었다.

왜냐면 안 해봐서 그렇지 못해도 열심히 꾸준히 차곡차곡 경험을 쌓아가면 그게 실력이 될거라고 생각한당

다음주부터 처음으로 협업해서 프로젝트를 진행한다. 2주간 서울에 올라가서 강의장을 갈거다 !

조금이라도 매일 개발 일지를 작성해야겠다고 생각했다. (메모장이나 노션에 적어서 한 번에 올리등가...)

그러고 10월에 또 프로젝트를 자잘하게 해서 JS, TS, 리액트의 기초를 다져야 한다.

11월부터 3개월간 계속 팀 프로젝트라서 ...!!!

뭔가를 기간 내에 만들어야 하면 이것 저것 하고 싶은 욕심을 갖고 계속 만들어야한다는 생각이 들었다.

서론이 길었지만 짧은 시간에 뿌듯한 결과와 성과였다...! 

많은 걸 얻을 수 있어서 좋았고 개발이 이런거구나 싶고 개발 공부에 흥미가 다시 생겼다. (왜냐면 여태 해본건 강의 따라치기나 언어라고도 할 수 없는 html/css였으니까ㅏ..)

---

3일차 성과

- 반응형(스마트폰, 태블릿)으로 스타일을 수정했다. (완벽하진 않은듯...ㅜ)
- 검색 기능을 구현했다.
- localStorage를 사용하여 찜하기 기능을 구현했다.
- 다크모드 기능을 구현했다.

솔직히 이걸 할...만은 하겠지만 여기까지 되려나? 싶었는데 다 해버렸다.... 허헣

---

배포 주소

 

https://pokemon-dict.vercel.app/#/

Pokemon

---

검색 기능

Search 컴포넌트(검색하는 부분)와 SearchPokemon 컴포넌트(검색하면 결과 출력되는 곳)와 search 라우팅을 통해 만들었다.

keydown과 event.key === "Enter"를 사용했다.

검색어를 입력하고 엔터를 치면 입력한 데이터와 data 배열에 있는 정보와 대조를 한다.

for문에서 setAttribute로 경로(라우팅) 설정도 하고, window.location.hash를 새로 입력한 정보로 바꿔준다.

?로 쿼리스트링을 해줬다. 이건 core폴더에 pokemon.js의 내용때문이다.

데이터를 찾지 못했을 경우를 만들어 주기 위해서 밖에 dataFound 변수를 불리안으로 만들어줬다.

찾은 포켓몬은 새로 입력한 경로에 출력해주고, 새로운 라우터에 연결해준다.

---

찜하기 기능

localStorage와 id 값을 사용했다.

하트를 html에 만들어주고, classList를 붙였다 떼었다 할 수 있게 만들어줬다.

그리고 다른 곳에서도 찜한 정보를 받아서 사용할 수 있어야 한다.

localStorage에 있는 데이터 전부를 가져와서 새 배열에 넣어서 새 배열을 사용한거다.

이렇게 사용했기 때문에... localStorage는 찜하기 독점!..!

그래서 뒤에 다크모드 만들땐 SesstionStorage를 사용했다.(사용법은 거의 비슷하다고 해서 개꿀)

이런 식으로 찜하기 기능을 사용하는 곳의 코드를 잘 수정해주면 된다!

---

다크 모드

sesstionStorage로 dakeMode(key)를 불리언 타입(값)으로 저장했다.

contains가 포함 하냐 안 하냐 => true / false 반환

귀찮지만 이렇게 일일이 입력해줘야 한다.

근데 깔삼한 방법으로 한 듯..

다크모든데 어떠심 기엽져

어두워서 그림자 안 보여서 아숩지만.. 아무튼 해냄

---

더 추가할 기능

- TheFooter.js 만들기
- type 한국어로 변환하고 각각 색 지정, 이모지 지정
- type 성공하면 type별 포켓몬 검색... 할 수 있을까?
- 상세 페이지에서 버튼 누르면 전/후 포켓몬 페이지로 이동
- 배포하고 깃허브에 리드미 추가

아쉬운 점은 API를 잘못 가져와서 로딩이 매우 느리다는 것이다.

API를 이상하게 가져와서 코드도 이상하고 그냥... 제한도 생기고 참 그랬다^^

그래도 처음이니까..

다음부턴 더 잘 가져와보자 !

---

깃허브

https://github.com/seacrab808/Pokemon-dict

GitHub - seacrab808/Pokemon-dict: 포켓몬 도감 만들기 프로젝트! 3일동안 JS API 복습하기

---

일단 최소한의 기능은 구현하고 블로그를 작성했다.

이제 짜잘한 내용들 만들고 블로그 업데이트 하면 된다!