프로젝트를 진행하면서 access token이 만료되었을 때 refresh token을 사용하여 access token을 재발급 받아야 하는 상황이 생겼습니다. 그래서 token 재발급에 대해 생각해보고 방법에 대해 알아보겠습니다. refresh token을 사용하여 만료된 access token을 갱신하는 방법 클라이언트에서 API 요청을 보낸 후에 서버가 access 만료 여부를 확인합니다. 만약 access token이 만료되었다면 401 response를 보내고, 응답받은 클라이언트는 이전에 발급받은 refresh token을 헤더에 담아 api 요청을 합니다. 서버에서는 이전과 동일하게 refresh token 만료 여부를 확인합니다. 만료가 되지 않은 경우에 access token을 재발급해서..
에러 테스트 코드를 실행하면서 에러를 마주하게 되었다. 에러창에서 공식 문서를 안내하고 있어서 공식 문서에서 나온 내용대로 여러 시도를 해봤지만 해결되지 않았다. jest.config.js와 babel.config.js를 가지고 이런저런 설정을 해보기도 하고, 여러 라이브러리를 설치하며 컴파일 관련 설정을 만져보았지만 에러가 해결되지 않았다. 그러다가 stackoverflow에서 해결 방법을 찾다가 간단한 해결책을 발견하게 되었다. 해결 "scripts": { //..configs "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"", }, package.json에서 scripts를 위와 같이 변경해주었다. 그..
프리온보딩 프론트엔드 인턴십 1주차, 이전에 진행한 과제를 가지고 Best Practice을 찾기 위해 서로 의견을 나누는 시간을 가졌다. 동일한 내용의 과제였지만, 구현된 코드는 서로 너무나도 다른 것을 보며 ‘코드를 작성할 때 정답은 없다.’ 라는 말을 다시한번 생각하게 되었다. 라우팅과 리다이랙션 진행한 과제에서 내가 맡아서 생각해본 부분은 페이지 라우팅과 리다이랙션이다. 이전에는 과제를 제출하기에 바빠서 이 부분을 크게 신경쓰지 못했지만, 과제를 진행하면서 조금 더 코트의 양을 줄이면서 간소화할 수 있겠다는 생각을 했던 부분이기 때문에 시작하기 전에 기대가 되었다. 라우팅 정보 리스트화 과제 안에서 페이지의 수는 3개(로그인, 회원가입, TODO)였다. 페이지의 수가 작기 때문에, 라우팅 로직의 ..
📦 설치한 패키지 - react, react-router-dom - axios 📂 프로젝트 구조 📦 src ├── 📂 apis : API 호출과 관련된 함수 모음 ├── 📂 components : Page에서 사용되는 컴포넌트 모음 ├── 📂 helper : 재사용되는 함수 모음 ├── 📂 hooks : Custom Hook ├── 📂 pages : 페이지 컴포넌트 └── 📂 styles : CSS 모음 1. 이메일, 비밀번호 유효성 검사 이메일 조건: @ 포함 비밀번호 조건: 8자 이상 로그인과 회원가입 간에 변경되는 데이터를 받아 주어진 조건에 맞게 유효성을 검사하는 함수를 만들어 검사한다. // helper/validationCheck.js export const checkEmail = (email..
비효율적인 이미지 Opportunities의 가장 첫 번째 항목인 ‘Properly size images’는 이미지를 적절한 사이즈로 사용도록 제안하고 있다. 안에 있는 내용을 보면 적절하지 않은 사이즈의 이미지를 적절한 사이즈로 변경하면 용량을 줄일 수 있다고 말한다. 브라우저에서 사용하는 이미지의 크기보다 큰 이미지가 페이지에 제공되면 바이트가 낭비되고 페이지 로드 시간이 느려진다. 그렇기 때문에 적절한 이미지의 크기를 제공하는 것은 중요하다. 자체적으로 가지고 있는 정적 이미지라면 사진 편집 프로그램을 이용하여 직접 이미지 사이즈를 조절하면 된다. 하지만 API를 통해 받아오는 경우에는 사진 편집을 직접 할 수는 없다. 그렇다면 이미지 크기를 어떻게 줄일 수 있을까? Image CDN CDN(Con..
이전에 진행했던 프로젝트를 다시 실행해봤는데 화면이 나타날 때까지의 시간이 오래 걸리는 것을 보고 성능 개선을 해봐야겠다는 생각이 들었다. 제일 먼저 간단하게 Lighthouse를 사용하여 화면의 성능을 측정해 보았다. Lighthouse란? Lighthouse는 구글에서 만들 틀로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 틀이다. Lighthouse를 이용하면 웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 최적화해야 하는지에 대해 알 수 있다. Performance 점수가 36점… 왜 이렇게 낮을까? 개선해야 할 점을 보면 사용하지 않은 자바스크립트의 파일을 줄이라고 나와있다. 그리고 가장 위의 용량이 큰 파일을 보면 bundle.js라고 되어 있..
