구름톤 쿠버네티스 전문가 양성과정 - 프로젝트 주간 및 총 회고

그간 회고나 일지를 전혀 작성하지 못했지만, 오늘 최종 발표를 기점으로 구름톤 쿠버네티스 전문가 양성과정의 프로젝트 주간 및 교육과정 전체 일정을 마무리했다. 회고를 작성한 마지막 날인 지난 주 금요일부터 매일 16시간 씩 코딩해야만 했기에, 여유가 없었다.

쉴 틈 없이 이 작업과 저 작업 사이를 줄타기 해야 했기에, 하루 종일을 집중 상태로 보내야 했다. 카페에서 더 잘 집중하는 개인적인 특성 상, 카페인도 적잖게 섭취했다. 어제는 두통과 오한, 몸살까지 제대로 걸어다니는 것도 힘들었다.

그래도 팀원들과의 약속을 지킨 것에 만족한다. 일정은 많이 밀렸지만, 개발하기로 한 모든 UI 기능과 API를 구현했다. 개인적으로 계획한 챌린지는 뒷전이 되었지만, 앞으로 한 달 정도 시간을 내서 개선하면 될 일이다.

---

프로젝트 주간 회고

프로젝트 개요

• 서비스명 : DevLink
• 소개 : IT 멘토링 매칭 플랫폼
• 문서 : https://www.notion.so/Dokcer-DevLink-d4f1a6fe199046259483ce3086baecef

기능

API

• Auth

  • Join
  • Login
  • Logout
  • Delete Account

• Post

  • Write Post
  • Get Post
  • Get Posts
  • Edit Post
  • Delete Post

• Profile

  • Get Profile
  • Get User
  • Get Users
  • Edit Profile

• Mentoring

  • Get Mentoring
  • Get Mentorings
  • Request Mentoring
  • Accept Mentoring
  • Reject Mentoring
  • Record Mentoring

• Chat

  • Get Chatrooms
  • Get Messages
  • Send Message
  • Receive Message
  • Leave Chatroom
  • Exit Chatroom

UI

• Inifinity Scroll
• Dialog
• Menu
• DatePicker
• RegionSelectField

사용 기술

Core

• 프레임워크: Next.js
• 언어: TypeSciprt

NPM Libraries

• 스타일링: Styled Components
• 전역 상태관리: Redux Toolkit
• HTTP 통신: Axios
• Socket 통신: Stomp.js, Sock.js
• Headless 컴포넌트: Headless UI
• Submit 이벤트 핸들링: React Hook Form
• 아이콘 컴포넌트: React Icons
• 날짜 데이터: Moment.js

External APIs

• 시군구 정보: https://juso.dev/
• 소셜로그인: Github Login

Browser API

• 무한스크롤: Intersection Observer
• 미디어 파일 변환: FileReader
• 인증 토큰 저장/조회: Local Storage
• 실시간 날짜 정보 획득: Date

챌린지

백엔드 개발에 기여하거나 BFF패턴을 적용하고, 렌더링 효율을 측정 및 개선하지는 못했지만, 프로젝트 하나에 적지 않은 도전이 있었다.

• 서버 사이드 렌더링
• 디자인 시스템 적용
• 정적 프로그래밍
• 소켓 통신
• 헤드리스 UI
• 반응형 UI

트러블슈팅

트러블슈팅은 서버사이드 렌더링과 React에서 사용하던 기술과의 충돌이 주를 이루었다. 그 중에서도 Styled Components의 렌더링 문제, window객체 호출 문제 정도였다.

Styled Components의 경우 스타일 데이터를 받아오기 전에 화면이 그려지면서 아주 잠깐 스타일이 적용되지 않은 화면이 그려지는 현상이 있었다. 이는 _document.tsx파일에 getInitialProps 함수를 호출하여, 스타일 정보값이 그려진 이후 최초 렌더링이 실행되도록 조치했다.

window 객체 호출의 경우 localStorage활용을 위한 코드에 포함되었는데, 이는 Axios의 request 인터셉터의 호출에 포함되었다. 서버사이드 렌더링의 경우, 윈도우 객체에 접근하지 못하는 시점과 접근 가능한 시점이 바뀔 수 있으므로, 호출하는 타이밍이 중요했다. 기존 axios.ts 파일에서 주입하던 header를 provider에 주입하는 방식으로 변경하였다.

사실 TypeScript와 Lottie라이브러리 충돌 이슈도 있었지만, 우선순위가 높지 않아 Lottie를 제거하는 것으로 처리해버렸다.

느낀 점

프로젝트 주간 내내 팀원들에게 많이 했던 얘기가 "이 프로젝트로 인해 번아웃이 와서 이후 일정을 소화하지 못하는게 더 큰일이다. 항상 자신을 위한 만큼을 남겨두라."였다. 심적인 번아웃은 아니었지만, 기능 개발을 위해 일정을 쫓았더니 오히려 내가 육체적으로 큰 어려움을 겪었다. 아쉽게도 내가 손을 놓으면, 팀의 실패가 결정되는 상황이었기 때문임을 부정할 수 없다.

내가 함께 일하는 팀원들을 위해 '실패가 개인의 실패가 되게 만들지 않는다'는 것을 모토로 성장해왔던 나에게, 매번 가장 실패에 가까운 위치에 서있을 수 있는지 스스로 묻게 되었다. 물론 실패가 예견되기 이전에 우선순위에 따라 자원이 허락하는 범위를 정해나가겠지만, 수차례 실패를 마주하게 될 것은 분명하다. 분명 두렵다.

하지만 브라이언 트레이시의 말로써 스스로에게 용기를 주고 싶다. 성장하기 위해서 더 많이 시도해라. 성공한다면 그대로 반복하고, 실패한다면 배워서 다시 시도해라.

과정 총 회고

총 회고를 덧붙이려다보니, 이전 이론과정에서의 내 마음이 어땠는지 들춰보게 되었다. 익숙하지 않은 내용을 학습하느라 버거웠지만, 나름 웹 서비스의 전반을 훑어볼 수 있는 시야가 생겼다. 근거를 가지고 문제에 접근하는 방법도 익혔으며, 팀원들을 믿고 의지하는 경험도 수 없이 했다.

과정이 목표로 했던 쿠버네티스 전문가와 나는 거리가 꽤 있다. 물론 쿠버네티스와 관련한 전반의 기술을 경험한 프론트엔드 개발자는 흔하진 않겠지만. 이 과정에서의 교육이 가치가 있으려면 앞으로 나의 삶과 서비스에 부단히 녹여내야할 것이다.

한 편으로, 부족할 수 밖에 없는 영역에 댛한 학습은 나에게 많은 선물이 되었다. 더 솔직해지고, 더 과감해지는 경험이었다. 전문가라고 하기에는 모르는 부분이 너무 많았던 비전공자 개발자에게 네트워크와 최신 기술을 향한 탐험은 더 넓은 세상으로의 발돋움이 될 것이다.

---

마무리

다시 내 속도에 맞춰