[회고] 다이나믹했던 5주간의 인턴 생활

minami·2022년 3월 30일

WeCode 위코드 인턴 회고

memoir

목록 보기

3/5

amongArts

작가의 이력 및 작품 관리와 일반인에게 진입 장벽이 낮은 온라인 미술 전시 서비스, amongArts의 새 기능 구현 및 기존 코드 리팩토링

기간: 2022. 01. 24 - 2022. 02. 24 (5주)
인원: 프론트엔드 2명
협업 방식
- SPRINT
  - 단위: 1주
  - 미팅
    1. 플래닝 미팅 (스프린트 단위 시작)
    2. 데일리 스탠드업 미팅 (매일 오전)
    3. 회고 미팅 (스프린트 단위 끝)
협업 툴
- Figma
  - 새 기능 구현 시 페이지 레이아웃 작성 및 공유
- 노션
  - 매일 작업 일지 작성
  - 칸반 보드 활용
    1. Backlog
    2. This Week
    3. In Progress
    4. Done
    5. Meetings
- 슬랙 & 마이크로소프트 팀즈(사내 메신저)
  - 커뮤니케이션 툴
- git & github
  - 버전 관리 툴

tl; dr

📌 처음의 내 목표

새로운 기능 구현
- 작가 회원의 작품 등록 페이지
기존 코드 리팩토링
- Styled-Components를 도입해서 기존 UI 라이브러리를 걷어내는 쪽으로 코드 및 UI 개선

😎 달성한 내 목표

새로운 기능 구현
- 작가 회원의 작품 등록 페이지
- 갤러리(미술관 및 전시회장) 상세 페이지
기존 코드 리팩토링
- Styled-Components를 도입해서 기존 UI 라이브러리를 걷어내는 쪽으로 코드 및 UI 개선
  - 로그인, 회원가입 페이지 UI 개선 완료
- 사용하지 않는 코드와 불필요한 코드 제거
- pages 폴더 구조 개선 작업
작업 내역 문서화

짤막한 후기

목표 초과달성을 또 해내고야 말았다. 열심히 할 생각이 처음에 없었어도 결국 열심히 해버리고 마는 나, 앞으로도 열심히 해야지.

1. 이번 인턴십의 목표

살아남자. 어디 한 번 살아남아 보자. 살아남는 사람이 이기는 거다.

이미 한 번 7개월 가량을 개발자로서 일해보았지만 다시 개발자 인턴을 하게 되어서 정말 감회가 새로웠다. 지원했던 1지망 회사들 중에서는 가장 내 마음속 우선순위가 낮았던 곳이었어서 걱정이 많이 되기도 했는데 어쨌든 오랜만에 회사에 출근하는 기분이 나쁘지 않았기 때문에 첫 출근일에는 굉장히 설레서 잠도 많이 못 자고 갔었더랬다. 위워크에 입주한 기업이었기 때문에 시설도 깔끔하고 좋았는데 건물 입구가 좀 특이하기도 했고, 굳이 비교하자면 시설은 선릉점이 좀 더 좋았다.

어쨌든 그렇게 출근해서 기술 스택 및 서비스에 대한 설명을 대표님께 직접 듣고 대망의 코드를 바로 그 날 받아서 확인할 수 있었다. 그리고 코드 분석을 시작하는데 코로나 덕분에(?) 마스크를 쓰고 있어서 그나마 다행이라고 생각할 수 있을 정도로 내 표정은 아마 급속도로 안 좋아졌을 거라고 확신한다. 리액트 애플리케이션 디렉토리 구조 자체도 생전 처음 보는 구조였고, 클래스형을 쓴 컴포넌트와 함수형을 쓴 컴포넌트가 공존했으며, 사용된 UI 라이브러리도 전 세계적으로 사용자수가 많지 않고 관리 및 업데이트가 잘 되고 있지 않은 라이브러리였다. 게다가 Java와 Spring Boot에게 굿바이 하고 나서는 본 적 없던 MVC패턴이 React에 적용되어 있었다!

MVC패턴이 진짜 왜 거기서 나와...? 한 마디로 내 수준에서는 어디서부터 어떻게 손을 대야 할지 알 수 없는 총체적난국 상태로 보였다. 그래도 어찌저찌 공식 문서를 찾아보고 코드도 일일이 하나씩 들어가서 다 살펴보고 전임자들이 정리해둔 문서도 찾아보면서 대강의 코드를 이해해보려고 정말 노력했던 것 같다.

