[포켓몬 수집 사이트]회고록

프로젝트 개요🎬

이번 프로젝트는 포켓몬 도감 사이트로, dashboard에 포켓몬을 추가,삭제할 수 있다.

기술 스택🧷

• 프론트엔드 : React, react-router , redux / context API , styled-components , react-toastify

개발과정🎈

아이디어 구상

• 리액트를 기반으로 포켓몬 데이터를 추가,삭제하며, 페이지 이동이 가능한 사이트를 구상하게 되었다.

구현

• 반응형
• 포켓몬 추가시 dashboard에 추가되고, 삭제시 dashboard에서 삭제됨
• 이미 포켓몬이 dahsboard에 있거나 dashboard에 6개가 초과됐을시 경고문이 뜸
• 포켓몬 카드 클릭시 detail페이지로 이동
• detail페이지에서 dashboard기준으로 추가됐다면 삭제버튼이, 없다면 추가버튼이 노출
• 데이터는 로컬스토리지에 저장되어 페이지 이동, 새로고침시에도 유지

테스트 및 배포

• vercel에 배포
  링크

pokemon

배운점🤖

• 기술적 성장: react 전반적인 흐름, 페이징 라우팅 이해(react router) , 전역상태관리 이해(context API, redux)
• 문제 해결: [프로젝트 일기 참고]

후기✏️

먼저 react-router-dom을 사용하여 페이지 이동을 구현했는데, 처음에 셋팅을 버벅거리고 헤맸던것같당,,,

 

그리고 styled-components를 그동안 사용을 잘 안했어서 손에 안익었고, 네이밍이 쉽지않았다. 

styled-components를 쓰다보니 scss같았다

 

전역상태관리를 각각 브랜치마다 다르게 했는데, 이왕 하는거 git를 터미널 명령어로 해보자!하고 쓰다보니 너무 편리했다!

(그동안 소스트리, github썻던사람...)

 

context API는 크게 어려웠던건 없었는데 대망의 리덕스........

리덕스를 사용하기 전에 강의를 다시보고 적용하려했으나 시간도 넉넉하지 않고, 차라리 실전에 쓰면서 공부해가자!하고 무작정 썻당,,

 

나는 리덕스를 처음써봐서 원래 리덕스버전으로 만든후에 리덕스 toolkit으로 리팩토링한 버전 따로따로 브랜치를 만들어서 코딩했다

확실히 toolkit버전으로 사용한게 코드도 간결하고 관리하기도 용이했다

원래 리덕스 버전

//store.js
import { createStore } from "redux";

...
const pokemonReducer = (state = initialState, action) => {
  switch (action.type) {
    case "add":
      return addPokemon(state, action.data);
    case "remove":
      return removePokemon(state, action.data);
    default:
      return state;
  }
};

const store = createStore(pokemonReducer);
export default store;

리덕스 toolkit 버전

//store.js
import { configureStore } from "@reduxjs/toolkit";
import pokemonSlice from "./pokemonSlice";

const store = configureStore({
  reducer: {
    pokemonList: pokemonSlice.reducer,
  },
});

export default store;

//slice.js
import { createSlice } from "@reduxjs/toolkit";
...
const pokemonSlice = createSlice({
  name: "pokemonList",
  initialState,
  reducers: {
  ...
  }
 })
 
export const pokemonActions = pokemonSlice.actions;
export default pokemonSlice;

 

리덕스는 조금더 공부를 해야겠다....ㅠㅠㅠ toolkit를 사용해도 지저분해보이고 어렵따,,,

💫완성된 모습💫

📌코드보러가기

GitHub - minji7901/pokemon