[React] Day_42 개인 프로젝트 후기

 

 

안냐심꽈 다시 돌아온 림졍입니ㄷr.

오늘은 프로젝트로 마무리좀 지을게요.

(팀플량이 조금 많아서.. 그건 주말에 정리좀 해보겠습니다.)

이번에는 1세대 뽀깟몬 데이터를 활용하여 도감을 제작해보았습니다.

배포는 Vercel을 활용하였고 기능 구현을 다하고 욕심을 부리다 보니..

그.. 생각보다 많이 묵직-해요(?) 바로 설명으로 가보도록 하죠

레쯔고.

 

 

Poke-Dex Project 💁🏻‍♂️

링크는 이곳을 타고 가주세용 → 바로가기

 

To. 이걸 오픈하시는 분께.

 

절대절대 절대 소리를 최대로 하고 페이지를 오픈하지 마세요.

그러다가 진짜 죽습니다. 귀테러 당해요.

저는 경고했어요? 그럼 이제 진짜 가시죠.

 

Intro

오늘의 뽀깟몬은 뭘까요오?!

 

간단소개

 

일단 이 친구가 Home 화면이고요

 

이 친구가 Dex(도감) 화면

 

그리고 요놈이 Details(카드 설명) 화면입니둥.

 

[필수 구현 사항]

Git Branch

 

- props-drilling (1차 작업)

        src
        ├── components
        │   ├── pokedetails
        │   └── pokedex
        ├── data
        │   └── data.js
        ├── pages
        │   ├── Home.jsx
        │   ├── PokeDetails.jsx
        │   └── PokeDex.jsx
        ├── shared
        │   ├── GlobalStyles.jsx
        │   └── Router.jsx
        ├── App.jsx
        ├── main.jsx
        ├── .gitignore
        ├── eslint.config.js
        ├── index.html
        ├── package.json
        ├── README.md
        ├── vite.config.js
        └── yarn.lock

 

- context (2차 작업)

        src
        ├── components
        │   ├── pokedetails
        │   │   └── PokemonDetail.jsx
        │   └── pokedex
        │       ├── Dashboard.jsx
        │       ├── PokemonCard.jsx
        │       └── PokemonList.jsx
        ├── context
        │   ├── PokemonProvider.jsx
        │   └── usePokemonContext.js
        ├── data
        │   ├── colorData.js
        │   └── data.js
        ├── pages
        │   ├── Home.jsx
        │   ├── PokeDetails.jsx
        │   └── PokeDex.jsx
        ├── shared
        │   ├── GlobalStyles.jsx
        │   ├── Router.jsx
        ├── utils
        │   └── toastcontainer.js
        ├── App.jsx
        ├── main.jsx
        ├── .gitignore
        ├── eslint.config.js
        ├── index.html
        ├── package.json
        ├── README.md
        ├── vite.config.js
        └── yarn.lock

 

- Redux (3차 작업, Vercel 배포 및 현재 main branch)

        src
        ├── components
        │   ├── pokedetails
        │   │   └── PokemonDetail.jsx
        │   └── pokedex
        │       ├── Dashboard.jsx
        │       ├── PokemonCard.jsx
        │       └── PokemonList.jsx
        ├── data
        │   ├── colorData.js
        │   └── data.js
        ├── pages
        │   ├── Home.jsx
        │   ├── PokeDetails.jsx
        │   └── PokeDex.jsx
        ├── redux
        │   └── config
        │       ├── slices
        │       │   └── pokemonSlice.js
        │       └── store.js
        ├── shared
        │   ├── GlobalStyles.jsx
        │   └── Router.jsx
        ├── utils
        │   └── toastcontainer.js
        ├── App.jsx
        ├── main.jsx
        ├── .gitignore
        ├── eslint.config.js
        ├── index.html
        ├── package.json
        ├── README.md
        ├── vite.config.js
        └── yarn.lock

 

Routing

 

react-router-dom의 useNavigate를 활용하여 페이지 간의 라우팅 구현 완료

 

디테일 페이지

 

이름 / 타입 / 설명 순으로 페이지에 표시 (타입의 경우, 박스로 색상을 나누어 구분)

(props drilling은 초기 데이터를 사용했지만.. context와 redux의 경우, gif를 활용하여 보다 화려하게.. 꾸며봤습니다..하하)

 

알림 기능 구현

 

props-drilling 을 제외한 나머지 branch, react-toastify를 활용하여 UI 구현
(선택기능 UI 라이브러리 구현완료)

귀여운 내 알라미들 ^-^)b

 

 

스타일링

 

styled-Components 를 활용한 스타일링 및 전역 스타일링
(GlobalStyles 활용, 폰트 변경용도로 사용)

 

[선택 구현 사항]

이덕수(RTK) 사용하여 리팩토링

 

'Redux' 브랜치에 업로드

 

디테일 페이지에 '추가' 버튼 추가

 

짜잔

삼항연산자 활용하여 삭제하기 버튼도 구현 완.

히힛

Dex 부분, DashBoard 영역에 Home 화면으로 돌아가는 버튼 추가

 

요로코롬 밑에 돌아가기랑 초기화 기능을 추가했습니다 ^-^)b

 

useSound 라이브러리를 활용하여 버튼 클릭 시, 효과 나오도록 제작

 

* 소리가 생각보다 요란하니 주의하세요, 아 참고로 기능마다 소리가 쬐끔씩 다릅니다. 히히 ^-^)b

 

 

마무리 - 이번 주말 휴식은 글렀다.

 

발제는 오늘, 제출은 다음주 목요일 12시?

근데 심지어 구현해야 하는 기능은 많..다?

아니 진짜 어떻게 하라는걸까...

동공지진의 연속이지만 뭐.. 어쩌겠어.. 까라면 까야지 ㅜㅜ...

이번 주말은 반납하고 코딩하겠습니다.. 그럼 20000....

 

 

KPT 회고

• Keep :  이번 프로젝트도 성공적(?)으로 마무리
• Problem : 팀플량이 너무 많아요... 살려줘
• Try : 팀원들이랑 으쌰으쌰 하기.. 아자자

(\ /)

( ㅠ.ㅠ) 

o_(")(")o  The End.