Frontend
-
[Toy Project 기록하기 9] React-Query로 서버 상태 관리하기Frontend/Projects 2023. 3. 20. 02:15
리액트에서 state는 떼려야 뗄 수 없는 것으로 state의 상태 관리를 위한 다양한 라이브러리가 존재합니다. 지난번 Client-side에서는 프로젝트의 클라이언트의 복잡도가 높지 않고, 공통으로 사용하는 전역 상태의 데이터도 많지 않아 리액트의 context를 통해 로그인한 유저의 데이터를 저장했습니다. 그렇다면 Server-side에서 가져오는 데이터를 위한 상태 관리도 필요할 텐데요. 오늘은 제 프로젝트에서 Server-side에서 state 상태 관리를 위해 도입한 React-Query에 대해 알아보고 활용한 방법에 대해 적어보겠습니다. Server State를 관리하며 발생할 수 있는 문제 원격 데이터는 서버에서 관리되는 데이터를 말합니다. 데이터를 가져오고 업데이트하기 위해서 비동기 API..
-
[Toy Project 기록하기 8] 로그인 2. 전역 상태 똑똑하게 공유하기 with Context APIFrontend/Projects 2023. 3. 19. 22:49
지난번 jwt와 refresh token, access token을 이용해 로그인을 구현했습니다. 그러나 로그인 후 새로고침을 하면 리액트가 다시 렌더링 되면서 로그인 상태가 유지되지 않는 문제가 발생했습니다. 이를 해결하기 위해 로그인한 유저 정보를 전역적으로 저장하고 전달하는 역할이 필요해 보입니다. 리액트에서 이를 효율적으로 구현할 방법을 찾아보고 반영해 보겠습니다. 일반적으로 전역 상태 관리 도구하면 redux를 많이 떠올리실 텐데요. 저는 이번 프로젝트에서 Context API를 이용해 전역 상태를 관리했습니다. 엄밀히 말하자면 전역 상태를 관리했다기보다 값을 저장하고 공유할 수 있게 해주었습니다. 오늘은 제가 redux가 아닌 Context API를 쓴 이유와 개념, 구현 방법에 대해 적어보려..
-
[Toy Project 기록하기 7] 로그인 1. jwt로 로그인 구현하기Frontend/Projects 2023. 3. 18. 14:20
앞선 포스팅에서 세션 인증 방식과 토큰 인증 방식의 차이점에 대해 알아보았는데요. 2023.03.09 - [Frontend/Projects] - [Toy Project 기록하기 5] 세션 인증 방식 vs 토큰 인증 방식 [Toy Project 기록하기 5] 세션 인증 방식 vs 토큰 인증 방식 HTTP는 stateless한 특성을 가지고 있어 서버는 클라이언트의 상태를 저장하지 않습니다. 유저가 로그인을 했더라도 다음 통신에서 클라이언트의 상태를 기억하지 못해 매번 다시 로그인을 요청하 jihye-dev.tistory.com 해당 글에서 설명한 jwt를 방식으로 Access, Refresh Token을 이용해 로그인을 구현해 보겠습니다. 기본 로그인 조건 ✔️ email의 존재 여부를 확인한다. ✔️ e..
-
[Toy Project 기록하기 6] 회원가입 & 이메일 인증하기Frontend/Projects 2023. 3. 16. 22:39
회원가입 시 가짜 이메일로 가입을 남발하는 일을 막기 위해 이메일 인증 과정을 추가했습니다. 유저가 가입할 때 토큰을 발급하여 가입 시 입력한 이메일로 토큰을 전달해 인증하는 방식으로 구현했습니다. 이 과정에서 nodemailer를 통해 쉽게 메일을 보내고, 메일의 전송 여부를 테스트하기 위해 mailtrap을 이용했습니다. Nodemailer node.js 서버를 이용해 이메일 전송을 도와주는 모듈입니다. npm install dotenv nodemailer 이메일을 보내려면 transporter 객체가 필요합니다. let transporter = nodemailer.createTransport(transport[, defaults]) transporter 객체를 통해 메일을 보낼 수 있습니다. tra..
-
[Toy Project 기록하기 5] 세션 인증 방식 vs 토큰 인증 방식Frontend/Projects 2023. 3. 9. 23:08
HTTP는 stateless한 특성을 가지고 있어 서버는 클라이언트의 상태를 저장하지 않습니다. 유저가 로그인을 했더라도 다음 통신에서 클라이언트의 상태를 기억하지 못해 매번 다시 로그인을 요청하는 사태가 발생하게 됩니다. 이러한 문제를 방지하기 위해 서버에서 유저를 인증(유저가 로그인을 시도할 때 서버에서 일치하는 유저 정보를 찾으면 이를 확인하기 위해 토큰이나 세션을 발급해 주는 것)하고 인가(클라이언트에서 해당 토큰이나 세션을 받아 가지고 있다가 새로운 요청 시 인가를 위해 토큰이나 세션을 보내는 것)하기 위해 사용되는 것이 세션과 토큰입니다. 오늘은 두 방식의 특징에 대해 알아보겠습니다. 세션 인증 방식 세션 인증 방식은 유저의 인증 정보를 서버의 세션 저장소에 저장합니다. 클라이언트가 로그인 요..
-
[Toy Project 기록하기 4] 파일 업로드하기 with multerFrontend/Projects 2023. 3. 5. 22:08
프로젝트에서 이미지 파일을 받아 업로드 하는 기능이 필요함에 따라 multer를 도입하게 됐습니다. multer 파일 업로드 시 사용하는 node.js의 미들웨어이며 오직 multipart/form-data에서만 동작합니다. multer 설치하기 npm install multer 피드를 업로드하는 화면에서 이미지를 받아 업로드 하는 기능을 추가해보려고 합니다. /feed로 post 요청 시 이미지를 업로드 할 수 있도록 라우터에 정의합니다. photoUpload 미들웨어를 통과한 뒤 uploadFeed 함수로 넘어갑니다. // feedRouter.ts import express from 'express'; import { photoUpload } from '../server/middlewares'; co..
-
[Toy Project 기록하기 3] React Hook Form 활용하기Frontend/Projects 2023. 3. 4. 22:36
프로젝트에 form을 사용하는 일이 많아지면서 폼 관리 라이브러리인 React Hook Form을 도입하게 되었습니다. 이번에는 React Hook Form을 활용하는 방법을 알아보겠습니다. feed를 업로드하는 과정에서 form을 사용해 개발했습니다. 이 과정을 라이브러리 없이 form을 제어하는 방법과 React Hook Form을 써서 form을 제어하는 방법으로 모두 구현해 보겠습니다. 라이브러리 없이 Form 다루기 feed를 업로드할 때 받는 form으로부터 제목, 내용, 사진을 받겠습니다. 입력받은 값의 상태를 담을 state를 선언하고 마크업을 작성했습니다. handleChange, handlePhoto를 통해 input의 state를 갱신하고, handleSubmit을 통해 form의 ..
-
[Toy Project 기록하기 2] axios로 HTTP 요청 보내기Frontend/Projects 2023. 2. 19. 21:55
axios는 JavaScript를 사용하여 HTTP 요청을 보내는 비동기 통신 라이브러리입니다. axios를 사용하여 HTTP GET, POST, PUT, DELETE 등의 요청을 보내 백엔드로부터 필요한 데이터를 받아올 수 있습니다. axios의 사용법을 알아보고 프로젝트에서 axios를 어떻게 적용했는지 알아보겠습니다. axios 사용법 axios 설치하기 npm install axios GET 상황 주로 서버로부터 데이터를 가져올 때 사용합니다. 사용법 단순 데이터를 요청할 경우 axios.get('/api/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(erro..