항해99) 2주차:: 웹개발+ 4주차; JWT & API

📚 JWT(JSON Web Token)

의미▶ 인증에 필요한 정보들을 암호화시킨 JSON 토큰

예시▶ 수업의 로그인 기능을 생각해보면, 사용자가 로그인하면 서버에서 회원임을 인증하는 토큰을 넘겨줌으로써 이후 회원만 접근할 수 있는 서비스 영역에서 신분을 확인하는 데 쓰일 수 있음.

 

✍🏻 사전 지식

▶인증 방식 종류: Cookie & Session & Token(서버가 클라이언트 인증을 확인하는 세 가지 방식!)

▶Cookie:  Key-Value 형식의 문자열 덩어리. 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 정보 파일. 각 사용자마다의 브라우저에 정보를 저장하니 고유 정보 식별이 가능한 것.

▶Session: 쿠키의 보안적인 이슈 때문에, 세션은 비밀번호 등 클라이언트의 민감한 인증 정보를 브라우저가 아닌 서버 측에 저장하고 관리. 민감한 정보는 클라이언트에 보내지말고 서버에서 모두 관리한다. 

▶Token: 클라이언트가 서버에 접속을 하면 서버에서 해당 클라이언트에게 인증되었다는 의미로 '토큰'을 부여함. 이 토큰은 유일하며 토큰을 발급받은 클라이언트는 또다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 심어서 보낸다. 그러면 서버에서는 클라이언트로부터 받은 토큰을 서버에서 제공한 토큰과의 일치 여부를 체크하여 인증 과정을 처리한다. 기존의 세션기반 인증은 서버가 파일이나 데이터베이스에 세션정보를 가지고 있어야 하고 이를 조회하는 과정이 필요하기 때문에 많은 오버헤드가 발생한다. 하지만 토큰은 세션과는 달리 서버가 아닌 클라이언트에 저장되기 때문에 메모리나 스토리지 등을 통해 세션을 관리했던 서버의 부담을 덜 수 있다. 토큰 자체에 데이터가 들어있기 때문에 클라이언트에서 받아 위조되었는지 판별만 하면 되기 때문. 세션 방식과의 큰 차이점은 생성한 토큰을 (서버에는 저장하지 않고) 클라이언트에 응답한다는 것.

---

📚 API(Application Programming Interface)

의미▶ 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘('매장'과 '고객' 사이의 '직원'이라고 이해하면 됨). 단어의 application와 interface는 각각 고유한 기능을 가진 모든 소프트웨어와 두 애플리케이션 간의 서비스 계약을 뜻함. 여기서의 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의한다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다. 아무튼, 쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체.

 

역할▶ 

1. 서버와 데이터베이스에 대한 출입구; 아무나가 아닌 허용된 사람들에게만 서버에 대한 접근성을 부여

2. 애플리케이션과 기기가 원활하게 통신할 수 있도록 함; 애플리케이션(우리가 흔히 알고 있는 스마트폰 어플이나 프로그램 전부)과 기기가 데이터를 원활히 주고받을 수 있도록 도움

3. 모든 접속을 표준화함; 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있음. 쉽게 말해, API는 범용 플러그처럼 작동.

 

예시▶ 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있음. 휴대폰의 날씨 앱은 API를 통해 이 시스템과 "대화"하고 휴대폰에 매일 최신 날씨 정보를 표시함.

 

수업▶ 

4주차 Sweeter 프로젝트에서는 많은 API 설계를 함.

1] log in & sign up P

 1) 기본 화면으로 로그인 화면 보이기

 2) '회원가입하기' 버튼을 클릭하면 회원가입 화면으로 바뀌기

 3) '취소' 버튼을 클릭하면 로그인 화면으로 돌아오기

 4) 회원가입 - 아이디 & 비밀번호 형식 확인, 아이디 중복 확인, DB에 아이디와 비밀번호 저장하여 회원가입 & 로그인 화면으로 전환

 5) 로그인 - 아이디 & 비밀번호 입력 확인, 서버로 POST 요청을 보내 가입 정보가 존재하는지 확인, 회원일 경우 토큰 부여

2] Main P

 1) 모든 사람의 포스트를 시간 역순으로 보여주기

 2) 각 포스트에 좋아요/좋아요 취소 가능 - 좋아요 누른 포스트는 찬 하트로 보여주기

 3) 포스팅 칸에 내 프로필 사진 보여주기 - 프로필 사진 누르면 프로필 페이지로 이동

 4) 포스팅 칸 클릭하면 포스팅 모달 띄우기- 포스팅하기 버튼 클릭하면 포스트 DB에 저장, 새로고침하여 포스트 목록 다시 띄우기

3] Profile P

 1) 해당 사용자의 포스트만 시간 역순으로 보여주기

 2) 내 프로필이라면 프로필 수정 & 로그아웃 버튼 보여주기

 3) 내 프로필일 때만 포스팅 칸 보여주기

 4) 프로필 수정 버튼 클릭하면 프로필 수정 모달 보여주기 - 기존의 저장되어 있는 값 보여주기, 수정 시 DB에 업데이트하고 새로고침해서 변경사항 적용

 5) 로그아웃 버튼 클릭하면 토큰 삭제하고 로그인 페이지로 이동