[항해99] WIL 1

항해99 1일차	2022. 5. 9.(월)	OT , 풀스택 미니프로젝트 진행	D반 4조 배정(총 4명), 자기소개, 기획회의, 역할 분담(상세페이지 담당)
항해99 2일차	2022. 5. 10.(화)	풀스택 미니프로젝트 진행
항해99 3일차	2022. 5. 11.(수)	풀스택 미니프로젝트 진행
항해99 4일차	2022. 5. 12.(목)	풀스택 미니프로젝트 진행 및 결과 제출, 매니저 개인면담
항해99 5일차	2022. 5. 13.(금)	알고리즘 기초 주차 스터디(달리기반)	D반 9조 배정(총 4명), 문제 풀기 1~11
항해99 6일차	2022. 5. 14.(토)	알고리즘 기초 주차 스터디(달리기반)	문제 풀기 12 ~ 20
항해99 7일차	2022. 5. 15.(일)	Weekly I Learned 작성, 개인 공부 등

1주차 풀스택 미니프로젝트 회고(1~4일차)

https://writingcode.tistory.com/10

5일차, 

https://writingcode.tistory.com/16

[항해99] programmers 코딩테스트 연습문제 1~5

https://writingcode.tistory.com/17

[항해99] programmers 코딩테스트 연습문제 6~11

6일차, 

https://writingcode.tistory.com/18

[항해99] programmers 코딩테스트 연습문제 12~20

------------------------------------------------------------------------------------

[개발일지 회고 제출!] 매주 일요일은, "혼자만의 시간을 가지며, 한 주를 회고하는 날입니다."

• 이번 WIL의 키워드 : JWT, API
• 키워드에 대해 본인이 배운점을 정리하여 WIL에 추가해주세요!
• 기한: 5/15 일요일 자정까지!

회고 일지 제출은 선택이 아니라 필수입니다!

------------------------------------------------------------------------------------

#JWT

JWT(Json Web Token): 하나의 인터넷 표준 인증 방식. 인증에 필요한 정보들을 토큰에 담아 암호화 시킨 후 사용하는 토큰.
JWT는 서명된 토큰이기에 공개/개인 키를 쌍으로 사용하여 토큰에 서명할 경우 서명된 토큰은 개인 키를 보유한 서버가 이 서명된 토큰이 정상적인 토큰인지 인증할 수 있다.

JWT는 각각의 구성 요소가 .으로 구분되어 있고 구성 요소는 Header, Payload, Signature가 있다.

 

(xxxxx.yyyyy.zzzzz) 형태.

1. Header
Header에는 주로 토큰의 타입, 서명 생성에 사용된 알고리즘을 저장.

2. Payload
Payload에는 보통 Claim이라는 사용자에 대한, 혹은 토큰에 대한 정보를 Key-value의 형태로 저장.
표준 스펙상 key의 이름은 3글자. 
1. iss (Issuer) : 토큰 발급자
2. sub (Subject) : 토큰 제목 - 토큰에서 사용자에 대한 식별값이 됨
3. aud (Audience) : 토큰 대상자
4. exp (Expiration Time) : 토큰 만료 시간
5. nbf (Not Before) : 토큰 활성 날짜 (이 날짜 이전의 토큰은 활성화되지 않음을 보장)
6. iat (Issued At) : 토큰 발급 시간
7. jti (JWT Id) : JWT 토큰 식별자 (issuer가 여러 명일 때 이를 구분하기 위한 값)
총 7가지의 표준 스펙이 있고 이 중 상황에 따라 해당 서버가 가져가야 할 인증 체계에 따라 사용. 표준 스펙 외에도 다른 스펙 추가 가능.

다만 header와 payload는 디코딩이 되어 있을 뿐 특별한 암호화가 걸려있지 않기 때문에 민감한 정보를 담지 않음.

3. Signature
가장 중요한 서명.

Signature은 서버에 있는 개인키로만 암호화를 풀 수 있으므로 다른 클라이언트는 임의로 Signature를 복호화 할 수 없다.

1.JWT 토큰을 클라이언트가 서버로 요청과 동시에 전달.
2. 서버가 가지고 있는 개인키를 자기고 Signature를 복호화 한 다음 주어진 Header가 JWT의 Header 값과 일치한지, 주어진 Payload와 JWT의 Payload와 일치한 지 확인하여 일치한다면 인증을 허용.

