티스토리 뷰
TITLE: 누구개 (부제: WhoisDog)
URL: https://whoisdog.herokuapp.com/
반려동물의 사진을 올려서 자유롭게 자랑할 수 있는 사이트이다.
팀 구성
- Back-end: 1명
- Front-end: 3명
개발 기간
- 2021/11/01 ~ 2021/11/05 (5일)
적용 기술
- Back-end: Python, Flask, Jinja2, MogoDB , jwt, S3, MondoDB Cloud, Heroku(PaaS)
- Front-end: HTML, CSS, JavaScript, Jquery, Flask, Jinja2, ajax
Database 설계
API 설계
구현 기능
1. 로그인 페이지
- 아이디 DB에 있는 내용과 일치하는지 검사
- 비밀번호 암호화 진행 > DB에있는 암호화 비밀번호랑 일치하는지 검사
- 로그인이 완료되면 jwt 토큰 발행 후 웹페이지 쿠키값에 저장
2. 메인 페이지
- 업로드 기능 구현(모달) > 업로드 한 DB 로 카드 구성
- 좋아요 많은순/최신순으로 정렬
- 메뉴바에 로그인페이지 /로그아웃페이지 이동
- 좋아요 클릭 할 수 있는 기능
3. 회원가입 페이지
- 아이디,비밀번호,닉네임 유효성검사 진행
- 유효성검사 완료시 DB로 회원정보 저장
- 비밀번호는 암호값으로 저장
4. 업로드 페이지
- 펫 나이는 숫자로만 입력할 수 있도록, 현실성 반영을 위해 30까지 제한
- AWS S3를 통해 파일을 직접 업로드 하며 DB에는 이미지의 url로 저장
- 파일 업로드 시 파일 이름이 중복되지 않도록 암호화
개인 역할
정주혜 (Front-end)
- 메인 페이지 카드 섹션 및 좋아요 클릭 기능 구현
- 정렬 드롭다운 > 최신순, 좋아요순 조건 기능 구현
- 로그인 유효성에 따른 회원가입/로그인/로그아웃 버튼 동적 변경 기능 구현
- 메인 페이지 CSS
개인적인 회고록
팀 프로젝트는 커녕 하물며 개인적으로도 페이지 하나 제작해 본 경험이 없는 나에게 첫 주차는 엄청난 좌절감에 직면하면서도 내가 지금 어디에 있는지 객관적으로 파악할 수 있는 시간이었다.
첫 주차부터 팀을 구성해서 5일 동안 하나의 사이트를 만드는 미니 프로젝트를 시작하게 되었고, 일반적으로 팀은 3~4명으로 구성하는 듯 하였다. 내가 속해 있는 21팀은 백엔드 희망 1명과 나를 포함해서 프론트엔드 희망 3명으로 구성되어 있다. 개발자가 되기 위해서 모였지만 사이트의 테마 기획부터 시작해야 하는 프로젝트이기 때문에 짧게 나마 협업을 경험할 수 있어서 만족스러웠다.
잠을 많이 못 잔 바람에 5일 간의 기억이 온전치는 않지만 최대한 끄집어내 보자면, 다행히 백엔드 한 분이 팀프로젝트 경험이 있어서 바로 코드를 작성할 수 있도록 페이지 및 기능 별로 파일을 분리해 주시고 초기 세팅과 환경 설정까지 마쳐 주신 덕분에 git과 github을 사용할 때 큰 문제 없이 프로젝트를 진행할 수 있었다.
사이트의 주제를 정할 때 각자 아이디어를 한 개씩 냈는데 내가 제안한 '반려동물 자랑하기' 아이디어가 채택되었다. 사실 자랑하기라고 하기에도 뭐한, 단순히 반려동물의 사진과 정보를 업로드하면 카드가 생기는 방식이다.
페이지 수는 총 4개로, 로그인 페이지, 회원가입 페이지, 메인 페이지, 메인 페이지에서 모달로 연결되는 파일 업로드 페이지로 구성되어 있다. 각자 한 페이지씩 맡아서 기능 구현을 진행 했으며 나는 메인 페이지를 담당했다.
처음 HTML과 CSS로 큰 틀을 잡고 나서 기능 구현을 하면서 느낀 점은 내가 너무 욕심을 부렸다는 것이다. 실력이 부족해도 한참 부족한 주제에 들어가는 기능이 많은 페이지를 맡겠다고 한 게 화였다.
구현하고자 했던 기능은 크게 4가지로, 1) 파일을 업로드 하면 자동으로 등록 순으로 카드를 메인 페이지에 생성, 2) 유저가 빈 하트 이모티콘을 클릭하면 좋아요 개수가 +1로 카운트되면서 꽉 찬 하트 이모티콘으로 변경, 2) 최신순, 좋아요순 버튼을 클릭하면 순서에 맞게 카드 정렬, 4) 로그인/로그아웃 여부에 따라 로그인 상태일 때는 냇바에 LOGOUT 버튼이 보이도록 하고, 로그아웃 상태일 때에는 JOIN과 LOGIN 버튼으로 변경하는 것이었는데 결과적으로 좋아요 클릭 기능과 정렬 기능은 구현하지 못 하였다.
기능을 구현하지 못한 이유는 아래와 같다.
- 좋아요 클릭 기능
좋아요를 클릭하려면 로그인을 한 상태여야 하는데 로그인 상태 여부를 어떻게 확인할 수 있는지에 대한 방법이 떠오르지 않았다. 강의자료를 참고하여 작성하려고 하였으나 JWT 로그인의 인증 방식에 대한 배경지식이 있어야 했는데 이 부분에 대한 이해가 전혀 없었다.
아이콘 자체를 클릭에 따라서 동적 변경을 하고, 좋아요 수를 카운트 하는 것은 할 수 있었으나 가장 큰 건 유효성 검사에 대한 지식이 없었기 때문이라고 생각한다. 멘토링 시간에 멘토님이 번거롭더라도 유효성 검사는 프론트에서 한 번, 백에서 한 번 이중으로 깐깐하게 해주는 것이 좋다는 말씀을 해주셨다.
또한 로그인 상태의 유효성 검사를 하면 해당 화면은 유저에 따라서 좋아요가 클릭된 것처럼 보이거나 클릭되지 않은 것처럼 보여야 하는데 이 부분에 대한 방법도 이해가 되지 않았다.
- 최신순/좋아요순 정렬 버튼 기능
우선 데이터를 주고 받는 방식에 대한 이해가 부족했다.
이번 미니 프로젝트에는 1) Jinja2 템플릿 엔진 사용, 2) JWT 로 로그인 기능 구현 이라는 두 가지 미션이 있었다. 우선 정렬 버튼을 클릭하기 전에, 최초의 메인 페이지에서도 자동으로 카드가 보이도록 하여야 했기 때문에 처음에는 단순히 페이지가 리로드되었을 때 카드가 생성되도록 하는 것은 Jinja2 템플릿 엔진을 사용하고 최신순, 좋아요순으로 카드를 정렬하는 건 Ajax로 데이터를 요청해서 구현하려고 하였다.
그러나 코드를 작성하고나서 보니 의문이 생겼다. 동일한 데이터를 가져와서, 동일한 페이지에, 동일한 양식을 생성하는, 데이터를 가져오는 순서만 다른 기능인데 서로 다른 방법으로 데이터를 가져와도 가능한 것인지? 현재의 단계에서는 기본 문법을 알고 있어도 응용이 부족했고, jinja2 템플릿 엔진에 대한 케이스 자체도 많이 찾을 수 없었기 때문에 결국 의문을 해소할 수 없었다.
그래서 결국 모두 Ajax로 데이터를 요청하기로 하고 코드를 작성하였으나 이번에는 Ajax로 요청한 데이터도 불러와지지 않았다. 처음에는 서버에서 요청을 받는 코드에 로그인 유효성 검사를 포함시켰는데, 팀원 한분께서 메인 페이지는 로그인 상태 여부와 관계 없이 보여야 하기 때문에 지우는 게 맞는 것 같다는 피드백을 주셔서 유효성 검사 부분을 지웠는데도 구현되지 않았다.
지금 회고록을 작성하면서 드는 의심은 Ajax로 데이터를 불러와서 템플릿에 붙이는 방식을 자바스크립트의 이벤트 함수로 선언하였는데 그 이벤트 함수를 어디에도 적용시키지 않아서 구현되지 않은 게 아닐까 하는 생각이 든다. 업로드 페이지에서 파일을 업로드 할 때 등록 버튼을 클릭하면 폼-액션으로 데이터가 보내지도록 되어 있는데, 등록 버튼에 이벤트 함수를 적용시켰다면 어땠을까 하는 생각이 든다.
결국 제출해야 하는 시간이 다가와서 정렬 기능은 포기하고 카드가 생성되는 건 jinja2 템플릿 엔진을 사용하여 제출하였다. 가장 아쉬운 건 로컬에서도 로그인을 할 수가 없어서 시도를 해보지 못 했다는 점이다.
이 부분 또한 멘토링 시간에 멘토님께 여쭤봤더니 이처럼 데이터를 불러오는 순서만 다른 동일한 기능을 구현하는 것이라면 데이터를 불러오는 방법을 통일해야 한다고 피드백을 주셨다. 그리고 그런 경우에는 조건의 순서대로 정렬이 되어 있는 페이지를 별도로 만들어서 연결하는 방법도 있다고 말씀해 주셨다. 그리고 여담이지만 현업에는 jinja2 템플릿 엔진을 잘 사용하지 않는다고 한다.
그래서 앞으로 무엇을 공부해야 할까?
- 페이지 레이아웃을 잡으면서 든 생각은 CSS 속성에 대한 깊은 지식이 필요하다는 점이다. 특히 display, position, margin, padding 등 적절한 위치를 잡기 위한 방법에 대한 이해가 반드시 필요하다. 그 외에도 구역을 잡아주는 태그에 대한 이해도 필요하다.
- 데이터를 호출하여 출력하는 방법에 대한 공부가 필요하다. 따라서 우선 네트워크 원리에 대해서 공부를 시작할 계획이다.
- 전반적인 자바스크립트에 대한 이해가 부족하다. 특히 동적으로 변경해주는 기능을 구현하기 위한 방법과 속성에 대한 공부가 필요하다.
5일 동안 평균 3~4시간의 잠을 자면서 함께 만들었지만, 특히나 나 자신에 대한 아쉬움이 더 크다. 앞으로의 공부에 대한 방향성과 범위를 어느 정도 파악했으니 다음 프로젝트에서는 필요한 기능을 반드시 구현할 수 있는 실력이 되기를 희망한다.
여담으로 우리 조는 조용조용한 사람들만 모여 있는데, 첫 날에 정한 부제: WhoisDog 에 대한 영문법적 오류를 나를 포함해서 아무도 언급하지 않다가 마지막 날 얘기가 나와서 결국 저 이름 그대로 프로젝트를 제출하게 되었다.
지금 보니 오히려 뭔가 맞지 않고 삐그덕 거리는 것이 현재의 내 상황과 비슷해서 괜히 저 요상한 영어에 정감이 간다.
'what i learned > 회고록' 카테고리의 다른 글
| [WIL] 항해99 6주차 회고록 - 협업 (2) | 2021.12.12 |
|---|---|
| [WIL] 항해99 5주차 회고록 - React 심화 (0) | 2021.12.05 |
| [WIL] 항해99 4주차 회고록 - React 숙련 (0) | 2021.11.28 |
| [WIL] 항해99 3주차 회고록 - React 기초 (2) | 2021.11.21 |
| [WIL] 항해99 2주차 회고록 - 알고리즘 (0) | 2021.11.14 |