[엘리스 SW 트랙] 1차 프로젝트 : 쇼핑몰 사이트 만들기 2

 

1차 프로젝트인 "쇼핑몰 사이트" 만들기 프로젝트가 마무리 되었다.

총 2주간 진행되는 프로젝트였고, 우당탕탕 이슈가 많았지만 마무리는 나름 잘한 것 같다.

원래는 프로젝트 하면서 만났던 이슈, 해결한 버그, 멘토님의 금같은 코멘트등을 정리해 하나씩 올리려고 했는데,

이 글의 첫 시작이 일주일 후기였으니 흐름에 맞게(?) 2주차&마무리 후기를 작성하려고 한다.

(공부했던 내용 등등은 복습하는 개념으로 내일부터 하나씩 올릴 예정이다. ㅎuㅎ)

 

생각보다 해야할 것들이 많았던 프로젝트. 그리고 진행하면서 직면하게 된 여러가지 어려운 점들이 있어서, 프로젝트는 안정적으로 진행될 것이라는 예상과 다르게 우당탕탕 으라차차 프로젝트가 되었다. 그렇지만!!! 마무리가 나름 잘 되어서 너무 기쁘다!!!!🤸‍♂️

 

 

1. 프로젝트가 시작한지 3일차. Vanllia JS를 버리기로 했다.

VM을  띄우고, 그 위에서 구현한 서비스를 배포를 해야하는 프로젝트. 처음엔 프론트 쪽에 리액트(ReactJS) 를 슬쩍 의견내 보았지만 팀원 분들 중 나와 다른 한분을 제외하고 자바스크립트를 다루는 것도 힘들 것 같다고 하셔서 프론트엔드 파트는 Vanllia JS를 선택했다.

그렇게 진행한 3일차. 코치님들의 코멘트를 들을 수 있는 오피스아워를 진행하고 각 파트별로 진행상황을 공유했는데.. 이게 웬걸. 프론트엔드 파트를 맡은 팀원 분들이 SOS를 치셨다. (아, 참고로 프론트 파트 분들은 모두 비전공자분들이시다)

 

"저희가 구현을 어떻게 접근해야 하는지 모르겠어서 우선 html,

css로 레이아웃 잡은것 보여드리고 코멘트를 받았는데요.."

 

프론트엔드 코치님이 보시기에 전반적으로 서비스가 어떻게 돌아가는지, "서버" 와 "배포"에 대해 어느정도 지식이 필요한것 같아 보여서, 팀원분들께 좋은 참고 자료를 건네주시고 '한번 따라해 보고 금요일까지 진행해보세요~하셨는데..'

 

굉장히 좋은 자료였다. webpack에 대한 이해와 웹 서버를 어떻게 구축해야 하는지에 대한 실습 내용들이 담긴 자료였다. 이걸 따라한다면 웹 서버에 대해서 이해도가 어느정도 생길 것 같았는데.. 문제는 요걸 만들어서 진행하면 프로젝트를 제대로 시작하지 못할 것 같았다. 

당시 서버를 두대 올려서 진행했으면 좋겠다는 코멘트도 있었기에, 바닐라 JS로 올리기엔 프론트 분들이 너무 어려워 하실것 같아 과감하게 React로 가자고 제안을 드렸고, 최대한 도와드리기로 약속하고 우리 팀은 ReactJS로 진행하기로 결정했다. 땅땅땅💡

