codestates / codestates/urimg-client

[Dev Log] 이소임 / 2021-05-04

Open
#66 0 comments 0 reactions 0 assignees View on GitHub
dev-log
Dominant language
JavaScript
Stars
1
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?
* axios interceptors 코드에 추가
* 메인페이지 CSS 작성

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

* 액세스 토큰이 만료되었을 경우에 리프레쉬 토큰으로 다시 액세스 토큰을 발급받아 재요청하는 과정을 자동화하는 것. axios interceptors를 사용해 than과 catch 이전에 요청을 가로채 매번 자동으로 전처리를 해줄 수 있게 했다.
```javascript
// axios.js
export default function axiosSetUp() {
axios.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
const {
config,
response: { status },
} = error;
if (status === 401) {
if (error.response.data === "Access token expired") {
// 기존 요청 정보 저장
const originalRequest = config;

// 액세스 토큰 요청
await axios.get(process.env.REACT_APP_API_URL+'/user/accesstoken',)
.then(res => {
localStorage.setItem('accessToken', res.data.data.access_token);
})
.catch(err => {
if (err) throw err;
})

// 새로 받은 액세스 토큰 헤더에 설정
axios.defaults.headers.common.Authorization = `Bearer ${localStorage.accessToken}`;
originalRequest.headers.Authorization = `Bearer ${localStorage.accessToken}`;

// 401로 요청 실패했던 요청 새로운 accessToken으로 재요청
return axios(originalRequest);
}
}
return Promise.reject(error);
}
);
}

//index.js에서 만든 함수를 import해 사용한다.
...
axiosSetUp();
...
```
* 이미지 리스트에 masonry 레이아웃을 구현하고 싶었는데 grid만으로는 아직 구현이 쉽지 않은 것 같다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 남은 페이지 CSS 작성하기

Contributor guide

No contributing guide indexed for this repository

Research direction

This is a development log rather than a scoped task. It mentions axios.js, index.js, axios interceptors, main-page CSS, and a possible masonry layout, but names no specific file change, test, or completion criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
10/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.