Node.js/실험실8 [Node] Google Analytics 데이터 불러오기 Google Analytics는 홈페이지에 접속한 사용자에 대한 정보를 확인할 수 있다. 단순 방문수부터 접속한 기계, 방문 시간 등 많은 정보를 얻을 수 있다. 이런 정보를 홈페이지의 대시보드에서도 확인할 수 있으면 아주 편할 것이다. 그런데 생각보다 Google Analytics API를 연동하는 방법을 찾기 어려워서 직접 작성하려고 한다. 버전은 UA가 아닌 이번에 변경된 GA4를 기준으로 정리한다. Google Cloud Platform 구글에서 제공하는 API를 사용하기 위해서는 기본적으로 Google Cloud Platform을 사용해야한다. 나는 이것저것 테스트를 한다고 프로젝트가 있지만 없다면 새 프로젝트를 만들어서 진행한다. 프로젝트를 만들면 사용할 API 기능을 허용해줘야 한다. API.. 2023. 8. 10. [Node.js] TypeScript 와 Express 이번에는 타입스크립트와 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 .. 2022. 10. 18. [Node.js] Express ORM 세팅해보기 설치 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.. 2022. 10. 9. [Node.js] Express에 Webpack 구현하기 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를 사용해서 설치했다. 명령어를 실행하면 위와 같이 .. 2022. 9. 28. [Node.js] Express set "views" 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"))); 설정에 경로가 해당 이름의 .. 2022. 9. 26. [Node.js] Zoom 클론코딩 - 채팅방편 0. 들어가며 앞서 채팅편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 1. Socket IO Socket IO는 실시간, 양방향, event 기반 통신을 제공해주는 framework이다. webSocket과 같은 역할을 하는 것처럼 보이는데, 브라우저가 webSocket을 지원하지 않아도 socket IO는 다른 방법을 사용해서 기능을 제공한다. 좀 더 넓은 범위에서 사용할 수 있다는 뜻이다. 정리하면, websocket의 부가기능이 아닌, 필요에 따라 Socket IO가 websocket을 사용하거나 안 할 수 있다. 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 혹은 라이브.. 2022. 6. 21. [Node.js] Zoom 클론코딩 - 채팅편 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 + .. 2022. 6. 8. [Node.js] Zoom 클론코딩 - 세팅편 0. 들어가며 WebSocket 공부를 위해서 JavaScript와 Node.js를 사용해서 Zoom 클론 코딩을 할 계획이다. 사용하는 준비물로는 Node.js, JavaScript, Socket.io를 사용할 예정이다. 1. Server 세팅 프로젝트 폴더를 만들고 초기 세팅을 진행한다. npm init -y npm i nodemon @babel/core @babel/cli @babel/node @babel/preset-env -D 코드를 변경하면 자동으로 새로고침이 되길 원하기 때문에 nodemon을 설치해준다. 또 바벨 설정을 위해서 필요한 패키지들도 함께 다운로드한다. { "ignore": ["src/public/*"], "exec": "babel-node src/server.js" } node.. 2022. 6. 7. 이전 1 다음 반응형
