Frontend/Projects
-
[Toy Project 기록하기 11] 프로젝트를 마치며Frontend/Projects 2023. 3. 22. 14:38
한겨울에 시작했던 프로젝트가 어느새 따뜻한 봄이 되고 마무리되었습니다. 프로젝트를 회고하며 제가 느낀 점을 몇 자 적어보았습니다. 프로젝트를 돌아보며 돌잡이 프로젝트는 클라이밍에 관심이 있는 사람들이 모여 소통할 수 있는 커뮤니티입니다. 클라이밍 관련 커뮤니티가 암벽 등반 갤러리를 제외하고 거의 없는 데다가 갤러리는 익명으로 글을 쓸 수 있어 욕설이나 비방 글도 많이 올라와서 이용하기에 불편한 점이 많았습니다. 그래서 이메일 인증한 유저만 사용할 수 있는 클린한 클라이밍 커뮤니티를 만들고자 이 프로젝트를 시작했습니다. 아무것도 없던 빈 폴더에 백엔드 환경 설정부터 시작하여 프론트엔드에서 데이터를 가져와 화면에 보여주고 제대로 작동되기까지 자그마치 2달이라는 시간이 걸렸습니다. 사실 어마어마한 기능이 있는..
-
[Toy Project 기록하기 10] React-Query로 무한스크롤 구현하기Frontend/Projects 2023. 3. 21. 16:00
서버에서 데이터를 가져올 때 모두 한꺼번에 가져올 수 없기 때문에 필요한 데이터 개수만큼 잘라서 보여주는 '페이지네이션'이 필요합니다. 보통 필요한 개수를 정하고 상황에 맞춰 정렬 기준이 조건에 추가됩니다. 이러한 페이지네이션에는 오프셋 기반 페이지네이션과 커서 기반 페이지네이션이라는 두 가지 방식이 존재하는데요. 두 방식의 개념과 각각의 특징에 대해 알아보겠습니다. Offset-based Pagination DB의 offset 쿼리를 이용해 페이지 단위로 구분하여 특정 페이지에 대한 데이터를 가져옵니다. 일반적으로 구글이나 커뮤니티 게시판에서 자주 다루는 페이징 처리 방식입니다. 장점 페이지에 대한 데이터를 빠르게 검색할 수 있으며 페이지 이동이 쉽습니다. 단점 페이지 이동 시마다 데이터베이스에서 전체..
-
[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..