2023.08.09(수) 슈퍼코딩 부트캠프 신입연수원 Week2 Day3 중간보고

✔ WHAT TO DO

• 10:00 Daily Scrum
• 64강 데이터베이스와 연동해 회원 가입 기능 완성하기 ~ 70강 프론트엔드 핵 쉬운 프레임워크! - Svelte 수강하기

​

✔ 배운 내용 요약 정리

• JWT (JSON Web Token)

유저 인증과 관련된 기술 (Authentication)

보통 토큰에다가 Base64로 인코딩해서 그 토큰에 사용자 정보를 담아서 같이 주게 됨

​

세션 vs JWT

세션은 사용자 정보를 서버측에서 관리(DB를 통해)

JWT는 사용자 정보를 토큰에 포함시킴

따라서 확장성 vs 보안성의 문제

보안성은 refresh token으로 높일 수 있어서 현업에서도 JWT 방식을 많이 사용함

https://inpa.tistory.com/559

🌐 JWT 토큰 인증 이란? (쿠키 vs 세션 vs 토큰)

 

​

프론트엔드에서 요청 보내기

-> 서버에서 데이터베이스 조회

-> 유저가 가입되어 있지 않으면 회원 가입 처리

-> 프론트엔드에게 JWT를 발급함

​

HTTP 요청의 Header에 Access Token 담아서 요청하기

• Header란?

클라이언트에서 서버로 요청을 보낼 때, 요청의 부가 정보를 담고 있는 데이터

​

토큰을 브라우저에 저장해서 쓰는 방법

• 쿠키

서버로 요청을 보낼 때 자동으로 전송되는 작은 데이터 파일

HttpOnly 옵션을 통해 XSS, CSRF 공격을 방지할 수 있음

• 로컬 스토리지

브라우저 내부에 있는 저장소

클라이언트 측에서 직접 사용 가능

• 세션 스토리지

브라우저 내부에 있는 저장소

브라우저가 닫히면 초기화 (보안 측면에서는 더 높을 수 있음)

​

토큰 정보를 브라우저에 저장해서 사용한다.

로컬 스토리지에 저장하는 방식은 탈취의 위험이 높으므로

토큰 만료시기를 몇 시간 단위로 짧게 해서 보안을 높인다!

​

- 액세스 토큰의 보안 위협을 보완하기 위한 수단인 리프레쉬 토큰

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-Access-Token-Refresh-Token-%EC%9B%90%EB%A6%AC-feat-JWT

🌐 Access Token & Refresh Token 원리

 

​

📌 HW: 홈페이지 "며칠 전", "몇달 전" 스스로 개선해보기 ! !

​

Javascript는 간단한 동작만을 위해 태어남

하나의 파일에 수많은 개발자들이 수많은 코드를 작성한다면 관리도 힘들고, 확장하기도 힘듦

node.js의 등장으로 인해 CommonJS라는 모듈 방식이 처음 도입

npm의 등장으로 인해 이러한 모듈을 모두가 공유할 수 있는 환경 조성

​

번들러: 하나로 합친 번들(bundle)을 만들어 냄

(여러 개의 파일을 하나로 합침: 번들)

거대한 프로그램을 만들기 위해서는 모듈 방식이 필요

• Webpack

but, 수정시마다 새롭게 빌드 -> 빌드가 너무 느리다!

• Esbuild의 혁신

빌드 속도가 100배 빠른 도구 탄생

Javascript가 아닌 go언어로 만들어서 최대한의 속도 끌어냄

• Vite의 탄생

Evan You

다양한 기능을 제공하면서도 굉장히 빠름

급속도로 성장중 + 현업 만족도 높음

​

웹 프레임워크

• React

jsx라는 리액트만의 문법이 존재

made by meta(facebook)

많은 JS 라이브러리와 호환

• Svelte

html, css, js 문법을 그대로 차용

가상DOM 존재하지 않음(컴파일러)

다만 생태계 부족