WIL (1) (5/9~5/14)

minkyung·2022년 5월 16일
0

WIL

목록 보기
1/7
post-thumbnail

항해99 첫 챕터에서는 웹 미니 프로젝트 런칭으로 시작했는데
① JinJa2 템플릿 엔진을 이용한 서버 사이드 렌더링,
JWT 인증 방식으로 로그인 구현하기가 필수로 들어가야하는 프로젝트였다.

서버사이드 렌더링 (SSR)

  1. 정적 웹페이지와 동적 웹페이지
  • 정적 웹페이지 (Static web apge)는 서버에 저장되어 있는 HTML+CSS파일 그대로 보여주는 방식
    : 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버 부담이 적음. / 내용 변경이 필요할 때 HTML 자체를 수정해야하기 때문에 번거로움. Ex) 회사소개, 음식메뉴, 포트폴리오
  • 동적 웹페이지 (Dynamic web page)는 상황에 따라 서버에 저장되어 있는 HTML에 데이터 추가/가공해서 보여주는 방식
    : 한 페이지에서 상황, 시간, 사용자 요청 등에 따라 다른 모습을 보여줄 수 있음 / 상대적으로 보안에 취약하고 모습이 계속 변해서 (대개 주소도) 검색엔진 최적화가 어려움. Ex) 블로그, 게시판, 날씨 정보 등

  1. 동적 웹페이지의 종류
  • 클라이언트 사이드 렌더링 (CSR)
    자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법
  • 서버 사이드 렌더링 (SSR)
    서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법
  • 복합
    클라이언트 쪽에서 Ajax 요청을 보내서 서버에서 데이터를 받아와 HTML을 완성하는 방법 (ex.나홀로메모장)

    JinJa2 템플릿 언어: Flask 프레임워크에서 사용하는 템플릿 언어
    '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할을 합니다!


API 설계하기

필요한 기능들을 생각해봅시다. 각 페이지에서는 어떤일이 일어나야 하나요?


이번 프로젝트에서 사용했던 API
계획대로 되지 않았지만 ... 열심히 쓰고 피드백 받았다.


JWT 인증방식

JWT(Json Web Token) 인증방식

JWT(JSON Web Token)란 인증에 필요한 정보들을 암호화시킨 토큰을 의미합니다. JWT 기반 인증은 쿠키/세션 방식과 유사하게 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별합니다.

# JWT 토큰을 만들 때 필요한 비밀문자열입니다. 아무거나 입력해도 괜찮습니다.
# 이 문자열은 서버만 알고있기 때문에, 내 서버에서만 토큰을 인코딩(=만들기)/디코딩(=풀기) 할 수 있습니다.
SECRET_KEY = 'SPARTA'

토큰을 사용해 로그인 / 회원가입 만들고, 각 페이지마다 토큰을 확인하는 코드를 넣어 마이페이지로 가게 만들고 토큰 만료시간을 따져서 로그인 풀리게 하는 방식을 만들어줬다.

Hanghae-Recipe

레시피를 올리고 댓글을 다는 블로그 혹은 게시판 형식으로 사이트를 하나 만들었는데 만들면서 오류를 너무너무 많이 만났다.

  1. 내 컴에서는 제대로 돌아갔는데 남의 컴으로 내 코드 갔을 때 오류
  2. 서버에 올리니까 어떤 사람 컴에서만 작동함
  3. 진자코드랑 회원가입 api랑 동시에 사용못함 (그래서 마이페이지 못 올림 ..... ㅠㅠ)

profile
프론트엔드 개발자

0개의 댓글