2024년 돌아보기

2024년에는 무엇을 했나

기초 체력을 기르기 위해 운동을 했고, 부트캠프에 참여하여 기술 지식을 돌아보고 협업 경험을 쌓았다.

운동

외부 활동을 잘 안 하게 되면서부터 체력이 급격하게 떨어졌다. 이전에도 집에서 하는 맨몸운동 위주로 근력운동을 시도했지만 계속 이어 나가지는 못했다. 핑계를 대자면, 혼자 사는 게 아닌지라 신경이 쓰였달까.

원래는 2월부터 수영을 배워 볼까 했다. 하지만 가까운 공립 수영장이 2월에 공사를 한다고 하는 바람에, 다른 걸 해 보기로 했다.

러닝

2-3월에는 러닝에 발을 담갔다. 집에서 15분 걸리는 곳에 400m짜리 트랙이 있어서 일단 나갔다. ‘런데이’라는 앱에서 제공하는 8주짜리 ‘30분 달리기 도전’ 프로그램에 따라 걷고 달렸다. 3월에 사랑니를 뽑으면서 일주일을 쉬는 바람에 8주차까지 완료하지는 못했지만, 점점 더 오래 달릴 수 있게 되면서 자신감을 얻었다.

수영

새로운 것은 (내가 관심을 가지고 좋아하면) 늘 흥미롭다. 4월부터는 수영을 배우기 시작했다. 가장 가까운 공립 수영장에 저녁 월수금 반으로 등록하고, 곧바로 필요한 물품을 준비했다. 6월까지 기초와 자유형, 배영, 평영을 배웠다. 5월 중순에 도보로 10-15분 걸리는 곳에 공립 수영장이 새로 개관했는데, 그걸 뒤늦게 알아서 7월부터 신축 수영장 새벽 반으로 옮겼다.

이 세상에 쉽게 얻을 수 있는 것은 없다. 7월 초에는 전에 배운 영법을 교정받았고, 9월까지 접영을 배웠다. 교정받을 때부터 느꼈지만, 이번 강사님은 동작이 이상하면 다음으로 잘 안 넘어갔고 다른 솔루션을 주시기도 했다. 덕분에 내 사지와 신경계 사이의 치열한 싸움이 있었고, 해냈다는 성취감도 전보다 더 크게 받았다.

튜토리얼을 끝내고 마주한 세상은 아주 넓다. 10월 중순까지는 영법별로 좀 더 디테일한 동작을 배웠고, 10월 말에는 초급반을 졸업하고 중급반으로 올라갔다. 아직 배울 것이 내 막연한 생각보다 많았다. 여전히 안 되는 동작은 머리로 계속 생각하면서 수행해야 하지만, 하나둘씩 익숙해지고 있다. 그리고 또 새로 무언가를 배우고 있다.

운동은 어땠나

지난 11개월 동안 운동을 꾸준히 하여 기초 체력을 키우고 저체중을 건강하게 탈출했다(먹는 것도 조금 신경 썼다.). 러닝과 수영은 새로운 도전이었고, 더 나은 나를 만들어 냈다는 성취감을 느낄 수 있었다. 땀은 여전히 어색하지만, 물과는 많이 친해졌다. 웨이트 트레이닝, 구기종목 등에는 흥미가 없어서 운동을 별로 안 좋아한다고 생각했던 나에게도 좋아하는 운동이 생겼다.

아쉬운 점도 있다. 러닝은 수영 대신 도전했기에 일시적이었다. 내가 활용한 서비스에는 한번에 30분을 달리는 체력을 만드는 8주짜리 프로그램이 있는데, 나는 아직 30분 동안 쉬지 않고 달려 본 적이 없다. 수영장 휴관일에는 수영을 할 수 없고, 수영을 가는 날도 수영 후 피곤해서 다시 눕게 된다는 문제도 있다.

그래서 수영장 휴관일에 (날씨가 괜찮다면) 러닝을 해 봐야겠다. 체력에 여유가 있다면 아예 수영과 러닝을 병행하는 방법도 생각해 보고 있다. 화·목요일에는 더 일찍 일어나 볼까 싶다.

