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

사회 복무 요원 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기에 참여할 분들을 구하고 있었다.

from http://doiler.tistory.com/9 by ccl(A) rewrite - 2021-12-28 13:27:20