[WIL] 1주차 회고

Mark·2022년 8월 5일

🤟🏻 이번주 한 일

Day1~Day4 미니프로젝트 런칭
Day5~Day6 알고리즘 풀이
Day7 WIL 작성

JWT

1) JWT란?

JWT 는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON입니다. JWT는 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증한다.
이때 사용되는 JSON 데이터는 URL-Safe 하도록 URL에 포함할 수 있는 문자만으로 만든다.
JWT는 HMAC 알고리즘을 사용하여 비밀키 또는 RSA를 이용한 Public Key/ Private Key 쌍으로 서명할 수 있다.

2) JWT 토큰 구성

JWT는 세 파트로 나누어지며, 각 파트는 점로 구분하여 xxxxx.yyyyy.zzzzz 이런식으로 표현된다. 순서대로 헤더 (Header), 페이로드 (Payload), 서명 (Sinature)로 구성합니다.

Header
토큰의 타입과 해시 암호화 알고리즘으로 구성되어 다. 첫째는 토큰의 유형 (JWT)을 나타내고, 두 번째는 HMAC, SHA256 또는 RSA와 같은 해시 알고리즘을 나타내는 부분이다.
Payload
토큰에 담을 클레임(claim) 정보를 포함하고 있다.
클레임이란?
Payload 에 담는 정보의 한 ‘조각’ 을 말한다.
이는 name / value 의 한 쌍으로 이뤄져있다.
토큰에는 여러개의 클레임 들을 넣을 수 있다.
Signature
Signature는 secret key를 포함하여 암호화되어 있다.

3) JWT 프로세스

사용자가 id와 password를 입력하여 로그인을 시도
서버는 요청을 확인하고 secret key를 통해 Access token을 발급
JWT 토큰을 클라이언트에 전달
클라이언트에서 API 을 요청할때 클라이언트가 Authorization header에 Access token을 담아서 보냄
서버는 JWT Signature를 체크하고 Payload로부터 사용자 정보를 확인해 데이터를 반환
클라이언트의 로그인 정보를 서버 메모리에 저장하지 않기 때문에 토큰기반 인증 메커니즘을 제공 인증이 필요한 경로에 접근할 때 서버 측은 Authorization 헤더에 유효한 JWT 또는 존재하는지 확인
처음 사용자를 등록할 때 Access token과 Refresh token이 모두 발급되어야 합니다.

API

1) API란?

프로그램들이 서로 상호작용하는 것을 도와주는 매개체

2) API의 역할은?

API는 서버와 데이터베이스에 대한 출입구 역할
서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해준다.
API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
애플리케이션이란 우리가 흔히 알고 있는 스마트폰 어플이나 프로그램을 말한다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 한다.
API는 모든 접속을 표준화한다.
API는 모든 접속을 표준화하기 때문에 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있습니다.

🤟🏻 일자별 상세히 한 일

DAY1 : 미니 프로젝트 기획

1) 프로젝트 기획

프로젝트 제목 및 간단 설명
- 프로젝트 명 : 헌책줄게
- 프로젝트 설명: 중고 책 거래 서비스
와이어 프레임 설정
- 피그마로 제작
개발해야 할 기능 정리
- API 설계
- 회원가입, 로그인, 게시판 CRUD 구현
각자 구현해야 할 기능 담당 배분

2) 공부한 내용

‘웹개발플러스'에 있는 jinja2 템플릿을 활용하여 게시판 CRUD를 구현하는 방법에 대한 스터디
템플릿 엔진, 서버 사이드 템플릿 엔진, 클라이언트 템플릿 엔진에 차이점에 대한 스터디

DAY2 : 미니 프로젝트 구현 진행

1) 맡은 업무

로그인, 회원가입 기능을 고민하다가 jinja2와 Flask 작동 원리도 제대로 공부할 겸 게시판 CRUD를 구현하기로 했다. 또한 워낙 꾸미고 디자인 하는 것에 대한 집착(?)이 있어서 통일되는 구조에 대해서는 CSS 작업도 맡아 하기로 나섰다!

2) 구현 기능

게시판 CRUD를 함께 담당하는 팀원분과 함께 CRUD 구현 구조를 잡았다.
구현 순서는 html+css → api 설계 → 스크립트 적용 (프론트-서버 통신) 으로 작업을 진행했다.

