[Dev-Log] 2022-03-05 정윤석

### 오늘은 어떻게 프로젝트에 기여했나요?
- 쿠키 관련 코드가 불필요하게 길었던 부분을 수정했습니다.
많은 if 조건문을 통해 여러 경우의 수에 대한 코드를 작성하는 방식에서
모든 경우의 수를 관통하여 어떤 경우에도 정상적으로 작동하는 코드를 작성하는 방향으로 수정했습니다.

▶︎ BEFORE
```javascript
useEffect(() => {
if (typeof document !== 'undefined') {
const cookie = document.cookie;

// CASE 1
// document.cookie 가 ; 를 포함하고 있고, accessToken 이라는 key 가 존재하는 경우입니다.
// 즉, document.cookie 에 accessToken 을 포함한 여러 cookie 가 담겨있는 경우를 뜻합니다.
if (cookie.includes(';') && cookie.includes('accessToken')) {
const cookieList = cookie.split(';');
const findAccessToken = cookieList.filter((cookie: string) => {
return cookie.includes('accessToken');
});
const accessToken = findAccessToken[0].split('=')[1];
axios
.get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/mypage`, {
headers: {
Authorization: `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
withCredentials: true,
})
.then((response) => {
const { userInfo } = response.data.data;
setUserId(userInfo.user_id);
setNickname(userInfo.nickname);
setAuth(userInfo.auth);
})
.catch((error) => {
console.log(error);
});

// CASE 2
// document.cookie 가 ; 를 포함하고 있지 않고, accessToken 이라는 key 가 존재하는 경우입니다.
// 즉, document.cookie 에 accessToken 이라는 key 의 cookie 만이 유일하게 존재하는 경우를 뜻합니다.
} else if (!cookie.includes(';') && cookie.includes('accessToken')) {
const accessToken = cookie.split('=')[1];
axios
.get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/mypage`, {
headers: {
Authorization: `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
withCredentials: true,
})
.then((response) => {
const { userInfo } = response.data.data;
if (userInfo) {
setUserId(userInfo.user_id);
setNickname(userInfo.nickname);
setAuth(userInfo.auth);
}
})
.catch((error) => {
console.log(error);
});

// CASE 3
// document.cookie 에 accessToken 이라는 key 의 cookie 가 존재하지 않는 경우에 해당하여,
// localStorage 에서 accessToken 이라는 key 의 item 을 가져오는 방식입니다.
} else if (typeof localStorage !== 'undefined') {
const accessToken = localStorage.getItem('accessToken');
axios
.get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/mypage`, {
headers: {
Authorization: `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
withCredentials: true,
})
.then((response) => {
const { userInfo } = response.data.data;
if (userInfo) {
setUserId(userInfo.user_id);
setNickname(userInfo.nickname);
setAuth(userInfo.auth);
}
})
.catch((error) => {
console.log(error);
});
}
}
}, []);
```

▶︎ AFTER
```javascript
axios.defaults.withCredentials = true;

useEffect(() => {

// document.cookie 에 accessToken 이라는 key 의 cookie 를 포함하여,
// 하나의 cookie 만 있는 경우 혹은 여러 cookie 가 담겨 있는 경우 모두에 대해
// accessToken 이라는 key 의 cookie 를 찾아내고, 해당 cookie 에서 순수 토큰 값만을 추출하는 코드입니다.
if (typeof document !== 'undefined') {
const cookieList = document.cookie.split(' ').filter((cookie) => {
return cookie.includes('accessToken');
});
const accessToken = cookieList[0].split('=')[1].replace(';', '');

axios
.get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/mypage`, {
headers: {
Authorization: `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
})
.then((response) => {
const { userInfo } = response.data.data;
setUserId(userInfo.user_id);
setNickname(userInfo.nickname);
setAuth(userInfo.auth);
})
.catch((error) => {
console.log(error);
});
}
}, []);
```

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 특별히 없습니다 :)
따로 에러나 버그가 확인되지 않아서 다행입니다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [x] 아이콘 파일을 교체하고, 개인기술발표 영상을 준비해야합니다.