Connecting the dots

앞으로는 벨로그에 글을 쓸 예정입니다 🙂 https://velog.io/@ctdlog

진행중인 프로젝트에서 지역 별 필터링 기능이 있는데, 유저가 선택한 지역에 따라 메인 페이지에 나오는 결과가 변경 되어야 하는 상황이다. 생각했던 방법은 간단하게 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..

1. 오늘 공부한 내용 📝 미들웨어(Middleware)란? 요청(Request)과 응답(Response) 중간에 처리되는 함수들 요청이 들어오는 매번 실행 될 수 있음 특정 요청에만 처리되도록 할 수 있음 사실상 express에 들어오는 모든 요청이 미들웨어로 처리된다고 할 수 있음 const express = require('express') const router = express.Router() const app = express() const port = 3000 router.get('/users/:id', (req, res) => { const id = req.params.id; res.send(`User Id : ${id}`) }) app.use("/users", router) app.use..

1. 오늘 공부한 내용 📝 NPM이란? Node Package Manager 패키지 관리 도구이자 공유를 위한 온라인 패키지 저장소의 이름 엄청난 양의 오픈소스 패키지가 저장되어 있음 엄청난 양의 오픈소스 패키지가 저장되어 있음 package.json dependencies : 프로젝트의 의존성 패키지 목록 및 버전을 명ㄱ시 npm install 혹은 npm install —save 실행 시 여기에 추가 devDependencies : 개발 및 테스트에만 필요한 의존성 패키지 목록 및 버전을 명시 npm install —save-dev 실행 시 여기에 추가 package-lock.json npm 사용해서 package.json을 수정하면 자동으로 생성되는 파일 의존성 트리에 대한 정보를 가지고 있음 명확..

1. 오늘 공부한 내용 📝 타입스크립트 자바스크립트를 확장하여 타입을 입힌 스크립트 마이크로소프트가 내부적으로 개발하다가 2012년 오픈소스로 공개 타입 지정을 통해 에러를 사전에 방지 컴파일을 통해 자바스크립트로 변환 자바스크립트에 추가된 문법을 쓸 수 있음 function sum(num1, num2) { return num1 + num2; } let a = 10, b = 20; sum(a, b); // 30 b = "30"; sum(a, b); // 1030 자바스크립트는 웬만해서 에러를 뱉지 않음 즉, 의도한 바와 다르게 실행될 수 있음 이를 미리 방지하기 위해서 등장 타입을 미리 정의해서 에러를 방지 또한 처음/나중에 볼 때, 가독성이 상승 타입스크립트를 써야하는 이유 사전에 미리 에러를 방지할 ..