19일부터 항해를 본격적으로 시작하게 되었다. 99일 9 to 9 내내 코딩만 하면 개발자가 될 수 있다는데.. 벌써부터 겁이 나는건 왜일까? 존버(존중하며 버티기)해서 1인분하는 개발자가 되었으면 좋겠다.

나는 A팀 7조의 조장으로 배정을 받았고, 2명의 팀원이 생겼다. 이렇게 셋이서 처음으로 프로젝트를 진행하게 되었다. 1주차의 keyword는 jwt 토큰과 jinja2 이다. 우리 조는 jwt 토큰을 이용하여 로그인 / 회원가입 기능과 함께 댓글 게시판을 만들어 CRUD를 구현하는 프로젝트를 진행하게 되었다. 사전 프로젝트의 경우 ajax로 서버와 클라이언트 사이에 데이터를 주고 받았다면, 이번 프로젝트에서는 jinja2 라는 server side template를 사용해보았다.

1) 프로젝트 소개

프로젝트 명

위슐랭(We + Michelin)

서울에 미슐랭 별을 선정받은 식당들을 미슐랭 가이드 사이트에서 크롤링하여 메인페이지에 별 개수에 따라 내림차순으로 리스트업했다. 그리고 각 식당별로 게시판 페이지를 만들어서 댓글을 생성, 조회, 수정, 삭제할 수 있도록 했고 다른 사용자가 생성한 댓글을 제어(수정, 삭제)할 수 없도록 막아 놓았다. 또한 마이 페이지를 제작해서 댓글 모아보기 기능을 구현해 놓았다.

팀원

A반 7조

강창식

• 식당 데이터 크롤링 후 메인페이지에 보여주기
• 댓글 페이지 디자인 및 CRUD API 구현
• 로그인 / 로그아웃 페이지 디자인
  (블로그 주소 : https://velog.io/@k_siik)

안성재

• 로그인 / 로그아웃 API 구현
• 마이 페이지 디자인 및 댓글 모아보기 API 구현
• 프로젝트 전반적인 고문 역할
  ( 블로그 주소 : https://velog.io/@jaesa5221)

고호성

• 로그아웃 API 구현
• 전반적인 프런트엔드 개발

기타

프로젝트 기간

2022.09.19 - 2022.09.22 (4일간 진행)

Github 주소

https://github.com/K-SIIK/WECHELIN

2) 프로젝트 내용

메인 페이지

User flow 에 따라 설명을 하자면, 먼저 메인페이지에 접속하면 미슐랭 가이드에서 크롤링한 데이터를 메인 페이지에 별 개수에 따라 내림차순으로 보여준다.

각 식당을 클릭하면 해당 식당의 댓글 페이지로 넘어가게 된다. 이 때, 사용자가 로그인을 했는지 여부에 따라 서버는 클라이언트로부터 jwt 토큰을 받아 댓글 페이지로 넘어갈지 말지 결정한다. 로그인을 하지 않을 경우 로그인을 하고 댓글을 작성하라는 alert창을 띄우고 로그인 페이지로 넘어간다. 회원가입이 되어 있는 유저는 로그인을 하면 되고, 계정이 없다면 회원가입 페이지로 넘어간다.

회원가입 페이지

회원가입 페이지에는 아이디, 비번, 비번2를 입력받는데 아이디와 비밀번호는 정규식을 사용하여 규칙에 어긋나는 아이디와 비밀번호를 만들 경우, 경고 alert창을 띄우며 회원가입을 막는다. 비번1, 비번2의 경우에도 일치하지 않으면 경고창을 띄운다. 비밀번호의 경우 서버의 데이터베이스에서 유저들의 비밀번호를 비공개로 설정하기 위해 hashlib 이라는 모듈을 사용하여 비밀번호로 입력받은 문자열을 암호화한다.

hashing -> 해싱이란 가변 크기의 입력값에서 고정 크기의 출력값을 생성하는 과정이다. 모든 해시 함수가 암호 방식을 사용하는 것은 아니지만, 이 프로젝트에서는 다양하게 입력되는 비밀번호 문자열을 해싱하여 고정된 크기의 문자열로 암호화했다.

로그인 페이지

회원가입을 하고 로그인을 할 때, 아이디와 비밀번호를 입력받으면 이를 서버로 보내 데이터베이스에 해당 계정이 있는지 확인하고, 비밀번호 문자열을 인코드하여 해싱을 거친 데이터와 데이터베이스의 비밀번호를 비교하여 로그인을 한다.

로그인을 하게 되면 모든 페이지를 렌더링할 때, id 데이터를 전달하여 헤더 부분에 'UserId 님, 환영합니다.' 문구를 출력한다.

댓글 페이지

식당을 클릭하고 들어가면 댓글 페이지가 나오고, 해당 식당에 대한 후기라던가 댓글을 포스팅할 수 있다. 댓글 페이지는 우리가 지정한 id인 reviewId 값을 각 식당마다 가지고 있어, 식당 별로 댓글을 달 수 있도록 했다.

댓글을 포스팅할 때, 댓글 문자열과 함께 유저 id, reviewId, 그리고 댓글을 특정하기 위한 id 이렇게 4개의 데이터가 데이터베이스에 저장된다. id 데이터의 경우, 댓글 카드에 댓글 내용과 함께 id도 함께 출력된다. 그리고 다른 유저의 댓글을 수정, 삭제할 수 없도록 하기 위해 사용된다. reviewId와 댓글 id인 cmtId는 댓글 수정, 삭제를 할 경우, 데이터베이스에서 해당 댓글을 불러오기 위해 사용된다.

다른 유저의 댓글을 수정, 삭제를 하려고 버튼을 누를 경우, 해당 유저의 id를 서버로 보내 데이터베이스에서 댓글을 단 유저의 id와 버튼을 누른 유저의 id를 비교해 alert 경고창을 띄운다.

마이 페이지

마이 페이지에서는 다양한 식당의 댓글 페이지에서 달았던 댓글들을 한 곳에 모아볼 수 있는 기능을 구현했다. 데이터베이스에서 댓글 컬렉션 내에 유저의 id에 해당하는 댓글을 모두 클라이언트로 보내 카드 형태로 보여준다. 카드를 클릭하면 댓글을 달았던 식당의 댓글 페이지로 이동하게끔 했다.

3) 프로젝트 소감

