사회 복무 요원 2021년 회고 - 1일 1커밋 성공 & 앞으로의 계획

2021-회고록

 

2021년은 나의 인생에서 웹 개발자라는 꿈을 가지게 된 한 해였다. 나는 작년에 3학년 1학기까지 학교를 다니다가 2020년 7월부터 사회복무요원으로 근무를 하기 시작했다. 딱히 어떤 분야로 공부할지도 못 정한 상태였기 때문에 막연하게 알고리즘 공부만 하고 있었다. 근무지에서 웹 에디터를 이용해서 알고리즘 문제를 푸는데 문득 신기했다. 예전에만 해도 코딩을 하려고 하면 IDE를 설치해서 해야 했는데 요즘에는 별다른 설치 없이 웹에서 바로 코딩이 가능하고, 노션 같은 문서 작업도 웹에서 가능하다. 나는 이때부터 웹 개발에 관심을 가지게 되었다. 더 알아보니 디자인이나, 영상편집, 게임, 화상 회의 같은 것들이 웹에서 바로 가능하다는 것이다. 별다른 소프트웨어나, 플러그인 없이 이런 기능들을 바로 이용할 수 있다는 점이 너무 마음에 들어서, 이때부터 나는 웹 개발자를 하겠다고 결심을 하게 되었다. 결심을 한 날짜가 2020년 12월 23일쯤 이였는데, 그때부터 지금까지 1일 1 커밋을 진행했다. 그 과정에서 공부를 해온 과정과 공부를 하면서 부족했던 점, 앞으로의 계획을 회고해보려 한다.

 

1일1커밋 자랑

 

웹 개발 첫 공부

웹 개발을 이제 막 시작하신 분들은 생활코딩님 유튜브를 한 번씩은 봤을 것이다. 나도 당연히(?) 생활코딩님의 유튜브로 HTML, CSS, Javascript를 입문했다. 생활코딩님의 강의는 기초적인 내용을 다루는데, 처음 시작하시는 분들한테는 정말 유익한 강의인 거 같다. 강의 시간도 길지 않고 시각적인 자료도 너무 좋아서 금방 금방 진도를 뺄 수 있다는 점이 장점이다. 하지만 기초적인 내용만으로는 혼자서 개발을 할 수 없기 때문에, 제로초님의 네이버 클론 코딩, 노마드코더님의 강의도 같이 보면서 공부했다. 개발을 처음 시작하시는 분들한테는 이런 클론 코딩 강의를 정말 강추해드리고 싶다(!!). 그 이유는 문법 공부만 해서는 웹을 혼자 만들기에는 거의 불가능하다. 책이나 강의를 통해 배운 문법이 실제로는 어떤 식으로 적용이 되는지를 알아야 하는데, 그럴 때 가장 좋은 게 클론 코딩 강의를 보면서 따라 하는 것이다.  그렇게 클론 코딩을 해보면 현재 돌아가는 웹이 전체적으로 어떤 구조를 가지게 되는지 간단하게 알 수 있게 된다.

 

 

강의 없이 해보는 첫 프로젝트 마켓 컬리 클론 코딩

어느 정도 기초 문법을 익혔고, 강의를 통해서 클론 코딩도 해보니 이제는 나 스스로 한번 웹을 만들어 보고 싶었다. 하지만 혼자서 프론트엔드, 백앤드 이 모든 걸 하기에는 무리가 있을 거 같아서, 나처럼 이제 막 공부를 시작한 개발자 지망생(?)분들을 구해서 같이 하려고 마음을 먹었다. 그래서 학교 커뮤니티인 에브리타임 앱에다가 같이 프로젝트할 분들을 구한다는 글을 올렸다.

 

애브리타임 모집 글

 

글을 올리니 댓글과 쪽지가 은근(?) 많이 왔다. 그렇게 해서 나 포함 총 5명이서 프로젝트를 진행하게 되었다. 다들 웹 개발에 막 입문하신 분들이고, 어떤 식으로 해야 할지 잘 몰라서 아이디어를 주고받다가 디자이너도 없는 상황이고 코딩에만 집중을 하기 위해서 클론 코딩을 진행하기로 했다. 어떤 사이트를 클론 코딩할지도 의견이 많이 나왔는데, 쇼핑몰 의견이 가장 많이 나왔고, 쿠팡이나, 아마존처럼 카테고리가 여러 개 있는 곳은 시간상 힘들 거 같아서 카테고리가 반찬 하나로 정해진 마켓 컬리를 하기로 했다. 

 

