2022년 여름방학, 개발 회고

이 글은 기술적인 이야기가 아닙니다.

이번 여름 방학은 프로젝트와 함께 보냈다.

7월엔 개발은 하지 않았고, 여름방학에 할 프로젝트와 2학기 시작과 함께 할 프로젝트, 2개에 대한 기획 및 기술 스택 결정, Figma를 통한 디자인 등을 했다. 7월 중순쯤, 도커와 쿠버네티스에 대한 5일짜리 강의도 들었는데, 쿠버네티스를 경험해 보지 못한 나한테 꽤나 유용한 강의였다.

8월부터 오늘인 9월 14일까진 단 하나의 프로젝트에 집중했다. 이웃 간의 도움 및 소통을 활성화할 수 있는 서비스인데, 여름방학 회고인 이 글은 사실 이 프로젝트 이야기로 가득 찰 것이다.

이번 방학 동안 집중도 높은 개발을 하면서 얻은 것도 많고, 아쉬운 점도 많았다. 아무래도 좋았던 것부터 말해야겠다.

새로운 기술, 또는 쓰고있는 기술의 동작 원리 파해치기

이번 프로젝트에서 얻은 가장 큰 부분이라 생각한다. 이번 프로젝트에서 동작 원리를 공부한 것이 몇몇 있는데, 그중 가장 기억에 남는 건 CSS-in-JS의 동작 원리이다. CSS-in-CSS와 CSS-in-JS의 동작 원리 차이점을 명확히 파악하면서 재밌다고 느꼈다.

이전 프로젝트에선 사실 어떤 기술이든 써보는 것마다 새로운 영역이라 차이점이나 동작 원리에 대해 생각해 본 적은 없었는데, 이번엔 달랐다. 전엔 Javascript의 fetch 함수를 썼다면 이번 프로젝트에선 axios 라이브러리를 사용했는데, 쓰면서 둘은 어떤 차이점이 있는지 자연스럽게 궁금증이 생겼고, 찾아보면서 새로운 기술을 도입하기 전에 알고 쓰는 습관이 생겼다.

그러면서 느낀 부분은 동작 원리에 대한 설명은 해외 블로그에 양질의 글이 참 많다. 영어는 정말 필수라고 느꼈다.

그 외에도 이번에 새로 알게된 것들을 읊어보자면..

useEffect의 cleanup function을 통해 메모리 누수 방지
web socket에 대한 이해
모놀리식, 멀티레포, 모노레포 방식에 대해

등이 있다. 이 중 몇 개는 앞으로 블로그 글에 올라올 가능성이 높다.

실제 개발을 통해 얻은 것들

이번 프로젝트는 프론트엔드 개발자를 지향하며 진행하는 두 번째 프로젝트이다. 그만큼 아직 접해보지 못한 기술들이 참 많았는데, 이번 프로젝트를 통해 새로운 기술들을 다양하게 접할 수 있었다.

• Typescript 100% 도입
  typescript를 처음 써보며.. 많은 고난이 있었지만 배운 것이 많다. 내가 느낀 typescript의 가장 큰 부분은 특정 컴포넌트나 함수를 개발할 때, 들어오는 prop과 type에서 확신을 주고 시작하니 개발 집중도가 높아졌다.

• redux 도입
  이전 프로젝트에선 recoil을 사용했다. 아직 redux toolkit을 사용하진 않았지만 redux와 recoil만 놓고 보자면 recoil 압승이다.. redux의 제일 큰 문제인 보일러 플레이트.. 직접 겪어보니 정말 난감했다. 오히려 그 덕분에 redux를 안 쓰는 방향으로 처리한 이슈도 있으니 이걸 좋다고 해야 할까?

• CI/CD 구축하기
  이번 프로젝트는 백엔드 서버용 VM 1대와 웹서버용 VM 1대 총 2대로 진행했는데, 웹서버용 VM은 내가 가지고 있다. 그래서 다른 VM의 jenkins를 사용하여 내 VM의 빌드 파일을 업데이트하며 CD를 구축했다. 배포 환경을 자동화하며 배포 흐름을 이해할 수 있어 좋았고, 내 VM은 centOS였고, 반대쪽은 우분투여서 두 OS의 다양한 설정 파일들을 많이 만져본 게 좋은 경험이었다.

