TIL(21.04.26 - 21.05.01)

21.04.26(월)

- Calendar 코드 뜯어보다.

프로젝트를 진행하며 Calendar 기능을 구현해야 하는 필요가 생겨 이전에 완성해내지 못한 calendar 코드를 다시 보게 되었다. 지금 보면 조금 쉬울 줄 알았는데 아직도 어렵다는 게 놀라웠고, 그때 과제하다 포기하지 않고 버틴 게 자랑스럽다. 아무튼 캘린더 코드를 커스터마이징 하는 테스트를 프론트엔드 팀원들 전부 연습 겸 테스트 겸 각자 진행하는 시간을 가졌다.

 

---

21.04.27(화)

- Calendar 코드 커스터마이징

캘린더 코드를 이용해 어느정도 우리 입맛에 맞는 View를 형성하게 되었고, 이제 필요한 기능들을 집어넣을 차례다. 기능은 솔직히 잘 모르겠는데 하다 보면 비둘기 모가지로 나는 것처럼 되긴 할 것 같다.

 

---

21.04.28(수)

- 소셜로그인(카카오) 공부

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

소셜 로그인 부분을 맡게 되었다. 카카오 개발자 페이지를 계속해서 보면서 어떤 식으로 로그인이 이루어지는지 파악하려 발버둥 친 하루였다. 우리는 REST API를 활용하여 카카오 로그인을 구현할 예정이다.

---

21.04.29(목)

- 소셜로그인 구현... 이론만 보다 한계를 느끼다.

소셜 로그인 버튼은 구현해 두었고, 이제 실제로 데이터 주고받는 일만 남았는데 계속 들여다보니 프론트에서는 URL 처리만 해주면 될 것 같기도 하고... 백엔드 부분은 확실히 프론트단보다 처리해야 할 일이 많은 듯하다. 직접 해보기 전에는 계속 문서 들여다본다고 달라질 것 같지는 않다는 느낌을 받았다. 얼른해보고 싶다.

 

- Navigator 버튼 누르는 애니메이션(?) 기능 구현

카테고리 버튼을 누르면 누른 버튼의 불이 들어오고 다시 다른 버튼을 누르면 이전까지 눌려있던 버튼의 불이 꺼지는 기능 구현을 성공하였다. 구글링을 하면서 매번 느끼는 것인데 정말 내 상황에 적절한 정보 찾기가 쉽지 않은 것 같다. 기본기가 가장 중요하다는 것을 다시 한번 느끼게 된 순간.

 

2021.05.02 - [분류 전체보기] - 버튼 클릭시 눌린 버튼 상태 변화(Javascript)

버튼 클릭시 눌린 버튼 상태 변화(Javascript)

---

21.04.30(금)

- RefreshToken 을 활용한 로그인 기능 구현

로그인 기능을 구현하면서 처음으로 RefreshToken을 활용해보자는 이야기가 나와서 관련 부분 공부를 해보았다.

대체적으로 XSS공격과 CSRF공격으로부터 사용자들의 정보를 보호하기 위해 활용한다는 설명이 많았고 AccessToken과 RefreshToken을 각각 어디에 저장 및 관리하느냐에 따라 각각 보안 문제가 또 달라지는 등 생각보다 굉장히 깊은 분야였다.

우리는 쿠키를 활용하자는 이야기로 결론이 났기 때문에 쿠키를 활용하면서도 가장 보안적으로 안전한 관리방법을 찾아서 이번 프로젝트에 적용해 볼 생각이다.

기능 구현을 전부 끝내면 따로 공부한 내용에 대해 포스팅하며 정리해볼 생각이다.

 

- 소셜 로그인(카카오톡) 서버로 내 정보 전달 성공... 하지만 리다이렉트는 실패

소셜로그인 버튼을 누르면 서비스 정보 동의 화면이 생성되고 동의를 누르면 서버로 내 정보가 전송이 되는 부분까지 성공하였다. 하지만 그 이후 로그인이 이루어지고 메인화면으로 리다이렉팅이 되어야 마무리인데 아직 그 부분에 대해 지식이 부족하고 어디를 고쳐야 할지 모르겠다. 내일 이 부분 집중적으로 공부해서 해결해 볼 예정이다.

---

21.05.01(토)

- AccessToken 만료 직전 자동으로 새로운 AccessToken 발급받기(자동연장)

AccessToken이 RefreshToken에 비해 상대적으로 만료기간이 짧기 때문에 사용자가 서비스를 이용 중에 만료기간이 끝나 인증을 새롭게 받아야 한다는 번거로움이 생긴다.(새로 다시 로그인하거나)그래서 만료기간이 임박하면 자동으로 AccessToken을 새롭게 발급받는 로직을 구현하였다. 해당 부분 추후에 포스팅으로 정리해서 다루어 볼 예정이다.

 

- 소셜 로그인(카카오톡) 리다이렉팅 성공

프론트엔드 코드만 보고는 절대 해결 못할 것 같음을 직감하고 백엔드가 소셜 로그인을 작업하며 진행하는 과정과 다른 사람의(백엔드) 코드와 우리 백엔드 팀원의 코드 등을 보면서 대체 리다이렉팅이 이루어지지 않는 이유가 뭔지 한참을 찾아해메다 결국 알아내서 리다이렉팅에 성공하였다. 카카오 개발자 페이지에서 내 애플리케이션에 WEB 플랫폼 등록 부분에 localhost:3000이 등록되어 있지 않았고 리다이렉팅 경로도 잘못 지정되어있었던 것이 원인이었는데 따로 포스팅해야 설명이 가능할 것 같다. 이번 주에 정리할 포스팅이 상당히 많아졌다.