부산에 가면
깃허브 : 링크
배포링크 : 링크
최초 개발 기간 : 2022년 07월 27일 ~ 08월 17일
리팩토링 기간 : 2023년 01월 03일 ~ 01월 11일
로그인 이메일 // 비밀번호
test@test.com // 12341234
✨ 프로젝트 개발 동기
최초 개발 당시 개발 동기
나는 이전부터 외부 API를 다루는 것에 대한 경외감을 가지고 있었다.
나의 첫 팀 프로젝트에서 나는 외부 API를 전혀 다루지 못해 팀에게 도움이 되지 못했다.
결국 외부 API를 사용하지 않는 주제를 선정했다.
지금 생각해보면 당시에 버거운 일이었지만** 실패의 경험은 여전히 아물지 못했다.**
그래서 이번에는 기필코 직접 외부 API를 훌륭하게 사용해보이기로 다짐했다.노마드코더에서 날씨 API, 영화API는 다뤄본 경험이 있어서 다른 분들이 사용하지 않을 것 같은 재밌는 데이터를 활용해 보고 싶은 욕심이 있었다.
대도시에는 그에 걸맞는 풍부한 API가 제공됐다. (주차장, 전기 자전거 버스 도착시간) 하지만 김해에 사는 나에게 피부로 와닿는 밀접한 정보가 아니라 흥미를 끌지 못했다.
고민 끝에 나는 익숙한 도시 부산을 선택했다.
적어도 부산은 저 행정구역이 어디구나는 꿰고 있다. 아무튼 부산 맛집 API를 사용해보기로 했다.
리팩토링을 마친 시점에서 개발 동기를 다시 읽는 지금
이런 API가 필요한데 어디 없나? 이 파라미터도 줄 수 있으면 좋겠다 라고 생각하는 걸보면
API를 다루는 것에 대한 두려움은 사라진 것 같다.
그리고 간소하지만 express와 Next.js의 api를 사용 경험을 통해 BackEnd도 찍먹해 봤고 협업을 통해 BackEnd분과 협업을 해보니 이제는 API, 비동기와 친해졌다고 생각한다.
오른팔에 화상자국이 있다. 내가 주방일을 했다는 증표. 나는 이걸 타투로 여긴다.
기록을 남기는 것이 덕목인 개발자의 길을 걷는 것이 나는 썩 마음에 든다.
아픔이 무뎌지고 이제는 흐릿해진 흉터를 반갑게 매만져본다.
리팩토링 동기
커리어코치님과의 면담 후 배포가 되어 있으면 가장 좋고, GIF라도 갖고 있어라, 그리고 너는 포트폴리오를 만들면 좋겠다라는 코칭을 받았다.
이력서의 컨셉을 성장으로 잡았었기 때문에 부족한 부분이라도 그 부분을 다음 프로젝트에서는
이렇게 보완하며 성장했습니다. 라고 하려고 했다.
Firebase에서 아래와 같은 메일이 와있었고 이것만 손봐서 배포했던 것이 작동 되게만 하자고 생각했었다.
하지만 막상 파일을 열어보니 도저히 리팩토링을 하지 않고서는 눈 뜨고 볼 수 없는 코드들이었다.
그래서 리팩토링을 진행하다 보니
1) 추가, 삭제를 반영하게 하려면 React-Query를 쓰면 좋을텐데?
2) 그런데 한번 받아오고 변하지 않는 데이터들은 캐싱하면 좋을텐데, React-Query말고 cacheStorage를 사용하는 방법을 배웠으니 그것도 써보고 싶다.
3) 메인페이지에는 날씨데이터가 있으면 좋을 것 같은데? 마침 데이터에 경도 위도가 있네?
4) 경도 위도가 있으니까 카카오맵으로 지도를 띄워주면 좋겠는데?
5) 기왕 이렇게까지 한거 반응형으로 만들어버리고 싶다.
이런 생각들이 꼬리를 물어서 처음 리팩토링을 기획했을 때 보다 손을 많이 보게 되었다.
⭐️new⭐️ 타입스크립트 마이그레이션 동기 2022/02/07
어느 한 기업의 채용 공고에서 아래와 같은 내용을 확인했다.
- 자신의 프로젝트 중 가장 성공적이었던 프로젝트 산출물/소스코드에 대한 자료를 상세히 작성해주세요.
- 본인의 노션/블로그/SNS에서 어필하고 싶은 내용은 요약 및 설명과 함께 상세링크로 올려주세요.부산 프로젝트는 늘 동영상 강의를 보며 따라해가며 학습하던 나에서,
처음부터 스스로 아이디어를 내고 기능 구현에 필요한 기술들을 학습하여 적용하고,
그리고 새로 학습한 내용이 생기면 그것을 적용해가며 프로젝트를 개선해 나갔다.
React Query를 사용할 줄 알면서도 Redux Toolkit, Redux Thunk와 캐시 스토리지 데이터 캐싱을 사용하는 부분을 일부 남겨 놓은 것 처럼,
이 프로젝트에는 나의 성장 과정을 담아 놓고 싶었다.
이토록 나에게 특별한 프로젝트를 가장 성공적인 프로젝트 산출물이라고 하자니 한가지 마음에 걸리는 것이 있었다.
🔥타입스크립트가 아니다🔥
새로 학습한 내용이 생기면 그것을 적용해 개선해나가는 프로젝트이다.
그럼에도 타입스크립트를 적용하지 않은 것에 대해서는 나의 성장 과정을 담아 일부 남겨 놓은 것으로 치부하며 손보지 않았다.
그래서 나는 처음으로 자바스크립트에서 타입스크립트로의 마이그레이션에 새로 도전했다.
🔥도전했던 점 1. Scroll to Top
리팩토링 / 부산에 가면 1. Scroll to Top
🔥도전했던 점 2. Firebase
🔥도전했던 점 3. 카카오 맵 & 실시간 날씨 데이터
리팩토링 / 부산에 가면 3. 카카오 맵 & 실시간 날씨 데이터
🔥도전했던 점 4. select option대신 DropDown
리팩토링 / 부산에 가면 4. select option대신 DropDown
🔥도전했던 점 5. Redux-persist
리팩토링 / 부산에 가면 5. Redux-persist
🔥도전했던 점 6. CacheStorage
🔥도전했던 점 7. 타입스크립트 마이그레이션 ⭐️new⭐️ 2022/02/07
리팩토링 / 부산에 가면 7. 타입스크립트 마이그레이션
7-1) 타입스크립트 마이그레이션
7-2) 날씨 데이터 구조 수정
7-3) 디렉토리 구조 변경
7-4) React.Suspense 와 React Query의 isLoading
🐳 마치며
기존의 프로젝트의 코드를 고치는 것은 백지에서 다시 시작하는 것 보다 큰 스트레스로 다가왔다.
그 코드를 작성한 사람이 본인일지라도 새로 이해하고 적용시키는 과정이 힘들었다.
부트캠프 수료 중 지금까지 공부했던 것을 적용해보는 연습,
또 과거의 코드를 리팩토링 하는 연습을 하게 해준 의미있는 프로젝트였다.
🐳 2022/02/07 타입스크립트 마이그레이션을 마치고
그동안 찜찜하게 생각한 부분을 해소할 수 있었다.
- 타입스크립트로 바꾸지 않고 있었던 것
- 함수의 파라미터와 return 값에 타입 넣기
const example =(a:number,b:number): number => {
return a+b
}
interface ExampleParams {
(a:number,b:number) => number
}
const example2 : ExampleParams = (a, b) => {
retrun a+b
}- isLoading 상태를 Suspense로 넘기기
