로그인이란?
시스템이 문제없는 동작을 하기위해 유저를 인증하고 구분하는 동작
사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차
로그인 구현을 위해 해야하는 것
- 사용자 식별
- 접근 및 동작 제어
- 권한이 없는 자원에 접근하지 않는 구조 만들기
(접근 제어 가능한 페이지를 만드는게 프론트의 역할) - 권한이 없는 자원의 존재를 모르도록 하기 (404)
- 로그인/로그아웃 만들기
- 인증 정보 관리하기
최소 구현 요구사항
- 로그인 페이지
- 로그인 인증 관련 데이터 관리
- 로그인 상태에 따른 화면/기능 제어
- 로그아웃
- JWT 토큰은 단순 삭제가 아니라 무효화 작동을 백엔드로 요청 보내야함
- 이 과정에서 프론트는 백엔드에 요청만 보냄
[실습] 로그인 구현
- formData 사용 (useRef도 괜찮다)
- type은 객체를 정의할때 어떤 형태인지 정의, interface는 object의 형태이고 확장할 수 있음
- 시크릿키는 유효성 검증을 위해서 사용
- _를 변수 앞에 붙이는건 해당 변수 스코프에서만 사용한다는 컨벤션
- as string보다 toString()이 더 좋은 코드임
실제 서비스의 로그인이 되려면?
토큰이란?
통행권. 로그인 정보를 입력하고 얻는 권한
토큰을 매번 직접 넣어줘야할까?
-> 인스타를 예시로 들면 스토리를 올리거나 좋아요를 누를 때마다 로그인을 요청하게 될 수도 있음
토큰을 저장하는 곳
- 쿠키
- 로컬 스토리지
- 세션 스토리지
실제 서비스 구조
한 페이지 내에서 여러 곳에 정보를 사용할 때 효율적인 패턴
레이아웃 컴포넌트
로그인 여부 확인을 위해 반복되는 코드&로직을 모듈화
- 껍데기를 갖고 있는 하이어오더 컴포넌트를 만들고 안에 내용을 바꿔주기
1. 라우터에서 적용
- 라우터를 관리하는 객체를 만들어서 map 활용
- withAutorization이 true인것만 감싸고 아니면 그냥 내려보내기
- 사이드바에서도 활용할 수 있음 (로그인 됐을때만 보이도록 활용)
- 하나의 파일인데 여러 용도로 사용할 수 있으면 유지보수가 쉽고 휴먼 에러가 안난다.
2. 사이드바에서 사용
reduce는 array를 이용하여 이전의 반환값을 참조하여 새로운 값을 반환하였다.
→ 이게 무슨 뜻이냐면?
- withAutorization이 false이면 빈 배열로 넘어가고, true이면 필요한 값으로 바꿔서 집어넣기
- 이렇게 하면 각각 아이템마다 조건을 부여해서 원하는 것만 사용할 수 있음
- filter를 사용할 수도 있지만 여기서는 값을 변조했기 때문에 reduce를 사용함
- filter는 그대로 값을 가져갈때 주로 사용.
3. 반복되는 레이아웃 틀 처리
- 가독성이 높고 유지보수하기 좋음
CSR과 SSR
재료만 제공 vs 반조립하여 제공
브라우저에서 말하는 렌더링이란?
- HTML이랑 CSS를 읽고 화면에 그리면서 영향을 주는 것
- https://d2.naver.com/helloworld/59361
이 글 참고하기
SSG
- 완제품 제공
SSR은 SEO도 되니까 다 SSR 쓰면 되는거 아닌가요?
- ‘서버’사이드 렌더링
- 서버를 세팅해야함
- 장애 지점이 늘어남
고려사항
1. 추가로 서버가 필요한가?
2. SEO가 필요한가?
3. 어떤 유저 인터랙션이 많은가? 등
무물보 답변
1. 신입 개발자 필수 역량 3가지
- 기본적인 코드를 읽을 수 있는 능력 [한번에 이해하지 못하더라도]
- 내가 뭘 모르는지 아는것 [메타인지]
- 질문 잘하기 [내가 무엇을 알아야 나의 문제를 해결하는가]
2. 프론트엔드가 필요한 백엔드 지식
- CRUD, DB, HTTP 프로토콜, 알고리즘, 자료구조 정도의 백엔드 지식을 알면 좋음
→ 그것보단 프론트 지식이
3. 주로 사용하는 상태 관리 라이브러리
- 현업에는 Redux가 많고 mobX, recoil, zustand도 좋다