정말 첫 날 내가 받은 충격은 잊을 수가 없을 것 같다. 지금도 생각하면 아찔하다. 그러나 다행히도 이튿날이 바로 매주 한 번씩 있는 위코드로의 출근일이었기에 위코드로 가서 멘토님과 상의를 할 수 있었다. ~~그때 만났던 동기들이랑 멘토들 전부 내 얼굴이 심각하게 안 좋아보였다고 했는데 그렇게 티가 많이 났나ㅎ...~~ 아무튼 어떤 방향으로 해보면 좋을지 논의를 하고, 같이 인턴을 하게 된 팀원과도 의논해보면서 앞으로의 진행 방향을 잡을 수 있었던 것 같다.

목표는 두 가지로 잡았다. 새로운 기능 구현과 리팩토링이다. 요구사항으로 받은 새 기능 구현은 그리 어렵지 않은 것 같아서 최대한 빨리 끝내고 기존의 UI와 코드를 개선하는 쪽으로 리팩토링을 해보기로 한 것이다. 그리고 비록 팀원이 나 포함 내 동기까지 두 명밖에 없지만 지금껏 팀 프로젝트를 하면서 계속 해왔던 1주 단위 스프린트를 그대로 도임해서 이어가고, 매일 진행 상황을 서로 이야기하고 잊지 않도록 기록도 잘해두기로 했다. 그렇게 목표를 세우고 나니 한결 마음이 가벼워졌던 것 같다. 다음날 출근해서 대표님과 다같이 상의를 하는데 대표님께서도 다행히 오케이를 해주셨다. 직급 상관없이 의견을 제시하는 것이 자유롭고 대표님도 편하게 해주시니까 너무 좋았다. 이게 바로 스타트업인가...!

2. 생각보다 빠른 목표 달성 a.k.a. 폭주기관차

이렇게까지 열심히 할 생각은 없었는데 나도 모르게 그만 진심으로 열심히 해버리고 말았다!

일단 목표를 명확하게 하고 나니 앞으로 쭉쭉 치고 나가는 일밖에 없었다. 사실 앞서 처음에 너무 막막하게 느껴졌다고 하긴 했지만, 나는 목표 지향적인 사람이고 습득력이나 코드 이해 능력도 좋다고 생각하기 때문에 일단 제대로 된 목표 설정이 이루어지면 잘 해낼 거라고 스스로를 믿었다. 작년에 인턴을 할 때에도 당장 다음주부터 개발팀의 프론트엔드 개발자 포지션으로 옮겨가서 내가 해본 적도 없는 React로 기존 서비스에 새 기능을 구현하라는 이야기를 들은 적이 있었다. 그때도 항상 나는 프론트엔드 개발에 관심이 많고 프론트엔드 개발자로 일하고 싶어했음에도 막상 당장 다음주부터 하라고 하니까 당황스럽기도 하고 걱정이 앞섰었다. 그.러.나. 언제나 그렇듯이 나는 금세 적응해서 잘 해냈다. 물론 동료의 도움도 컸지만 결국 나 혼자서 해내야 하는 일이었는데 나는 충분히 잘해냈다고 생각한다.

그러니까 이번에도 목표를 정한 후, 레이아웃 배치부터 시작해서 화면 디자인과 기능 구현까지 모두 내가 알아서 해야 하는 상황이었음에도 설연휴를 제외하면 기본적인 기능 구현을 단 5일 만에 끝내고 말았던 것이다.

내 동기이자 팀원이 대단하다며 왜 이렇게 빨리 했냐고 원망 섞인 칭찬을 해주는 것을 들으며 뿌듯하기도 했다. 주에 한 번씩 전 직원이 모여서 하는 회의 때에 내 작업물을 공개했을 때에는 대표님도 깜짝 놀라시면서 칭찬해주셨다. 고래도 춤추게 하는 칭찬을 계속 들으니까 나는 더 신났던 것 같다. 대표님께서 추가적인 요구사항으로 폼 양식의 유효성 검사라던지 더블 클릭으로 인한 양식 중복 제출 막기, 입력 필드 몇 가지 더 추가하기, 파일 업로드 프로그레스 바 추가 같은 것들을 말씀하셨을 때에도 그 정도야 금방 뚝딱이라는 생각으로 신나서 할 수 있었다.

폼 양식 입력값의 유효성 검사와 더블 클릭으로 인한 양식 중복 제출 막기 같은 경우에는 formik에서 제공하는 기능과 yup을 이용하면 금방 적용할 수 있는 것이었다. 그리고 프로그레스 바는 대표님께서도 Mui같은 라이브러리를 사용하면 편하게 할 수 있을 거라고 하셔서 Mui를 설치해서 사용했다. 입력값 유효성 검사 때문에 formik과 yup의 공식문서를 찾아보느라 시간이 좀 많이 걸리긴 했지만 모두 하루 만에 다 끝낼 수 있을 만큼 어렵지는 않은 일들이었다.