기술 스택으로는 프론트엔드는 HTML, CSS, Javascript, 백앤드는 Python, Django, SqlLite를 사용했다. 그렇게 해서 12주에 걸쳐서 웹을 완성하였고, AWS에 배포까지 성공했다.  지금 코드를 보면 정말 엉망이고 이걸 누구에게 보여줄 수도 없을 정도로 부족하지만, 그 당시에는 엄청 자랑하고 싶었고 우리끼리도 너무 좋았다. (이때의 좋은 추억 때문에 지금까지 계속 재밌게 공부를 할 수 있는 원동력이 되는 것 같다)

 

개발하면서 기술 적으로 힘든 점도 너무 많았었다. 당장 회원가입 페이지부터 아이디, 비밀번호 유효성 검사, 카카오 주소 검색 API, 아이디 중복확인, 회원가입 기능 너무 많았었다. 직접 개발을 하기 전에는 보이지 않았던 것들이 직접 개발을 해보니 중요한 기능들이 엄청 많다는 것을 느꼈다. 처음에는 너무 어렵게만 느껴지고 막막했지만, 팀원들과 같이 구글링도 열심히 해보고 삽질(?)도 많이 해보니 조금씩 결과물이 보이기 시작했다. 처음에는 오래 걸리던 작업들도 시간이 지날수록 능숙해졌고, 상품 정보 모달 창, 상품 리스트 그리드 카드, 이미지 슬라이더 등등 하나하나 팀원들이랑 같이 해결했다. 지금 생각해보면 팀원들이 항시 디스코드에 접속해 있었고, 회의가 필요하면 시간 불문하고 바로 회의를 했었기 때문에 이 모든 게 순탄하게 진행되었던 거 같다.

 

소스코드 관리는 깃허브를 이용하였고, 매주 회의 내용을 리드미에 같이 올렸었다. 이 당시에는 Git Flow, Github Flow, Pull-Request 같은 기능들을 몰랐어서 각자 이름으로 레포를 만들어서 하는 식으로 했었다. (이때 branch와 pr의 개념을 알고 있었더라면 엄청 편했을 텐데 ㅠㅠ)  깃허브 리드미는 아래 사진과 같이 정리했었다!

 

깃허브

 

React? Vue? Angular? 너넨 뭐야? 

이제 어느 정도 HTML, CSS, Javascript에 익숙해졌고, 프론트엔드 생태계에 대해서 알아가던 도중, React, Vue, Angular라는 단어가 많이 보이기 시작했다. 그래서 알아보니 프론트엔드 개발을 좀 더 쉽게 할 수 있도록 도와주는 프레임워크, 라이브러리라고 한다. 더 쉽게 개발을 할 수 있다는 말에 관심을 가지게 되었고, 그중 React가 FaceBook에서 개발을 하였고, 페이스북, 인스타, 노션, 넷플릭스, 티스토리 등등 많은 사이트에서 사용된다는 것을 알았다. 그리고 자료도 엄청 많기 때문에 독학으로 공부하는 입장에서 매력을 많이 느꼈다.

 

React를 공부하기로 마음먹고, 인프런에 있는 무료 React 강의와, velopert 님의 리액트를 다루는 기술책으로 공부를 시작했다. 처음 React를 접했을 때는 상태 관리, 컴포넌트, jsx, hooks, 리 랜더링 같은 생소한 단어들이 많아서 익숙해지는데 많이 어려웠지만 책과 인강에 나와있는 예제들을 계속 따라 해 보니 어느새 많이 익숙해져 있었다. 또한 리액트는 html, css, javascript를 할 줄 알면 코드를 짜는데 크게 어려움이 없었다. 

 

 

React를 이용한 첫 팀 프로젝트 (Albalog)

