<aside> ⭐ 학습목표

• 로그인의 기술적 정의와 실제 서비스에서의 사용도에 대해 알아보기
• 직접 로그인 화면과 Mock API를 세팅해보기
• Mock API가 무엇인지 알아보기
• 구성해 본 로그인 로직이 실제 서비스에 적용되기 위해서 필요한 부분에 대해 알아보기 </aside>

<aside> 💬 TIL

• formData
• Authorization으로 로그인 여부 로직 모듈화, 레이아웃 컴포넌트와 GeneralLayout 컴포넌트 활용

얼마 전 부트캠프에서 프로젝트를 하며 access token을 활용한 로그인 기능을 구현해본 적이 있어서 이번에 실습으로 하게 된 [로그인 화면 만들기]를 간단히 구현할 수 있을줄 알았다. 그런데 왜 어려웠는지, 정답으로 나온 코드를 보며 생각을 해봤다. 나는 아직도 JavaScript를 다루는 것이 능숙하지 않은 것 같다는 생각이 들었다. 기능은 여러가지 방법으로 구현할 수 있지만, 나에게는 그 다양성의 폭이 좁은 것 같다. 다른 방법으로 구현하는 걸 보니 이해하는데 시간이 좀 필요했다. 게다가 예시코드에서 사용된 formData가 뭔지 몰랐다는 것도 한몫했다. 이번 강의를 통해 알게 되었으니, 한가지 또 배웠다. 그리고 JavaScript를 더더 많이 공부해야겠다는 생각도 들었다.

</aside>

📖 table of contents

1. 로그인이란 무엇인가?

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

**<로그인 구현을 위한 개념>**

1. 권한이 없는 자원에 접근하지 않는 구조 만들기
2. 권한이 없는 자원의 존재를 모르도록 하기
3. 로그인, 로그아웃 만들기
4. 인증 정보 관리하기 (ex. JWT 토큰, Session 등을 이용)

**<로그인 구현을 위한 최소한의 요구사항>**

1. 로그인 페이지
2. 로그인 인증관련 데이터 관리
3. 로그인 상태에 따른 화면/기능 제어
4. 로그아웃

$$ •\;•\;• $$

▪️ [실습] 로그인 화면 만들기

<aside> ✅ 만들어 볼 것

• username, password를 입력받을 입력창
• submit을 위한 버튼
• 로그인 목업 API
• 유저 정보 목업 API

</aside>

<aside> ❓ 생각해 볼 것

• 인증을 위한 token에 어떤 것들이 들어가야 할까?

</aside>