TIL_230212_ 최종 프로젝트 - 기능 개발 및 공부

정윤숙·2023년 2월 12일

TIL

목록 보기

104/192

1. 프로젝트 - 스터디 타임

프로젝트 관련 공부하기

인가(Authorization) - 특정 리소스에 접근할 수 있는 권한 여부 확인 절차
- ex. 유저가 마이페이지에서 서버에게 개인정보를 받아오는 API 요청을 할 때 서버는 클라이언트에게 인가를 해 준다
http 프로토콜 통신의 특징
- 무상태 (Stateless)
  -> 서버는 클라이언트의 상태를 기억하지 않는다.
  -> ex. 로그인 요청 시 서버가 요구하는 상태 정보(아이디, 비밀번호)를 모두 담아 요청해야 한다.
- 비연결성 (Connectionless)
  -> 서버와 클라이언트는 연결되어 있지 않아 서버 입장에서는 매번 새로운 요청이다.
  -> 사용자별 요청이 잦은 서비스(ex. 채팅)의 경우 비연결성은 오히려 비효율적
쿠키 (cookie)
- key-value 형태로 브라우저에 저장되는 텍스트 파일
- 서버에 특정 API 요청 -> 서버가 응답 시 header 안에 set-cookie 속성으로 담아준 쿠키 정보를 응답을 받은 브라우저가 브라우저에 자동 저장
- 저장된 쿠키 정보 확인
  -> 개발자도구 → 애플리케이션 → 저장용량 → 쿠키
- 저장된
Origin
- url 중 protocol + host + port 를 의미
- ex. http://localhost:3000
CORS(Cross Origin Resource Sharing)
- 브라우저는 보안상의 이유로 Same Origin Policy(SOP)를 원칙
- 서버와 클라이언트 모두 CORS 설정을 하면 서로 다른 출처(Cross-Origin)임에도 API 요청이 가능

로그인/회원가입 성공 시 서버에서 쿠키에 sessionId를 담아 보낸다.
- 세션 유지 상태
  -> 서버에서 관리하는 세션 저장소에 회원 데이터가 있다.
- 세션 만료 상태
  -> 서버에서 관리하는 세션 저장소에 회원 데이터가 없다.
인가(Authorization) 필요한 API 요청/응답
- 서버는 클라이언트 쿠키에 들어 있는 sessionId를 세션 저장소에 조회
  -> sessionId가 있으면 DB에 데이터를 조회하여 클라이언트에 응답한다.
axios 요청 시 서로 다른 출처 간에 데이터 주고 받기
- CORS와 연관
  -> 클라이언트 부분
  
  -> withCredentials를 true로 해줘야 다른 출처 간 데이터 주고 받기 가능
  -> 서버 부분
- 참고
  axios 공식문서 요청 config

JWT (Json Web Token): 웹에서 주로 사용되는 인증 수단
- header.payload.signature 형식의 3 가지 데이터로 구성
- 정보(payload)를 토큰화할 때 signature에 필요한 secret key는 서버에서 철저히 보안 상태로 담겨 있다.
Refresh Token
- 적용 시 Access Token 만료 기간이 짧아 보안성 강화
- 보안이 중요한 서비스의 경우 인증 시 2개의 토큰 (Access Token, Refresh Token)을 발급
  -> ex. Access Token의 기간은 30분, Refresh Token은 1~2주
  -> Access Token이 만료 시, Refresh Token 이 유효한 상태면 서버에서 새로운 Access Token 발급해 인증상태(로그인) 유지
  -> Refresh Token 만료 시 다시 로그인하라는 메시지를 응답

2. 프로젝트 기능 개발

배포 서버 ->
- 배포 서버를 위해 'npm run build'하는데 실패
- 오류 메시지
  Build optimization failed: found pages without a React Component as default export in pages/my/style
  -> export default가 없는 style.tsx에서만 모두 오류가 난다.
원인 - page가 아닌 파일이 page폴더에 있어서 그런 것