React를 한 달 정도 공부해보니 또 몸속에서 프로젝트를 하고 싶단 기운이 마구 올라오고 있었다. 그런데 때마침 유튜브에 개발자의 품격이라는 채널에서 개발자의 품격 2기에 참여할 분들을 구하고 있었다. 개발자의 품격 2기를 간단하게 설명하면 유튜버님께서 멤버 20명을 모집하신 뒤 5명씩 4팀으로 팀원을 매칭 시켜주신다. 그럼 그 팀원끼리 아이디어를 선정한 뒤 매주 발표를 하면서 3개월간 개발을 하는 프로그램이다. 자세한 내용은 다음 포스팅에 작성하였다!

 

개발자의 품격 2기 후기 (지원 ~ 합격)

 

다시 돌아와서, 우리 팀은 알바 관리 서비스를 개발하기로 하였고, 3개월간 진행하였다. 이번 프로젝트는 나의 첫 React 프로젝트였고, 배운 점이 굉장히 많았다. 책에서 공부했을 때는 왜 컴포넌트를 저렇게 나누지?? 그냥 하나에 작성하면 코드가 길어지니깐 나누는 건가?? useCallback과 useMemo는 함수와 연산을 재활용한다는데, 어떤 상황에 재활용을 하는 거지? custom hooks는 또 뭐지?? 로직을 왜 분리하는 거지??  Redux는 어떤 상황에서 쓰는 게 좋은지? API 콜은 Redux에서 하는 게 좋은가? 하는 고민들이 많았는데, 프로젝트를 진행하면서 많이 해결이 되었다. 확실히 글로 배우는 것보다 직접 경험과, 오류들을 접해보는 게 더 와닿는 거 같다.  

 

Albalog 프로젝트가 완료가 되었는데, 개발자의 품격 유튜버님께서 우리 프로젝트를 마음에 들어 하셨고, 유튜버님 아는 지인분이 알바 관련 회사를 운영하신다고 하셔서 그 회사에 가서 조언을 얻을 수 있는 기회를 주셨다. 회사에 가서 우리 프로젝트를 발표를 하였고 현업 개발자분들께서 질문도 잘 받아주셨고,  우리 코드를 보면서 많은 조언들을 해주셨다. 

 

깃허브 코드

GitHub - AlbalogTeam/AlbalogClient: 자영업 사장님들을 위한 매장 관리 서비스 🔥

 

 

채팅 커뮤니티

Albalog 프로젝트까지 잘 마쳤고, 개발에 대한 흥미는 더욱 커졌다. 최근 프론트엔드에서 핫한 Typescript, Styled-Components 도 공부해보고 싶고, 백앤드도 어떤 식으로 동작되는지 알고 싶어졌다. 그리고 실시간 채팅은 어떤 식으로 되는지도 너무 궁금했다. 그래서 이 궁금증을 모두 해결하기 위해 프로젝트를 진행하기로 하였다. 이번에는 혼자서 프론트엔드, 백앤드를 전부 해보고 싶어서 팀 프로젝트보다는 개인 프로젝트로 해보기로 했다.

 

Typescript는 드림 코딩 엘리님의 강의를 보았고, 백앤드 Nodejs, express, mongoDB는 인프런에 John Ann님의 강의를 보면서 공부하였다.  어느 정도 기능 구현은 할 수 있는 단계라서 이번 프로젝트에서는 조금 더 깔끔하게 코드를 짜도록 노력하였다. 좋은 코드는 어떤 식으로 작성하는지도 궁금해서 velopert님의 velog 프로젝트를 많이 참고했다. 최대한 재활용이 가능한 컴포넌트와 hooks를 만들려고 했고, redux도 redux-toolkit을 이용해서 조금 더 깔끔한 상태 관리를 하려고 노력하였다. 

 

socket.io를 이용해서 채팅방을 구현하였는데, 첫 socket 연결부터 많이 막혔었다. 공식문서를 많이 참고했었는데, 문서가 영어로 작성되어 있어서 해석도 하면서 내 프로젝트에 적용하느라 조금 힘들었었다.. (역시 개발자는 영어를 잘해야 하는데 ㅠㅠ)

 