3) 공부한 내용

Github 제대로 사용하기!
- 협업에 있어 가장 기본이자 중요한 github!! 그동안은 가장 기본적인 git만 알고 있었는데, 팀장님 덕분에 pr 날리는 방법과 각자 작업할 사항에 대해 기능 단위로 브랜치 파서 작업하고 커밋하고 pr 날리고 팀장님께 코드리뷰도 받고, 프로젝트 덕분에 git 활용법을 더 알아가는 즐거움과, git의 다양한 기능들을 제대로 경험해보게 된 것 같아서 협업에 있어 너무나 좋은 공부가 되었다!
데이터 POST가 안되는 문제
- 책 등록 API를 구현하고 프론트와 연결하는 중에, 프론트에서 서버로 데이터를 날리면 POST가 안되고 404 에러가 발생했다. 백에서 route 설정과 method가 잘못되어 있다고 생각해서 route도 다시 설정해보고, method도 수정해봤는데 문제가 해결되지 않았다. 각자 문제를 찾아보던 중 팀원분이 프론트에서 백에서 설정한 url로 보내주는 과정에서 url 설정이 잘못되어있다는 것을 발견했다! 언제나 문제는 사소한 곳에서 발생하는데, 그래서 더 코드를 세밀하게 살펴봐야 함과 팀원분과 함께 페어코딩을 하고, 서로 봐주면서 더 빠르게 문제를 해결할 수 있었던 것 같다.

DAY3 : 미니 프로젝트 게시판CRUD 작업 진행

1) 작업 내용

상단바, 게시판 html+css 작업 완료
게시판 CRUD 구현

2) 공부한 내용

jinja2 템플릿 적용
- html과 css 및 script 파일을 분리해서 공통적으로 사용되는 부분에 하단 처럼 특정 파일을 불러와서 사용 할 수 있다. 이에 대한 장점은 밑에 한 줄만 넣어서 적용시켜주기 때문에 같은 코드를 파일마다 반복적으로 사용하지 않아서 코드가 훨씬 간결해지고 가독성, 재사용성에도 좋다!
```
{% include 'common/head.html' %} 
{% include 'common/navbar.html' %}
```

DAY4 : 미니 프로젝트 제출

1) 작업 내용

img 컬럼 추가
img는 url로 등록하여 화면에 뿌려줌
파일 분리 및 관리
EC2 서버 배포

2) 공부한 내용

데이터 타입 맞춰주기!
- 사용자가 판매하는 제품이면 True, 구매하는 제품이면 False로 서버에 보내는 과정에서, html이나 jQuery를 사용해서 타입을 int로 변경해서 백으로 보내면 계속 string으로 데이터를 받는 문제가있었다. 그래서 백단에서 삼항연산자를 활용하여 판매하는 제품이 맞으면 true를 db에 보내도록 설정해주었다.
EC2 서버 배포
- aws로 서버 배포한 경험이 거의 전무할 정도로 무지했는데, 그래도 이번 프로젝트를 계기로 서버 배포를 하게 돼서 많이 배웠다! 공부한대로 하면 서버가 바로 문제없이 올라갈 줄 알았는데, 컴퓨터의 세계는 언제나 변수가 많고, 환경 설정이 다르기 때문에 이 점을 꼭 주의해줘야 함을 배웠다.

DAY5~6 : 알고리즘 풀기

새로운 팀원 분들을 만났다! 그리고 팀장이 되었다…… 개인적으로 알고리즘 풀이 실력이 너무 부족한데, 어쩌다 팀장이 되어버렸다. 알고리즘 실력과 기본기도 부족해서 팀원분들께 도움이 못 될까봐 걱정이 앞섰다.

근데 오히려 팀장으로서 책임감과 팀원분들에게 조금이나마 더 도움을 드리고 싶어서인지 더 열심히 공부하게 된다. 그리고 무엇보다 팀원분들이 다들 열심히 따라와주시고 부족한 부분은 채워주면서 같이 공부하는 느낌이라 한 주 동안 다같이 알고리즘 실력이 크게 향상할 수 있었으면 좋겠다!!