프로그래머스 웹 풀 사이클 데브코스

프로그래머스 웹 풀 사이클 데브코스에 참여했다. 풀스택이든 프론트엔드든 부트캠프를 진작 겪어 볼걸 싶었다.

왜 참가했나

가장 큰 목적은 협업 경험이었다. 나에게 더 필요한 경험이 있는지를 다른 사람에게 물어봤을 때 공통적으로 돌아오는 대답이 협업이었다. 그래서 팀 프로젝트를 해 보고 싶었다. 부트캠프 과정에 참여하면 강의도 들을 수 있고 협업 기회도 생긴다. 따라서 팀 프로젝트를 해야겠다는 생각이 들었을 때 알아본 과정 중 가까운 날에 모집하는 국비지원 과정에 지원하여 참가했다.

사실 이게 6개월짜리 풀스택 과정이라 기간이 촉박해 보여서 좀 고민했다. 하지만 가장 큰 목적은 협업 경험이었고, 백엔드도 어느 정도 알고 있으면 좋겠다 싶었고, 가까운 날짜에 시작하는 과정이어서 참가하기로 결정했다.

강의

첫 주에는 협업 툴을 소개하고, 이후 백엔드(JS + Express), CS와 프로그래밍 언어, 프론트엔드(TS + React), 오픈소스, 배포 강의를 진행했다. 각 파트 강사님과 함께 원격으로 라이브 세션도 몇 번 열리는데, 취업 준비 팁이나 프로그래머 인성 함양 등의 주제로 진행된다.

강의 5개월은 팀 활동과 병행하면서 풀스택을 배우기에는 물리적으로 부족하다고 느꼈다. 하지만 이론적으로는 알고 있지만 안 해 본 것을 직접 해 볼 수 있는 좋은 기회였다.

1차 팀 활동: 동료 학습

1차 팀은 멘토 없이 수강생으로만 구성되어, 동료 학습 활동을 했다. 주로 강의를 통해 학습한 내용이나, 강의와 관련하여 심화 학습한 것을 공유했다. 동료 학습을 통해서는 내가 생각하지 못했던 부분을 볼 수 있었다.

2차 팀 활동: 기능별로 역할 나누기

2차 팀 활동부터는 팀 프로젝트를 진행했다. 다양한 방법과 역할로 팀 프로젝트를 수행했다.

2차 팀 활동으로는, 기능별로 역할을 나누어서 커뮤니티 게시판을 만들었다. 처음에 주어진 기간이 짧았기 때문에 최소한의 기능으로 만들어야 했다. 노출할 UI나 필요한 API 등을 확인하고 DB 스키마를 설계하는 작업은 회의를 통해 같이 했고, 이후 회원, 게시글, 댓글 각 기능을 맡아서 진행했다. PR이 올라올 때마다 피어 코드 리뷰도 진행했다.

나는 게시글 목록 프론트엔드와 댓글 기능 전체를 맡았다. 이후 프로젝트 기간에 여유가 생겨서 좋아요 기능 백엔드도 만들고, 댓글에도 페이지네이션 기능을 넣었다.

기능별로 역할을 나눈 2차 팀 활동에서는 한 사람이 한 가지 기능을 거의 처음부터 끝까지 만들었다. 2차 팀 활동 후반에 가서는 여러 사람이 서버와 클라이언트로 나눠져서 한 가지 기능을 만들기도 했지만, 설계나 코드 리뷰 외에는 의사소통할 기회가 많지 않았던 것 같다. 멘토가 들어오는 팀 미팅으로 그런 부족한 점이 어느 정도 보완되었다.

3차 팀 활동: 백엔드

이때부터는 역할을 백엔드, 프론트엔드, 채팅 풀스택으로 나눴다. 나는 최종 프로젝트에서는 프론트엔드를 맡고 싶었기에, 백엔드를 먼저 해 보기로 했다. 소셜 로그인이라고도 하는 OAuth를 붙이는 작업을 맡았다. 구글, 네이버, 카카오, 세 곳에서 제공하는 OAuth를 붙여 보기로 했다.

