takeU

구축 이유기존에는 Hosting.kr에서 도메인을 관리하면서 api.maplemworlds.kr과 maplemworlds.kr 두 도메인 모두의 요청을 로컬 PC로 전달하도록 설정해 로컬 환경에서 트래픽을 분기 처리하고 있었음.api.maplemworlds.kr 요청은 로컬에서 PM2로 실행 중인 서버로,maplemworlds.kr 요청은 Netlify에서 호스팅 중인 웹으로 전달되도록 구성했는데모든 트래픽이 로컬 컴퓨터를 한 번씩 거치기 때문인지 다른 이유때문인지 정확히는 모르겠지만, 집에서 사용하는 와이파이가 프록시 서버를 구축한 이후에 간헐적으로 끊기는 문제가 생겨 클라우드 프록시 서버를 따로 두기로 결정.옮기는게 유의미한 효과가 있을진 모르겠지만..일단 옮기긴 해놨음Cloudflare로 도메인 연..

원인GitHub Pages는 기본적으로 Jekyll이라는 정적 사이트 생성기를 사용합니다.그리고 Jekyll은 _next/, _site/, _includes/처럼 밑줄(_)로 시작하는 폴더를 무시합니다.즉, _next/ 폴더가 있어도 서빙되지 않습니다.해결 방법: .nojekyll 파일 추가.nojekyll이라는 빈 파일을 GitHub Pages 루트에 추가하면 Jekyll 처리를 비활성화할 수 있습니다.touch docs/.nojekyllgit add docs/.nojekyllgit commit -m "fix: add .nojekyll to serve _next static files"git push origin main

JWT 인증과 인가 흐름1. Axios 인터셉터를 활용한 자동 토큰 갱신 예시Axios 인터셉터 설정Axios를 사용하여 Access Token의 만료를 감지하고, Refresh Token을 사용하여 새로운 Access Token을 발급받는 방식으로 자동화할 수 있음.import axios from 'axios';// Axios 인스턴스 생성const api = axios.create({ baseURL: 'https://example.com/api', timeout: 10000, headers: { 'Content-Type': 'application/json' },});// 요청 인터셉터 (요청이 보내지기 전에 처리)api.interceptors.request.use( config => { ..

배포 설정.github/workflows/deploy.ymlname: Deploy on Pushon: push: branches: - main # main 브랜치에 푸시될 때 실행jobs: deploy: runs-on: ubuntu-latest steps: # 1. 리포지토리 체크아웃 / 저장소 코드를 워크플로 실행 환경에 복사하는 GitHub에서 제공하는 공식 액션 - name: Checkout repository uses: actions/checkout@v3 # 2. SSH 키 설정 및 서버에 접속하여 빌드 실행 - name: Deploy to server env: SSH_PRIVATE_KEY:..

NginX 설치sudo apt updatesudo apt install nginxNginX 커맨드sudo systemctl start nginx # 시작sudo systemctl restart nginx # 재시작sudo systemctl status nginx # 중지sudo systemctl enable nginx # 부팅 시 자동시작 설정NginX 설정 파일의 목적nginx.confNginx의 주요 설정 파일로, Nginx의 동작 방식을 정의/etc/nginx/nginx.conf 경로에 위치sites-available, sites-enabled이 두 디렉토리는 Nginx의 가상 호스트 설정을 관리하는데 사용sites-available활성화되지 않은 사이트의 설정 파일을 보관하는 디렉토리호스트별 ..

# 설치brew install mongodb-community# mongoDB 커맨드 설치brew install mongodb-community-shell# mongoDB 실행brew services restart mongodb/brew/mongodb-community유저 생성mongo# mongodb 쉘 접속use admindb.createUser({ user: 'yt', pwd:'asdasd', roles:[]})db.updateUser("yt", { roles: [ { role: "root", db: "admin" } ] })암호 설정vim /usr/local/etc/mongod.conf # 또는 /etc/mongod.conf해당 설정 추가security: authorization: "enabl..

프로젝트 세팅husky 커밋 훅 설정커밋 시 자동으로 prettier를 적용해서 커밋하도록 설정root에서 설치pnpm add -wD husky lint-stagedroot의 package.json에 추가"scripts": { "prepare": "husky"}"lint-staged": { "apps/maplem/frontend/src/**/*.{js,ts,tsx}": [ "prettier --cache --write" ], "apps/maplem/backend/src/**/*.{js,ts}": [ "prettier --cache --write" ], "configs/**/*.{js,json}": [ "prettier --cache --write..

앞전에 fastify를 간단히 로컬에서 돌아가는 정도로만 세팅하고 도커를 세팅하려하니 빌드가 원하는대로 안되기도 하고, 문서나 정보가 너무 부실해서 그냥 express로 변경하려 함.Express + TypeScript 설치pnpm initpnpm i express corspnpm i -D typescript @types/express @types/cors @types/node ts-node-dev세팅tsconfig.json{ "extends": "@playground/tsconfig/base.json", "compilerOptions": { "target": "ESNext", "module": "CommonJS", "esModuleInterop": true, "skipLibCh..

프로젝트 세팅우선 하나의 프로젝트로 진행하고 추가로 다른 프로젝트를 진행할 때 세팅을 또 하지 않아도 되도록 모노레포로 구성추후 다시 세팅하는 상황을 고려해 최대한 상세히 기록해 놓으려 함2024.10.14 - 아래 코드는 온전히 동작하지 않는 부분이 있으니, 참고만 하세요. 추후 재작성 예정입니다.터보레포 생성npx create-turbo@latest playground패키지 매니저는 기존에 사용하던 pnpm 선택.Vite + React + TypeScript 프런트엔드 생성pnpm create vite@latest apps/maplem.gg/frontend --template react-tsFastify 백엔드 생성mkdir -p apps/maplem.gg/backendcd apps/maplem.gg..

기존에 진행하고 있던 프로젝트가 앞선 게시물에서 언급했던 것 처럼백엔드와 배포를 둘 다 netlify를 통해서 진행했어서 DB도 없고, 배포가 되는 과정을 모르는게 아쉽다 생각했음.아래는 v1을 개발했을 때의 스택- Frontend - react / vite- Backend - netlify serverless functions / DB 없음- hosting - netlify새롭게 v2를 만들 계획을 하면서 이전에 v1스택을 정하게 된 이유에 대해 먼저 간략히 말하자면,회사에서 개발을 하다보면 오래전부터 이어져온 코드이기도 하고, 컨벤션이나 룰이 있다지만 아무래도 개개인이 작성하는 코드기 때문에, 통일이 안되어있는 부분에서 해소되지 않는 답답함이 있어서 가장 미니멀한 스택으로 기능만 구현하자라..