Mafia Game - 역대글▶ Node.js Docker로 배포하기▶ Next.js Docker로 배포하기▶Github Actions으로 배포 자동화▶ 첫 번째 토이 프로젝트를 완료하고 토이 프로젝트로 마피아 게임을 만들었는데, 클라이언트끼리 통신을 위해서 웹소켓 서버가 필요했다. 그래서 호다닥 만든 다음 실제로 사용하기 위해서 배포를 진행하려고 한다.  이때 Docker를 사용하는 이유는 하나의 서버에 여러 서비스를 배포할 생각이기 때문이다. (이것 저것 배포하는 실험실?)Linux Ubuntu 24.04 버전을 사용하고 있는 환경에 Docker를 설치까지는 선행으로 진행했고 이어서 배포를 하려고 한다.  Docker File1. Base Image 선택FROM node:20.16-alpine3.19..

Google Analytics는 홈페이지에 접속한 사용자에 대한 정보를 확인할 수 있다. 단순 방문수부터 접속한 기계, 방문 시간 등 많은 정보를 얻을 수 있다. 이런 정보를 홈페이지의 대시보드에서도 확인할 수 있으면 아주 편할 것이다. 그런데 생각보다 Google Analytics API를 연동하는 방법을 찾기 어려워서 직접 작성하려고 한다. 버전은 UA가 아닌 이번에 변경된 GA4를 기준으로 정리한다. Google Cloud Platform 구글에서 제공하는 API를 사용하기 위해서는 기본적으로 Google Cloud Platform을 사용해야한다. 나는 이것저것 테스트를 한다고 프로젝트가 있지만 없다면 새 프로젝트를 만들어서 진행한다. 프로젝트를 만들면 사용할 API 기능을 허용해줘야 한다. API..

이번에는 타입스크립트와 Express를 함께 세팅하는 방법을 정리하고자 한다. Express 프로젝트 생성 npm install -g express-generator 직접 Express를 구성해도 상관없지만, express-generator를 사용하면 간단하게 환경 구성이 가능하기 때문에 사용한다! 패키지 설치 npm install --save-dev nodemon 코드를 작성하면 바로바로 변경사항을 적용하기 위해서 nodemon을 사용한다. npm install --save-dev @types/node @types/express @types/morgan @types/debug @types/cookie-parser @types/http-errors ts-node typescript @types/node ..

설치 npm install mysql2 sequelize sequelize-cli mysql2는 node와 mysql의 연결을 위해서 사용하는 패키지 sequelize는 ORM을 이용해서 데이터베이스를 다룰 수 있는 패키지 sequelize-cli는 데이터베이스 작업을 sequelize와 연동해서 터미널에서 수행하게 해주는 패키지 초기화 npx sequelize init 초기 세팅을 위해서 사용하는 패키지 config/config.json models/ migrations/ seeders/ 4개의 디렉토리가 만들어진다. config/config.json 우선 json 파일이면 env로 설정을 불러오지 못한다. 그러므로 간단하게 수정을 한다. // config/config.js require("dotenv..

0. 준비사항 본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. npm i -g express-generator express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 1. npm 프로젝트 생성 // express 프로젝트명 --view=템플릿 express webpackProject --view=ejs cd webpackProject npm i express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 원하는 템플릿을 입력해주면 된다. 템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 명령어를 실행하면 위와 같이 ..

Express 환경에서 webpack을 적용할 때 app.use(express.static(path.resolve(__dirname, "public"))); 이렇게 설정 해주었다. 그리고 views는 app.set("views", path.join(__dirname, "views")); app.set("view engine", "ejs"); 같이 설정했다. 그다음에 프로젝트를 실행하고 localhost:3000으로 접속하니 /views 폴더에 있는 index.ejs가 실행되는 것이 아닌 /public에 있는 index.html이 실행되는 것이였다. 왜그런지 고민해봤는데, app.use(express.static(path.resolve(__dirname, "public"))); 설정에 경로가 해당 이름의 ..

0. 들어가며 앞서 채팅편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 1. Socket IO Socket IO는 실시간, 양방향, event 기반 통신을 제공해주는 framework이다. webSocket과 같은 역할을 하는 것처럼 보이는데, 브라우저가 webSocket을 지원하지 않아도 socket IO는 다른 방법을 사용해서 기능을 제공한다. 좀 더 넓은 범위에서 사용할 수 있다는 뜻이다. 정리하면, websocket의 부가기능이 아닌, 필요에 따라 Socket IO가 websocket을 사용하거나 안 할 수 있다. 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 혹은 라이브..

0. 들어가며 앞서 세팅편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 1. 서버 설정하기 npm i ws Node.js에서 webSocket의 핵심 패키지인 ws이다. express는 기본적으로 http를 지원하기 때문에 ws는 지원하지 않는다. 그래서 서버에 ws 기능을 추가로 설치할 예정이다. import express from "express"; import http from "http"; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.static(__dirname + ..