신입 프론트엔드 개발자의 입사 9개월 회고

6개월 회고록 이후 다시 3개월 이상이 지났다.

---

벌써 입사한지 9개월 이상이 지나고 있다..!

6개월 회고록 이후 3개월 동안 진행한 업무와 그 속에서 느낀점들을 기록해보고자 한다

 

무엇을 했는가 ?

🦋 '이벤트 관리 페이지(CMS)' 개발 (진행중)

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

 

: 지난 6개월 회고록에서 진행하고 있던 프로젝트를 계속 진행했다.

총 5개의 카테고리 작업을 진행했으며 자세한 내용은 다음과 같다.

• 게시판 관리
  구현 기능 | 게시판 별 게시글 확인, 게시글 조회/등록/수정/삭제, 게시글 답글/댓글, 신규 게시글 표시
  
  게시글을 등록할 때는 파일 업로드(React-dropzone), 에디터(CKEditor), (이미지/동영상 게시판일 경우) 썸네일 이미지 지정 등을 할 수 있다.
  첨부파일을 받아서 서버에 formData 형식으로 보내고
  썸네일 이미지를 지정하면 해당 이미지 url을 서버에서 받아와 화면에 표시한 후 다시 서버로 보내는 작업 등을 했다.
  
  가장 어려웠던 작업 중 하나는 답글 기능 구현이었다.
  여러 depths의 답글들을 replyExistYn라는 field 값으로 구분하여 화면에 표시하고자 했다.
  처음에는 여러 depth로 답글을 달 수 있게 구상하였는데, (작업이 복잡하기도 하고) 굳이 그럴 필요 없다고 판단하여 하나의 depth로만 답글을 달 수 있게 하였다.
  이 기능을 구현하면서 재귀함수에 대한 개념을 접하게 되었는데, 꽤나 복잡하여 며칠을 고생했던 것 같다.
  사수분과 함께 논의하면서 결국은 구현해낼 수 있었고 일부 코드는 해당 게시글에서 볼 수 있다.
  
  
• 배너 관리
  구현 기능 | 배너 조회/등록/수정 삭제, 이미지 파일 업로드, 등록된 배너간 위치 변경(drag table row)
  
  배너를 등록할 때는 이미지 파일 업로드, 배너를 표시할 기간 설정, 이미지 파일의 url 등록 등의 기능 구현이 필요했다.
  배너 관리 카테고리는 (사수분의 요청으로) UI를 총 3번 변경했는데, 디자인 시안 없이 개인적으로 와이어 프레임을 간단하게 그려보고 작업하느라 고통이 있었다.. 물론 React Bootstrap을 사용했기에 큰 어려움은 없었지만 혼자 UI를 그려보는 것이 결코 쉽지는 않았다.
  
  
• (관리자) 비밀번호 찾기
  구현 기능 | 관리자 정보 입력 - 회원정보 조회 - SMS certId 인증 (타이머) - 비밀번호 변경 - 로그인 화면
• 통합 회원 관리
  구현 기능 | 회원 목록 조회/검색(+조건), 개인 정보 수정, 로그인 오류 횟수 초기화, 페이징
• 행사 관리
  구현 기능 | 행사 목록 조회/검색(+조건), 행사 상세정보 모달창 컨트롤

 

 

🦋 '이벤트 페이지' 팝업창 컨트롤 작업 (이미지맵)

: 이벤트 페이지의 팝업창 내에서 버튼을 클릭하면 유튜브 영상을 띄우는 작업이었다.

 

당일 오전에 업무에 대해 전해 듣고, 팀원과 함께 이미지맵 외의 모든 작업(iframe)은 끝내놓고 대기했다.

시간은 계속 흘렀고.. 디자인 시안을 퇴근 40분 전에 전달받아서 매우 당황스러웠다 ㅎㅎ...

다음 날 오전부터 팝업창을 게시하는 일정이었기 때문에, 그 날 작업을 끝냈어야만 했다.

결국 집에서 원격으로 해당 작업을 마무리하여, 다음 날 정상적으로 팝업창을 오픈할 수 있었다.

