Wecode 비추 - Wecode bichu

Wecode 3기 후기

뜨아… 벌써 wecode 3기가 이틀 남았다.
퇴사 일정 때문에 1주차를 못나왔던게 너무너무 아쉬움으로 남는다.(퇴직금 받겠다고!!)
그래도 퇴직하고 바로 저녁에 위코드로 출근!! 바로 밤샘 불코딩~ 스타트!!!
퇴사하자마자 바로 달렸다.

정말 좋은 3기 동료분들과 멘토님들과 두번 다시 오지 않을 3개월의 시간을 알차게 보냈다.(앞으로 계속 볼거지만)
벌써 뭉클해지네요… ( ㅜ _ ㅜ)

이제 본격적으로 써보겠습니다.

개발자라는 직업을 어떻게 알았고, 무슨 계기로 개발자를 하겠다고 생각 하셨나요?

대학교 입학 20살 때까지 개발자라는 직업은 몰랐다.
그냥 컴퓨터 하는 사람이구나~ 라고만 단편적으로 알고있었을 뿐이었다.
알게 된것은 직업군인때 SNS에서 코딩, 부트캠프 등 광고들을 봐서 개발자라는 직군이 있다는 것을 알게되었다.
개발자를 하겠다고 생각한 계기는 장소에 구애 받지 않는다는 점과 컴퓨터만 있으면 타인에게 좋은 경험을 제공 할 수
있다는 점에서 시작되었다.
처음에는 내가 만든 애플리케이션을 누군가가 다운받아 사용한다면 엄청 뿌듯하고 기분이 날아가듯 좋을것 같아 앱 개발자에 관심을 가졌다.
개발 공부하다 보니 웹으로 관심이 옮겨가게 되었고, 웹 개발자가 되자고 생각했다.

Wecode 이전에 코딩 경험이 있었는가?

물론 있었다.
직업군인을 그만두고 Super 신인을 만들어 준다는 타 교육기관에서 2달 여 동안 java를 공부했다.
시작하기 전에 무엇을 준비하고, 공부하고 가면될까요? 라고 물어봤는데 실컷 놀고 푹 쉬다 오세요~ 공부 시작하면 개발만 해야됩니다. 라고 말을 들었다.
그래서 진짜로 해외여행도 갔다오고 푹 쉬고 첫 날 교육기관으로 몸을 움직였다.
정말정말 힘들었다. 1주일 동안 주어진 과제를 진행하는데 7일 중 이틀에 한번 꼴로 밤을 새면서 공부했다.
열심히 했는데도 불구하고 어느 시점에서 딱 벽이 가로막히는 듯한 느낌과 함게 멘탈이 붕괴되고… 그렇게 첫 교육기관에서 중도 포기를 했다.

그런데 첫 교육기관에서 공부할 때 웹에서 개발자 도구로 개발하고 있는 모습을 많이 봤고, 그 모습을 보면서 자연스레
웹 개발에 대해 관심이 생기기 시작했다.
그 관심이 중도 포기하고 나서도 그대로 였는지 집에서 웹 개발 초보 동영상, 초보 개념 등 구글 검색으로 해서 공부했다.
그러고는 웹 개발자 해보자! 마음 먹고 두번째 교육기관인 빠른학원을 등록했다.
웹 개발자가 되기 위한 공부를 3개월 동안 하고 마지막 한 달 프로젝트를 진행하다가 일이 생겨… 끝까지 완주하지 못했다. (진짜 진심 너무 핵 아쉽..)
그러고는 금전적인 문제를 해결하기 위해 베이커리에서 일을하면서 1년 동안 돈을 모으면서 두번째 교육기관을 끝낸
날로부터 6개월 이상을 코딩을 안했더니 다시 완전 초보가 되버려서… 온라인으로 8주 짜리 웹 개발 공부를 했다.

더 늦으면 안되겠다 생각이 들어서 온라인으로 8주 공부하고 1년 퇴사 일정에 맞춰 수료 예정인 Wecode 3기수로 들어오게 되었다.

공부하면서 힘들었던 점은 영어!!! 영어를 못읽어서 너무나 힘들었다.
웹 개발자가 되기 위한 공부가 처음이고 교육기관도 처음이지만 영어를 잘한다면 성장속도가 상당히 빠르다고 생각한다.
공식 문서, 스택오버 플로우 등 양질의 자료들이 다 영어이기 때문이다.
웹 개발자가 꼭 아니더라도 어떤 개발자를 하던간에 영어는 필수라고 생각한다.
개발자가 되고자 한다면 영어 공부할 것을 강력하게 말하고 싶다.
또 문제 해결을 하기 위한 과정은 정말 고통스러운데 이 과정 동안 지구 내핵 깊이 만큼의 인내심을 가지고 문제 해결을 해쳐나갔으면 좋겠다.