(프로젝트 틈틈히 읽어본건 안비밀 : https://velog.io/@bepyan/VanillaJS-Express%EB%A1%9C-%EC%9B%B9%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95-%EB%A7%9B%EB%B3%B4%EA%B8%B0)

 

리액트를 처음 접해보신다고 하셨으니, 알려 드려야지.

들어간다. 속성 강?의

 

리액트를 사용하기로 한 시점. 우선 내가 오늘 마무리하기로 한 것들을 다 끝내고, 리액트의 기본적인 것들을 어떻게 사용하면 되는지 알려드리기 위해 강의 자료(?) 같은걸 준비하기 시작했다.

 

새벽 내내 준비한 자료, 대망의 아침.

 

스크럼 시간에 내가 진행한 것들을 공유하고, 오전에 프론트엔드 파트 팀원분들을 대상으로 속성 기본 강?의를 진행했다.

(사실 강의라고 쓰고 스터디 공유라고 읽어야한다🤣.,, 내가 공부했던, 리액트를 하면서 실수했던 기초적인 것들을 액기스로 담아 전달해드린 것 뿐이니까)

 

직접 리액트로 서버를 올리고 백엔드 서버와 API 통신을 하면서 데이터를 주고 받는 것까지 실습하고! 본격적인 프로젝트가 시작되었다. (이때까지만 해도 다들 더듬더듬 따라하셨는데, 마무리 된 지금 시점에서는 진짜 기본적인 것들은 착착 잘 작성하셔서 내심 뿌듯했다🤗🥰)

 

 

2. 백엔드 파트. API path가 이렇게 중요했어요.

혼자 공부를 하고, 프로젝트도 개인단위로 하다보니 API path가 이렇게 중요한지 몰랐다. 그냥 막 적어도 되는 줄 알았는데

path를 통해 이게 어떻게 동작하는 API인지 알 수 있어야 한다는 코치님의 조언과, 백엔트 파트 개발을 마치고 프론트 파트 개발을 도와주면서 진짜 많이 깨달았다.

코치님의 금쪽같은 조언과 상세한 리뷰가 아니었다면 프론트 파트를 했을때 ... 아마 파국이 되지 않았을까🤔

 

 

3. 내 이름은 Git. 함정이죠.

프로젝트를 진행하면서 발생한 이슈들이 많지만, 그중에서도 비중이 높은 축에 속하는건 Git이 아닐까 싶다. 다들 처음 접해보는 것이기도 하고, 익숙하지 않아서 초반에 팀원분들이 애를 먹었었다.  엘리스 랩에서 깃 관련 특강을 해주었지만, 실제로 프로젝트에서 발생한 깃 이슈들을 직접적으로 맞이하다 보니, 체감이 다를 수밖에..! 😮

 

conflict 났는데 어떡하죠..?

마스터 브랜치를 제 브랜치에 합쳐버렸는데..

어? 브랜치가 꼬인거 같아요

pull이 안돼요ㅜㅜ

push가 안돼요ㅠㅠ

 

이슈들이 발생했을때마다 팀원분들이 나를 찾아주셨는데, 당황하시고 안절부절 하시는 모습에서 예전 깃을 처음 접해서 상당한 오류들을 맞이하게 되어 당황한 나의 모습을 회상(?)할 수도 있는 시간이었다. (진짜 그때는 브랜치를 몇번을 날렸던지..) 아무튼간에, 처음엔 다들 우왕좌왕했었지만 프로젝트 막바지에 다다르니 confilct 정도는 이제 당황하지 않고 찾아가시는 팀원들 모습에 괜히 뿌듯해졌었다. 

 

요 깃 이슈 때문에 시간을 꽤 잡아 먹었었는데, 그래도 깃을 좀더 다룰 수 있는 경험을 쌓게 된거 같아서 아주 만족한다.

최고로 만족하는건 우리 팀원분들의 향상된 깃 다루기.

 

 

 

4. 하면 된다. 이게 되네..?

우여곡절이 많은 팀 프로젝트. 마감 2일 전까지도 부분적으로만 완성이 되고, 전체적으로 합쳐지지 않아 웹 페이지가 매끄럽지 못했었다. 다 못하는거 아냐..? 했는데 진짜 어떻게 한건지 몰라도 서비스 배포까지 했다. 와, 이게 되는구나.

최종적으로 서비스 배포할때 큰 이슈가 있었는데, 임시 데이터를 다 지우고 최종 버전을 vm에 올리는 순간..!

 

"안녕? 나는 에러라고 해."

 

기가막히게 에러가 터져나왔다. 어디 숨어있었는지, 격하게 환영해주는데.. 나는 이런 서프라이즈 파티를 원하지 않았는데, 강제로 초대당한 기분이었다. "망했다.. 진짜 못내는건가..?" 싶었는데, 이럴 때 빛나는 건 집단 지성과 팀워크.

다들 디스코드에 모여서 같이 새벽 내내 에러를 잡아서 결국 성공했다. 작은 거 하나하나 처리할 때마다 희망이 보였는데, 진짜 그 희망이 기적이 된 것 같은 기분을 맛봤다.

 

진짜하면 되는구나. 이게 되네. 

 

구현한 기능들이 멀쩡히 잘 돌아가고, 시연 영상도 무사히 잘 찍을 수 있어서 너무 좋았다. 이번 2주간의 빡센 프로젝트를 경험하면서 진짜 많은 것들을 배울 수 있었고, 잠시 잊고 있었던 내용들을 복습할 수 있는 계기가 되어서 너무 좋았다.

 

아. 그리고 피그마.

피그마를 좀 다룰 줄 알아야겠다. 프론트엔드&백엔드의 덕목이라고 하는 피그마를 잘 다룰 줄 몰라서 발표자료를 만드는데 애를 좀 먹었었다. 같은 팀원분이 피그마를 슉슉 멋지게 잘 다루시는데, 슬쩍 물어보려고 한다. (히히)

알고리즘, 언어 공부도 좋지만 협업 할 때 쓰이는 피그마도 볼 줄 알아야지...!

 

 

새로 배워야 할 것들을 알아가고, 또 새로 배우고, 복습하는 경험을 많이 쌓아간 2주간의 프로젝트 회고록 끝.

 

 

 

 

 

2주동안 너무 고생 많았던 팀원 분들께 박수를 보냅니다🤗👏👏

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript