보호되어 있는 글입니다.

워크플로우 관련 기능을 만들기 위해 react-beutiful-dnd를 사용하였다. onDragEnd 함수에서 목록에 대한 값들을 업데이트하는 setState들을 사용하였다. 일반적인 경우 매우 정상적으로 작동되지만, 빠르게 사용하였을 경우 key값이 중복되었다고 하며 에러가 발생하였다. 구글링을 통해 확인한 결과, useState가 비동기적으로 작동하기 때문에 발생하는 에러라는 것을 확인하였다. 해당 문제는 react18에 도입된 flushSync를 setState에 사용하니 해결되었다. 하지만 flushSync의 경우, 성능저하를 일으킬 수 있으므로 일반적인 상황에서는 추천하지 않고, 공식문서에서도 최후의 수단으로 사용하라고 나와있었다. 최선이 아닌 차선의 방법이였지만, 이미 왠만한 방법들은 다 시도..

react와 별도로 nestjs를 사용하여 api 서버를 배포 하였더니 cors 문제가 생겨 데이터를 받아오지 못하는 오류가 생겼다. react 서버 도메인은 example.com, api서버 도메인은 api.example.com으로 사용하기에 생긴 문제였다. 이러한 cors 문제는 배포 환경에서는 백엔드에서 해결해야하는 경우가 대부분이다. 첫 시도 자료를 찾아보니 nestjs에서 app.enableCors라는 것을 기본 제공해주어 이것을 사용하여 설정을 하였다. import { NestFactory } from "@nestjs/core" import { AppModule } from "./app.module" import * as cookieParser from "cookie-parser" import..

기존에는 ejs를 사용하였기에 express서버 하나만을 배포하여 전부 해결할 수 있었지만, react를 공부하면서 디자인 패턴도 같이 조금씩 공부하다보니 react와 api 서버를 분리하여 배포를 해보고 싶었다. react와 api 서버(nestjs)를 배포하기 위해 nginx를 사용하였다. /etc/nginx/site-available의 default 파일에 해당 코드들을 추가해주면 된다. react, vue와 같은 fe파일들 설정 listen 포트 설정 도메인 설정 location의 root 설정(index.html 파일이 들어있는 위치) 이렇게 설정해놓고 도메인에 접속하면 배포가 완료된 것을 확인할 수 있다. ※ react나 vue의 경우, router를 설정할 시 배포 환경마다 추가로 설정해야되..

로컬에서 작업하고 서버로 배포 혹은, 서버 자체를 바꿀 때, db구조와 데이터 모두 옮길 수 있는 방법이 있다. 1. 기존 db를 dump를 이용하여 sql파일로 만들어준다. sudo mysqldump -u root -p 기존DB명 > 저장할 위치/파일이름.sql 2. sql파일을 복사할 서버의 아무 위치에 옮겨준 다음, 해당 서버에 db를 생성한다. sql파일을 이용하여 새로 생성하는것이 아니라, 새로운 서버에 db를 생성후, 해당 db에 덮어씌운다는 느낌이기 때문이다. mysql -u root -p ...생략... create database 원하는db명; 3. 다시 mysql을 나온 후, 리눅스에 아래 명령어를 입력한다. mysql -u root -p 생성한DB이름 < 복사한 위치/파일이름.sql ..

공부를 하면서 서버에 이것저것 깔고 세팅도 변경하다보니, 원래 정상적으로 진행됐던 것들이 에러를 뿜어내며 작동이 안되는 경우가 종종 있었다. 그럴 때마다 데이터 백업 후 서버를 초기화하는데, 초기 세팅을 할 때마다 불필요하게 여러번 구글링하는게 느껴져서 이번 기회에 블로그에 한번에 정리하려고한다. 1. MariaDB 설치 sudo apt install mariadb-server MariaDB 보안 설정 sudo mariadb-secure-installation 이러면 옵션들이 여러개 뜨게 되는데 순서대로 설명하자면, 비밀번호 입력: 처음 설치 시에는 비밀번호가 세팅이 안되어있어 엔터를 누른다. Switch to unix_sokect authentication: default 값으로 유지 / y 입력 Ch..

그동안은 passport와 세션을 이용하여 로그인을 구현해왔었는데, jwt도 이번 기회에 익혀둘려고한다. Nest로 구현하면서 생각보다 조금 해맸기에, 블로그에 정리하려고 한다. 우선 어떤 순서로 로직이 작동되는지 이해해야한다. access token, refresh token 개념은 다른 곳에도 정리가 잘 되어있어 자세한 설명은 생략한다. 작동 순서 로그인시 access token, refresh token 발급, refresh token은 DB에 저장 access token, refresh token 모두 httpOnly 쿠키로 클라이언트에 전송 클라이언트에서 페이지 이동할 때마다 access token을 서버에 보내 토큰 유효성 확인 acces token 불일치 시, refresh token 유효 ..

Pinia를 사용하여 유저정보를 페이지에 사용하고 있는데, 새로고침 시 데이터가 초기화 되는 것을 확인했다. 찾아보니 pinia나 redux같은 상태 관리 라이브러리들은 데이터를 따로 저장해두는 곳이 없어서, 새로고침 시 데이터가 사라진다고 한다. 이를 해결하려면 pinia에서는 pinia-plugin-persistedstate를 사용해야한다. pinia-plugin-persistedstateConfigurable persistence and rehydration of Pinia stores.. Latest version: 3.2.1, last published: 12 days ago. Start using pinia-plugin-persistedstate in your project by running..