Wecode를 선택한 이유!

코딩을 재밌게 한다! 정말 이 한마디였다.

다른 사람들은 다르게 들릴 수 있을거다. 코딩을 재밌게? 코딩이 재밌을 수 있나? 부트캠프(직업 훈련소, 짧은 시간에 강도
높은 교육)인데 재밌게 한다고? 재밌게해서 제대로 배울 수 있어? 취업할 수 있어? 등등 이렇게 말이다.

첫번째 교육기관에서 열심히 했고 더 잘하고 싶었지만 코딩하는게 너무나 고통스러웠던 나로서는 재밌게 코딩, 재밌게 개발 한다는 이 말이 심장까지 와닿았다.

그리고 퇴사일정이 2주차 시작할때 즈음이어서 1주차는 온라인으로도 가능하다는 것도 조금 영향이 있었다.

프론트엔드를 선택한 이유는?

일단 프론트엔드보다 논리적인것과 알고리즘이 더 중요하고, 텍스트로만 개발하는 백엔드는 나와 맞지 않는다고 생각했고, 내가 작성하고 만든 코드를 화면으로 보면서 할 수 있는것에 매력을 느꼈다.
사용자와 맞닿는 것은 결국엔 프론트다.
내가 만든 웹(화면)을 사용자가 사용하고, 보고 느낀다면 개발자로서 이 얼마나 기분이 날아갈듯 좋은가 ~ ~

Wecode 3개월간 가장 재밌었던 일화는?

가장?? 그냥 3개월 동안 계속 가장 재밌었다.
3개월 동안 같이 공부하는 동기분들과 하하호호 웃으면서 재밌게 개발을 했다.
이제 3기는 수료하지만 이 3개월은 정말 잊지 못할 소중한 경험으로 오래오래 간직할것이다.

Wecode의 강점?

수강생 개개인들의 진도, 실력에 맞춘 프로세스 진행.
수강생을 진심으로 아껴주고 성장하길 바라는 멘토님들!
3개월 동안 오프라인으로 주말, 공휴일에도 개발, 공부할 수 있다.
앞으로 같이 성장하고 웹 개발자로서 활동할 동료 개발자!

벌써 위코드의 부트캠프를 시작한지 6주가 지났다. Foundation 코스를 마치고 4월 12일 부터 23일까지 2주간 첫번째 팀 프로젝트를 진행하고 어제 프리젠테이션을 마쳤다. 오늘은 이번 2주간의 기간을 회고하는 시간을 가지며 블로그를 작성해 보려고 한다.

프로젝트를 시작하며

이번 프로젝트 후기를 본격으로 이야기 하기에 앞서, 프로젝트를 시작하기 직전 주말에 일어났던 일은 나에게 개인적으로도, 다른 사람들과 같이 공부하는데에도 엄청난 변화를 끼쳤다. 정말 안타깝게도, 최측근 중 한 명이 코로나 밀접 접촉자라는 사실을 알게되었고, 결국 확진의 소식을 월요일 아침에 받아야 했다. 난 2주간의 격리가 불가피한 상태였고, 이것이 이번 프로젝트 첫날의 아침에 일어난 일이였다. 처음에는 정말 멘붕이였고, 주말 내내 걱정되어 잠이 오지 않았다. 이 상황이 원망스럽기도했다. 왜 하필 지금 ㅠㅠ…

하지만 그렇게 화나있을 시간이 없었다. 이미 일어난 일은 어쩔수 없고, 이 일이 프로젝트의 결과 그리고 팀원들에게 영향을 주지 않도록 최대한 열심히 하는것 밖에는 딱히 할 것이 없었다. 그리고 지금은 벌써 2주가 흘렀고, 이 2주를 통해 난 기술적뿐만 아니라 정신적으로도 엄청난 성장을 한 것 같다. 그것에 대해서는 마지막에 쓰겠다.

프로젝트 소개

어쨌든, 아침에 위코드에 소식을 알리고, 난 집에서 팀 발표를 받았다. 우리의 팀은 총 6명! 동이님, 준형님, 승찬님, 영훈님, 정현님이였다. 난 팀원들 중 가장 잘 알았던 동이님께 내 소식을 먼저 알리고 동이님은 그날부터 나와 끝이없는 구글밋의 굴레에 빠져들게 되었다…ㅋㅋ