OAuth는 처음이었기 때문에, 먼저 OAuth 통신 흐름을 공부했다. 설명하는 곳마다 다이어그램이 조금씩 달랐기 때문에, 직접 데모 프로그램을 구현해 보면서 이해해 보려고 했다. 서로 다른 관점에서 다이어그램을 그려서 조금씩 달랐던 것 같다.

나는 OAuth 프로바이더 한 곳을(카카오) 우선 구현해 놓고 나서 확장하는 방식으로 진행했다. 문제가 생겼다. 사실 스펙상 문제는 없었다. 하지만 프로바이더마다 인터페이스가 제각각이었다. 나는 차이가 나는 부분을 설정 파일로 빼내어서, 구현을 공통 로직과 설정 파일로 분리하여 해결했다.

설계 단계에서 실수도 있었다. 그건 뒤늦게(최종 팀 활동 초반에) 깨달았다. state 파라미터를 좀 더 적극적으로 활용해야 했다. state 파라미터를 제대로 활용하지 않는 이때의 구현으로는 돌아갈 페이지가 어디인지, 무엇을 하려고(로그인, 연동 추가, 연동 해제 등) 인증하는지 등을 보관할 곳이 없었다.

새로 합류하는 동료가 프로젝트 파악에 어려움이 있는지 파악해서 충분히 도와야 한다는 점을 배웠다. 또, 새 동료가 프로젝트를 금방 파악할 수 있도록 도와야 좀 더 원활한 진행이 가능하겠다는 생각을 했다. 객관적으로 나에게 부족한 부분이며, 개인 프로젝트를 진행할 때는 깨달아 배울 수가 없는 부분이다.

4차(최종) 팀 활동: 프론트엔드

마지막 팀 활동에서는 프론트엔드를 맡았다. 백엔드 담당자가 마이그레이션 작업을 하는 동안, 프론트엔드와 채팅 풀스택 담당자는 3차 팀 활동에서 뒤로 미뤘던 작업을 마치고 각 파트에서 추가하고 싶은 기능을 넣기로 했다.

나는 아직 완성되지 않은 OAuth 프론트엔드 부분을 매듭지었다. 이때 지난 팀 활동에서 설계를 잘못 했다는 것을 알았다. 무엇을 하려고 인증하는지, 처리 이후 어느 페이지로 돌아갈지 등을 보관할 곳이 없었다. 백엔드가 마이그레이션 작업에 들어간 데다가 내가 이번에는 프론트엔드를 맡기로 한지라, 백엔드를 수정하기는 곤란했다. 방법을 모색한 끝에 세션 스토리지를 활용하여 해결했다.

다음으로는 중구난방이었던 버튼과 텍스트 박스를 컴포넌트로 만들었다. 초반에는 협업 자체와 MVP(Minimum Viable Product)가 목표였다. 상호작용 요소를 각자의 방식대로 만들었기 때문에 모양과 구현이 제각각이었다. 버튼은 일관성 있게 모양을 통일하고 공통적으로 사용할 variant, color, size 등을 props로 노출하여 공통 컴포넌트로 만들었다.

기존 텍스트 입력란 중 형태가 가장 복잡한 컴포넌트는 레이블, 텍스트 상자, 동작 버튼, 에러 메시지로 이루어져 있었고, 컴포넌트 과중첩과 prop drilling으로 구조가 복잡했다. 이들 컴포넌트 구조를 파악한 뒤, 공통 컴포넌트 하나를 새로 설계하여 만들었다. 레이블, 동작 버튼, 에러 메시지(유효성 검사 통과)는 관련 prop을 받았을 때만 렌더하도록 작성했다.

이후 모달 컴포넌트를 만들었다. 모달 역시 다른 컴포넌트와 마찬가지로 모양과 구현 방식이 (더) 제각각이었다. 나는 먼저 공통 모달 컴포넌트를 만든 다음, 공통 모달 컴포넌트를 사용하여 alert, confirm 모달 컴포넌트를 만들었다. 모달 컴포넌트는 아래와 같이 사용할 수 있도록, 컴파운드 컴포넌트 패턴으로 만들었다.

