lodash, 인증 / 인가 tailwind.css
lodash는 JavaScript 유틸리티 라이브러리,
배열, 객체, 문자열 등의 데이터 조작을 쉽게 할 수 있는 함수들을 제공한다.
성능 최적화와 코드 가독성을 높이는데 유용,
throttle, debounce 같은 함수도 포함되어 있다.
인증 / 인가
인증(authentication)
인가(authorization)
- 인증이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차
- 인가란 인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다.
HTTP 프로토콜
- 무상태성 (stateless)
모든 요청이 독립적 (클라이언트에서 서버로 보내는 요청)
서버가 이전 요청에 대한 정보를 기억하지 않는다. - 비연결성 (connectionless)
서버와 클라이언트는 연결 X 서버입장에서는 매번 요청을 받는다.
쿠키, 세션 , 토큰
쿠키
- 브라우저에 저장되는 작은 데이터 조각, key-value형태로 저장된다.
- 쿠키를 사용하여 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있음
- 쿠키는 별도로 삭제 처리하거나 유효기간이 만료되지 않는 한 서버와 통신할 때 자동으로 주고받게 된다.
- Set-cookie 속성으로 쿠키 정보를 담아주면 응답을 받은 브라우저는 쿠키를 브라우저에 자동으로 저장한다.
- 쿠키는 클라이언트에서 직접 추가/수정/삭제 할 수 있다.
2. 세션을 이용한 인증 방식
- 세션이란 사용자와 서버 간의 연결이 활성화된 상태를 의미하는 개념 (인증이 유지되고 있는 상태)
- 로그인 성공 => 서버에서 세션 생성 및 저장 (Key-value형식) key(sessionId)를 브라우저에 응답(by 쿠키)
- sessionId를 설정하고 브라우저에 보내면 브라우저는 이것을 쿠키에 저장한다.
2-2 세션을 이용한 인가
- 브라우저에 있는 cookie는 자동으로 서버에 보내지게 된다.
- 세션 Id를 찾아 소스에 접근할 수 있는지 확인한다.
- 세션 Id에 맞는 정보를 가져온다.
세션 인증 방식의 한계
- 확장성 문제
: 세션 정보는 서버의 메모리나 저장소에 저장되기 떄문에 서버가 많아질수록 확장 세션 동기화 문제가 발생한다. 여러 서버가 동일한 세션 정보를 공유해야 하므로 이를 관리하기 위한 추가적인 복잡성이 필요하다. - 메모리 사용량 증가
- 상태 유지의 복잡성
- 보안 문제
토큰
: 클라이언트에서 보관하는 암호화 또는 인코딩된 인증 정보
서버의 상태를 유지하지 않고도 클라이언트의 인증 상태를 확인할 수 있게 된다.
JWT
- 토큰 기반 인증 방식에서 사용되는 토큰
- Header, Payload, Signature
헤더 Header: 어떤 종류 토큰 , 어떤 알고리즘
본문 Payload : 실제 중요한 데이터
서명 Signature : 위조되지 않았는지 확인하는 역할 - 사용자 ID, 토큰 시간정도만 넣는다.
tailwind.css
필요성 : Styled-components는 편리하지만 성능 이슈와 클래스 네임 충돌 문제가 발생할 수 있다.
Tailwind CSS는 이러한 복잡성을 줄이고, 보다 유연하고 직관적인 스타일링을 제공한다.
- 유틸리티 퍼스트 CSS프레임워크로 빠르고 쉽게 스타일링을 적용할 수 있는 클래스를 제공한다.
- 유틸리티 클래스?
: 특정 스타일 속성을 나타내는 짧고 간단한 CSS클래스로 HTML요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있다. - 커스터마이징이 가능함
yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p- tailwind.config.js변경
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}index.css에 추가
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;반응형 웹
- 반응형 디자인은 이런 다양한 기기에 맞게 화면이 자동으로 변하는 디자인
- 모든 기기에서 화면이 잘 보이고 좋은 유저 경험이 되도록 만들어 줌
- 컨텐츠는 거의 동일하게 제공하나 디바이스 마다 폰트의 크기, 레이아웃, 구성을 다르게 주어 사용자에게 효과적으로 내용을 전달해주는 것을 디바이스별로 전달해줌
적응형 웹
- 각 기기마다 미리 정해진 화면 크기에 맞게 웹사이트를 만드는 것이다.
- 각 기기마다 디자인을 다르게 만들 수 있다.
반응형 웹 만드는 방법
- CSS 파일을 @media (미디어 쿼리)를 사용하는 방법\
- styled-components
- react-response
- tailwindcss
tailwindcss theme 사용
breakpoint 자유롭게 customize 가능
so