그렇게 폭주기관차처럼 달리고 달려서 test와 stage 브랜치에서도 각각 빌드 및 테스트를 완료한 후에는 곧바로 운영 서버에 배포하는 것도 해볼 수 있었다! 이때 AWS상에서 빌드 실패로 인한 삽질로 반나절을 날리긴 했지만 다행히 해결했다. 정말 뿌듯한 ~~폭주기관차~~ 인턴 생활이었다. 아이, 신나😎

이렇게 폭주기관차처럼 달린 이유는 바로 리팩토링에 힘을 쏟아보고 싶었기 때문이다. 새로운 기능을 구현해서 완성하고 배포까지 하는 것도 물론 아주 재미있고 기쁜 일이지만 리팩토링을 하는 것도 정말 소중한 경험이다. 위코드 멘토님들 중에서는 오히려 리팩토링이 더 좋은 경험이 되기도 했다는 말도 하셨는데 어느 정도 동의하는 바이다. 이미 존재하는 코드를 더 좋은 방향으로 고친다는 건 정말 쉬운 일이 아니거니와 그 과정에서 정말 많은 공부가 된다. 그리고 마침 내 앞에는 리팩토링할 거리가 한가득인 프로젝트가 있으니 도전정신에 불이 붙었다.

3. 리팩토링 #가보자고

그렇게 패기 넘치게 도전한 리팩토링이었건만 막상 시작하고 보니 확실히 리팩토링이 새 기능을 구현하는 것보다 더 힘든 일이었다. 어디까지 리팩토링을 진행할지 범위를 정하는 일도 쉽지 않았다. 아무래도 프로젝트에 사용된 라이브러리 자체가 좀 난해하기도 했고, 이해했다고 생각하고 넘어간 코드도 다시 보니 또 새롭게 보이기도 했다. 그래서 프로젝트 코드 전체를 이번에 처음 본다, 우리는 초면이다! 라고 생각하고 다시 찬찬히 들여다보았다. 그랬더니 내가 할 수 있는 부분이 어느 부분이고, 할 수 없는 부분이 어느 부분인지 조금씩 감이 잡히기 시작했다.

일단 전체적으로 파일 이름에 붉은색으로 문제가 있다고 표시된 파일들을 위주로 보면서 문제를 먼저 파악했다. 보아하니 파일마다 TypeScript가 적용되어 있었는데 정작 프로젝트 파일 전체는 그냥 .js로 끝나는 JavaScript파일이었다. 그렇다고 전부 파일명을 .ts 또는 .tsx로 고쳐서 하자니 모든 파일의 props와 state 및 함수 등등에 제대로 타입스크립트가 적용되어 있지도 않았다. 심지어 타입이 지정되어 있지 않은 채로 그냥 타입 이름만 선언된 것들도 많았다. 그래서 타입스크립트를 모든 파일에 제대로 적용시키는 것보다는 사용되지 않는 타입들을 모두 걷어내고 일반 .js파일 그대로 놔두는 것이 나을 것이라는 판단하에 우선 모든 파일을 하나씩 보면서 타입스크립트를 걷어내는 작업을 했다.

그 다음으로는 파일명의 형식을 통일했다. 파일명의 형식이 처음 봤을 때도 좀 이상하다고 생각되었는데, 당연히 리액트로 만들어진 프로젝트인데 굳이 파일명에 전부 React가 들어가 있어서 파일 시스템을 보면 조금 지저분해보일 정도였다. 그래서 파일명에서 React를 제거해서 파일명부터 직관적이고 가독성 좋게 만들었다.

그리고 코드 리팩토링의 범위는 우선 pages 폴더로 한정했다. pages 폴더 안에도 이미 구현되어 있는 페이지들 + 내가 구현한 기능이 있는 페이지까지 꽤 많은 파일들이 있었다. 그중에서도 가장 먼저 리팩토링을 시도한 부분은 아무래도 내가 제일 잘 아는 내가 구현한 기능이 있는 페이지 파일이었다. 나름대로는 기능 구현도 다 되어서 운영 서버에 배포까지 해서 괜찮을 거라고 생각할 수도 있지만, 분명 고쳐야 할 점이 있을 것이었다. 그래서 함수명이나 변수명부터 시작해서 함수 안에 구현된 로직도 고칠 만한 부분들이 있는지 다시 살펴보았다. 그러면서 고칠 수 있는 부분들은 조금씩 고쳤다.

