웹 개발 입문자의 우당탕탕 개발기 – 8

안녕하세요. 지난 글에 이어 지적 덕후생활 공동체(지덕체)개발기를 연재하고 있는 ryukim입니다. 지난 글에서는 3주차 과제를 해결하는 과정과 시행착오에 대해 적어봤는데요. 오늘은 서비스 시작 전 마지막 4주차 과제에 대해 글을 써보겠습니다.

조금 더 제대로 서비스하는 페이지답게

Footer 만들기

지난 주 멘토님께서 이제 정말 MVP 완성까지 얼마 남지 않았고 마지막으로 조금 허전한 부분들을 채우기 위해 서비스하는 페이지에 꼭 필요한 몇가지를 추가하는 과제를 내주셨습니다.
그 중 첫 번째는 Footer였는데요. 스켈레톤이 만들어질 때부터 Footer를 만들어야 한다고 생각은 해왔지만 어떤 내용이 들어가야할지도 잘 모르겠고 기능적 구현보다는 디자인이 주된 영역이라고 생각해 계속 미뤄왔습니다.
이제 어느정도 css 문법을 사용할 줄 알게 되었고 어떤 내용이 들어가야하는지 멘토님이 정리해주셨기에 빠르게 만들 수 있었습니다.

이용약관에 필수적인 기능

Footer에 꼭 들어가야할 내용 중 하나가 이용약관이었는데요.
이용약관의 내용은 어떤 사이트든 큰 틀에서 벗어나지 않기에 다른 커뮤니티 페이지의 약관을 참고하였습니다.
멘토님께서 이용약관 페이지를 보시고 꼭 들어가야하는 기능이 있다고 말씀해주셨는데요. 바로 약관의 history를 볼 수 있는 기능이었습니다.
다른 커뮤니티나 서비스들의 이용약관을 봐도 언제 변경된 약관인지, 그리고 그 이전의 약관의 내용을 볼 수 있도록 되어있었고 이러한 기능은 필수라고 말씀해주셨습니다.
다만 이 기능은 구현에 조금 시간이 걸릴 것으로 판단하여 서비스 시작 후 다음 약관이 필요해질 때까지 구현하는 것을 목표로 세웠습니다.

소통창구 만들기

또 하나 계속 만들어야지 생각만 하고 미뤄둔 기능이 하나 있었는데요. 바로 사용자들과의 소통창구를 만드는 일이었습니다.
먼저 Footer에 운영자와 소통할 수 있는 이메일을 추가했습니다. 그리고 또 하나, 멘토님께서 조언해주신대로 공지사항 페이지를 만들었습니다.
최종 목표는 랜딩 페이지에 공지사항 팝업창을 띄울 수 있도록 하는 것이었는데, 이 기능은 프론트엔드에 대해 조금 더 공부가 필요할 것으로 생각해 일단 페이지로만 간단하게 구현했습니다.
공지사항 업로드는 기존 상품 업로드 페이지를 조금 변형하여 쉽게 구현할 수 있었는데, 다만 기존 상품 업로드는 줄 바꿈 등을 신경 쓰지 않고 제작하다보니 공지사항도 한 줄로 출력되는 문제점이 있었습니다.
이 문제는 다음 블로그()를 참고하여 해결할 수 있었습니다.

작동하지 않던 버려진 기능들 되살리기

유저 계층화 작업

멘토님께서 마지막으로 추가해야할 작업으로 조언해주신 것 중 하나는 바로 유저계층화였습니다.
유저마다 role과 level 필드를 추가하여 판매자, 구매자, 어드민을 구분하고 레벨 별로 접근할 수 있는 기능을 구분해보라고 하셨습니다.
사실 기존에도 level 테이블이 존재했는데 혼자 운영하고 있고, 사용자 간에도 레벨 별로 권한 차를 두고 싶지 않아 사용되지 않고 있었습니다. 하지만 추후 사용될지도 모른다고 생각해 hoc(higher order component)에 level 필드에 따른 접근 제한 기능을 추가했고, 이는 서비스 시작 후 추가한 이메일 인증기능 구현에 큰 도움이 되었습니다.
그리고 role 필드 대신 admin 필드가 boolean 형으로 기존에 구현되어 있었는데, 덕밥 프로젝트부터 지금까지 저의 목표는 확고히 누구나 굿즈를 올릴 수 있는 서비스를 만들자였기에 별도로 판매자와 구매자를 구분하지 않고 그대로 admin 필드를 유지하기로 결정했습니다.

토큰 만료 시키기

로그인 시 생성되는 토큰의 만료 기능은 강의를 보며 따라 만들 때 아무것도 모르고 일단 추가해놨던 기억이 있었는데요.
막상 코드를 꼼꼼히 살펴보니 cookie와 DB에 tokenExp 시간을 추가해줄 뿐 별다른 이후 동작이 없음을 발견했습니다.
그래서 해당 부분 코드를 과감히 삭제하고 구글링을 통해 token expire 기능이 정상작동 되도록 수정했습니다.
다음 블로그()를 참고했으니 같은 내용이 필요한 분들은 살펴보시면 도움이 될 것 같습니다.

어려운 로그 작업을 대체해줄 GA

오늘도 또 한 번 부족한 점 깨닫기

저번주 멘토님의 마지막 과제는 일단 시간이 오래 걸리는 사용자 action 로그 분석 체계가 잡히기 전까지 고객을 분석할 수 있도록 GA(Google Analytics)를 붙여오는 것이었습니다.
GA 홈페이지에 들어가보니 index.html의 header 최상단에 코드를 붙여넣으라고 설명되어 있었는데요.
react로 앞단을 제작하며 한 번도 index.html에 대해 고민해본 적이 없던 저는 react앱을 build 했을 때 index.html이 생성되는 것을 봤던 기억이 나 그 안에 추가를 해줘야한다고 생각했습니다.
하지만 매번 빌드할 때마다 추가해줄 수는 없다고 생각해 다른 방법이 있을 것이라고 생각했고 react-ga 라는 라이브러리가 있다는 것을 발견했습니다.
하지만 라이브러리 설명을 잘 따라해봐도 데이터가 반영되지 않았고 자세히 읽어보니 react-ga에서 사용하는 코드는 과거에 사용했던 UA코드(universal analytics)였고 저에게 발급된 코드는 새로 도입된 G코드라는 것을 알 수 있었습니다.
그렇게 UA코드 발급받는 방법을 찾아 Universal Analytics 환경을 구성했지만, Google Analytics 환경보다 얻을 수 있는 정보와 기능이 적다고 판단해 다시 G코드를 적용할 수 있는 방법을 찾기 시작했습니다.
그러던 중 다음 블로그 글()을 발견했고 react로 코드를 짠지 세 달만에 처음으로 빌드 전에 index.html에 내용을 추가할 수 있는 index.html 파일이 존재한다는 것을 알게 되었습니다.
이렇게 또 한 번 제가 얼마나 부족한지 깨닫는 시간이었습니다.

이렇게 4주차 과제를 해결한 과정까지 글을 마쳤는데요. 오늘 글에서는 당장 급하지 않은 기능들이라 다음으로 미루고 넘어간 부분도 많고, 전반적으로 내용이 짧다고 생각됩니다.
하지만 다음 글부터는 서비스를 시작해 live 환경에서 오류를 잡고, 기능을 급하게 추가하고, CI/CD환경을 구축하는 등 다양한 이야기가 준비되어 있으니 많은 기대 부탁드립니다.
오늘 글은 여기서 마치도록 하겠습니다.
긴 글 읽어주셔서 정말 감사합니다!