<Modal variant="error">
  <Modal.Title>제목</Modal.Title>
  <Modal.Body>본문</Modal.Body>
  <Modal.Footer>
    <Button onClick={() => { /* ... */ }}>확인</Button>
  </Modal.Footer>
</Modal>

풀스택을 담당한 동료와 함께 게시판 텍스트 에디터 도입 작업도 했다. 텍스트 에디터는 직접 만들기에는 현실적으로 어려웠기 때문에, 만들어져 있는 react-quill을 가져와 커스터마이즈했다. 따라서 여기서는 거의 모든 작업을 (외부 라이브러리를 사용하면 거치는) 아래 세 단계로 진행했다.

1. 작업할 내용(유저 동작과 기대하는 결과) 파악
2. 문서 열람 및 해결 방법 고민
3. 생각한 방법대로 문제 해결

이러한 과정을 거쳐서 아래 추가 기능을 구현했다.

• 다크 모드를 지원하기 위해, 원래 인라인 스타일로 들어가던 글자색 서식을 클래스 속성으로 넣기.
• 업로드한 이미지 목록 보여주기. (본문 내용 순회)
• 업로드한 특정 이미지를 삭제할 때 본문에서도 지우기.
• 문단 서식 중 코드 블록을 적용할 때 앞뒤로 서식 없는 빈 줄 넣기.

마지막으로는 일반 게시판을 확장하여 Q&A 게시판을 만들었다. 이때 작업 속도가 빠르다는 말을 여러 동료에게 들을 수 있었다. 당시 게시판 카테고리를 나누고 몇 가지 특수 게시판을 만들기로 했었는데, 프론트엔드 첫 작업자가 나여서 카테고리 분리 표시 작업을 먼저 진행했다. 카테고리별 메타데이터(라우트 경로, 본 이름, 헤더 표시 이름, 설명 등)를 DB에 저장해 두는 구조가 아니었기 때문에, 프론트엔드 쪽에 카테고리 메타데이터를 정의해 두었다.

Q&A 게시판을 위해 기존 구조를 확장하려니, 글 내용 페이지에서 복잡한 prop drilling이 발생하게 생겼다. 따라서 게시글 열람 정보를 전역 상태로 추출하고, Q&A 게시판용 추가 필드를 전역 상태에 반영했다. 다만 프로젝트를 마치고 보름쯤 뒤에 돌아봤을 때는, 서비스 전체가 아니라 글 내용 페이지에서만 쓰는 정보니까 전역 상태가 아니라 Context Hook으로 해결해도 됐겠다는 생각이 들었다.

마지막 프로젝트 초반에 내가 일정 예상을 어려워하는 모습을 보였는데, 이때 멘토에게 값진 조언을 받을 수 있었다. 예상 소요일 산정은 신입으로 팀에 합류하고 반드시 겪는 업무이니, 미리 해 보면 좋겠다는 내용이었다. 업무에 필요한 예상 일정을 산정하고, 그 업무를 진행해 보고, 일정이 잘 맞았는지와 왜 그렇게 됐는지를 돌아보는 과정의 반복이다. 한 사이클을 돌아보면서 일정이 왜 잘/안 맞았는지 원인과 상황을 분석하면, 다음 일정을 산정할 때 참고할 좋은 자료로 남는다. 이러한 연습은 더 정확한 일정을 계획하는 역랑을 강화한다.

2025년에는 무엇을 할까

일단 일을 하고 싶다. 포트폴리오를 정리하고, 이력서 틀을 만들고, 여러 곳에 입사지원을 하고, 코딩 테스트와 면접을 준비해야 하겠다.

사소해 보이지만 더 나은 나를 만들 목표도 있다. 좀 더 먼 거리를 수영해 보고, 잠깐 멈췄던 러닝도 이어서 해 보고, 시간을 내서 독서도 해 보고 싶다. 안 쓰는 직물을 활용하여 손바느질로 간단한 생활용품을 만들어 보고도 싶다.

개인적인 일을 처리하다 보니 벌써 2025년 첫째 달이 훅 지나갔다. 한정된 시간을 더 체계적으로 써야 하겠다.