[공주찾기] 공휴일 찾기, 주소 찾기 리팩토링 및 후기

[React] 공휴일 찾기, 주소 찾기 리팩토링 및 후기

전반적인 리팩토링을 진행해보았다. 크게 진행하지는 않았고 그냥 간단한 css, 환경변수 처리정도 하였다.

모든 페이지 공통 리팩토링

useCallback 함수를 사용하여서, 컴포넌트 내에서 사용되는 함수들을 최적화 시켜주었다. 그리고 API KEY들은 전부 환경변수로 빼서 사용하였다.

App.js - 메인 페이지

 

App.js 파일은 딱히 수정한 것이 없다. 그냥 눈에 띄는 것은 63 ~ 68번 줄을 추가하여 tab css를 조금 변경한 정도가 있다.

FindHoliday.js - 공휴일 찾기 페이지

공휴일 찾기의 경우 3월을 검색하고 싶으면 03으로 2자리 수를 채워주어야 했다. 따라서 49번째 줄에 1자리 문자열인 경우 2자리로 만들어 주는 함수를 추가해주었다.

51, 59번째 줄 requestOptions 변수, makeHolidayArrs 함수는 매번 굳이 컴포넌트 내에 선언할 필요가 없어서, 컴포넌트 밖에 선언해주었다.

133 ~ 145번째 줄에서는 holidays 배열을 돌며, 사용자들이 보기 좋게 데이터를 변경하여 보여주었다.

FindAddress.js - 주소 찾기 페이지

19번째 줄에 요청해야 하는 url을 함수로 return 하도록 만들어두었다.

89 ~ 100번째 줄에서는 addrs 배열을 돌며, 사용자들이 보기 좋게 데이터를 변경하여 보여주었다.

최종 화면

공휴일 찾기

주소 찾기

후기

사실 많이 아쉬운 프로젝트이다. 기능을 더 넣고 싶고, 좀 더 이쁘게 만든 후 리팩토링까지 딱 하려고 했는데 아쉽다. 시간도 부족하고 뭔가 질질 끌자니 끝은 안날 것 같아서 이정도로 끝내기로 했다. 다음에 다시 하게 된다면, 초기 값 설정, validation, 주소 찾기 경우 pagination 정도는 추가하고 싶다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.