2개월이라는 시간 동안 매일 개발을 하면서 완성을 하였는데, 채팅방 구현을 딱 성공했을 때 그 쾌감은 잊지 못하겠다. 내가 천재 개발자라도 된 거 같은 느낌이 들었다.(ㅋㅋㅋ) 이 채팅 커뮤니티 프로젝트로 인해서 백앤드에 지식도 어느 정도 생겨서 앞으로의 팀 프로젝트에서 백앤드 분들과 커뮤니케이션할 때 도움이 많이 될 거 같다.

 

깃허브 코드

GitHub - ksmfou98/cafe: 카페 커뮤니티 💁‍♀️🙋🏼

 

 

WebRTC 화상 회의 프로젝트 (untact-operation-command)

실시간 채팅을 구현하게 되니 나는 실시간 화상 회의에도 관심을 가지게 되었다. 대표적인 화상 플랫폼에는 zoom, google meet, 게더 타운, discord 등이 있는데, 여기서 zoom을 제외하고는 모두 웹에서 화상 통화가 가능하다. zoom처럼 소프트웨어를 설치 후 화상 회의를 하는 것은 그리 놀랍지 않았었는데, 아무 플러그인이나 소프트웨어 설치 없이 웹 브라우저만 있으면 바로 화상 통화가 가능하다는 부분이 너무너무 너무 신기했다. 그래서 나는 꼭 이 화상 통화 기능을 구현해보기로 하였다. 

 

웹 화상 기능 키워드로 검색해보니 WebRTC 기술이라는 키워드를 얻게 되었고, WebRTC에 대해서 많이 조사를 해보고 공부를 했다. 그때 딱 마침 노마드 코더님께서 WebRTC 1:1 P2P 연결 강의를 올려주셨고 그 강의를 바로 보게 되었다. 내 공부 스타일이 기초만 공부한 뒤 바로 프로젝트에 적용해보면서 공부하는 것이라서 강의 수강을 하자마자 바로 프로젝트를 하기로 하였다.

 

프로젝트의 주제는 '군인들을 위한 화상통화 플랫폼'이다. 군인이라는 키워드를 잡은 이유는 이때 당시에 군인들만 참여할 수 있는 해커톤이 국방 오픈 아카데미에서 열리게 되었는데, 나는 사회복무요원이지만 군인 신분이기 때문에 당연히 참여가 가능할 줄 알았다. 그렇게 아이디어를 선정후 신청을 하였지만, 사회복무요원은 신청이 불가능하다고 한다.. ㅠ 어쩔 수 없이 그냥 대학교 동기랑 같이 진행하는 프로젝트로 하게 되었지만, 아이디어를 정한 김에 그냥 그대로 가져가기로 하였다.

 

나는 WebRTC로 화상통화, 채팅 기능을 담당하기로 하였고, 내 친구는 일정관리, 친구 목록 쪽을 담당하기로 하였다. 우리는 1:1 화상회의가 아닌, 1:N으로 화상회의가 가능하게 할 거라 1:N이 가능한 sfu서버를 구축해서 진행하였다. 여러 WebRTC 오픈소스 코드들을 참고하였고, 용어 개념을 잡는대만 엄청 오래 걸렸었다. peer to peer, sfu, ice, candidate, peerconnection, stun, turn, 등등 이 용어들을 노트에 정말 열심히 적어가면서 공부했었다.

 

그렇게 총 2달에 걸쳐서 프로젝트를 완성을 하였다. 이 때는 정말 근무지에서 일하면서, 밥 먹으면서 계속 머릿속으로 어떤 식으로 구현할지 코드를 어떻게 짜야할지 계속 생각을 했었던 거 같다. 이 WebRTC 프로젝트로 인해서 WebRTC에 대한 공부도 많이 했지만, 앞으로 내가 모르는 기술을 개발해야 될 때도 두려움보다는 자신감을 가지고 차근차근 개발을 할 수 있게 된 거 같다.!

 

깃허브 코드

GitHub - ksmfou98/untact-operation-command: 화상 채팅 플랫폼 WebRTC(1:N SFU) 💻

 

 

