프로젝트 Introduction

엘리스 트랙은 HTML -> CSS -> JavaScript: 기초문법 -> TypeScript: 맛보기 -> express.js 순으로 커리큘럼이 진행되고, 이후에 1차 프로젝트를 진행한다. 사실 지금까지의 이 과정을 단 1개월 반만에 배웠다고 생각하니 말도 안되는 난이도인 것 같기는 하다. 엘리스에 지원하는 비전공자들 같은 경우 기존에 개발을 많이 진행해 본 경험이 있는 사람들도 있지만, 아무런 베이스도 없는 상태로 임하는 사람들도 많아서 레이서: 수강생 마다의 차이가 엄청나다. 무튼 그렇게 진행되는 프로젝트라 사실 완성도에서 부족할 수 밖에 없는 것이 현실인 것 같다.

Stack

앞서 말한대로 순수 자바스크립트 만을 이용하여 코드를 작성하게 되는데, 백엔드는 express.js를 사용해서, 프론트엔드도 레이아웃에 JavaScript를 입혀서 코드를 작성하게 된다. 백엔드 같은 경우 추가적으로 passport나 bodyParser 같은 모듈들을 사용하기도 하는데, 워낙 기본적인 모듈이라 스택이라고 보기는 어려울 것 같고, express.js + mongoDB를 활용한 프로젝트라고 생각하면 된다.

주제

지난번까지는 스켈레톤 코드가 주어졌다고 하는데, 이번에는 아쉽게도 그런 게 없었다. 단순히 주제가 쇼핑몰로 정해졌고, 엘리스 측에서 기능 구현에 관한 요구사항을 준다. 이러한 필수적인 기능들을 먼저 일주일 동안 구현한 후, 2주차 때는 추가적인 기능구현을 진행하는 방식이다. 사실 일주일 만에 다 하기 힘든 양의 기능 구현이기는 하지만, 노력을 갈아 넣으면 가능은 할 정도의 난이도인 것 같다.

전반적인 후기

프로젝트 진행 전 포지션 수요조사를 진행한다. 난 당연히 프론트엔드 쪽 비율이 압도적으로 많을 것 같았는데, 생각보다 백엔드 포지션들이 꽤나 있었다. 다행히라고 생각했지만, 예상치 못한 탈주 인원들도 꽤나 있어 생각보다 적은 팀원들로 프로젝트를 진행하게 되었다. 그렇게 팀원은 프론트 3, 백엔드 2로 구성되었다.

초반에 레이아웃을 짜는 데 애를 먹었다. 피그마를 사용하려 했으나, 시간이 없다는 압박감에 정말 간단한 레이아웃을 그리고 곧바로 코드를 작성하기 시작했다. 이론만으로 배웠던 CSS를 실제로 적용하는 것은 그렇게 쉬운 일이 아니었다. Grid, FlexBox 같은 속성들이 내가 원하는대로 배치되지 않았고, 그래서 BootStrap의 도움을 받아 기본적인 레이아웃만 구성한 채로 기능 구현에 들어갔다. 다행히도 코딩 경험이 있어서 그런지 기능 구현에서는 큰 어려움이 없었는데, 문제는 다른 팀원들이었다.

강제 풀스택(?)

각자 맡은 파트가 있었지만, 원하는 만큼의 진행속도가 나오지 않아 답답한 느낌이 있었다. 학부 시절 때와는 전혀 다른 페이스였고, 첫 플로우에서 시간 지연이 심해지는 바람에 뒤의 Front - Back 연동 작업이 매우 늦어져버렸다. 지적하기에는 눈치가 보이고, 다들 노력도 열심히 하고 있는 것 같아 재촉도 안하고 일단 기다렸는데 사실 이 부분이 굉장히 후회되는 부분이다. 로그인 같은 경우 Chat GPT를 사용하면 사실 1시간도 안되서 구현할 수 있을만큼 쉬운 부분이었는데, 여기부터 막히는 바람에 다음 플로우가 전혀 진행이 되지 못했다.

개인적으로 프로젝트에 대한 욕심이 있어서 레이아웃 부분에 신경을 쓰고 싶었는데, 코드 이슈가 너무 많아 해결에 초점을 맞춘 상태로 프로젝트를 진행했다. 이미 어느정도 작성 되어버린 코드를 다 지우고 새롭게 만들기도 눈치 보여서 계속해서 기다리며 이슈가 발생하면 해결해주는 쪽으로 진행하게 되었다. 그렇게 프론트엔드, 백엔드의 이슈를 모두 처리하게 되면서 프로젝트에 대한 개괄적 이해가 쌓이게 되었다는 장점이 있기는 했다.

