낭만 개발자 고포고

기존에 클리커라는 프로젝트를 리뉴얼하기로 마음먹었다 기존에 사용자들이 체험에 참여하기위해 약 6개의 입구에서 스탭들이 +를 하면 모든 앱에서 +가되고, 출구에서 스탭들이 -를 하면 모든 앱에서 -되에 총 체험한 인원과 체험 중인 인원을 파악하여 통계를 내는 프로젝트다. [프로젝트 구성] 왼쪽부터 입장 / 퇴장 / 대쉬보드 프로젝트 기술 스팩 -front: react / tailwind -backend: nestjs / typeorm / mssql -infra: aws-ec2 /sqlserver / windows 작업하면서 단점 -데이터 실시간 갱신의 비효율(r-db다 보니, fetch를 이용한 pulling 방식을 매번써야하는데 너무 비효율적) -typeorm의 설정 및 기본 db 구축이 너무 무거워서 ..

[server/client] SSR / CSR 한 줄 설명 SSR(Server Side Rendering) -뷰(html)를 서버에서 렌더링하여 화면을 만듬 (초기로딩 빠름, 일괄 업데이트 ,SEO 비효율) CSR(Client Side Rendering) -뷰(html)를 클라이언트에서 렌더링하여 화면을 만듬(초기로딩 느림, 부분 업데이트 가능,SEO 최적화) 권장링크 https://velog.io/@hamjw0122/Next.js-Hydration #ssr #csr

[node/javascript] 타이머 그룹관리(강제종료 및 재실행) with setTimeout // 그룹별 타이머 ID를 저장할 객체 const timerGroups = {}; // 타이머를 설정하고 그룹에 추가하는 함수 function setGroupedTimeout(groupName, callback, delay) { const timerId = setTimeout(callback, delay); // 해당 그룹이 존재하지 않으면 새로운 배열을 생성 if (!timerGroups[groupName]) { timerGroups[groupName] = []; } timerGroups[groupName].push(timerId); return timerId; } // 특정 그룹의 모든 타이머를 취소하는..

[nestjs/typescript] service에서 다른 service 사용하기 -사용할 해당 서비스 export -사용할 서비스 프로바이더에 등 -service contructor 에 초기화 #service #nestjs #typescript #javascript #backend #node

npm install pm2@latest -g npm install pm2-windows-startup -g pm2-startup install pm2 start index.js --name "닉네임" pm2 save pm2 delete all pm2 logs 닉네임 #window #node #npm #pm2

[react/shell] react실행 시 포트바꾸기 [외부 쉘에서] export PORT=8000 && npm run start [package.json에서] "scripts": { "start": "set PORT=4444 && react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, #react #port #shell

[javascript/typescript] backend nestjs + prisma 기본 세팅 backend를 다양하게 써보면서 제일 궁합 좋은 건 nestjs+prisma였다 nextjs도, typeorm도 아니었다. 적극 추천한다. https://nestjs.com/ NestJS - A progressive Node.js framework NestJS is a framework for building efficient, scalable Node.js web applications. It uses modern JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functio..

[react/javascript] 초간단 드래그 구현 react-beautiful-dnd 사용 #설치 npm i react-beautiful-dnd #코드 # - todo 할 곳은 list 구현하고 onDragEnd에 드래그 후 기능 구현하면된다 import React, { useEffect, useState } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; const reorder = (list, startIndex, endIndex) => { const result = Array.from(list); const [removed] = result.splice(startIndex, 1); ..

[react/javascript] 목업 데이터로 작업하기 public/datas/data.json 만들기 [ { "title": "lakers", "category": "NBA", "time": "18 hours ago", "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzGvbfuMjCnAAk-Xufg2tbf7UBAg" }, { "title": "lakers", "category": "NBA", "time": "18 hours ago", "src": "https://i.ytimg.com/vi/qz1ViQRfpI8/hq720.jpg?sqp=-oay..

[css/javascript] simple image swipe(drag)이미지 스와이핑 드래그 swiperjs를 사용하여 간단한 이미지 슬라이더 구현 간단한 사용 소스를 공개합니다 #사용 라이브러리 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com #사용 리소스 출저 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kkson50&l..