• Nginx 웹서버로 정적 파일 제공하기
  위의 CI/CD 구축하기에 넣을까 했지만 Nginx는 따로 적어야겠다. Nginx는 내 VM의 도커 위에서 컨테이너로 동작하는데, 처음 써보며 다양한 문제들을 만났고, 결국 최선의 방안을 도출해냈다. Nginx에 대해 공부도 하고, 박치기도 하면서 웹서버의 동작 방식이나 도커의 포트,프록시에 대해 알 수 있었다.

• mui 경험하기
  mui의 사기적인 능력을 맛보았다. 이번 프로젝트의 Header 부분은 mui에서 제공하는 템플릿 그 자체였고, 다른 여러 부분에서도 mui 컴포넌트를 활용했다. 이번에 mui를 써보며 ui tool에 대한 스스로의 생각도 생겼다. 나는 불호이다.

• styled components 사용하기
  이전 프로젝트에선 먼지도 모르고 styled-jsx를 사용했다. 그냥 와 편하고 좋네 하며 썼던 기억이 난다. styled components는 CSS-in-JS 라이브러리인데, stlyed-jsx도 동일하다. 이번 프로젝트는 mui도 같이 사용했는데, mui의 sx를 통해 CSS 처리를 하기도 했다. 그래서 CSS 통일성 없는 잡탕이 되어버렸고 이 부분이 너무너무 너무나도 아쉽다. 차라리 mui의 sx가 inline styles라면 성능상 이슈로 시원하게 갈아버릴 텐데, 이것도 CSS-in-JS라 결국 개발 방식의 차이만 있을 뿐이다.

• github 적극 활용하기
  이번 프로젝트에서 github repository의 project 기능으로 협업하는 개발자의 진행을 확인하고, issue 생성 등을 관리했다. 또한 issue는 해결 과제 단위로 열었는데, PR 할 때 reviewer 설정을 하여 코드 리뷰를 진행했다. 코드 리뷰를 통해 누군가 내 코드를 보고 있다를 직접적으로 느끼게 되었고, 그러면서 스스로 변수명을 지으면서도 한 번 더 생각하거나 코드 구조에 대해 고민하는 습관이 생겼다.

• 웹 소켓 사용하기
  사실 웹 소켓에 대한 로망이 조금 있었다. 꼭 써보고 싶었는데 이번 기회에 사용하게 되어서 너무 좋았다. 웹 소켓에 대해 이해와는 별개로 웹 소켓은 백엔드 쪽이 처리할 부분이 프론트엔드 쪽보다 많아 보였다. 우리 서비스의 긴급 도움 연락망 기능에 사용했는데, 더 복잡한 기능에서는 프론트도 복잡해질까? 궁금하다.

함께한 팀원들에 대한 느낀점

팀장을 보며 느끼는 게 참 많았다. 이 친구가 없었다면 프로젝트가 완주할 수 있었을까?
리더십의 역량을 보며 현재 나의 역량은 어느 정도인지 참 많이 느낀 것 같다. 할 일이 많고 적고의 문제가 아니다. 오히려 그 친구도 나 못지않게 할 일이 많았다. 인정할 수밖에 없는 능력이다. 최근 느낀 것이지만 나는 영원히 코딩하고 있지 않을 것이다. 내가 계속해서 성장한다면 결국 기술적 판단 등의 의사결정을 하며, 개발자들을 관리하거나 방향을 제시해 주는 자리에 가 있을 것이다. 그때를 생각해 보면 연습해서라도 리더십을 기르고 싶다.

다른 팀원 중 한 명은 스트레스 관리를 참 잘했다. 일과 휴식을 완벽하게 분리할 수 있는데, 사실 지금의 내겐 당장 필요한 능력이기도 하다. 같이 걷다 보면 종종 별로 고민을 안 하기도 하는데, 그래서 그냥 편안해지기도 한다. 사실 내가 개발 외적인 것에 대한 전방 주시를 안 하는 동안 내 전방까지 챙겨준 고마운 친구이다.

마지막으로 같이 클라이언트단 개발을 한 친구이다. 개발 관련해서 하고 싶은 것들을 거부감 없이 받아들여줘서 고마웠다. 덕분에 typescript, redux, web socket, mui 등을 시도해 볼 수 있었고, 코드 리뷰나 깃허브 이슈 사용 방식 등도 써볼 수 있었다. 이 친구는 이번 프로젝트 말고도 할 일이 많았는데, MVP 개발까지 함께 완주할 수 있어서 나이스했다.

