[Dev_log] 8/23 (월) 김재우 Dev-Log

### 오늘은 어떻게 프로젝트에 기여했나요?
* 서버 토큰 블랙리스트 로직 수정

사용자가 로그아웃할 때 토큰은 Redis에 저장된다. 하지만 하루가 지나기 전에 계속해서 로그아웃을 하는 유저의 블랙리스트가 계속해서 쌓이는 문제가 있었다. 이미 만료된 토큰도 지워지지 않았기 때문에, 사용자가 로그아웃 요청을 하면 블랙리스트에 저장된 토큰들을 순차적으로 검사하며 만료된 토큰들은 모두 제거하는 코드를 추가했다. 유효한 토큰이 검증되면 바로 검사를 중지하는 방식으로 서버의 부담을 최소화시키려 노력했다.

* 사용자 가이드 모달 생성

버블을 생성하고, 버블들을 조회하는 가이드를 보여주는 모달 창을 생성했다. 캐러셀 슬라이드 형식으로 구현하였으며, List에 존재하는 항목들을 좌우 버튼을 이용해 볼 수 있다. 하단에 있는 "다시 열지 않기" 체크 박스를 누르면 더이상 팝업 되지 않고, 마이페이지에서 다시 볼 수 있다. 캐러셀은 라이브러리 없이 translateX의 값을 useEffect에서 수정하는 방식으로 구현하였다. 하지만 모바일 환경에서는 사진이 너무 작아질 것이므로 단순히 X축의 값을 변경하는 방법은 이용할 수 없을 것으로 예상된다.

### 오늘의 프로젝트에서 배운 점은 무엇인가요?
* 리액트 캐러셀 구현

React Hooks와 translateX 속성을 사용하면 캐러셀을 구현할 수 있다. 캐러셀은 사실 보여줄 컨텐츠들이 가로로 붙어서 쭉 나열된 형태로, 화면 밖의 컨텐츠는 overflow: hidden 속성으로 숨겨져 있을 뿐이다. ul 컴포넌트의 주소를 참조하여 좌우 버튼을 클릭할 때마다 useEffect에서 translateX값을 새로 계산하여 List 컴포넌트를 순서대로 보여줄 수 있다.

```js
useEffect(() => {
slideTutorial.current?.style.setProperty("transform", `translateX(${100 - tutorialIdx * 100}%)`);
}, [tutorialIdx]);

// ...

• 
  
  

// ...

// tutorialIdx의 초기값은 0.
// 좌우 버튼이 눌릴 때마다 1씩 증감하여
// 우측 버튼을 계속 누를 경우에 translateX 속성이 -100%, -200%처럼 -100%씩 감소한다.
// 즉 x축이 이동되며 사용자가 보는 화면(li 컴포넌트)도 달라지게 된다.
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
* [ ] 가이드 모달 창 완성
* [ ] 클라이언트 알림창 모달로 변경
* [ ] axios 요청에서의 액세스 토큰 재할당 및 상세한 예외 처리