목록전체 글 (16)
우리는 Calisthenics 입니다!
React로 개발할 때 아이콘을 편하게 사용할 수 있는 library가 있어 소개해드리려고 합니다. 그것은 바로! React Icons입니다. https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-..
현재, homedong 웹사이트의 로직은 이렇습니다. 사용자 로그인 -> 로그인 성공 후 메인페이지 이동 -> 회원 정보 불러오는 api 요청 -> 회원 정보 state에 저장 정상적으로 작동이 되면, 메인페이지로 이동됨과 동시에 회원정보까지 redux state에 저장이 되어여 합니다. 하지만, 문제가 발생했습니다😥 회원정보를 불러오는 api 요청시 사용자의 JWT 토큰이 request header에 담겨야 합니다. 하지만, header에 담기지 않고 페이지 새로고침을 해줘야만 api header에 토큰이 담기는 로직이 실행되는 것을 확인할 수 있었습니다. 맞습니다..😯 문제는 axios header에 토큰을 담아주는 로직이 있는 http-common.js 파일이 화면이 전체 렌더링 될때만 실행된다는 ..
Redux-Toolkit에서 createSlice 함수를 제공해줍니다. 기존 Redux에서 action, reducer, state를 하나의 함수에서 관리하도록 해주는 함수입니다. 오늘은, createSlice에서 reducer를 정의하고 reducer에서 인자로 받는 action.payload를 커스터마이징 해주는 법에 대해서 포스팅 해보려 합니다😀 현재 사용자가 로그인 해있는 지를 확인하고 이에 따라 state를 변경해주는 loadUser라는 reducer를 정의해봅시다. getToken(local storage에 JWT가 있는지 확인하는 함수)을 불러와서 토큰 존재 여부를 확인하고 이에 따라 state.isAuthenticated를 변경해줄 예정입니다. const authSlice = createS..