[우아한테크캠프] 배민 회원가입 프로젝트

시간이 이렇게 빨리 흘러가나라고 느껴질 정도로 한 주가 빨리 흘러갔다.
OT 내용에 언급했던 것처럼 이번 주 프로젝트는 로그인/회원가입 기능을 VanillaJs, node express를 이용해서
풀스택 개발을 진행하는 것이었다. 사실상 OT 날 제외하고 금요일 오전에 프로젝트 마감이라 이틀하고 반나절이라는 시간이 주어졌다.
둘째 날 강의장에 오니 1주 차 팀을 배정해 주셨다. 개인 프로젝트지만, 각자 의견을 나누면서 개발을 진행하라는 의미로 팀을 짜주셨다.
팀과의 첫 만남에서 아이스브레이킹 타임을 가졌다. 4명이지만 다양한 사람이 있었다. 경력자, 비전공자, 전공 학부생..
짧게 얘기를 나눴지만 전부 배울 점이 많고 실력이 뛰어나셨다.

 

그렇게 팀원들과 프로젝트 방향성이나 개발 환경에 대해서 의논을 얘기했다. 내가 구상한 것과 완전히 달랐다.
처음 구상한 것은 서버에서 빈 html을 내려주면 프런트에서 spa로 개발하고 회원가입/로그인 시 서버에 api 요청을 하고 응답 결과를 기반으로 작업하는 것으로 예상했다. 하지만, ssr 방식으로 서버에서 html까지 그려진 상태로 내려주는 방식으로 전부 기능 개발을 서버에서 하는 것이었다.

 

프로젝트 후기

FE 요구사항

• ES Class를 사용하지 않고 함수만으로 작성
• 외부 라리브러리 사용 금지

BE 요구사항

• Node.js와 Express를 사용
• 쿠기와 세션을 이용하여 로그인 구현
• npm으로 설치 가능한 간단한 Embedded DB사용

위의 요구사항에 따라 팀원들과 얘기를 나눠서 동작 과정을 생각했다.
node에서 뷰 엔진 중 하나인 pug를 사용해서 html을 그리고 그 외에 필요한 css, js 파일은 개발하여 import 해서 전체 파일을 프런트에 내려주는 전형적인 ssr 과정으로 진행했다. api 요청에 따른 로직은 node 라우터에서 요청 값을 기반으로 db 로직, 응답 로직을 수행해서 반환해 주면 된다.

 

여기서 뷰 엔진이란?

뷰엔진은 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용한다. 뷰엔진에서 요구하는 형태로 템플릿 파일(문서)을 만들고, 해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다.

뷰 엔진 종류 중 하나인 pug를 사용하기로 했다. 간단한 사용법은 다음과 같다. (공식문서)

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    .container 
    header.header-title My 배민
    nav
      img.nav-banner(src='/images/banner.png')

 

환경 세팅

웹 프레임워크인 express를 사용하여 서버 구축을 간결하게 하고 필요한 패키지와 구조를 잡아주는 generator을 이용하여 기본 환경 세팅을 이용했다. 그리고 view 엔진 Pug를 이용하기 위해 기본 환경 세팅을 다음과 같이 가져갔다.
(나중에 진행하긴 했지만 db는 json 기반으로 동작하는 쉽고 간편한 lowdb를 이용했다.)

npm install express-generator -g
express --view=pug -f

폴더구조와 기본 서버 환경세팅을 제공해준다.

개발 (레포 주소) (배포주소)

맥북을 처음 사용했기에 적응할 시간도 없이 바로 개발을 진행해서 엄청 불편했다. 그리고 폴더 구조에 한글이 껴있으면 git도 제대로 인식하지 못하는 문제로 이상한 삽질을 오래 했다. 서버도 처음이었고 이래저래 많이 부족하다고 느꼈다. 그래서 요구사항을 전부 개발하지는 못했다.

로그인

회원가입 일부분

개발 이슈

 

fetch api를 이용해 데이터를 서버로 보내고 서버에서 처리 후, 결괏값과 함께 해당하는 html(pug 파일)을 렌더링 하는 형식이었다.
하지만, 프런트로부터의 요청, 서버로부터의 응닶은 넘어오지만 페이지 이동은 정상적으로 이루어지지 않았다.
서버에서 render, redirect 옵션을 이용했지만 똑같은 이슈가 발생했다.
팀원과 이슈를 의논하는 중, fetch는 바로 redirect로 페이지 이동이 안되는 이슈가 있다고 알려주셨다.

그래서 서버에서는 redirect을 정상적으로 응답해 주고 프런트에서 fetch 요청에 대한 응답 값에서 redirect 값이 있다면 프런트에서 링크 이동하는 방식으로 해당 이슈를 해결할 수 있었다.

// 서버 라우터 로직
router.post('/', function (req, res, next) {
	res.redirect('/')
})

// 프론트 api 요청 로직
const result = await fetch('/signIn', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email,
        password,
      }),
    })

if (result.redirected) window.location.href = result.url

 

코드 리뷰

프로젝트 마감이 끝난 후, 멘토님들이 랜덤으로 몇몇 학생들의 레포를 들어가 전반적으로 코드 리뷰를 해주셨다.

