본문 바로가기

sns 프로젝트27

회원가입, 로그인 폼 만들기(validation 유효성 체크, React Hook Form) 구현목록 - React Hook Form를 사용해서 회원가입 폼 개선(유효성 검사 속성 및 에러메세지 추가) React Hook Form이란? React에서 Form을 쉽게 만들기 위해 사용하는 라이브러리. ✔️ 기존의 폼에서 입력해야하는 여러가지 번거로운 작업을 줄여준다.(value설정, 데이터 전송 관리 등) ✔️ 타입스크립트로 작성된 라이브러리로, 타입스크립트와 아주 잘 맞는다. ✔️ 사용하기 쉬운 유효성 검사, 적은 코드 결과 이메일, 비밀번호를 필수값으로 지정 이메일 - 패턴값 지정, 비밀번호 - minLength로 4글자 이상으로 지정 과정 1️⃣ React Hook Form 설치 npm install react-hook-form 2️⃣ useForm 불러오기(react-hook-form에서 .. 2024. 1. 21.
token 검증 실패시 에러처리하기(토큰검증 미들웨어) 문제 발생 기존의 코드에서는 API가 실행되기 전에 토큰이 유효한지 검사하고, 그 결과를 받아서 결과에 따라 처리되었다. => 하지만 이렇게 하니까 중복되는 코드 발생 기존의 코드 router.post( "/", verifyAccessToken, verifyRefreshToken, async (req: any, res: Response, next: NextFunction) => { //아래의 부분 반복 if (req.token === "login again") { res.json("login again"); } else if (req.token === "refresh ok") { await Follow.create({ user_id: req.body.user_id, follower_id: currentU.. 2024. 1. 21.
회원가입, 로그인 기능 구현(JWT) 로그인 및 회원가입 기능 : JWT를 통해 회원가입, 로그인을 구현하고 쿠키에 토큰들을 담아서 API를 보낼때 쿠키가 유효한지 확인하는 미들웨어를 만들어서 보안성을 높였다. 회원가입 구현 1️⃣ users 데이터 베이스 생성 2️⃣ 프론트 페이지에서 axios 통신으로 아이디, 비밀번호 데이터 값을 보내주면 users 데이터베이스에 저장 → 이미 존재하는 아이디(이메일)인지 확인하는 작업 필요 → 비밀번호 암호화 과정 추가(bcrypt) -> 문자열 확인? 아이디, 비밀번호 양식 확인하는 코드 추가해야함 ⬇️ register.ts import express, { Request, Response, NextFunction } from "express"; import { Users } from "../mode.. 2024. 1. 21.
백엔드 개발 환경 설치 과정(Nodejs, express, Sequelize), CORS해결 백엔드 설치 과정 1️⃣ 가장 먼저 트위터 백엔드 파일을 생성해주었다 ⇒ My-Nwitter-Backend 2️⃣ 그 다음 Node.js express 설치 → 팀 프로젝트할 때 정리해두었던 문서를 참고하면서 설치했다 (Node.js + Express) + Typescript + ESLint 설치과정 3️⃣ Sequelize 설치 npm install --save cors dotenv mysql2 sequelize sequelize-cli reflect-metadata npm install --save-dev @types/cors @types/validator dotenv : Node.js 포트, DB 관련 정보 등 다양한 정보를 .env파일로 관리할 수 있게 해주는 Node.js 패키지 ⇒ github.. 2024. 1. 21.
개인 sns 프로젝트 'NWITTER' 소개 프로젝트 소개 Nwitter프로젝트는 우주 배경의 테마로 된 학교 커뮤니트 사이트를 구현하는 것을 목표로 한 개인 프로젝트이다. 다니던 학교에 재학생용 커뮤니티 사이트가 없어서 "우리 학교만의 독특한 사이트가 있다면 어떨까?"라는 생각으로, 항공과 우주를 테마로 한 SNS 사이트를 만들기로 결심했다. 많은 학생들이 정보를 공유하고 주고받는 플랫폼을 기획하였고 트위터를 중점으로 참고하여 만들었다. 트위터를 참고한 이유는 많은 사람들이 정보 수집을 위해 트위터를 활용한다는 사실을 알고, 이와 유사한 목적을 가진 커뮤니티를 만들고자 했기 때문이다.하지만 단순한 복제가 아닌 다양한 구성을 만들고 싶어서 인스타그램도 보고 여러가지 sns 웹사이트의 레이아웃을 참고하여 설계를 진행했다. 약 1년정도 기획부터 디자인.. 2024. 1. 21.
재사용 컴포넌트 분리하기 🚨 문제 발생 잘못된 리덕스 사용 저번주에 API 데이터를 redux 대신 react-query 담아오도록 변경했다. ⇒ 이 과정에서 api데이터는 react-query로 가져오고 그중 현재 페이지 트윗데이터는 또 redux로 관리하였다. ⇒ react-query로 가져온 서버데이터를 또 redux에 담는것이 어색하고 불필요하게 느껴졌다. ⇒ redux에 담은 이유는 무한스크롤링에 따라 페이지가 변할때마다 현재 페이지 데이터를 변수에 담아서 트윗 박스에 보내주기 위함이었는데 이 데이터는 다른 곳에서 사용되는 것이 아니라 트윗 페이지에서만 사용되는 데이터이기때문에 store에서 전역변수로 관리될 필요가 없었다. 잘못된 컴포넌트 분리 또한 컴포넌트 파일로 분리한 tweetBox파일에서 데이터를 가져와서 관리.. 2024. 1. 20.
Nwitter 프로젝트 전체 진행과정 다음의 프로젝트 개발환경과 전체 진행과정입니다. 이 글에서는 react, typescript를 왜 선택했는지 상태관리를 왜 도입했는지 등 프로젝트에 대해서 크게크게 전체적으로 설명하기 위해서 작성하였습니다. 프로젝트 개발 환경 - 프론트엔드 : React, Typescript, Redux, React-Query, SCSS - 백엔드 : Node.js, Express.js, JWT, WebSocket - 데이터베이스 : MySQL (Sequelize ORM 사용), Redis(채팅서비스) - 클라우드 및 배포 : AWS, AWS RDS, Vercel (프론트엔드와 백엔드 코드 배포) 프로젝트 진행과정 프론트 구축, SPA 도입 Typescript 설치 React를 선택한 이유 - 기존에 html, 바닐라 .. 2024. 1. 20.
Nwitter 디자인 Nwitter 화면 디자인은 피그마를 활용하여 우주 테마를 중심으로 만들어보았다. 디자인 설명 처음 디자인을 구성할때 원했던 느낌은 우주 배경이었으면 좋겠고 많은 사람들이 연결되어있는것을 느꼈으면 좋겠다는 생각이 들었다. 그래서 Nwitter에 우주 테마를 도입하여, 사용자들이 마치 은하수를 배경으로 우주에서 다양한 사람들과 연결되어서 소통하고 있는 듯한 느낌을 받을 수 있도록 만들었다. 이를 위해 화면 바탕 배경으로 은하수 이미지를 사용했으며, 더하여 친숙함과 연결성을 느끼게 하기 위해 맥북 화면 테마를 적용했다. 마치 인터넷으로 우주속에서 서로가 연결되어서 생각을 공유한다는 느낌이 들도록 디자인해보았다. 화면 구성 인증(Auth), 홈(Home), 프로필(Profile), 탐색(Explore), 북마.. 2024. 1. 20.
React-query Infinite queries 도입하기 ✔️ Infinite Queries 무한 쿼리 기능은 무한 스크롤이나 더보기와 같이 특정 조건에서 데이터를 추가적으로 받아오는 기능을 구현할때 사용하면 유용한 기능이다. ⇒ 무한 쿼리를 사용하기 위해서는 react-query 중에서 useInfiniteQuery 사용하면 된다. ✔️ infinite queries를 사용한 이유 기존에 구현한 무한스크롤링 방식은 데이터를 가져오는 시점인 target에 도달했을때 새로운 데이터를 가져와서 getData라는 배열에 삽입해서 새로운 데이터를 화면에 로딩하는 방식이었다. setAddData([...addData, ...res.data.data]); 하지만 이러한 방식은 새로운 데이터를 가져와서 로딩하는데에는 문제가 없었지만 하트 기능이나 북마크 기능을 눌렀을때 .. 2023. 6. 6.

티스토리툴바