[React] 원티드 프리온보딩 프론트엔드 Day1

 

 

 

😃 원티드 프리온보딩 프론트엔드 Day1

3월 프론트엔드 챌린지
로그인 기능 구현, 하나부터 열까지!

실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다.
배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다.
보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다.

 

---

 

📍 개요

 

1강. 로그인의 개념과 어플리케이션 구조 알아보기

 

- 로그인의 기술적 정의와 실제 서비스에서의 사용도

- 직접 로그인 화면과 Mock API를 세팅

- 구성해본 로그인 로직이 실제 서비스에 적용되기 위해서 필요한 부분 확인

 

 

 

➕ 로그인이란?

 

📌 로그인의 정의 알아보기

 

1) 시스템에 엑세스 하기 위해

2) 제한된 파일과 시스템에 엑세스 하기 위해

3) 로그를 남기고 유저의 활동을 감시, 추적하여 사고에 대처하기 위해

 

사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차

 

 

 

➕ 서비스 관점에서 로그인의 정의 생각해보기

https 는 stateless 이기 때문에 누가 요청했는지 알 수 없다.

유저를 인증하고 구분하는 동작

 

 

 

📌 구현을 위해 해야하는 것

 

BE

1) 사용자 식별

2) 접근 및 동작 제어

 

FE

1) 권한이 없는 자원에 접근하지 않는 구조 (권한이 없는 자원의 존재를 모르도록 하기)

2) 로그인/로그아웃 만들기

3) 인증 정보 관리하기(토큰, 세션 등)

 

-> 로그인 페이지

-> 로그인 인증 관련 데이터 관리

-> 로그인 상태에 따른 화면/기능 제어

-> 로그아웃

 

 

formData는 entries로 돌아야 하고, 브라우저에서 보기에는 어렵다.

formData는 객체가 아니다.

input에 state를 적용하면 리렌더링으로 인한 성능에 영향이 있다.

_를 붙이면 해당 스코프 안에서만 사용한다는 문법이다.

 

 

 

➕ 실제 서비스의 로그인이 되려면?

 

토큰을 어디에 저장하나?

토큰을 매번 직접 넣어줘야 하나?

하나에서 사용하고 있는 정보를 전역으로 관리해주면서 어디에서 사용할 것이냐

 

 

➕ 실제 서비스 구조 살펴보기

 

/main /login -> 로그인 불필요

/mypage /repo /page -> 로그인 필요

 

로그인 필요한 페이지마다 로그인을 검증할 때는 반복되는 로그인 확인 코드 & 로직

 

글로벌 페이지로 감싸준다!

 

 

하나의 코드를 가지고 유지보수 하기가 편하다. (휴먼 에러가 안난다)

 

 

reduce는 하나의 값을 각각 아이템마다 조건을 부여해서 원하는거만 들여 올 수 있는 작업

high order component의 역할

 

 

 

 

➕ CSR, SSR 유지보수 관점에서 생각해보기 

 

CSR 클라이언트 사이드 렌더링

SSR 서버 사이드 렌더링

 

브라우저의 렌더링이란 HTML과 CSS를 읽어오기

서버가 HTML을 반조립해서 제공하면 브라우저가 읽는 것이 서버 사이드 렌더링이라고 한다.

 

SSG Static site generation

HTML을 빌드 레벨에서 만들어 둔다. 

 

SEO

검색엔진 최적화 SSR이 meta데이터 크롤링을 더 잘 되게 해준다.