👋 정글소개

• 운영진 및 일정소개

  운영진의 정글에 대한 생각과 교육 방향에 대해 설명하였다.

  SW엔지니어로 성장할수 있는 기반다지기가 SW사관학교 정글의 방향이었다.

  장병규의장님의 말씀을 들으며 다시한번 마음을 다잡게 되었다.

▶️ 프로젝트 개요

• 프로젝트 목표 : 입학시험 때 배운 기술들을 토대로 미니 프로젝트 완성하기

• 프로젝트 일정 : 11월1일 17:00 ~ 11월 4일 12:00

• 프로젝트 주제 : 자유 주제

  아이디어를 참고한 사이트 (https://spartacodingclub.kr/community/exhibition)

• 필수 조건

  1. 로그인 기능 구현
  2. Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링

🚴🏽‍♂️ 프로젝트 진행

1. 주제 선정

   맛집 지도나 주식 정보 공유등 다양한 의견이 나왔다.

   그 중에서 정글 3기생들에게 가장 유용한 것은 학식 알리미라는 의견이 나와 학식알리미로 정하였다.

   문지 캠퍼스 학식 메뉴와 메뉴 리뷰 공유하는 '학식 알리미' 프로젝트로 정하였다.

2. 와이어 프레임 작성 및 피드백

   프로젝트의 골격인 '와이어 프레임'을 작성하고 피드백을 받았다.

   • 와이어 프레임

     프로젝트 골격과 세부 기능들을 적어보았다.

     • 와이어 프레임 이미지
     • 로그인 페이지 에서 로그인 하면 메인페이지를 출력
     • 조식, 중식, 석식 버튼을 클릭하면 모달창이 팝업
     • 모달창에는 식단 메뉴와 그날 식사한 사람들이 남긴 리뷰와 별점 출력

   • 피드백

     처음 팀원들과 이야기 할때는 금일 식사 후 남긴 리뷰만 볼 수 있게 하려고 했었다.

     하지만, 금일 메뉴와 동일한 메뉴를 식사 후 남긴 댓글들도 조회하는게 좋겠다는 피드백을 받아 모달 창의 기능을 수정하기로 하였다.

3. 필수 조건 내용학습

   1. JWT 방식을 이용한 로그인 기능 구현

      • JWT 인증방식 개요도

      JWT란 Jason Web Token의 줄임말로 토큰을 기반으로한 인증 방식이다.

      기존 세션 방식과 다르게 사용자의 상태를 토큰에 저장하여 API 구현 시 토큰 정보를 서버에 전달한다.

      서버에서 토큰의 유효성을 검증한 후 유효 시 API를 구현한다.

      만약 토큰이 만료되거나 유효하지 않을 경우 로그인 페이지로 넘긴다.

      토큰은 보통 쿠키에 저장하며 CSURF 라이브러리를 이용해 CSRF 공격에 대비한다.

      위 내용 및 이미지는 아래 블로그를 기반으로 작성하였습니다.

      세션 기반 인증 방식과 토큰 기반 인증(JWT)

   2. CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이점

      1. CSR(Client Side Rendering)
         • 서버에서 최초 1번 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올때 마다, 서버는 데이터만 전달하고 사용자가 주어진 데이터를 가공하여 렌더링 하는 방식
         • 장점
           1. 최초 1회 요청을 제외 하고 페이지 전환 속도가 빠르다.
           2. 서버의 부하가 적다.
         • 단점
           1. 최초 로딩 속도가 느리다.
           2. 최초 html 텍스트가 비어있어 검색에 문제가 있다.
           3. 쿠키나 사용자 정보를 저장하고 있어 보안에 취약할 수 있다.
      2. SSR(Server Side Rendering)
         • CSR과 달리 서버에서 사용자의 요청에 따른 페이지를 렌더링 하여 사용자에게 반환하는 방식
         • 장점
           1. 최초 로딩 속도가 빠르다.
           2. 최초 로딩 시 html 정보가 포함되어 있어 검색이 가능하다.
         • 단점
           1. 페이지 전환마다 서버에서 렌더링 하여 서버의 부하가 크다.
           2. 페이지 전환마다 새로고침 되어 UX가 다소 떨어진다.(깜빡임)

      위 내용은 아래 두 블로그를 기반으로 작성하였습니다.

      SSR, CSR 차이

      SSR과 CSR의 차이

4. 기능 구현

   1. 회원가입 및 로그인

      • 회원가입

        회원가입 시 가입 정보와 비밀 번호를 서버에 전달하여 DB에 저장한다.

        이때 비밀번호는 보안상 문제로 hashlib 방식으로 암호화 하여 저장한다.

      • 로그인

        로그인 시 html input값을 서버에 전달한다.

        전달 받은 input값을 DB에서 검색하여 결과값이 있으면 토큰을 내려주고 없으면 로그인 페이지로 리로드 한다.

        암호화를 위해 hashlib 함수를 이용하며 jwt 인증방식을 위해 pyjwt 함수를 사용하였다.(jwt 함수를 사용하면 에러가 발생하였다.)

   2. 금일 식단 리스트 웹 스크래핑

      • 서버에서 금일 날짜를 받아 아래 빨간 부분에 삽입하여 금일 식단페이지를 조회 하였다.(파이썬 datetime 함수 활용)

        https://www.kaist.ac.kr/kr/html/campus/053001.html?dvs_cd=icc&stt_dt=2021-11-12

      • 상단의 url을 #tab_item_1 > table > tbody > tr > td:nth-child(1)의 text를 스크랩 하여 서버에서 split 후 리스트로 저장하였다.(파이썬의 BeautifulSoup4 함수를 이용)

        

      • DB에서 금일 식단과 동일한 메뉴를 찾아서 클라이언트에게 작성했던 리뷰와 별점의 평균을 전달하였다. 이때 서버사이드 렌더링을 이용하였다.

      • 탐색은 파이썬 이중 for 문을 사용했으며 메뉴 3개이상 같은지 count하였다.

   3. 리뷰 작성 및 DB에서 data 반환

      • 리뷰 작성 후 input 값을 POST 하면 해당 메뉴와 리뷰, 별점, 아이디를 서버에 전달하여 MongoDB에 저장하였다.

⏹️ 프로젝트 완료 및 느낀점