아쉬운 점들

• 스트레스 조절 실패
  9월 초부터 9월 12일까지 스트레스를 많이 받았다. 지금 생각해 보면 원인은 단순하다. 다가오는 프로젝트 마감 기간, 앞으로 남은 프로젝트들과 학기, 그리고 취준 고민과 예정되어버린 카카오 코테까지.. 방학 때 쉬지 않고 달려왔으니 프로젝트 막바지에 피로 및 스트레스 누적은 어쩌면 예정된 결과였을지도 모른다. 개발이 끝나고 결과 보고서 및 Readme, 블로그를 적는 지금 시점은 굉장히 개운하다. 스스로의 스트레스 관리에 대한 고민을 하고 있다.

• task의 시간 파악을 제대로 하지 못했다.
  어디서 본 글이지만 작업에 걸리는 시간을 측정하는 것은 신입 개발자든 시니어 개발자든 어렵다고 했다. 맞다. 나는 예상치 못한 복병들을 만났고, 적절한 시간 분배에 실패했다. 그 중 가장 큰 2가지는 typescript와 nginx 웹서버 설정이다.

  • Typescript
    게시판 구현에 대해 rest API로 받아오는 data, 이를 게시판에 쓰기 위해 가공한 data를 각각 type 선언을 해줬다. 게시판이 3개, 유저용 repo와 관리자용 repo 2개가 있으니 type이 12개이다. 이번에 정말 typescript의 지옥을 맛보았는데, 백엔드도 rest API에서 수정이 자주 일어났고, typescript로 엄격하게 type을 선언한 나는 그때마다 type을 수정하고, 그에 따라 일어나는 type 에러들을 다 처리해줘야 했다. 여기서 불필요하게 정말 많은 시간을 썼다.

  • Nginx
    처음 CI/CD 처리에서 Nginx도 깔끔하게 성공한 줄 알았지만 사실 아니었다. 그래서 개발 막바지에 Nginx 관련해서 이것저것 공부하며 왜 내 location은 제대로 작동 안 하는지, local port가 자꾸 밖으로 노출되면서 웹 브라우저가 맛이 가기도 하고, 난리도 아니었다. 사실 스트레스를 받던 기간에 그래서 그런지 Nginx는 더욱 오래 내 시간을 잡아먹었다. 결국 Docker 내외부 연결 포트를 수정하고, Nginx 내부 서버를 80번 포트로 설정하고, React에서도 homepage를 따로 설정해 주면서 해결했다.

• MVP.. 마무리는 했지만 속속들이 보이는 아쉬운 점들
  앞으로 리팩토링을 할 테지만.. MVP 단계에서 이뤄내려 했지만 못한 것들이 있다. useEffect의 cleanup function에 대해 공부는 했지만 처리를 하지 못했고, 당장 rest API 부분에 대한 에러 처리도 하지 않았다. 속속들이 자잘한 버그들도 보였다. 그리고 사실 제일 맘에 걸리는 건 MVP에 명시되어 있는 기능을 생략한 것이다. 서로 동의를 했고, 이해해 주는 팀원들이지만 시간이 없었다 라는 변명은 정말 구차하다.

• 발은 한 발자국씩, 눈은 전방 주시
  이번 방학 동안 매일매일 한 발자국씩 앞으로 나아갔다. 근데 앞을 보면서 가야 하는데, 2~3발자국 앞만 보면서 갔다. 아무래도 개발에만 집중하다 보니 그림을 제대로 못 그렸다 볼 수 있다. 그 끔찍한 결과물로서 게시판 navigation이 탄생했다. uri에서 query 부분도 적극적으로 사용하면서 좋은 경험이긴 했지만 결국 게시판 관련 uri 처리를 더욱 복잡하게 만들었다. 결과적으로 MVP에서 이슈도 발생했다. 다음 프로젝트부턴 sprint 주기를 2주 정도로 잡고, 2주간의 그림을 구체적으로 그리는 연습을 해야겠다.

마무리

이번 방학 때 쉬면서는 커리어리(IT업계 SNS)의 다양한 개발자, UX 디자이너나 기획자들의 글을 많이 읽었다. 앞으로의 길에 대해 생각해 볼 거리들이 정말 많았고, 개인적으로 이 글을 읽는 분들에게도 출근길, 커리어리를 선물하고 싶다.

여름 방학도 고생했고, 2학기도 열심히 달려보자.