• 디버깅 적극적 활용하기
• 자기만의 구현 방식으로 작성하기 (코드 리뷰와 공유는 좋지만 통일성은 기피)
• 파일 이름에 동사는 없애기
• 파일은 계층적으로 나누기
• 콜백 함수 부분에 작성되는 로직은 함수로 빼기
  • ex) addEventListener('cilck', 함수 이름) 
• css bem 방법론을 활용하는것이 편의성에 좋다
• 숫자 길이 체크하는 로직도 숫자를 직접 적어서 사용하는 것보단 어떤 의미인지 알 수 있게 변수화를 통해 사용해라 (매직 넘버)
• http 관련 공부는 꾸준히 할 것
• git branch 전략은 심플한 게 좋음 (우형 깃 브랜치 전략 추천)
• 모든 기술 스택이나 모든 것을 남들이 써서 쓰는 게 아니라 필요에 따라 목적에 따라 근거 기반으로 사용하는 주관이 필요하다.

 

1주차 전체 회고

좋았던 점

잡담도 경쟁력이다.

우아한 형제들에서 일을 더 잘하는 방법 11 가지 중에 하나인 "잡담도 경쟁력이다."라는 부분이 있다. 이게 어떤 의미인지 한 주 동안 많은 사람들과 얘기를 나눠보니 알 수 있었다. 사람들과 중간중간 얘기하는 시간에서 자연스럽게 개발 얘기나 프로젝트 얘기가 나온다. 그 속에서 이 사람은 어떤 생각으로 개발을 진행하는지 알 수 있었고, 또 서로 프로젝트를 공유하면서 이슈 해결, 설계, 로직 등 다양한 얘기를 통해 프로젝트 개발 시 엄청 많이 도움이 됐다.

협업

개인 프로젝트지만, 팀을 배치해 주셨고 함께 개발을 진행했다. 혼자 했다 라면 시간에 쫓겨 폴더 구조나, 깃 브랜치 전략, 이슈 관리를 제대로 활용하지 못했을 것 같은데 어떻게 이슈를 관리하고 브랜치 이름은 어떻게 작성할 것인지 얘기를 통해 협업하는 과정을 배웠다. 또한, 처음으로 서버를 구축했지만 팀원들과 하루에 2~3 스크럼을 통해 개발 상황과 요구 사항을 얘기하면서 빠르게 개발을 진행할 수 있었다 팀원이 없었더라면 서버 부분은 개발은 아예 하지 못한 채 학습하다가 끝났을 것 같은데 많이 도와주셨다.

 

풀스택 경험

작지만, 풀스택 개발과 db 개발 작업을 통해 하나의 사이트가 어떻게 돌아가는지 원리에 대해서 알 수 있었다.

프론트만 계속 학습했기에 이런 과정이 궁금해서 우테캠을 지원했었다. 작은 사이트지만, 풀스택 경험을 통해 이런 원리를 알 수 있었다.

 

 

아쉬웠던 & 어려웠던 점

맥북..

윈도우로만 사용했던 나에게는 맥북 개발이 너무 불편해서 이것도 개발 속도에 큰 영향을 준 것 같았다...빨리 맥북에 익숙해져야겠다.

 

부족한 개발 실력

짧은 기간에 다양한 기술 스택을 사용했어야 했다. 그렇기 때문에 제대로 학습할 시간이 없었다. 평소 개발 학습법은 어떤 것을 프로젝트에서 사용하기 전에 사전에 미리 충분한 학습을 거쳐 프로젝트에 도입했었다. 그래서 "이건 이렇게 되고, 저건 저렇게 돼서 이렇게 되는 구나", "이건 이렇게 해야지 훨씬 깔끔하고 좋지" 등 판단과 근거가 생겨서 개발을 진행했었다.

 

하지만 이번엔 학습할 시간 없이 바로 서버 구축과 pug, db 등을 도입했어야 했다.  그래서 개발 과정에서 "왜 이게 이렇게 되지?, 이게 맞나?" 잘 이해가 가지 않은 상태로 개발을 했었다. 그래서 시간이 다소 지체되었고 결국 프로젝트를 전부 수행하지 못했다.

이런 개발 학습 방법에 익숙하지 않아서 생기는 문제라고 판단됐다. 빠르게 적응하기 위해 노력해야겠다.

 

시간 관리

처음 기획한 것은 환경 세팅을 끝내고, 프론트 작업을 전부 수행 후 서버 작업을 해야겠다고 생각했다.

하지만, 프론트 작업만 하다가 개발 기간이 끝날 것 같아서 서버와 db도 경험해 보고 공부하기 위해 마지막 회원가입 기능은 구현하지 못한 채, 로그인 기능 부분 로직을 통해 서버와 db 연동을 수행할 수 있었다.

 

멘토님이 프로젝트 수행 "ui나 프론트에만 너무 집중하지 말고, ui는 부족하더라도 서버나 이런 것을 다뤄보세요"라는 말처럼 적절하게 업무를 나누고 시간 관리를 했어야 했는데 많이 부족했다고 생각한다. 4기 선배님이 오셔서 시간관리에 대해 특강 해주셨던 것 처럼 시간 관리와 업무 작업을 잘 고려해야겠다.