1년차 주니어 프론트엔드 개발자의 회고록

어느덧 입사한지 1년하고도 며칠이 지났다

---

지난 9개월 회고록 이후 3개월 간의 업무는 가장 널널했던 것 같다

그럼에도 배운 것들이 꽤 있어 기록해보고자 한다

 

 

무엇을 했는가 ?

🐣 '메인 모바일 페이지' 배포 및 리팩토링

[ 사용 기술 | React + TypeScript + Next.js + Redux Toolkit + React Query ]

 

: 지난 9개월 회고록에서 진행하고 있던 프로젝트를 계속 진행하여 마무리하였다.

 

1차로 마무리된 프로젝트에 next-seo를 사용하여 SEO 관련 설정을 하고, 구글 광고 등을 세팅하여 배포하였다.

그 후, 다른 프로젝트를 진행하다 시간이 남아 리팩토링 작업을 해보기로 했다.

혼자 모든 페이지의 코드를 짜다보니 부족한 부분이 많았고 그만큼 아쉬움이 남았다.

 

● 먼저 VOD 페이지를 리팩토링 했다.

VOD 페이지는 카테고리 1, 카테고리 2 를 순차적으로 선택하면 그에 맞는 콘텐츠를 보여주고 (+ 더보기 버튼),

콘텐츠를 클릭하면 상세 페이지로 넘어가는 식으로 동작했다.

리팩토링 전에는 카테고리 데이터들을 useState로 관리해서, 콘텐츠 상세 페이지로 넘어 갔다가 다시 돌아오면 데이터가 리셋되었다.

이러한 점은 (사용자 입장에서) 기존에 봤던 데이터들이 사라졌기 때문에 더보기 버튼을 다시 눌러야 하는 불편함이 있어 기능 개선이 필요했다.

따라서 선택한 카테고리 데이터는 Redux Toolkit(+ Redux persist) 를 이용해 관리하고,

더보기 버튼 클릭으로 페이징된 데이터들은 React Query의 useInfiniteQuery를 사용해 캐싱처리 하여

상세 페이지로 넘어 갔다가 다시 돌아와도 기존 데이터들이 그대로 유지될 수 있도록 수정하였다.

 

● 다음으로 검색 페이지를 리팩토링 했다.

검색 페이지는 검색어를 입력하면 검색 결과를 보여주고, 검색 조건을 따로 설정하여 검색을 할 수도 있다.

또한 검색 결과 내에서 탭을 변경하면 그에 맞는 검색 결과를 다르게 보여주게 된다.

여기서 검색어와 검색 조건들은 URL Query String에서 가져와 Query String Parameters 형식으로 API를 요청한다.

 

나는 해당 기능을 다음과 같이 설계했다.

1. 검색 페이지가 mount 됐을 때(= router.query 가 변경됐을 때) router.isReady 값이 true이면,
router.query 값을 state에 세팅한다.(* useReducer로 관리)

2. 세팅된 값으로 검색 결과 API를 조회한다.

3. (검색 결과 내에서) 탭을 변경했을 시, 변경된 탭의 값과 useReducer로 관리되고 있던 state object를 Query String으로 바꾸고, 해당 값을 넣어 router.push 한다.

4. URL Query String 이 변경될 때마다 1, 2번 반복

 

( 위 설계로 검색 기능이 제대로 동작하기는 하였으나, 이 코드가 과연 최선인가?에는 장담할 수 없다,, )

 

URL Query String으로 API를 요청하면 새로고침해도 URL은 유지되기 때문에

localStorage 혹은 Redux-persist 등과 같은 라이브러리를 사용하지 않아도 된다.

문제는 해당 페이지에서 검색어는 useState로 따로 관리하여, 페이지가 mount 됐을 때 setState로 검색어를 세팅하게끔 설계했는데

router가 다 세팅되기 전에 위 코드가 동작하여 검색어가 undefined로 출력되는 에러가 발생했다.

이 문제는 페이지가 mount 됐을 때, router.isReady 라는 조건이 true이면 setState 하도록 수정하니 해결되었다.

 

위 두 개의 페이지 외에는 간단한 동작을 하는 페이지들이기 때문에 리팩토링 작업을 진행하지 않았다.

 

 

🐣 '이벤트 사용자 페이지' 개발

[ 사용 기술 | React + TypeScript + Next.js ]

 

: 이벤트 관리 페이지(CMS)에서 등록한 이벤트들을 볼 수 있는 사용자 페이지를 개발하는 작업을 하였다.

 