대학생 IT 연합동아리 YAPP (도토리함)

WebRTC 프로젝트를 진행하던 도중 대학교 선배한테 동아리 YAPP 홍보 카톡이 왔다. YAPP 동아리는 기획자, 디자이너, 개발자가 모여서 프로젝트를 진행하고, 프로젝트 진행과정에서 기획 캠프, 디자인캠프, 개발 캠프 이렇게 총 3번의 행사가 있다고 한다. 나는 그동안 개발자들끼리 기획부터 디자인, 개발까지 다 했었는데, YAPP 동아리는 기획자와 디자이너가 따로 있다는 점에서 놀라서 그냥 후다닥 바로 지원 신청을 해버렸다. YAPP 동아리 지원 후기는 아래 포스팅에 작성했다!

 

IT 연합 동아리 YAPP 19기 면접 후기

 

YAPP 동아리에서 우리 팀은 북마크를 쉽게 관리하는 서비스를 만들기로 하였다. 크롬에 북마크 탭은 UI UX가 불편하였고, 노션이나 메모장에 저장하기에도 불편하였다. 그래서 익스텐션으로 쉽게 북마크를 저장하고 저장된 북마크는 좀 더 이쁜 UI와 UX로 관리하면 좋겠다 싶어서 이 아이디어를 선정하였다.

 

이 프로젝트는 9월에 시작해서 내년 1월에 끝나기로 되어있다. 그래서 아직 진행 중인 프로젝트인데, 이번 프로젝트는 다소 실망스러운 점이 많았다. 지원 당시에 웹 개발자 쪽은 지원서도 가장 많았고, 면접 당시에 분명 열심히 참여한다고 하여서 합격을 했다. 그런데 초반 9월에는 다들 열정 넘치게 참여를 하였는데, 10월부터는 다들 열정이 식어서 프로젝트 진행이 잘 되지 않았다. 또 우리 팀에 프론트는 나 포함 3명이었는데,  한분은 회사에 취업을 하였고, 다른 한분은 이직 준비를 하시느라 거의 작업을 나 혼자 하였다. 그동안 진행해왔던 프로젝트들은 다 같이 열심히 열정 넘치게 해왔어서 그런지 이번 프로젝트는 연락도 잘 안되고 나 혼자 개발하고 있는 느낌이 강해서 너무 실망을 많이 했다.

 

그럼에도 불구하고 배워가는 것은 정말 많았다. API 캐싱 처리를 하는 react-query를 처음 사용해보았고, facebook에서 만든 상태 관리 도구인 recoil도 사용해 보았다. 그리고 디자이너 분과 기획자 분이 있어서 오로지 개발에만 집중을 할 수 있어서 시간 적으로 좀 더 여유가 있었다.

 

아직 진행 중인 프로젝트라서 후기는 다음 블로그 포스팅에 남기도록 하겠다.

 

 

돌아보며

이번 연도에는 정말 많은 것을 배운 것 같다. 프로젝트도 많이 해봤고, 포스팅에는 적지 않았지만 알고리즘 스터디, 독서 스터디도 진행하면서 개발 실력을 늘리기 위해서 노력을 많이 했었다. 최근에는 좋은 코드, 깔끔한 코드를 짜기 위해서 리팩터링 2판 책을 읽었고 Web에 대해서 더 깊게 알기 위해서 리얼월드 HTTP라는 책도 읽고 있다. 공부는 정말 아는 게 많아질수록 공부할게 더 많아지는 것 같다.

 

내년에는 프론트엔드 TDD, 함수형 프로그래밍, 리액트 네이티브, Next js 이런 것들을 배우고 싶다. 내년 4월부터는 공익근무도 끝이 나고 대학교 3학년 2학기 복학 준비도 해야 한다. (나도 얼른 회사 취직하고 싶다!!!!!)

 

이번 연도 공부에 있어서 아쉬운 점은 너무 야생적으로 공부를 하다 보니 한 분야를 엄청 깊게까지 공부를 못한 거 같다 내년에는 Javascript, Typescript를 조금 더 깊게 공부해서 좋은 개발자가 되려고 노력해야겠다!