리팩토링을 한 번 시작하고 나니 다른 파일들을 보는 것도 재미있었고 점점 속도가 붙었던 것 같다. 처음에는 내가 감히 이렇게 건드려도 될까? 하는 생각도 없잖아 있었는데 하다 보니 변수명과 함수명이 이대로 괜찮은지, 로직도 다른 사람이 봤을 때 이해하기 쉽게 되어 있는지, import문의 순서는 잘 맞추어져 있는지, Styled-Component의 스타일 순서는 잘 맞추어져 있는지 등등 정말 진지하게 고민을 했었다. 그러면서 평소에 컴포넌트를 작성할 때부터 코드 컨벤션을 지키는 것뿐만이 아니라 리팩토링을 하면서 고민한 모든 포인트들을 최대한 잘 지켜서 하는 게 중요하다는 것을 몸소 깨닫게 된 것 같다.

4. 문서화는 즐거워^ㅁ^

가장 재미없는 작업이지만 가장 중요한 작업

인턴 기간 동안 해낸 일을 마지막으로 문서화를 해야 했다. 어찌 보면 가장 재미없는 작업이 바로 문서화일 것이다. 코드를 치는 건 정말 시간 가는 줄 모르고 할 수 있는데 문서화는 빠진 내용 없이 적되, 누가 봐도 이해할 수 있을 만큼 명확하고 간결하고 깔끔해야 한다. 그런 점에서 보면 리팩토링 작업으로 코드를 다듬는 것과 비슷하다.

나는 문서화 작업도 인턴십 마지막 주가 아니라, 그 이전 주에 이미 시작했다. 아무래도 가장 기억이 생생할 때 내가 구현한 사항에 대해 적어둬야 빠뜨리는 것 없이 잘 할 수 있다고 생각했기 때문이다. 그래서 거의 리팩토링을 시작함과 동시에 문서화도 시작했던 것 같다. 다행히 전임자들이 이미 만들어둔 노션 페이지가 있어서 거기에 이어 작성하면 되었으므로 따로 문서의 양식 같은 것을 신경 쓸 필요는 없었다.

문서화를 할 때 특히 신경을 썼던 부분은 내가 만든 공통 컴포넌트에 대한 설명이었다. 예를 들어, 반드시 전달해줘야 하는 props가 있는 공통 컴포넌트가 있었는데 그런 경우에는 어떤 props를 전달해줘야 하고, 해당 props가 어떤 역할을 하는지 등 설명을 자세히 작성했다.

그외에는 내가 구현한 사항에 대해서도 당연히 작성하였고, 리팩토링 완료 후에는 리팩토링한 사항에 대해서도 작성했다. 그리고 리팩토링을 하면서 발견한 보완할 만한 사항에 대해서도 후임자에게 알리기 위해 작성을 해두었다. 내가 발견하긴 했지만, 인턴십 기간이 거의 끝나기 직전이다 보니 시간 관계상 내가 직접 할 수 없을 만큼 시간이 좀 걸리는 작업들에 대해 작성한 것이다. 그런 것들을 미리 작성해두면 후임자가 왔을 때에 프로젝트를 파악하는 시간도 좀 더 단축될 것 같았다. 정말 도움이 되었을지는 모르겠지만 아마 조금은 되지 않았을까 생각한다. ~~도움... 되었겠지...?~~

5. 후기

5주라는 기간 내에 설 연휴가 있었기 때문에 사실상 5주를 모두 인턴십에 쏟아부은 것은 아니다. 그렇지만 이 기간 동안 나름대로 내가 계획한 것을 모두 이루었고, 어쩌면 그보다 더 많은 것을 한 것 같기도 해서 인턴이 종료되었을 때에는 뿌듯한 마음이 컸다. 특히나 인턴십을 시작할 때는 프로젝트 자체도 막막했고 팀원과 소통이 잘 되지 않는 것 같다는 생각에 더 힘들기도 했다. 소통 부분은 노션과 슬랙을 활용하기도 하고 내가 많이 나서면서 어느 정도 해결이 되었고, 프로젝트도 결국은 순조롭게 잘 진행이 되었다.

물론 나 혼자 잘해서 이루어진 일은 아니었다. 대표님께서도 항상 하나라도 더 알려주려고 하시면서 격려를 해주셨고, 함께 했던 팀원도 맡은 부분을 다하려고 노력하고 서로 응원해주었다. 그래서 5주라는 짧은 시간 안에 좋은 결과를 낼 수 있었던 것 같다. 앞으로 다시 실무를 하게 되더라도 이번 인턴십의 경험을 바탕으로 잘 해낼 수 있겠지. 앞으로도 나 자신 화이팅야!