[새싹x코딩온] 풀스택 개발자 부트캠프 과정 1차 팀프로젝트 회고(2주차 종료)

팀 설명

인원: 백엔드 2명, 프론트엔드 2명

작업기간: 12. 16일 ~ 12. 30일 

사용기술: NODE.JS, Express, Sequelize, EJS, JWT, AWS 등

사용 API: YOUTUBE.JS, CKEDIT5, Sheet.JS

 

담당하게 된 역할: 프론트엔드

작업페이지: main, search, detail, favorites, 404

 

이번 글은 이전 회고와 이어서 작성합니다

어느덧 프로젝트 제출기한이 3일도 남지 않았는데요 처음 참여하는 협업이라 실수를 많이 하기도 하고 개인적으로 진행하는 프로젝트와는 달리 신경 써야 하는 곳이나 혼자 할 땐 미처 몰랐던 개발할 때 규칙 그리고 소통과 최초 계획을 작성하는 게 얼마나 중요한가에 대해 많이 배운 것 같습니다

 

Git 실수를 저지르다

집에서 따로 맡은 영역의 프로젝트 작업을 진행하던 중이었는데 기능과 스타일을 작성하고 불필요한 코드를 가지치기하며 정리하던 중에 팀원의 코드를 삭제해 버린 걸 모르고 Push를 해버린 것입니다.. 이후 해당 코드를 작성한 팀원이 직접 사라진 코드를 확인하여 이후 코드상에 문제가 있어서 지운 것인지 확인을 요청하는 메시지를 보고서야 아?.. 😱 설마 하는 생각이 들었고 git commit 내역을 본 후 석고대죄하였습니다 다행히도 조금의 코드를 지운 상태였고 금방 다시 push 해주셔서 복구를 했습니다

 

왜 이런 일이 생겼을까?

문제는 개발 중 뒤늦게 어떠한 코드를 추가하거나 수정할 땐 타인이 작성한 코드파일을 건드려야 할 때가 분명 존재하는데 작업 전 그 페이지를 만든 팀원과의 소통의 부재, 기존코드 이해의 부족함과 Git사용 이해도가 낮았던 문제를 생각해 볼 수 있을 것 같습니다 이후엔 타인이 작성한 파일은 되도록 변경하지 않으며 만약 꼭 조치가 필요하다면 작성한 팀원에게 요청하여 수정될 수 있도록 하고 있습니다 그리고 반드시  Git에 add 하기 전 status로 내가 수정한 파일들이 정상적으로 추적되고 있는지 확인하고 있습니다

 

로그인을 했나? 안했나?

또 하나의 문제에 직면했습니다 로그인 여부체크를 어떻게 할 것 인지 정확하게 소통되지 않았다는 것입니다 초기엔 세션으로 로그인을 유지하는 것으로 했었고 프론트단에서 어떻게 로그인여부 값을 체크할 것 인지 미리 이야기가 되지않았습니다 그래서 이미 개발중인 상태에선 백엔드에서 프론트 Render 시 로그인과 관련된 값이 전달하지않기 때문에 프론트 단에서 로그인 체크를 해야 했는데 예전 라이믹스 CMS를 사용했을 때 아래와 같은 코드로 로그인을 구분했었습니다

<% if(isLogged){ %>
/* 로그인*/
<h1> 로그인함 </h1>

<% }else{ %>
<h1> 로그인 안함 </h1>

<% } %>

 

백엔드에서 UserInfo 객체를 전달해 줘서 UserInfo->isLogged 로 True, False 값을 받아 로그인 여부를 확인했었는데 이번 프로젝트에서는 백엔드에서 넘어오는 사용자 정보가 없었기에 직접 세션을 확인하여 로그인여부를 체크해야 했습니다 그래서 생각한 방법으로는 EJS 문법으로 세션값을 가져오는 것은 불가능합니다 왜냐하면 EJS는 서버사이드 템플릿 엔진이기 때문에 클라이언트의 브라우저의 document 객체가 있을 리가 없습니다.. 그러면 쿠기값을 어떻게 ejs 파일로 가져와서 사용할까! 당연히 가져올 방법은 없습니다

 