쿠키와 세션에 비해 JWT의 장점은
1. 이미 토큰 자체가 인증된 정보이기 때문에 세션 저장소와 같은 별도의 인증 저장소가 필수적으로 필요하지 않다.
2. 세션과 다르게 클라이언트의 상태를 서버가 저장해두지 않아도 된다.
3. Signature를 공통키 개인키 암호화를 통해 막아두어서 데이터에 대한 보완성이 늘어난다.
4. 다른 서비스에 이용할 수 있는 공통적인 스펙으로써 사용 가능.

 

(참고)

https://velog.io/@jinyoungchoi95/JWTJson-Web-Token-%EC%9D%B8%EC%A6%9D%EB%B0%A9%EC%8B%9D

JWT(Json Web Token) 인증방식

#API

API(application programming interface): 컴퓨터나 컴퓨터 프로그램 사이의 연결.

 

API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다. 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있습니다. 휴대폰의 날씨 앱은 API를 통해 이 시스템과 "대화"하고 휴대폰에 매일 최신 날씨 정보를 표시합니다.

 

API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다. 인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다. 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의합니다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있습니다.

 

API 아키텍처는 일반적으로 클라이언트와 서버 측면에서 설명됩니다. 요청을 보내는 애플리케이션을 클라이언트라고 하고 응답을 보내는 애플리케이션을 서버라고 합니다. 따라서 날씨 예에서 기상청의 날씨 데이터베이스는 서버이고 모바일 앱은 클라이언트입니다.

 

(출처)

https://aws.amazon.com/ko/what-is/api/

API란 무엇인가요? - API 초보자를 위한 가이드 - AWS

 

API의 저작권 문제도 살펴보면 좋을 듯.

 사실상 서비스 사용자와 서비스 제공자 간의 계약이다. 인터페이스의 양쪽에서 무슨 일이 일어나는지 정의한다. 즉, API는 서비스가 어떻게 구현되었는지에 대한 세부 사항이 아니라, 각 함수가 프로그램에서 사용될 때 무슨 일을 하는지를 확실히 정의한다. 이 말은 경쟁업체가 내 것과 똑같은 API를 제공하는 게임기를 만들어서 서비스 제공자 역할을 할 수도 있다는 것을 뜻한다.

-(1일 1로그 100일 완성 IT 지식 - 브라이언 W. 커니핸/하성창 옮김/인사이트, 155p)

 

#서버사이드 렌더링

서버사이드 렌더링의 장점

 

서버 사이드 렌더링의 장점은 "빠른 페이지 렌더링”과 “검색 엔진 최적화"이다. 

 

렌더링이란 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것인데, 크게 두 가지 방식이 있다. 서버 사이드 렌더링(SSR, Server Side Rendering)과 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이다. 

 

SSR은 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 방식이고, CSR은 웹 페이지의 렌더링이 클라이언트 쪽에서 일어나는 것으로 브라우저는 최초 요청에서 html, Javascript, CSS 확장자의 파일을 차례로 다운로드한다.  즉, 첫 페이지의 렌더링을 SSR은 서버 측에서, CSR은 클라이언트 측에서 처리한다.

 

CSR과 비교하면, SSR은 첫 화면이 보여짐과 동시에 동적 기능 사용이 가능하다는 장점이 있다(CSR은 단계별로 가져와서 클릭해도 작동이 안 될 수 있다). 또한, 클라이언트가 서버로부터 소스 코드를 받을 수 있기 때문에 검색에도 유용하다는 장점이 있다. 이 검색 엔진 최적화(SEO, Search Engine Optimization)’ 장점은 구글, 네이버 등의 검색 엔진에 쉽게 노출시킬 수 있게 한다. 

 

서버 부하, 요청 시 마다 새로고침, 시간 간격 존재 등의 SSR 단점을 줄이기 위한 효율화는 추후 배워나가야 할 것 같다. 

 

(참고)

https://ctdlog.tistory.com/46

[React] 서버 사이드 렌더링(SSR) / 클라이언트 사이드 렌더링(CSR)이란?