안녕하세요, 김당쿽🥕입니다! 원티드 프리온보딩 프론트엔드 과정에 참여하게 되었고, 2회차 수업을 들은 후 남기는 기록입니다!
JWT의 개념과 토큰을 이용한 로그인 구현 알아보기
토큰?
가치를 표현할 수 있는 징표. 화폐랑은 다른 의미.
a piece of data that is used to represent and replace another one, in order to prevent private information being seen by someone who is not allowed to do so
컴퓨팅적 사고로 보자면 다른 개인 정보를 표현하고 대체하는 데이터라고 할 수 있다.
참고 자료
로그인에 토큰을 사용하는 이유?
사용자의 신원을 파악하기 좋은 수단이기 때문! 그러나 토큰만이 로그인의 수단이 되지는 않는다. 많은 수단 중 하나.
HTTP 통신은 stateless(무상태성)이기 때문에 누가 로그인을 하는지 알 수가 없기 때문에 식별자로서 이용된다.
JWT
JSON Web Token
프론트엔드에서는 Encoded 된 토큰을 받아서 정보를 주고받게 된다.
- Header: 암호화 규칙, 토큰 타입
- PayLoad: 토큰 데이터(클레임)
- Signature: 암호화를 위한 데이터
토큰을 암호화하는 방식
해싱?
해싱은 단방향으로 흐르기 때문에 복구할 수 없다. 마지막 Signature은 복호화를 할 수 없을 것.
해싱은 여러 방식이 있지만 토큰을 암호화하는 것은 단방향이다
오늘의 실습!
로그인 API를 활용하여서 JWT 토큰을 받은 후 header Authorization에 넣어 회원 정보 받기. 기존에 많이 해 봤던 API 사용법이라 어렵지 않게 할 수 있었지만 오랜만에 axios 없이 사용하려니 조금 버벅거렸던 것 같다.
type LoginType =
| {
result: boolean;
accessToken: string;
}
| {
result: boolean;
accessToken: null;
}
interface LoginRequest = {
usename: string;
password: string;
}
const login = async (args: LoginRequest): Promise<LoginType> => {
const response = await fetch(`${BASE_URL}/auth/login`, {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify(args),
})
if (response.ok) {
const data = await response.json()
return {
result: true,
accessToken: data.access_token
}
}
// 로그인 api 실행 함수
const formData = new FormData(event.crrentTarget)
const loginResult = await login({
username: formData.get("username") as string,
password: formData.get("password") as string
})위 예제와 같이 formData를 인수로 줄 수 있다.
JWT 보관 방식과 보안
- 재접근할 수 없는 런타임 메모리에 저장
- 함수 범위 내에서만 사용하게 된다면 외부에서 호출할 수 없기 때문에 가능하다.
- 그러나... 매번 로그인 해야 하는 불편하다.
- 함수 범위 내에서만 사용하게 된다면 외부에서 호출할 수 없기 때문에 가능하다.
- 로컬스토리지 / 쿠키 저장 - XSS (Cross Site Scripting)
- 그러나... js로 접근이 가능해서 보안의 위험성이 있다.
- 쿠키 저장 - CSRF (Cross-site Requeset Forgery)
- 스팸 메일 등을 통해 같은 브라우저를 방문했을 때 브라우저가 쿠키를 자동으로 전송하게 되면서 악용될 수 있다.
- Access Token은 로컬에 발급, Refresh Token은 HttpOnly Cookie로 발급
- CSRF 공격으로 Refresh Token을 재사용 시도할 때 서비스에서 아직 Access Token이 살아 있다고 판단이 되면 모든 토큰을 무효화시켜 공격을 막을 수 있다.
HTTP Request?
Hyper Text Transfer Protocol의 약자.
cURL?
커맨드라인을 통해 데이터를 전송하는 데 사용된다. 즉 소프트웨어 애플리케이션을 위한 인터넷 전송 엔진.
수업에서 나온 Q&A
1. 다양한 api를 활용해서 프로젝트를 진행해 보고 싶은데 api를 어디서 보아야 할까요?
sample api를 사용해 보자!
public-apis를 모아둔 깃허브도 발견하였다!
2. axios 와 fetch 중 어느 것을 사용해야 할까요?
axios와 fetch 중 어느 것이 좋다고 말하긴 어렵다. 가벼운 코드에서 axios가 무거울 수 있으나 interceptor를 잘 사용한다면 가벼운 코드에서 사용하는 것도 나쁘지 않다. fetch의 장점은 기본 내장된 메소드이기 때문에 쉽게 접근할 수 있다는 점. 현업에서는 axios를 많이 쓰는 편이다.
3. 살짝 번외! 내가 풀스택이 되고 싶다, 백엔드 로그인 로직도 구현해 보고 싶다!
nest js 문서를 참고해서 작성하면 충분히 가능하다.
4. 프론트엔드 개발자로서 배워야 할 것, 그 순서 같은 게 있을까요?
그렇다기보단 프론트엔드 세상은 너무 무궁무진하기 때문에 다양한 프로젝트를 배워야 한다고 생각한다. 다양한 경험이 필요!
5. 코테 vs 과제 테스트 vs 프로젝트 경험?
프로젝트 경험!
6. 혼자 공부할 때 생각치 못했던 것들도 많고, 주변 개발자들이 너무 잘해서 위축이 됩니다...
주변에 잘하는 사람들 꿀을 빨아 먹으면 된다. 그리고 검색한 코드나 주변 사람들의 코드를 그대로 작성해 보는 것도 좋지만 (물론 공부가 된다) 어? 근데 나는 이렇게 생각하는데? 하면서 짜 보는 것도 굉장히 좋은 방법. 만약에 안 된다면 아, 이런 문제 때문에 저렇게 코드를 짰구나 할 수 있다.
7. 신규 입사하여 프로젝트의 코드 분석 어떻게 하면 좋을까요?
코드 흐름을 읽고 걔를 hooks처럼 이용해 보기.
8. 도움될 만한 기술 서적이나 인강 추천 부탁드립니다!
