codestates / codestates/urimg-client
[Dev Log] 이소임 / 2021-05-04
- 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