카카오 소셜 로그인을 이용할시, 이메일 제공에 동의해야한다는 알림 모달이 나타나도록 구현되어있었습니다.
하지만 회원가입을 한 사용자가 로그아웃 후 카카오 로그인을 시도할 때도 해당 모달이 나타났습니다.
이미 회원가입 당시 동의를 했고, 더이상 할 필요가 없음에도 모달이 나타나는 것은 불쾌한 UX 를 초래할 수 있다고 판단했습니다.
이에 따라 서버측에서는 최초 카카오 로그인시 cookie 내 inner 키에 'true' 값을 담아 전송하도록 구현되었고,
클라이언트측에서는 cookie 내에 'inner=true' 가 존재하면 이메일 제공 동의를 묻는 모달이 등장하지 않도록 구현했습니다.
이전까지는 cookie 의 항목이 accessToken 밖에 없었으나, inner 가 추가되면서 코드를 수정했습니다.
cookie 내에서 accessToken 과 inner 를 찾고 구분하여 저장하는 코드를 작성했습니다.
// 조건문 외부에서 cookie, cookieToken, innerValue 라는 변수를 string type 으로 선언합니다.
let cookies: string;
let cookieToken: any;
let innerValue: any;
if (typeof document !== 'undefined') {
cookies = document.cookie;
// cookies(document.cookie)가 ; 를 포함하고 accessToken 을 포함하고 있다면,
if (cookies.includes(';') && cookies.includes('accessToken')) {
// cookies 의 (key=value) 를 구분짓는 ; 를 기준으로 split 하여 각 cookie 들을 cookieList 배열로 리스트화합니다.
cookieList = cookies.split(';');
// 그리고 ; 를 기준으로 구분된 인자들 중 accessToken 을 포함하는 인자를 Array.filter 메소드를 통해 색출합니다.
const findAccessToken = cookieList.filter((cookie: any) => {
return cookie.includes('accessToken');
});
// 위의 과정을 거쳐 findAccessToken 은 [ 'accessToken=eyJhbGciOiJ...' ] 와 같은 형태가 되어있습니다.
// findAccessToken 은 배열이므로 이의 0번째 인자, 즉 'accessToken=eyJhbGciOiJ...' 를 = 으로 다시 split 해주면,
// [ 'accessToken', 'eyJhbGciOiJ...' ] 와 같은 배열이 만들어지고 여기서 구하려는 accessToken 은
// 해당 배열의 1번째 인자에 해당하므로 다음과 같은 코드를 작성하여 cookieToken 에 할당합니다.
cookieToken = findAccessToken[0].split('=')[1];
}
// cookie 에 담긴 accessToken 을 구하는 위의 과정과 동일합니다.
// cookie 중에서 key 로 'inner' 를 갖는 value 를 색출합니다.
if (cookies.includes(';') && cookies.includes('inner')) {
cookieList = cookies.split(';');
const findInner = cookieList.filter((cookie: any) => {
return cookie.includes('inner');
});
inverValue = findInner[0].split('=')[1];
}
랜딩 페이지에 사용되는 일러스트들을 수정하였습니다.
캐릭터들의 피부색이 이전에는 살구색, 보라색으로 구성되어 있었으나
모두 살구색으로 통일하는 방향으로 수정했습니다.
일러스트들의 배경을 흰색에서 투명한 색으로 수정했습니다.
배경색이 유색이어도 캐릭터와 사물 일러스트만 나오고, 뒷배경이 겹치지 않습니다.
오늘의 프로젝트에서 힘든 점은 무엇인가요?
로그인, 로그아웃, 회원가입, 회원탈퇴의 기능과 관련하여 모든 구현이 끝났다고 생각했는데
작업이 진행되면 진행될 수록 위의 기능에서 예상치 못한 에러가 등장하여 당황스러웠습니다.
서버나 클라이언트나 상황이 바뀌다보니 그에 따라 계속해서 코드를 수정하는 것이 번거로웠습니다 :(
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
[x] Landing Page 의 구성을 마쳐야합니다.
[x] Landing Page 에 필요한 컴포넌트들을 구현해야합니다.
[x] Landing Page 재구성에 따라 Introduction 컴포넌트를 세분화하고 분리해야합니다.
[x] Landing Page 컴포넌트들의 러프 디자인을 해야합니다.
(완벽한 최종 디자인이라기보다, 색만 1차적으로 씌워두는 것을 의미합니다.)
오늘은 어떻게 프로젝트에 기여했나요?
inner
키에'true'
값을 담아 전송하도록 구현되었고, 클라이언트측에서는 cookie 내에'inner=true'
가 존재하면 이메일 제공 동의를 묻는 모달이 등장하지 않도록 구현했습니다.이전까지는 cookie 의 항목이
accessToken
밖에 없었으나,inner
가 추가되면서 코드를 수정했습니다. cookie 내에서accessToken
과inner
를 찾고 구분하여 저장하는 코드를 작성했습니다.오늘의 프로젝트에서 힘든 점은 무엇인가요?
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?