일단 가장 크게 느꼈던 점은 첫주부터 정말 팀운이 좋았다는 생각이 들었다. 두 분 다 열정적이시고, 성격도 착하셨다. 프로젝트 중간중간 스몰톡하는 재미가 쏠쏠했다. 정말 힘든 순간이 많았지만 두 분을 만나지 않았더라면 포기했을지도 모르겠다. 성재님의 경우에는 자발적으로 자신이 공부했던 내용이라던가 본인이 짠 코드 리뷰를 해주셨다. 게다가 내가 멘탈이 깨졌을 때 심리 치료도 해주신 분이다.. 호성님의 경우에는 깃 관리에 능숙한 분이셔서 이런 것들을 많이 배웠다. 그리고 우리조의 개그캐 담당이였기 때문에 힘들 즈음 하면 호성님이 웃겨 주셔서 분위기가 refresh되곤 했다. 이런 분들을 만났다는건 정말 행운이라고 생각하고 항해를 수료하고도 쭉 인연을 이어가고 싶다.

프로젝트 관련 소감을 말하자면 한숨 밖에 안나온다. 프로젝트 초반에는 엄청 열정이 넘쳐서 사전 프로젝트 때에는 하지 못했던 로그인 api를 내가 담당해 보고 싶었지만 crud 조차도 헤매서 우리팀의 에이스인 성재님이 담당하게 되었다. 진짜 잘 안풀릴 때는 매니저님과 상담해서 10기로 이월하고 그동안 좀 공부를 해볼까? 하는 생각이 들 정도였다. a반의 몇몇 분과 이야기해본 결과, 2주차인 알고리즘 문제 풀기보다 1주차 프로젝트가 훨씬 편했다고 하는데 난 완전 반대다. 1주차 때 스트레스를 너무 많이 받아서 오히려 지금이 너무 재밌고 좋다.

순간순간 두려울 때가 많다. 두렵다기 보다는 걱정이 되는..? 앞으로도 힘든 순간이 많을텐데 그럴 때마다 포기하고 싶은 기분이 들까봐 걱정이다. 앞으로도 좋은 조원을 만나서 서로 힘이 되서 끌어주고 당겨줘서 수료까지 포기하지 않고 가고 싶다.