서버에서 사용자 정보를 제공하는 방식으로 바꾸던가 아니면 프런트단에서 가리고 보여주는 방식으로 작성해야 할 텐데 전 개인적으로 후자는 좀 찝찝한 처리방식이라고 생각되어서 전자의 방식을 선호했는데 후자의 방식으로 하면 소스보기로 가려져야 할 코드가 노출이 되기 때문에.. 물론 display:block으로 하여 본다고 해도 서버 2차 검증에서 필터링하겠지만😊! 

function loginCheak(token) {
  const loginAlert = document.querySelector("main > .memoBox > .loginAlert");
  const form = document.querySelectorAll("main > .memoBox .memoItem");
  if (token) {
    // 로그인 했을때
    if (loginAlert.classList.contains("loginAlert-On")) {
      // 블러와 알림을 없앤다
      loginAlert.classList.remove("loginAlert-On");
      loginAlert.classList.add("loginAlert-Off");
      form[0].classList.remove("blur");
      form[1].classList.remove("blur");
    }
  } else {
    if (loginAlert.classList.contains("loginAlert-Off")) {
      // 숨김
      loginAlert.classList.add("loginAlert-On");
      loginAlert.classList.remove("loginAlert-Off");
    }
  }
}

위 함수로 로그인 체크가 필요한 기능에선 token 값의 존재 유무로 체크를 한 뒤에 탱크를 숨기고 보여주는 방식으로 처리를 했습니다

이렇게 로그인 여부를 판별하고 로그인 후 정상적으로 이용할 수 있다는 문구를 띄워 사용자가 로그인하지 않고 열심히 작성한 글을 초기화시켜 버리는 불상사를 막을 수 있습니다 이후 정보들을 찾다 보니 상태관리 라이브러리라는 게 있었는데 이미 도입하기엔 시간이 너무 임박하여 2차 프로젝트에서 상태관리를 사용해보려 합니다

 

반응형은 어디까지?

이번 프로젝트에서 디바이스별 반응 사이즈는 부트스트랩의 브레이크포인트를 참고해서 개발하였습니다 모바일 576px, 태플릿 768px, 데스크탑 1024px 으로 지정하였습니다 실제로 구현하다 보니 피그마에서 디자인 한 시안과 모바일 비율의 크기가 차이가 있어서 대대적인 사이즈를 줄이는 작업에 들어가야 했습니다 그리고 개발하다 보니 CSS 중복이 생각보다 많다는 것을 알게 됐습니다 기능상으론 문제가 없었지만 좋은 코드라고는 볼 수 없기에.. 코드를 작성하고 남은 시간은 작성한 코드를 스스로 리뷰해 보면 중복을 조금이나마 정돈할 수 있겠을 것 같아서 이후로는 스스로 리뷰하는 습관을 들이려 노력했는데 마음처럼 쉽게 정리되진 않았습니다😂 다음 프로젝트에도 프론트엔드를 맡을진 모르겠지만 다음번에 만든다면  처음부터 차근차근 설계하여 좀 더 깔끔하고 유지보수하기 좋은 코드를 만들어 볼 수 있는 자신감이 생겼습니다

 

이번 팀 프로젝트를 진행하며  값진 경험을 많이 했는데 나의 실력 그리고 수업에 대한 이해도, 그리고 협업 시 어떤 부분에서 주의해야 하고 어떻게 시작하면 좀 더 시간을 절약하면서 이후 보수작업을 할 때 좀 더 편할지 등을 생각해 볼 수 있었던 아주 보람 있던 시간이었습니다 예상치 못한 버그 그리고 그 버그를 잡으면 발생하는 또 다른 버그 fix의 연속이었지만 재밌었습니다! 다음 2차 프로젝트도 굉장히 기대가 됩니다