본문 바로가기

분류 전체보기54

URL 인코딩 URL 인코딩이란? URL에서 URL로 사용할 수 없는 문자 혹은 URL로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '%XX'의 형태로 변환하는 것. ↔ URL 디코딩 : URL을 다시 원래의 형태로 되돌리는 것 필요한 이유? 1️⃣ 인터넷을 통해 전송할 수 있는 문자는 오로지 ASCII 아스키 문자이기 때문이다. 따라서 ASCII 문자가 아닌 문자는 인터넷으로 전송할 수 있는 형태로 변환해야한다. URL에 아스키코드외의 문자가 포함될 경우 유효한 아스키코드 형식으로 변환해야한다. 예) id=?hong, pw=&zone의 데이터를 보내기 위해서 id=%3Fhong&pw=%26zone 으로 전송되어야 서버에서도 정상적으로 데이터를 해석하여 처리할 수 있다. 한글은 ASCII문자가 아니기때문에 변환.. 2024. 1. 22.
트윗 게시물 업로드 기능 다음은 제가 구현한 트위터 게시물 업로드 박스입니다. 프론트 밀 백엔드 코드 구현 과정과 함께 구현하면서 정리해두었던 문서입니다. 📁 트윗 게시물 업로드 기능(텍스트, 파일, 해시태그 업로드) 프론트 input 박스 글자수 제한 기능 (length 체크) 글자수 제한 기능 (maxLength, length 체크, slice) 트윗리스트 구현하기(array, useState, map) | Notion 글자수 제한하기 cookie-ease-042.notion.site 게시물 해시태그 기능 (정규식 사용해서 태그 분리하기, 태그별 페이지 라우팅 - url, 다이나믹 라우팅) 게시물 태그 만들기(정규표현식, 페이지 라우팅, 키워드 데이터베이스 select) | Notion 구현 목록 cookie-ease-042.. 2024. 1. 22.
React-query 데이터 업데이트 문제 발생 Explore 페이지에서 top Latest People로 이동할때 데이터가 제대로 업데이트가 안된채 prop로 넘겨지는 문제가 발생. 설명 데이터가 넘겨지는 과정 Explore 페이지에서 react-query로 데이터를 받음 ➡️ 성공하면 응답값을 set함수로 exploreData라는 state에 담기 ➡️ tweetBox컴토넌트에 prop으로 exploreData 넘겨줌 여기서 다른 종류의 데이터를 받아와야하는 페이지로 이동하면 과거의 데이터만 보내지고 새로운 데이터로 업데이트가 안됨. Chat gpt에 물어봤더니 두가지 방법을 제시해줌. 1. react-query에서 자동적으로 업데이트 시켜주는 data를 prop으로 바로 보내주거나 2. useCallback으로 exploreData 상.. 2024. 1. 22.
React Query React Query란? 상태관리 라이브러리 중 하나. 리액트 앱 내에서 데이터 패칭, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어준다. 사용하는 이유 구글링을 통해 react-query를 사용하는 이유에 대해서 찾아보니 간단하게 다음과 같은 이유가 있었다. 서버 쪽 데이터들을 좀 더 쉽게 관리하기 위해 ⇒ 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와줌 클라이언트 상태와 서버 상태를 명확히 구분하기 위해. 그 중 서버 쪽 데이터를 좀 더 쉽게 관리하기 위해서 사용해보았다. 기존에 redux를 사용했을때는 데이터를 가져오기 위해 axios를 따로 불러오고 그걸 또 변수에 담고 했는데 react-query의 경우 axios 통신 보낼 api만 간단하게 설정해놓았을때.. 2024. 1. 22.
상태관리 도입해서 전역 변수 관리하기(Redux, React Query) 상태 관리를 도입했다. 프로젝트가 계속 진행되면서 전역적으로 사용해야하는 변수들이 생겨났기 때문이다. 예를 들어 로그인 유무를 알 수 있는 isLogin과 같은 변수는 전역적으로 관리하여 로그인 상태일때는 home이나 다른 페이지를 보여주고 로그인을 해야하는 상태에는 Auth 화면을 보여준다. 상태관리는 redux, react- query 2개를 사용했다. 처음에는 redux를 사용했다가 다양한 기능과 백엔드 시스템과의 연동을 쉽게 구현할 수 있는 react-query를 도입하여 사용해보았다. 이번 글에서는 리덕스 기본 흐름과 도입 과정, 실제 코드에 대해서 작성해볼려고 한다. 리덕스 도입 리덕스 기본 흐름 특정한 액션이 유발(dispatch)되면 / 이에 대응하는 reducer가 변화한 상태 state.. 2024. 1. 21.
회원가입, 로그인 폼 만들기(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.

티스토리툴바