[50기 정원규 - ADD : Api/login]

[wonkyujeong]

1. 본 PR이 우리 팀의 웹 서비스 제품성에 어떠한 기여를 하였고,
사용자에게 어떠한 기대효과를 전달하는지 작성해주세요.

• 내 PR이 제품 내 어떠한 기능적인 배경/전후맥락 가운데 개발되었나요?

사용자가 우리 상품을 이용하기 위해 카카오 소셜 로그인/회원가입을 하고 추가정보를 받아서 그 회원의 정보를 수정하는 과정

(예시) 고객의 유입과 전환을 책임지는 회원 기능에서, 유저의 이탈을 방지하기 위해 input 창 바로 아래에서 실시간으로 적색의 경고 메세지를 전달 받습니다.

• 내 PR이 Merge 됨으로써 유저에게 전달되는 편익/기대효과는 무엇일까요?

사용자가 로그인 회원가입을 조금 더 편리하게 할 수 있다 사용자가 적은 추가 정보들을 받아서 회원 정보를 업데이트해준다

(예시) 유저는 실시간으로 스스로 오기입한 내용을 확인할 수 있기 때문에 잘못 계정 정보를 작성함으로써 발생될 수 있는 변수를 최소화할 수 있습니다. 이는 곧 유저 전환의 허들을 낮추어 줄 수 있습니다.

2. 이 브랜치에서 어떤 내용을 개발했는지 큰 제목과 상세 내역을 적어주세요.

카카오 소셜 로그인을 이용해 프론트가 코드를 주면 그 코드를 카카오에게 전송해 access token을 받아서 그 access token을 카카오에게 다시 보내면 사용자의 정보를 받아 데이터베이스에 저장해 우리 토큰을 만들어 프론트에게 전송한다 그리고 사용자의 추가 정보를 받아서 그 사용자의 정보를 업데이트 한다

(예시) 로그인 기능 추가

• (예시) email입력 @필요,password에 숫자로 8자이상 유효성 검사 추가
• (예시) 유효성 검사 통과시 버튼 컬러 변경 및 버튼 활성화

3. 개발한 화면을 캡쳐해서 첨부 해 주세요.

• (drag & drop 또는 첨부파일 추가)

4. 이 브랜치에서 개발하면서 느꼇던 개발 성장포인트를 적어주세요.

코드를 받아와서 액세스 토큰을 받아오는 카카오 소셜 로그인 방식에 대해 알았다

• (예시) 새로운 배열메서드 filter를 쓸 수 있게됐습니다.
• (예시) 상수데이터와 map 메서드로 반복되는 UI를 그릴 수 있게 됐습니다.
• (예시) fetch함수를 어떻게 쓰는지 알게됐습니다.
• (예시) 계산된 속성명 (computed property)을 쓰긴했는데 어떻게 돌아가는지 이해가 잘 안되서
  블로그에 정리해봐야겠습니다.
• (예시) 화살표 함수(arrow-function) 어떤 코드를 언제 생략할 수있는지 완벽 이해했습니다.
• (예시) 구조분해할당(Destructuring assignment)을 써보니 가독성도, 유지보수도 편할것같습니다.