우리가 클론하는 프로젝트는 마켓 컬리였다. 마켓 컬리는 국내 식품 온라인 쇼핑몰로 가장 유명한 브랜드 중 하나다. 우리는 바로 구글밋을 켜서 회의를 시작했다. 일단 어떤 페이지와 기능을 구현할 수 있을지, 하고싶은지에 대해 이야기 하였다. 시간이 2주밖에 없어서 모든 기능을 구현할수는 없기 때문에 가장 기본부터 시간이 허락하는 내에서 추가적으로 구현하고 싶은 기능들을 정리하였다. 또, 팀이름을 정하였다. 이름은 마켓 쵸컬리(Market Cho-Kurly)! 우리는 마켓 컬리에서 간식, 과자, 떡 카테고리 중 초콜릿, 젤리, 캔디의 부분을 구현하기로 해서 동이님의 센스로 나온 찰떡같은 이름이다.

역할 분담과 구현한 기능

우선 너무 감사하게도 팀원들이 나에게 PM의 자리를 맡겨주었다. 나는 PM을 해본적이 없기도 했고, 격리 중인 상태에서 좀 걱정이 되긴했지만 이것 또한 못해볼 경험이라고 생각하고 열심히 해봐야겠다고 다짐했다.

우리가 기본적으로 구현할 페이지는 크게 메인 페이지, 상품 리스트 페이지, 상품 상세 페이지, 로그인, 회원가입, 장바구니였다. 프론트 멤버들은 모든 페이지에서 사용되는 상단 헤더, 어사이드, 푸터를 프론트 멤버들 각각 하나씩 나누기로했다. 솔직히 뭘 맡아도 다 어렵고 배울점이 많을것 같아서 공평하게 사다리 타기로 역할을 분담했다. 나는 상단에 들어가는 네브 바, 메인 페이지, 상품 리스트 페이지를 맡게 됐다.

네비게이션 바

우선 공통으로 사용될 컴포넌트인 상단 네비게이션 바부터 시작하였다. 먼저 레이아웃을 HTML, SASS를 사용하여 짜고, 기능으로 넘어갔다. 네브 바는 들어가는 기능이 많지 않았다. 전체 카테고리에 마우스 올리면 카테고리 리스트가 나타나고, 카테고리에 또 마우스를 올리면 서브 카테고리가 나타나는 식의 기능이 가장 큰 것이였다. 난 이 기능이 생각보다 빨리 끝날 것이라고 생각하였지만 아주 잘못된 생각이였다. 이 기능만 3일을 고민하였고, 이것 저것 해보다가 도저히 시간만 지체할 수는 없어서 멘토님에게 힌트를 받아 겨우 성공 할 수 있었다. 이 코드는 밑에 정리해 보겠다.

메인 페이지

메인 페이지에는 크게 두,세가지의 기능이 있었다. 첫번째는 자동으로 넘어가는 캐러셀이였다. 페이지 상단에는 하나의 사진이 가로 전체를 덮고 약 5초에 한번씩 자동으로 넘어가고 화살표 버튼으로도 작동할 수 있다. 메인 페이지의 나머지는 모두 네개씩의 상품 사진이 한 프레임에 담겨 넘어가는 캐러셀로 구성되어 있었다. 신상품, 알뜰 상품 등 총 6개의 품목에 따라 각 캐러셀에 상품들이 담겨 보여진다. 그리고 중간에는 24시간 한정 세일을 하는 상품이 소개되며, 이 곳에 타이머를 추가로 기능을 구현하였다. 타이머는 생각보다 빨리 구현하였고, 캐러셀은 초반에 좀 고생을 하였다. 라이브러리를 사용하지 않고, 직접 하려다 보니 어려웠던 것 같다. 또, 하나의 사진만 보여지는 캐러셀에서 네개를 한번에 보여주는 것으로 적용을 하려니 조금 헷갈렸지만 네브 바 보다는 쉽게 구현하였다.

메인 페이지에서는 크게 네브 컴포넌트, 슬라이드 컴포넌트, 상품 카드 컴포넌트, 그리고 태그에 따라 필터링이 들어가야 해서 사용했던 태그 컴포넌트가 있다.

상품 리스트 페이지