배포 관련

배포가 많이 늦었기는 했지만 다행히도 원할하게 진행되었다. 사실 그렇게 큰 의미가 있지는 않겠지만, 나름 맥을 오래 써오기도 했고 유닉스 사용 경험이 있어서 배포에 어려움을 겪지는 않았다. 그렇게 IP를 할당 받아 프로젝트를 개발 경험이 있는 친구들에게 공유했고, 친구들은 신나게 이슈들을 불러주었다. 사실 이슈를 찾아준다는 것은 정말 고마운 일이지만 당장 육안으로 보기에도 부족함이 많은 사이트였어서 대부분 예상이 가는 이슈들이 많았다.

로그인 무한 이슈

프로젝트의 처음부터 끝까지 로그인이 발목을 잡았는데, 막판에 그냥 라우터 파일을 많이 고쳤다. 간단한 예외처리도 잘 안되어있는 부분들이 많아 서버가 정말 자주 꺼졌다. 처음에 되게 당황해서 급하게 소스를 핫픽스 했는데, 친구들이 또 다른 오류를 찾아줘서 빠르게 문제를 해결했다. 10분이면 해결할 수 있는 오류들이 많았는데, 이 부분에 대해서는 팀원들에 대한 아쉬움이 컸다. 결국 모든 에러처리를 완료하여 현재는 로그인으로 인해 서버가 꺼지는 일은 없는 상태이다.

GIT 관련 이슈

깃 사용 경험이 있는 사용자들이 많이 없다보니 애를 많이 먹었다. 브랜치를 만들어 소스를 공유해도 clone을 잘못하여 conflict가 발생하는 경우가 많았고, 대놓고 이야기를 하기에는 팀원들에게 상처가 될 것 같아 아, 뭔가 깃이 꼬인 것 같습니다, 에어드롭으로 파일 주십시오 라고 이야기를 했다. 부산에서 프로젝트를 위해 성수까지 왔는데, 이 부분에 대해서는 나름 잘 한 일이라고 생각하고 있다.

최종 결과물

코치님과의 상의 끝에 레이아웃에 힘을 조금 더 싣기로 마음 먹고, 관련 라이브러리를 좀 찾아봤다. 친구에게서 tailWind, chaKra 이 둘을 추천 받았는데, 편하게 CDN으로도 사용할 수 있는 tailWind을 활용하여 UI 개선하기로 했다. 다행히도 이 부분은 레이아웃을 잘 짜는 팀원이 있어서 빠르게 진행될 수 있었다.

Pinterest 와 같은 갤러리 형태로 메인페이지 UI를 만들게 되었고, 카테고리 별로 분류하여 진행하니 꽤나 괜찮은 모양새가 나오기는 했다. 상품 관련 API나 레이아웃 같은 경우 특별한 이슈가 있지는 않았어서 다행히었다.

소감

SSR로 진행을 하려다 템플릿 엔진을 사용하기에 사전지식이 부족했어서 HTML 파일을 href 하는 방식으로 진행했는데, 페이지마다 적용되어야 할 부분들이 아직 많이 적용이 안 된 상태이다. 이후에 render 방식들을 배우면서 어떻게 하면 효율적으로 공통된 컴포넌트를 렌더링 할 수 있는지에 대한 추가적인 학습이 필요할 것 같다.

그리고 사실 백엔드 연동에 너무 신경을 많이 써서 개인적으로 진행할 수 있었던 부분까지 못하기도 했는데, 이 부분은 내 잘못이 맞는 것 같다. 어느정도의 밸런스 있는 진행을 추구했어야 했는데 너무 이슈 해결에 혼을 쏟았다. 다음에는 진행할 부분 다 진행해놓고, 문제가 있으면 문제되는 파일을 받아 통째로 작업하는 방식으로 진행해야 할 것 같다.

리액트를 진행하기 전에 이번 프로젝트를 하면서 여러 이슈들을 접했기 때문에 개인 프로젝트도 어느정도 구현할 수 있을 것 같다는 자신감이 생겼다. 그래서 시간이 좀 된다면 순수 자바스크립트만을 이용한 웹페이지를 하나 만들 것 같은데, 다음주에 바로 리액트 강의가 들어가서 진행할 수 있을지 잘 모르겠긴 하다. 그래도 하는 데까지 해봐야지.