해당 페이지의 일부 퍼블리싱 작업을 하였고, react-modal 이라는 라이브러리를 처음 사용해보았다.

기존에 모달창을 작업할 때는 라이브러리를 사용하지 않고,

직접 state와 컴포넌트를 통해 구현하거나 / bootstrap을 사용하면 bootstrap modal 을 사용하곤 했는데

react에서 작은 용량으로 편리하게 사용할 수 있는 라이브러리가 있다는 소식을 듣고 사용해보게 되었다.

 

라이브러리를 사용하지 않고 모달창을 구현하는 데에 큰 어려움은 없기 때문에

react-modal을 사용했을 때 큰 편리함을 느끼지는 못했지만

모달창 위치 조정을 위해 css를 복잡하게 작성하지 않아도 되고, 가독성이 있다는 측면에서 장점을 느꼈다.

 

 

🐣 '통합 로그인 페이지' 리팩토링

[ 사용 기술 | React + TypeScript + Next.js ]

 

: 진행할 업무가 없어 팀원과 순수 React로 되어 있던 통합 로그인 페이지를 Next.js로 전환해보고자 했다.

 

Next.js 폴더구조를 잡고, 퍼블리싱 작업을 하였다.

로그인 페이지는 (당연히) form과 유효성 검사가 주된 기능이고 가장 중요하다고 볼 수 있겠다.

 

기존 코드에서는 input 값들을 useReducer 를 생성하여 관리하였고,

onChange 될 때마다 dispatch 로 값을 보내고, (state 에 세팅하는) reducer 함수를 실행하는 식으로 동작하였다.

또한, 유효성 검사를 위해 submit 하기 전에 input 값들을 useEffect로 참조하고 있다가 정규식 검사를 하고,

유효하지 않은 값이면 alert을 띄우는 식으로 동작했다.

 

위 기능을 구현하기까지 매우 힘겨웠고, 구현한 후에도 오류에 대처하기 위해 다양한 테스트도 거쳤었다.

이 과정에서 if 문에 또 if 문을 넣고,, else if... 등등 많은 조건식들이 겹쳐져 가독성도 그리 좋지 못했다.

리팩토링 하면서 팀원 분의 추천으로 Formik 이라는 form을 관리하는 라이브러리와

유효성 검사를 위한 Yup 이라는 라이브러리를 알게 되어 적용해보기로 했다. (보통 두 라이브러리를 함께 사용한다고 한다.)

 

이 라이브러리들을 사용한 뒤 느낀 장점은...

● Formik

- handleChange 함수를 사용하면 따로 onChange 함수를 작성하지 않아도 된다.

- state 를 따로 생성하지 않고도 initial 값과 변경된 값을 관리할 수 있다.

- formik.errors 로 에러와 에러 메세지를 관리할 수 있다.

 

● Yup

- 짧은 코드로 정확하게 유효성 검사 기능을 구현할 수 있다.

- 필수 입력값과 그렇지 않은 입력값을 구분할 수 있다.

 

결론은 위 라이브러리들을 사용하면 코드 설계의 복잡함도 줄일 수 있고, 가독성이 좋아 협업할 때 매우 편리할 것 같다.

 

 

회고록을 마치며..

입사한지 1년 하고도 며칠을 끝으로 퇴사를 하게 되었다!

약 1년이라는 시간동안 업무적으로 많은 것을 배웠고, 또 회사에 아쉬움도 느꼈었던 시간이었다.

 

최근 취준을 하면서 내가 바라는 회사는 어떤 회사인지 생각해보았다.

• 기획-디자인-개발 각 단계별 문서가 정확하게 있고 체계적이었으면 좋겠다.

• 팀원 간 소통이 활발하고, 각자 코드에 대한 고민과 리뷰의 시간을 가졌으면 좋겠다.

• 항상 하던 일도 좋지만, 새로운 기능을 지속적으로 추가하려는 노력이 있었으면 좋겠다.

• 팀 리더가 팀원과 (자주는 아니더라도) 개인적으로 이야기하고 상담하는 시간을 가져줬으면 좋겠다.

 

물론 회사에만 바라기보단 나 자신도 노력하고 성장하는 사람이 되어야 한다고 생각한다.

취준 기간동안 Next.js에 대해 좀 더 깊이 공부할 예정이고, 배운 내용이 있으면 블로그에 꾸준히 기록할 예정이다.

또 알고리즘 공부를 위해 시간이 날 때마다 문제를 풀어볼 것이다.

 

앞으로의 취준 기간 지치지 않고 화이팅 해보자..!!!