상품 리스트 페이지에서는 크게 서브 카테고리로 상품 리스트를 필터링 기능, 신상품과 가격순으로 필터링 기능, 장바구니 아이콘을 누르면 띄워지는 모달 창, pagination 등이 있었다. 메인의 캐러셀에서도 사용했던 상품 카드 컴포넌트를 그대로 사용하였고, className에따라 사이즈를 조정해 주었다. 또 동적 라우팅을 이용해서 필터링된 데이터를 불러와 보여주었다. 장바구니 모달 창도 한번도 해보지 않은 기능이여서 재밌었고, 동적 라우팅을 통해 다른 데이터들이 불러오는 기능을 구현한것도 뿌듯했다.

협업 과정 그리고 Scrum

우리는 매일 아침 11시 10분에 모여서 daily standup meeting 을 하였다. 내가 학원에 가지 못했기 때문에 항상 구글밋을 키고 팀원분들이 모여 미팅을 진행하였다. 어제 마친 작업들을 서로 업데이트하고, 오늘 할일을 정리해 보고, 진행을 더디게 하는 blocker 가 있다면 공유하였다. 미팅이 너무 늘어지지 않게 신속하게 진행하고 바로 할 일로 넘어갔다. Trello에 카드들을 업데이트 하면서 우리가 지금까지 한 것들, 진행중인 것들, 아직 못한 것들을 한눈에 보게 해주었고, 영훈님이 센스있게 daily standup meeting 의 내용도 Trello에 올려주셨다. 바쁘다 보면 제때 업데이트를 안할 때도 있었지만 나중에 done에 쌓여가는 카드들을 보니 우리가 많은걸 했구나, 어떤것은 못 했구나를 알수 있어 좋았다.

기억에 남을 코드

카테고리 메뉴

이 코드는 가장 고생했던 기능 중 하나인 마우스 호버로 카테고리를 나타내는 기능이였다. 우선, 백엔드에서 받아오는 데이터는 각 메인 카테고리안에 서브 카테고리의 리스트가 담긴 array안에 array가 있는 형식이였다. map 메소드를 두번 써야할 것 같다는 것은 감이 왔지만, 어떻게 하면 하나의 메인 카테고리에 마우스 호버를 했을때 그것에 해당되는 서브 카테고리만 보여지게 하는가였다. 이런 저런 방식을 시도하다 시간이 너무 지체되어 멘토님의 힌트를 받았다. 우선 메인 카테고리에 onMouseEnter 핸들러를 사용해 id 를 categoryIdx 스테이트에 저장해주고, isSubOpen 스테이트를 true 로 바꿔준다. 그리고 조건부 렌더링을 통해, 데이터의 인덱스 + 1과 categoryIdx 가 같은지, isSubOpen 가 참인지의 조건을 달아 만족될 시 해당 서브 카테고리를 map 메소드를 통해 보여주었다.

캐러셀

이 코드는 메인 페이지에서 사용된 캐러셀을 구현한 코드이다. 자식 컴포넌트인 ProductCard 컴포넌트에게 상품 정보가 담긴 데이터를 map 메소드를 통해 전해주고 moveX 라는 x 축을 이동시키는 transform 스타일을 넘겨준다. 그리고 캐러셀 양쪽에 있는 버튼에 onClick 핸들러를 통해 함수를 실행시킨다. slideX 는 부모인 Main 컴포넌트에서 받아온 props 인데 한번 클릭에 몇개의 사진을 넘길 것인지에 대한 값이다. 총 네개의 사진이 하나의 틀에 보여지는 상태에서 2 이면 두개가 넘어가고 4이면 네개가 넘어가는 형태이다. goLeft 와 goRight 에서 x 축을 얼마만큼 넘겨줄것인지 설정해준다. 예를 들어, x가 0일때, 즉 맨 처음에 위치해 있을때는 왼쪽 버튼을 클릭해도 계속 왼쪽으로 넘어가면 안되므로 그 조건을 달아주어 삼항 연산자를 이용해 setState 해주었다.

타이머

이 코드는 특정 날짜가 오늘부터 얼마나 남아있는지 시간:분:초 단위로 나타내주는 타이머 기능이다. 구글링을 통해 짤수 있었다. 리팩토링하기전에는 함수가 복잡해 보였는데 멘토님이 변수화 시킬수 있는 부분은 다 해주는게 좋다고하셔서 정리를 해주었더니 그전보다는 깔끔해 보여 맘에 든다.

const twoDigits = time => { return (time < 10 ? ‘0’ : ‘’) + time; };

이 함수는 시간 단위가 한자리 수 일때 ‘7’이 아니라 ‘07’ 의 식으로 표현되어야 하기 때문에 추가해준 간단한 함수인데 특히 기억에 남는다.

페이지네이션