이미지맵 기능이 어렵진 않았지만 학원에서 처음 배운 이후로 사용해보지 않았던 터라 익숙하지 않아 조금 헤맸던 것 같다.

 

 

🦋 '이벤트 페이지(8개)' Vue → React 전환

[ 사용기술 | React + TypeScript + Next.js (+Redux toolkit) ]

 

: 현재 운영되고 있는 이벤트 페이지 8개를 React로 전환하는 작업이었다.

 

해당 페이지들은 Vue + Nuxt.js로 작성되어 있었고,

메인 + 상세(=상세 조회, 동영상 목록, 댓글 목록)으로 (거의) 동일하게 구성된 페이지들이었다.

Next.js는 Nuxt.js와는 또 다른 프로젝트 구조를 가지고 있었기에

프로젝트 구조 잡기부터 시작하여 build까지 작업하였다.

기존 프로젝트에는 적용되어 있지 않았던 store 기능을 이벤트 페이지들에 Redux toolkit으로 적용하는 작업도 했다.

Redux toolkit을 사용하면서 새로고침할 때 데이터가 사라지지 않게 하기 위해 Redux-persist도 적용해보았다.

 

 

🦋 '메인 모바일 페이지' Vue → React 전환 (진행중)

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

 

: 현재 운영되고 있는 메인 모바일 페이지를 React로 전환하는 작업을 진행 중에 있다. (메인 + 8개의 상세 페이지)

 

해당 프로젝트는 Vue + Nuxt.js로 작성되어 있긴 하지만, 조금 오래 전에 작성되어 있던 터라

php 소스도 존재했고, HTML의 script 태그에 Vue.component 형식으로 template이 들어가 있었다.

프로젝트를 파악하느라 약간 애를 먹었지만, 현재는 좀 익숙해져서 작업에 속도가 붙은 상태이다.

 

최근에 proxy 설정을 배워서 잘 익혀두려고 한다.
해당 프로젝트가 여러 서버에 api를 요청하기 때문에 보안상의 이유로 proxy 설정을 걸어야 했다.

아직 익숙치 않지만 또 하나 배웠다는 점에서 매우 뿌듯하다!

 

 

아쉬웠던 점

- 코드 리팩토링(+테스트 코드)의 기회가 부족하다.

: 현재 회사는 하나의 프로젝트가 한참 바쁘게 진행되다 다른 프로젝트가 들어오면 진행하고 있던 프로젝트를 멈추고 바로 다른 프로젝트를 진행하는 업무 패턴이다. 이로 인해 내가 작성한 코드를 점검할 기회가 없다는 점이 좀 아쉽다. 또한 진행하던 프로젝트에 애정을 갖고 작업하다 진행을 멈추고 (해당 프로젝트는) 방치되어 버리니 길을 잃은 느낌이 들 때가 있다.

 

- 업무에 대한 설명이 부족하다.

: 업무를 받을 때, 해당 업무는 어떻게 진행하면 된다는 설명이 부족한 점이 매우 아쉽다. 대략적인 설명이라도 있으면 업무를 파악하고 진행하기까지 지체가 없어 더 효율적일 것 같다. 물론 이해가 안되는 부분은 적극적으로 물어보긴 하지만 해당 부분은 참 아쉽다.

 

- 디자인 시안에 대한 갈증이 있다.

: 여태 작업해왔던 프로젝트들은 모두 기본적인 디자인 시안조차 갖추지 못한 경우가 많았다. 정확한 px 값을 지정하거나 비율 등을 표시한 시안은 거진 없었다. 디자이너와의 협업이 중요한 직무에서 이러한 점이 매우 아쉽다ㅠ...

 

 

회고록을 마치며..

입사한지 벌써 9개월 이상이 흐르고 있다는 사실이 너무 놀랍다. 그렇지만 약 9개월이라는 시간을 허투루 보내지 않았다는 것만으로도 스스로 대견하다. 틈틈이 시간이 날 때마다 개인 프로젝트도 진행해보고, 회사 내에서 배운 것들도 블로그로 정리하면서 지식이 쌓여가는 느낌이 든다. 앞으로도 직무에 대한 확신을 가지고 더 폭 넓은 경험을 해보고 싶다😊