프리온보딩 FE 로그인(1)

이번에 원티드 이벤트를 통해서 프리온보딩 FE 챌린지에 참여하게 되었는데 주제는 로그인 구현에 대한 내용이었다.

오늘은 첫 시간으로 로그인의 정의와 구조에 대해 설명을 들었는데 직접 mockAPI를 만들어 보며 실습하는 시간도

가지며 생각보다 난도 높고 실제 현업에서 사용되는 로그인기능의 코드 구조? 흐름에 대해 설명해 주시는 것 같았다.

 

로그인이란!?

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

강의를 들으며 새롭게 알게 된 것은 사용자의 권한에 따라서 해당 페이지가 존재하더라도 사용자에게 404 에러를
보내줌으로써 사용자가 해당 페이지의 존재 자체를 확인할 수 없게 구현해야 한다는 것을 처음 알게 되었다..404를 보내주지 않게 되면 사용자가  그 페이지가 권한으로 인해 접근할 수 없다는 것을 인지하고
다른 나쁜 작업을 할 수도 있기 때문!

 

실습

그다음으로 mockAPI를 이용해서 백엔드 없이 로그인 기능을 구현해 보는 시간을 가졌다.

시간이 별로 없어서 완벽하게 구현하지는 못 했지만 설명을 통해서 로그인의 흐름은 좀 파악할 수 있었다.

• 1. 유저가 아이디와 비밀번호를 입력 
• 2. form태그를 통해 onSubmit 함수가 실행된다.
• 3. onSubmit 함수에서는 유저가 입력한 값을 가져온 후 login 함수를 실행한다.
• 4. login 함수에서는 유저가 입력한 값을 통해 데이터베이스에서 해당 유저를 찾아
  해당 유저가 존재하면 {message:'success' , token:{유저 정보: '유저의 닉네임', secret: 시크릿 키}}
  형태로 return 값을 보내준다. ( 이때 클라이언트에서도  유저의 정보는 확인할 수 없어야 한다!)
• 5. 클라이언트에서 받은 token을 통해 유저를 찾는 getUserInfo 함수를 실행시킨다.
  token 변환하여 해당 유저를 식별해야 하며 이 token을 어떻게 가지고 있을지
  쿠키, 로컬스토리지, 세션 등 방식을 고려하게 된다.

 

추가로 강의에서는 formdata를 통해 submit 버튼이 눌렸을 때만 유저가 입력한
input값들을 가져오게 끔 구현하였다(useState 사용하지 않는 비제어)

현업에서는 보통 유효성 검사와 같은 특정 문자나 공백등을 제거해야 하는 등에
유저에게 알려줘야 하는 상황이 생기므로 제어 컴포넌트를 사용하는 경우가 많다고 한다.

useState를 사용하지 않게 되면 submit버튼을 눌렀을 때에 딱 한 번 랜더링 되므로 렌더링의 이점이 있다.

 

그리고 CSR과 SSR에 대해서도 얘기를 하게 되었는데

Next vs React  중 무엇을 사용해야 되나? 에 대한 주제였다.

1. 리액트의 초기 렌더링 시점:
   • 리액트의 렌더링은 ReactDOM.render 함수를 사용하여 DOM에 첫 번째로 렌더링 할 때 발생하며 이 시점에서
     컴포넌트 트리가 생성되고, 가상 DOM이 실제 DOM으로 변환되어 화면에 나타나게 된다. CSR
2. 넥스트의 렌더링 시점:
   • 넥스트는 서버에서 렌더링 된 마크업(HTML파일)을 클라이언트로 전송하고, 클라이언트에서는 해당 마크업을
     재사용하여 렌더링을 수행합니다 즉 서버에서 HTML파일 만드는 과정까지를 렌더링이라고 한다. SSR

이렇게 리액트의 넥스트는 렌더링의 차이가 있고 넥스트는 크게 SEO의 장점이 있다. 하지만 뭐가 더 중요하다고 한다면

케바케라고 한다. 경우에 따라 다르며 굳이 Next를 사용할 필요는 없다고 한다. 또한 next의 단점이라고 한다면 결국
서버 환경을 구축하는 데에 비용이 발생하게 되는데 
이때 클라이언트 측에서 디버깅 시 서버에 대한 에러 또한 고려해야 하기 때문에 부담이 클 수 있다는 단점이 있다.

 

실습 환경의 코드는 개인적인 블로그에 올리면 안돼서 아쉬웠지만 무료인데 이 정도 강의이면 개이득인 것 같다.

강의에서 코드 재사용성에 대해 레이아웃 컴포넌트 대한 설명도 있어서 한 번 사용해 봐야겠다.