마지막으로 페이지네이션에 사용한 함수이다. 버튼을 클릭했을때 fetch 되어야할 api주소에 state 와 parameter를 template literals 를 사용해 적용해줘서 해당되는 페이지가 렌더링 될수 있도록 해줬다.

이루어낸 것들

우선 격리의 상황에서도 무사히 프로젝트를 마친 나에게 토닥토닥 해주고싶다. 그리고 꼭 이런 상황이 아니라도 개발은 리모트로 진행되는 상황이 아주 많을텐데 미리 경험해 보아서 오히려 좋았던 것도 있다. 개인적으로도 나의 최측근에게 이런일이 일어났다는게 정신적으로 힘들었는데 이렇게 잘 해내고 나니 내가 생각보다 나약한 사람은 아니구나(?) 라는 자신감이 생겼다 ㅋㅋㅋ 이제 무슨 상황에서도 프로젝트를 할수 있다는 자신감!

그리고 팀원들과의 소통, 팀워크도 아주 좋았다고 생각한다. 발표 마지막날, 거의 새벽 5시까지 구글밋 두개를 동시에 켜가며 (프론트 하나, 백 하나) 문제를 해결하고 마지막까지 불태우면서 최선을 다한 것이 힘들었지만 뿌듯하고 재미있었다. 백엔드 분들이 임의로 지으신 상품 이름들을 보며 집이 떠나가라 웃은것도 기억난다..ㅋㅋ 큰웃음과 센스 감사합니다.

지식적으로는, state 라는 개념에 전보다 훨씬 익숙해지고, 어떻게 하면 더 효율적으로 component를 사용해야할까 고민할수 있었다. 그밖에 이벤트 핸들러, 조건부 렌더링, 삼항 연산자, 동적 라우팅, 페이지네이션, 맵 메소드, 캐러셀 구현, 타이머 구현 등등 수많은 개념과 함수에 대해 배울수 있었다.

아쉬운 것들

처음에는 백엔드와 맞춰봐야 할때 시간을 상당히 소모해야했다. 나는 학원에 갈수가 없으니 백엔드의 서버랑 연결할 방법을 딱히 몰랐기 때문이다. 하지만 멘토님이 알려준 live share 라는 VSC의 익스텐션을 사용해서 떨어져있어도 서버를 쉐어 할수 있었다. 다만, 바로 옆에 있지 않으니 서버가 꺼지거나 문제가 생길때 신속하게 해결할수 없었던 점이 조금 답답하기도 했다. 그래도 전체적으로 수월하게 진행되었다고 생각한다.

좀 더 꼼꼼하게 구현하고 싶었던 기능들도 몇가지 있다. 상품 리스트 페이지에서 신상품순, 가격순으로 sorting 을 해주는게 있었는데, 처음 클릭할때는 실행이 안되는 문제가 있었다. 그리고 검색창을 통한 필터 기능도 추가적으로 구현하고 싶었지만 시간상 하지 못했다. 다른 팀원들이 맡아준 장바구니 페이지도 백엔드와 맞추면서 코드 수정이 많았는데 모두가 붙어서 마지막까지 해결해보려고 했지만 미흡한 점이 있었다. 시간관리, 처음 계획 단계에서 어떤 컴포넌트들이 서로 연결되는지에 대한 이해, 백엔드와의 데이터에 대한 계획과 소통이 참 중요하다는 것을 깨달았다.

프로젝트를 마치며

우선 프로젝트는 정말 팀과의 소통이 중요하고, 혼자는 할수 없다는 것을 다시 한번 깨달았다. 나의 상황을 이해해주고 배려해준 팀원들이 고마웠고, 불평하지 않고 서로 하나의 목표를 향해 각자의 맡은 바를 최선을 다해 이뤄준 점이 감사했다. 또 멀리있는데도 도저히 해결안되는 기능들이 있을때마다 도와주신 멘토님들도 너무 너무 감사하다.

처음에는 나만 떨어져 있어서 더 힘들거라고 생각했는데, 오히려 이런 경험으로 나만의 스토리를 만들수 있다는 생각으로 열심히 했다. 그래서 더 뿌듯하다. PM 으로서 뭔가 특별하게 더 한것은 없다고 생각하지만 미팅을 더 이끌어가고, 질문을 하고, 서로 업데이트를 신속하게 하도록 노력했다. 우리 팀 모두 최선을 다해서 자랑스럽고 다음 프로젝트때는 이번에 느낀 점들을 참고해서 더 좋은 과정과 결과를 만들기를 바래본다.