개발의변화
시작,끝 그리고 다시 시작(항해 3기 후기) 본문
항해를 시작하기 전
이제 항해가 한 주 남짓 남아서 지금까지 묵혔던? WIL을 한 번에 다 써보려고 한다. 처음에 항해를 지원했던 것은 정말 충동적인 결정이었다. 봄학기가 끝나고 3학년 2학기까지 했던 내 학업은 졸업 프로젝트가 내년 봄학기에 시작하므로 가을부터 겨울까지 스케줄이 사라져 버렸다. 그러던 와중에, 유투브 광고로 항해를 접했고 주 100시간씩 하드하게 코딩을 시킨다는 점에 단순히 끌려서 신청을 할려고 했더니 그날이 항해 3기가 마감되기 이틀 전이었다. 신청하고 다음 날 멘토님과 상담(?)같은 면접을 끝내고 등록을 했다.
사전 준비
등록을 마친 후, 매니저님께서 왕초보 시작반이라는 강의를 필수적으로 들어야 된다고 해서 들어보니, 파이썬Flask와 간단한 css,Jquery문법을 가르쳐줘서 단순한 페이지를 만드는 것이었다. 대체적으로 내용이 쉬웠고 엄청 늦게 들어온 나에게는 사전 준비라는 것이 1주일 정도 남짓이었기 때문에 나중에 주특기로 정할 React나 Node.JS에 대해서 조금 추가적으로 강의를 들으면서 마무리를 했다.
1주차(미니프로젝트)
첫 날, 이범규 튜터님의 개회 인사를 시작으로 팀이 배정되었고 게더라는 것을 처음 사용한 나는 팀원들이 있는 방을 찾는 데 시간이 걸렸다.
팀원은 총 4명으로, 두 명의 비전공자 분들과, 국비지원 학원을 다니시고 현업을 살짝 하고 오신 팀장과 학부생인 나로 구성되었다. 당일 프로젝트 주제를 정하고 와이어 프레임이라는 것을 그려서 제출하라는 미션에, 와이어프레임이 무엇인지 다들 어색하셔서 내가 아이패드로 대충 그렸다. 강아지와 동반 애견 호텔 예약 서비스를 만드는 것으로 팀장님이 로그인 구현, 나는 메인 페이지와 예약 페이지를 만들고, 부산 사시는 한 분이 후기 페이지, 나머지 한 분이 전체적인 css를 짜는 것을 맡았다. 모두 다들 되게 힘들어하셨고, 나에게 사전 준비 강의의 응용 정도여서 나는 그나마 수월하게 내가 맡은 바를 해결했다. 하지만 다들 Github을 거의 처음 사용했고 나 역시도 사용해 본 적이 한 두 번 밖에 되지 않아서 add,commit,push같은 명령어나 master와 branch 개념 같은 걸 전혀 몰랐었다. 항해에서 가르쳐준 git 협업 방법을 아무리 봐도 내가 생각했던대로 되지 않았고, 진짜 블로그들을 수백 번 찾으면서 github을 습득하려고 노력했다.
프로젝트 3일차 되던 날까지 우리는 파일을 압축해서 카톡으로 파일들을 공유했고 그나마 내가 github을 할 줄 아는 수준(???)이어서 오전부터 오후까지 한 분 한 분 차례대로 가르쳐 드렸다. 그래도 다들 어려워 하셨고, 프로젝트 진행 상황 또한 매우 더디었다. 그렇지만 내가 아는 지식과 찾은 정보를 통해 팀원들을 도와주면서 프로젝트를 성공적으로 마무리했다. 정말 팀 분위기가 좋았고 정말 팀원들끼리 합이 잘 맞아서, 금요일 제출날 프로젝트 배포하기 전에 만나서 같이 회식도 했다. 내가 배포를 해야 했었는데, 팀원분들이 술을 잘 마셔서 하마터면 취해서 프로젝트 배포를 못 할 뻔했다. 정말 사람들이 다들 좋았고 나중에 실전 프로젝트때 같이 하자는 우스갯소리(결국 같이 실전 프로젝트를 하게 되었다ㅋㅋ)를 하면서 마무리를 했다.
https://github.com/Woong5026/hanghae-group3/blob/master/templates/detail.html
GitHub - Woong5026/hanghae-group3
Contribute to Woong5026/hanghae-group3 development by creating an account on GitHub.
github.com
2주차 (주특기 기본)
1주차 프로젝트가 끝난 후 주특기를 주말까지 선택을 해야 했다. 공교롭게도 나는 면접때 만났던 멘토님이 Node.JS반 설명회를 하셨고 백엔드로 갈까라는 생각을 했었다. 하지만 뭔가 항해에서 프론트엔드를 하고 싶다는 생각이 불쑥 들어서 주말에 친구들과 술을 마시는 중에 홧김에 React를 선택했다. 물론 React에 대한 사전지식(?)은 조금 있었고 강의를 찾아서 한 번 들어본 적은 있었다. 주특기 기본 주차가 시작되고 공교롭게도 팀장이 나로 되있었고 항해에서 주는 React 기본 강의를 듣고 나만의 사전이라는 과제를 제출하라는 것이었다. 주특기 주차에 추석이 있어서 추석 반납을 하면서 강의를 듣는 사람들도 있었지만, 나는 즐겁게 명절을 보냈고 수요일부터 시작을 했다. props, state관리, Router 설정 등 초반 파트는 비교적 이해하기 쉬웠서 강의를 들으면서 동시에 코드를 따라치는 방식으로 공부했지는 Redux가 너무 어려워서 그런 방식을 하지 못했다.. 액션이 무엇이고 리듀서함수, Store 등 개념이 너무 생소했고 강사님의 진도 속도 또한 점점 빨라져서 나중에는 강의를 들으면서 코드를 따라치는 것을 포기하고 강의를 일단 필기를 하면서 이해하고 혼자 코드를 처보는 방법으로 바꿨다. 진짜리덕스 강의를 한 10번씩 들으면서 어떻게든 이해할려고 했고 지금도 리덕스 강의 번호까지 기억하고 있다.(3-7부터3-11이었나?). 다행히도 과제는 강의보다 쉬웠고 토욜날 오전에 과제를 시작해서 30분만에 해결했었던 것 같다. 팀장으로써 팀원들에게 내가 푼 방식과 힌트를 드렸고 나는 사놨던 리액트 책을 공부하기 시작했다. 강의 외적으로 리액트 Hooks, context API, styled-components, 라이프사이클 메서드 등 정말 배울 것이 많았고 내가 부족하다는 점을 매일 매일 느끼면서 공부를 했었던 것 같다. 하지만 React반에서는 다들 과제조차 내시는 것을 힘들어 하셨고 강의를 들어도 이해가 되지 않으시다는 분들이 많았던 것 같았다.
3주차(주특기 심화)
주특기 심화주차에는 기본 주차에 비해 훨씬 내용이 깊으면서 많았고 무엇보다 강의를 들으면서 코드를 따라치는데 많은 에러들이 있었다.
그래서 강의는 1주차부터 5주차까지 이루어져있는데 React사람들 대부분 강의 진도 속도가 나지 않았고 나 또한 이틀동안 2주차에 머물러 있었다. 파이어베이스를 통한 OAUTH방식으로 회원가입, 로그인을 하는 것인데 아무리 강의를 따라해도 되지 않았고 구글링을 통해 import 받은 파이어베이스 모듈의 문제였던 것이었다. 또한 세션 스토리지,로컬 스토리지,쿠키,캐쉬 등 정말 처음 들어본 것들을 이해하기가 쉽지 않았다. 3주차 수업부터는 리덕스를 통한 기본적인 CRUD를 하는 것이었고 다행히도 이해하기 어렵진 않았다. 과제는 선택할 수 있었는데 수업내용을 복습하는 형식의 기본 과제와 달력을 보여주고 달력에 TODOLIST를 넣는 심화과제가 있었다. 심화과제는 달력을 구현하는 것이 힘들면 달력 라이브러리를 사용해서 만들라는 메세지가 있었고 내 생각에는 수업내용의 강의코드를 따라치지 않는다면 로그인/회원가입 구현과 기본적인 게시판 CRUD하는 기본 과제가 더 어렵다고 판단을 해서 기본 과제에 심화과제를 넣어서 제출해보자는 생각이 들었다. 달력을 만들고 그 안에 할 일 리스트를 적는 것은 쉬웠으나 강의를 보지않고 파이어베이스를 이용해 로그인,회원가입을 찾아서 하는 것이 시간이 오래 걸렸고 게시글,댓글 CRUD할 때 상태관리를 하는 것들이 오히려 너무 어려웠다.
https://github.com/eternalclash/FOR-REACT
4주차 (미니프로젝트(FE+BE))
주특기 주차가 마무리되고, 백엔드와 협업을 통해서 미니 프로젝트를 하는 주차가 시작 되었다. 생전 처음 들어보는 axios 통신을 통해서 로그인, 회원가입 구현을 하는 것이 내가 맡은 파트였는데 저번 주에 배웠던 파이어베이스 OAUTH 형식이랑은 전혀 다른 로그인 방식이었다. 백엔드 분께서도 처음 axios 통신이라는 것을 해서 둘이서 서로 api가 뭔지도 모르고 로그인은 JWT가 좋은가요 아니면 어떻게 해야할까요 서로 머리를 맞대어서 어떻게 해야할지 하루종일 고민했다. 그래서 전 기수의 클론 프로젝트의 프론트든 백이든 코드를 다 뒤져서 하나 하나 다 해석하려고 노력했다. 처음엔 api를 어떻게 짜는지 몰라서 api url에 들어가보면 백엔드 분께서 로그인 회원가입 인풋창 덜렁 있는 화면을 보여주면서 이 url에서 회원가입하면 가능하다고 해서 해당 url로 회원가입 POST 요청을 하는데 서버 에러 500이 뜨는데도 이게 프론트 에러인지 서버에러인지 몰라서 막 웃기만 했던 기억이 생각난다. 그래서 잠시만 시간을 달라고 하셔서 백엔드 분께서 게더를 막 돌아다니시면서 질문을 하고 계시고 나는 JWT토큰으로 형식으로 받는 미들웨어 함수 아니면 GET요청으로 모든 회원의 데이터를 받아서 아이디 비밀번호가 실제로 데이터에 있는지 확인하고 해당 아이디에 맞는 비밀번호인지에 대한 미들웨어 함수를 짜고 있었다ㅋㅋㅋㅋ 지금 생각해도 너무 웃기네 백엔드께서 어떻게 찾으셔서 화요일 오전에 우리는 진짜 다른 조들에 비해 빨리 통신을 해서 로그인,회원가입을 해결했다. 쿠키에 토큰이 담기는 걸 서로 확인하고 오 이게 왜 들어가는거죠? 하면서 서로 행복해서 막 웃던 기억이 생각난다. JWT 로그인을 했다는 소문이 퍼지고 수많은 항해원들이 헬프를 요청했고 나도 JWT 로그인 원리를 제대로 익히지 않은 상태에서 가르쳐줄려고 하니깐 오히려 더 빡세게 공부가 되었던 것 같았다. 우리 프로젝트 주제는 냉장고를 부탁해 같은 느낌이었는데 냉장고에 재료를 넣으면 그 재료에 대한 레시피를 가르쳐주는 서비스였는데 레시피를 GET요청으로 받고 해당 레시피에 대한 댓글 CRUD 정도는 첫 JWT 로그인 통신할 때보다 수월하게 진행이 되었다. 그래서 중간 멘토링에서 멘토님께서 잘했다는 칭찬을 해주셨고 오늘 하루는 맥주 한 잔 하라는 극찬을 받기도 했다.(너무 좋았다)
남은 후반 작업으로는 스피너를 달고, 로그인 하지 않았을 때 기능 방지, 댓글 작성 후 렌더링 충돌 정도, 별점 남기기를 했었다. 팀원들이 다들 좋았고 즐겁게 했던 것 같다.
https://www.youtube.com/watch?v=-88Hh3Kn0KQ
https://github.com/eternalclash/fridgeteam-front-end
5주차(클론프로젝트)
미니프로젝트가 끝나고, 항해의 분위기는 실전 프로젝트에 팀원을 모집하는 것에 다들 붕 떠 있었던 것 같았다. 나 또한 미니프로젝트를 끝내고 잠을 자고 나니 처음 보는 사람의 메세지나 슬랙이 와 있었고 다들 열심히 팀을 구성하고 있었던 것 같았다. 같이 처음 1주차 했던 팀원 두 분과 지속적으로 멘토링을 하면서 같이 하자는 분위기였고 두 분 다 백엔드였는데 같은 조였던 백엔드 분이 성격이 좋고 같이 스터디를 하고 있어서 백엔드는 3명을 구한 상태였다. 프론트는 나를 포함해 백엔드에서 같이 하셨던 두 분이 있어서 성격이 워낙 좋아보이셔서 같이 하자고 제의를 그렇게 빠르게 6명의 팀원을 만들고 조를 구성했다. 클론 프로젝트 발제가 끝나고 이번 주에는 다음 주에 실전 프로젝트를 하기 때문에 항해원들은 실전 프로젝트를 신경쓰고 있었고 클론 프로젝트에서 힘빼지 말고 실전 프로젝트에서 열심히 하자는 분위기를 형성하는 사람들도 있었다. 그런 분위기가 정말 싫었고, 나는 실전 팀원들에게도 우리 모두 클론 프로젝트를 열심히 해서 더 잘해져서 다음 주에 보자는 이야기를 하고 팀 명단을 제출했다. 클론 첫 날, 모두들 처음 본 사람들이었고 프론트 팀원분이 잘하는 사람들 만나서 좋다고 이야기를 하시는데 들어보니 다들 열심히 항해 중이신 분들이었던 것이었다. 처음에 간단하게 넷플릭스,당근마켓을 하자고 이야기가 나오다가 다들 욕심이 많으셨는지 Pinterest를 해보자고 하셨다. 나는 Pinterst의 뷰가 너무다도 어렵겠지만 흥미가 생겼고 특히 내가 부족한 css 실력을 늘릴 수 있다는 생각이 들었다. 그래서 메인 뷰를 내가 맡았었고 한 분은 상세페이지, 마지막 한 분은 마이페이지를 맡아서 작업했다. 메인 뷰가 너무 어려워서 다들 이틀 정도 생각을 하고 있었는데 다행히도 내가 시작한 첫 날 큰 디자인 틀을 마무리했고, 로그인 페이지까지 뷰를 완성시켰다. 정말 이 당시가 제일 재미있게 코딩을 했던 것 같았다 매일 매일 내가 맡은 파트에만 집중하는 것이 정말 나머지 프론트 분들에게 감사했고 정말 서로 상호작용하면서 재미있게 다양한 것들을 보여줘서 너무 좋았다. 백엔드분들도 정말 성격도 좋고 통신할 떄 데이터가 어떻게 들어오는지 api 구조에 맞는 형식으로 보내는 지에 대해 정확한 디렉팅을 주셔서 감사했다. 이번 주차에서도 중간 멘토링때 좋은 호평을 들었고 튜터님께서도 욕심이 나셨는지 추가적으로 엄청난 기능들을 요청하셨다. 이 조는 할 수 있으니깐 더욱 더 열심히 해보라고 격려를 해주었다. 내 파트를 마무리하고 정말 열정이 충만한 프론트 팀원을 오프라인 사무실에서 도와주면서 마이페이지와 게시글 POST 페이지를 완성시켰고 마지막까지 반응형부터 디테일한 css등 보완을 하면서 하루 하루가 태풍처럼 지나갔던 것 같다.
https://github.com/highjoon/pinterest-clone-frontend
https://www.youtube.com/watch?v=19ARAJSV664
6주차(실전프로젝트)
실전 1주차
즐거웠던 클론프로젝트도 잠시 바로 토요일부터 실전프로젝트 발제가 시작되었다. 항해에서 어떤 조가 잘하고, 못하고 평가를 했고 우리 조는 쉽게 말해서 잘하는 사람이 별로 없는 소리를 들었다. 나는 이 조를 결성하면서 제일 중요한 건 사람의 성격과 협업 태도라고 생각했었고 항해 이 안에서 지금의 실력의 차이가 과연 중요할까라는 생각이 실전 하기 전부터 들었다. 실력의 차이가 매우 근소하다고 생각했었고 오히려 열정과 좋은 태도가 더욱 더 중요하다고 생각했다. 그리고 또한 내 자신을 정말 많이 믿었고 내가 어떻게든 끌고 갈 수 있다라는 생각을 가지고 임했다. 사실 처음부터 팀장은 내가 해야 했었는데 프론트쪽에서 할 일이 많고 백엔드에서 맡는게 좋다고 생각해서 1주차때부터 정말 성격 좋고 말을 잘하시는 정규님에게 맡겼다. 처음에 실전 주제를 잡는 것부터 어려웠고 첫 번쨰로 옷장 공유 서비스라는 것을 생각했지만 팀장 회의에서 범규 튜터님에게 구현하기 쉽지 않고 그렇게 필요한 서비스인가 다시 되짚어 봐야 할 것 같다라는 피드백을 받고 다시 전반적으로 아이디어 회의를 통해 강아지 산책 친구 만들기 서비스로 결정했다. 기본적인 CRUD 구현을 모두 경험해보지 않은 팀원들에게 아직 준비 기간이 필요했고 백엔드에서 MySQL로 DB구조를 쌓는 것을 지켜보면서 필요한 것들을 이야기해주었다. 또한 프론트엔드 팀원들에게 리덕스 상태관리를 통해 CRUD 구현 원리와 로그인 JWT 방식, 렌더링 원리 등에 대해서 도움을 주었다.
실전 2주차
천천히 호흡을 가다듬으면서 준비를 하자고 팀원들에게 이야기를 했고 2주차를 시작했다. 2주차 화요일 팀장회의에서 괜찮은 서비스인 것 같다라는 이야기를 들었지만 그 때까지 아예 구현되어 있던 것이 없었다. 디자이너분들께서 디자인을 제작 중이었고 계속되는 팀원들의 뜨거운 회의의 반복으로 디자인이 수정되면서 정확한 뷰를 잡지 못했고 서버와의 통신이 아직 안되어서 Json-server로 일단 하고있었다. 로그인/회원가입을 맡았던 정규님이 팀장 역할까지 하시느라 어려움을 겪어서 다른 백엔드분들과 함께 도움을 주어서 해결했고 내가 팀장을 맡기로 했다. 준비했던 카카오API를 통해 지도 구현과 기본적인 산책 등록,수정,삭제 구현이 차근차근 준비 되었고 팀원 모두들 잠을 줄이시면서 엄청난 노력을 했다.
실전 3주차
화요일 팀장회의에서 우리가 많이 개선되었다는 것을 보여주기 위해 디자이너분들도 정말 고생해서 피그마에 디자인이 1차적으로 완성되었고 백엔드 분들은 그 다음 필요한 기능을 준비했고 프론트 팀원들도 CSS를 하는데 밤을 새면서 고생했다. 그렇게 다들 밤새면서 고생해서 만든 사이트를 범규 튜터님에게 보여드리고 들었던 한 마디 "수창님 같으시면 이 서비스를 쓰실 거 같으신가요??" 나는 순간적으로 얼어버렸다. UI가 너무 올드하고 매칭서비스인데 신뢰성이 부족하고 기능이 정말 많이 부족해 보인다는 혹평을 들었다. 좋지 않은 평가를 들을 것 같다는 예상은 했지만, 너무 큰 비판을 들은 나는 팀원들에게 회의 내용을 전달하고 중간 평가가 얼마 남지 않은 지금, 우리는 대대적으로 변화를 줘야 하고 엄청난 노력이 필요하다고 강하고 이야기 했다. 진짜 화 수 목 금 토 5일 동안 진짜 매일 밤을 새면서 꼬박 꼬박 만들었고 전반적인 모든 기능을 수정하면서 보완해야 할 것들이 너무 많았다. 진짜 이번 년도 중에 제일 힘들었던 5일이었던 것 같다. 토요일날 중간 발표날에도 수정해야할 부분들이 너무 많았고 결국 나는 발표 두 시간전에 노션에 발표 자료를 준비하고 대충 대본을 만들고 발표를 했던 것 같았다. 심지어 1조라서 다른 조들의 분위기는 어떠한 지에 대해 느끼지도 못하고 발표를 했다. 다행히도 예상했던 무거운 분위기가 아니었고 멘토님들의 피드백을 들으면서 마지막 최종까지 우리가 필요한 것들에 대해 다시 한 번 생각했던 것 같다.
실전 4주차
4주차에 들어와서 나에게 번 아웃이 왔었던 것 같았다. 프로젝트를 진행하면서 나는 에러들을 내가 해결하지 못하면 안된다는 중압감과 점 점 내 실력에 대한 부족함이 드러나면서 나에 대한 자책 같은 것들이 섞여서 그랬던 것 같았다. 그래서 거의 이틀동안 제대로 된 작업이 없었고 다시 마음을 잡아서 쪽지 기능 마무리와 웹소켓을 통한 푸쉬 알람을 완성해 갔다. 처음 보는 양방향 통신인 웹 소켓은 너무 생소했고 멘토님이나 튜터님들도 지금 하기엔 시간이 부족해서 반대하던 기능이었다. 그래서 쪽지 기능을 웹 소켓으로 구현하지 않고 푸쉬 알람만 웹 소켓으로 구현하자라는 스코프를 잡았고 Node.JS강의를 찾아보면서 어떻게 구현할 지 찾아봤다. 그러면서 다른 팀원들의 해결하지 못한 에러들을 도와주고 지금까지 했던 기능은 보완하면서 필요한 기능들을 추가했다.
실전 5주차
5주차에 들어와서 올드하다고 평가 받았던 디자인은 전부 바꿨고 끊임없는 CSS 작업을 했다. 이제 유저 론칭을 해야하니깐 반응형을 생각하면서 뷰 작업을 하는 것이 되게 섬세하고 집중이 필요한 일이라는 것을 깨달았다. 다행히도 팀장회의에서 처음으로 범규 튜터님에게 칭찬을 들었고 이렇게 하면 목요일 쯤에는 배포하고 유저를 받아보자라는 피드백을 받았다. 너무나도 기분이 좋았고 계속해서 작업을 이어갔다.
거의 150개의 QA리스트를 작성해 해결해 갔고 HTTP에서 HTTPS로 배포하면서 생기는 에러들을 처리했다. 특히 나와 우리 팀원들은 크롬 브라우저에서 테스트를 했는데 사파리 뷰에서 디자인이 깨지는 것들을 보면서 한 번 더 쉽지않은 상황을 맞이했지만 계속 모바일과 사파리 브라우저를 통한 테스팅을 해서 완성했다.
실전 6주차
유저들을 론칭해보니 회원가입이 안된다는 피드백들이 엄청나게 나타났다. 주말에 나는 잠을 자지 못한 채, 에러의 원인을 예측해 보니, 첫 번쨰로 정확하고 디테일한 회원가입에 대한디렉션의 부족이었고 유저 이미지를 s3스토리지에 넣고 s3스토리지에서 이미지를 받아오는 과정이 회원의 정보를 DB에 넣기 전에 되어지지 않는 에러일 것이다라는 예측을 했다. 프론트에서는 회원가입의 인풋에서 유저가 정보를 기입할 때 , 즉 onChange 이벤트 실행시마다 필요한 유효성 검사와 필요한 정보들을 기입했는지 안 했는지에 대해 보완했고 이미지를 s3스토리지에 넣고 읽는 과정에서 이미지 리사이징을 통한 속도 개선을 해서 회원가입의 에러를 해결하려고 했다. 그렇게 유저들의 피드백을 보고필요한 점을 보완하던 중에 금요일 최종 발표 전 날 서버가 터져버렸다. 일단 새벽까지 발표영상을 제출해야 해서 빠르게 발표자료를 수정하고 영상을 찍었다. 그리고 백엔드 한 분과 같이 밤을 새면서 복구 작업을 했고 다행히도 발표날 아침에 마무리 했다. 발표날은 진짜 너무 피곤해서 힘들었지만 지금까지 해온 나와 팀원들을 위해 조금만 더 버티자는 생각으로 커피와 레드불을 마시면서 작업을 했던 것 같다.
https://www.youtube.com/watch?v=dKcawThqUME
http:// https://github.com/O-K-O-K-O-K/Front-end
12주차,13주차(알고리즘)
정말 주말동안 하루종일 잠만 계속해서 잤던 것 같다. 알고리즘 주차에 들어서 다시 오프라인 사무실에 가서 공부하기 시작했다. 실전 팀원들이랑 매일 3-4문제씩 풀고 서로 리뷰하는 방식으로 하기로 했고 나는 개인 공부로 자바스크립트를 다시 한 번 깊이있게 공부를 했다. 그리고 다음 주에는 타입스크립트를 공부하면서 계속해서 알고리즘 문제를 풀면서 감을 잃지 않으려고 노력했던 것 같다.
https://github.com/eternalclash/Algorithm-JS