Connecting the dots

진행중인 프로젝트에서 지역 별 필터링 기능이 있는데, 유저가 선택한 지역에 따라 메인 페이지에 나오는 결과가 변경 되어야 하는 상황이다. 생각했던 방법은 간단하게 1. 유저가 클릭한 지역의 innerText를 가져와서 location state를 변경하고, 2. 변경된 state 값을 이용하여 API 요청을 보내는 방식이다. 코드는 아래와 같다. const Home = () => { const [location, setLocation] = useState(''); const getFilteredData = async (e) => { if (e.target.innerText === '모든 지역') { setLocation(''); } else { setLocation(e.target.innerText); ..

프로젝트를 진행하면서, 메인 페이지에 이미지가 들어있는 데이터를 불러오다보니 로딩 스피너가 필요하다는 생각이 들었다. 개인적으로 그런 로딩화면을 만들어보고 싶기도 해서 바로 구글링에 들어갔다. 찾아보니까 로딩 스피너 라이브러리도 당연히(?) 있었는데, 나는 라이브러리를 가져다 쓰기 보다는 CSS로만으로도 간단한 로딩 스피너는 금방 만들 수 있을거라고 생각해서 CSS로만 로딩스피너를 만들었다. import styled, { keyframes } from 'styled-components'; const rotation = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; const Spinner = styled...

이번 2차 팀 프로젝트에서 로그인, 회원가입 파트를 맡게 되었고 이전에도 사용해보았던 라이브러리인 'React Hook Form'을 사용하기로 결정했다. 먼저, 다음과 같은 간단한 회원가입 Form을 만들어봤다. const LoginForm = () => { 회원 가입 이름 이메일 } 다른 코드들은 생략하고, 회원가입을 구성하는 부분만 들고 왔는데 여기서 보통 라이브러이 없이 회원가입을 구현할 때는 React Hook인 useState를 활용하여 Form에 들어가는 객체 state들을 만들고, input 태그에 onChange 이벤트를 활용하여 사용자가 값을 입력할 때마다 이벤트 관련 로직을 처리하는 방법으로 구현했다. const LoginForm = () => { const [values, setVal..

이전 글에서 리프레쉬 토큰을 알게 된 계기와 간단한 정리까지 해봤다. 그래서 구현을 하려는데.. 구현에 앞서 생각해봐야 될 점은 토큰은 어디에 저장돼야 할까? 기존 프로젝트에 구현된 JWT 토큰의 문제점은, 1. 만료 기간이 존재하지 않았다. (탈취 당했을 때 굉장히 위험하다.) 2. 세션 스토리지에 저장되어 있었다. (사용자가 브라우저 탭을 닫았을 때 토큰이 삭제된다.) 여기서, 2번에 대해 더 추가적인 설명을 하자면 탭을 닫았을 때 토큰이 삭제되면 무슨 문제가 생길까? 사용자가 조금 전에 로그인을 했음에도 불구하고 탭을 닫았다가 다시 접속하면 재로그인을 해야 되는 문제가 생긴다. 사용자 입장에서는 조금 전까지도 접속을 해있었는데 다시 로그인을 해야되므로 불편함을 느낄 수 있는 부분이다. 그렇다면 남은..

앞선 JWT 토큰 탈취에 이어 프로젝트를 진행하던 중 코치님께서 다음과 같은 질문을 해주셨다. '리프레쉬 토큰을 구현하지 않고 소셜 로그인을 먼저 구현하신 이유가 있을까요?' 이 질문을 받았을 때, 먼저 들었던 생각은 리프레쉬 토큰이 뭐지? 였다. 당연히 바로 구글링을 했고 그 결과, 리프레쉬 토큰은 jwt의 stateless한 방식 때문에 생기는 보안적인 문제점을 보완하기 위한 방법이였다 ! 분명 저번 글에서는 단순히 JWT가 탈취당하면 방법이 없다. 라고 끝냈었는데 방법이 더 있었다.. 궁금증이 생겨 여러가지 관련 글들을 읽어봤고 내가 이해한대로 리프레쉬 토큰 방식의 과정을 정리하면서 글로 써봤다. (아래는 팀원들한테 공유한 내용이다.) 코드 리뷰 중에 코치님이 이런 리뷰를 남겨주셨는데 저번에 JWT..

관리자 권한을 가진 토큰이 탈취된다면 어떻게 될까? 오늘 오피스아워 시간에 백엔드 코치님에게 어드민 검증 미들웨어와 관련된 조언을 들었는데, 먼저 현재 프로젝트 내에서는 jwt 토큰 안에 유저의 objectId와 role(일반 유저, 관리자 등)을 담고 있다. 어드민 검증 미들웨어에서는 유저의 토큰을 decode하여 일반 유저인지, 관리자인지 검증하게 되는데 현재는 관리자라면 role에 'admin'이란 값이 들어있다. function adminRequired(req, res, next) { // request 헤더로부터 authorization bearer 토큰을 받음. const userToken = req.headers.authorization?.split(' ')[1]; ... // 해당 toke..