{hello:)}

express 에서 템플릿으로 html 을 사용하는 방법을 알아보려고 한다.

먼저 ejs 모듈을 설치해야 한다.

npm install ejs

그 후 app.js 에 아래 코드를 작성한다.

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

이렇게 하면 템플릿으로 html을 사용할 수 있게 된다.

Google에서 제공하는 API를 이용하여 Google 로그인을 구현해본다.

1. API 사용을 위한 애플리케이션 등록

Google 로그인 API를 사용하기 위해서는 애플리케이션을 등록해줘야한다.

등록 방법은 매우 간단하다.

먼저 사이트에 접속하여 로그인한다.

Google Cloud Platform 로고 옆의 드롭다운을 눌러 '새 프로젝트'를 생성한다.

프로젝트 이름과 위치를 선택 한 뒤 만들기를 눌러 생성한다.

앱에서 사용자 데이터를 사용할 수 있도록 사용자 인증정보를 만들어야 한다.

왼쪽의 사용자 인증 정보 메뉴에서 '사용자 인증 정보 만들기'를 선택한 뒤 'OAuth 클라이언트 ID'를 누른다.

OAuth 클라이언트 ID를 만들기 위해서는 먼저 동의 화면을 구성해야 한다.

'동의 화면 구성'을 눌러 시작한다.

대상 사용자를 선택한다. 

모든 Google 계정을 대상으로 할 것이므로 외부를 선택한다.

그 다음 앱 이름과 이메일을 작성한다.

필수 입력 부분 위에는 모두 건너 뛴다.

동의 화면 구성을 완료한 뒤에는 다시 '사용자 인증 정보 만들기' - 'OAuth 클라이언트 ID'를 선택하여 진행한다.

localhost의 3000번 포트를 열어 사용할 것이기 때문에 URI은 'http://localhost:3000'으로 입력하였다.

위의 과정을 마치면 애플리케이션 등록이 완료된다.

클라이언트 ID를 사용해 애플리케이션을 만들면 된다.

그러기 위해 클라이언트 ID를 복사해둔다.

2. 로그인 구현

서버는 간단히 express로 구현하였다.

아래에 정리해두었기 때문에 생략하였다.

2022.02.18 - [Web/Node.js] - [NodeJS] express 서버 구축

그 외 작업은 home.ejs에 구현하였다.

먼저 구글 API를 사용하기 위해 Google Platform 라이브러리를 로드하고 생성한 클라이언트 ID를 지정해준다.

<meta name="google-signin-scope" content="profile email">
<!-- Google Platform 라이브러리로드 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- 앱의 클라이언트 ID 지정 -->
<meta name="google-signin-client_id" content="복사해둔 클라이언트 ID">

그 다음 로그인, 로그아웃 버튼을 생성하고 코드를 작성한다.

<!-- 버튼 추가 -->
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<a href="#" onclick="signOut();">Sign out</a>

<script>
<!-- 코드 작성 -->
</script>

로그인 코드를 구현한다.

로그인을 완료하면 사용자 프로필 정보와 토큰 ID를 받아와 표시해준다.

function onSignIn(googleUser) {
  // 사용자 프로필 정보
  var profile = googleUser.getBasicProfile();
  console.log("ID: " + profile.getId());
  console.log('Full Name: ' + profile.getName());
  console.log('Given Name: ' + profile.getGivenName());
  console.log('Family Name: ' + profile.getFamilyName());
  console.log("Image URL: " + profile.getImageUrl());
  console.log("Email: " + profile.getEmail());
  
  // 사용자 토큰 ID
  var id_token = googleUser.getAuthResponse().id_token;
  console.log("ID Token: " + id_token);
}

로그아웃 코드를 구현한다.

function signOut() {
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signOut().then(function () {
  console.log('User signed out.');
});

이렇게 하여 간단하게 구글 로그인 API를 구현해봤다.

노마드 코더의 줌 클린코딩을 공부한 내용입니다.

WebSocket을 이용하여 채팅을 구현한다.

express 서버를 구현한 상태에서 진행하며, express 서버 구현은 전 게시글에서 볼 수 있다.

폴더 구조

📁 chat
┣ 📁 src
┃ ┣ 📁 public
┃ ┃ ┗ 📁 js
┃ ┃ ┃ ┗ 📄 app.js
┃ ┗ 📁 views
┃ ┃ ┗ 🐶 home.pug
┃ ┗ 📄 server.js

WebSocket 기본 구현

server.js 에 Http 및 WebSocket 서버를 구현한다.

express application으로부터 http 서버를 생성하고, 그 위에 Websocket 서버를 생성한다.

서버는 모두 동일포트에서 동작하게 된다.

const app = express();
const PORT = 3000;

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

server.listen(PORT, handleListen);

Websocket 이벤트 구현

여기서는 총 3가지의 이벤트를 사용한다.

- open : 소켓이 연결되면 발생

- close : 소켓 연결이 종료되면 발생

- message : 소켓에서 메시지를 받으면 발생

먼저 소켓이 연결되면 "Connected to Browser ✅" 를 콘솔에 출력한다.

wss.on("connection", (socket) => {
    console.log("Connected to Browser ✅");
    ...
});

소켓 연결이 종료되면 "Disconnected from the Browser ❌" 를 콘솔에 출력한다.

socket.on("close", () => console.log("Disconnected from the Browser ❌"))

소켓으로부터 메시지를 받으면 받은 메시지를 브라우저에 다시 전달해준다.

즉, 에코서버의 동작을 하도록 한다.

socket.on("message", (msg) => {
    socket.send(msg);
})

이때 메시지가 Buffer로 출력된다면 인코딩을 해줘야한다.

msg = msg.toString('utf8');

app.js 에서 브라우저 접속 시 WebSocket 서버로의 연결을 수행하도록 구현한다.

소켓을 생성한다.

const socket = new WebSocket(`ws://${window.location.host}`);

그 후 open, close, message 이벤트를 구현한다.

소켓의 연결이 열리면 "Connected to Server ✅" 를 콘솔에 출력한다.

웹에서 콘솔은 F12를 눌러 개발자모드에서 확인할 수 있다.

socket.addEventListener("open", () => {
    console.log("Connected to Server ✅");
});

서버가 오프라인 상태가 되어 소켓이 종료되면 "Disconnected to Server ❌" 를 콘솔에 출력한다.

socket.addEventListener("close", () => {
    console.log("Disconnected to Server ❌");
});

서버로부터 메시지를 받으면 "New message: 메시지내용" 을 콘솔에 출력한다.

socket.addEventListener("message", (message) => {
    console.log("New message: ", message.data);
});

또한 서버로 메시지를 전송한다.

socket.send("hello!");

여기까지하면

1. 브라우저와 서버가 연결

2. 브라우저 -> 서버로 "hello!" 전송

3. 서버는 받은 메시지를 브라우저로 재전송

4. 브라우저는 받은 메시지를 출력 : "New message: hello!"

위의 기능을 구현하게 된다.

이제는 본격적으로 채팅을 구현해보자.

채팅 구현

프론트엔드 : 화면

home.pug 에 채팅을 위한 Form을 작성한다.

닉네임 설정 시 사용하기 위한 Form을 "nick", 채팅은 "message"로 하였다.

main 
    form#nick
        input(type="text", placeholder="choose a nickname", required)
        button Save
    ul
    form#message
        input(type="text", placeholder="write a msg", required)
        button Send​

프론트엔드 : 기능

app.js 에 버튼을 누르면 닉네임 및 메시지를 전송하도록 구현한다.

먼저 서버로 메시지 전송 시 String 형태로 보내주기 위해, JSON -> String 로 변환하는 함수를 작성한다.

function makeMessage(type, payload){
    const msg = {type, payload}
    return JSON.stringify(msg);
}

채팅을 보낼 때의 기능을 구현하기 위한 함수를 작성한다.

입력한 메시지를 String 형태로 변경하여 타입 및 채팅내용을 서버로 전송한다.

그 다음 내가 보낸 메시지는 닉네임이 아닌 "You"로 표시하여 출력한 뒤, 입력한 채팅을 지워준다.

function handelSubmit(event){
    event.preventDefault();
    const input = messageForm.querySelector("input");
    socket.send(makeMessage("new_message", input.value));

    const li = document.createElement("li");
    li.innerText = `You : ${input.value}`;
    messageList.append(li);

    input.value = "";
}

닉네임 설정 시 기능을 구현하기 위한 함수를 작성한다.

입력한 닉네임을 String 형태로 변환하여 타입 및 닉네임을 서버로 전송한다.

그 다음 입력한 닉네임은 지워준다.

function handelNickSubmit(event){
    event.preventDefault();
    const input = nickForm.querySelector("input");
    socket.send(makeMessage("nickname", input.value));
    input.value = "";
}

Form 의 버튼을 누르면 각 함수를 수행하도록 지정한다.

messageForm.addEventListener("submit", handelSubmit);
nickForm.addEventListener("submit", handelNickSubmit);

서버로부터 메시지를 받을때의 기능을 구현한다.

li 태그를 생성하여 웹에 표시해준다.

socket.addEventListener("message", (message) => {
    const li = document.createElement("li");
    li.innerText = message.data;
    messageList.append(li);
});

백엔드

마지막으로 server.js 에 서버의 동작을 구현한다.

먼저 서버에 연결된 소켓을 기억하기 위해 sockets 를 생성한다.

const sockets = [];

소켓이 연결됬을 때의 동작을 connection 이벤트 내에 구현한다.

wss.on("connection", (socket) => {
   ...
});

소켓이 연결되면 sockets에 연결된 소켓을 저장한다.

sockets.push(socket);

연결시 닉네임을 "Anon", 즉 익명으로 설정한다.

닉네임을 설정하지 않은 경우에는 "Anon"으로 표시된다.

socket["nickname"] = "Anon";

소켓으로부터 받은 메시지를 JSON 형태로 변환한다.

socket.on("message", (msg) => {
    const message = JSON.parse(msg);
    ...

받은 메시지의 타입을 이용하여 채팅, 닉네임 설정 중 어느 동작을 수행해야 하는지 구분한다.

채팅의 경우, 받은 메시지 및 보낸 소켓의 닉네임을 전송한 소켓을 제외한 연결된 모든 소켓에 전송해준다.

닉네임 설정의 경우, 소켓의 닉네임을 변경하여 저장한다.

    ...
    switch (message.type) {
        case "new_message":
            sockets.forEach(aSocket => {
            if(aSocket != socket)
                aSocket.send(`${socket.nickname}: ${message.payload}`)
            });
            break;

        case "nickname":
            socket["nickname"] = message.payload;
            break;
    }
})

결과

이로써 WebSocket 을 이용한 간단한 채팅을 구현할 수 있다.

노마드 코더의 줌 클린코딩을 공부한 내용입니다.

채팅 서버를 만들기 위한 express 서버를 구축한다.

폴더 구조

📁 chat
┣ 📁 src
┃ ┣ 📁 public
┃ ┃ ┗ 📁 js
┃ ┃ ┃ ┗ 📄 app.js
┃ ┗ 📁 views
┃ ┃ ┗ 🐶 home.pug
┃ ┗ 📄 server.js

프론트엔드

home.pug 에 웹 페이지를 구성한다.
MVP.css 라는 css 프레임워크를 이용하기 위해 link 해준다.

link(rel="stylesheet", href="https://unpkg.com/mvp.css")

본문 내용을 작성한다.

body 
        header 
            h1 Chat
        main 
            h2 hello 

스크립트는 app.js를 사용할 것이기 때문에 이를 명시해준다.

        script(src="/public/js/app.js") 

app.js 에 스크립트 내용을 작성한다.
간단히 웹에 접속하면 'hi' 팝업을 띄우도록 한다.

alert("hi")

백엔드

server.js 에 웹 서버를 구성한다.
여기서는 express로 웹 서버를 구성한다.

먼저 express 라이브러리를 임포트한다.

const express = require('express');

express로 웹 서버를 구성하고, 포트를 지정하여 열어준다.

const app = express();
const PORT = 3000;

const handleListen = () => console.log(`Listening on http://localhost:${PORT}`);
app.listen(PORT, handleListen);

사용할 view engine 과 views 를 지정해준다.

app.set("view engine", "pug");
app.set("views", __dirname + "/views");

라우팅을 해준다.
localhost의 3000번 포트에 연결하면 home.pug를 보여준다.

app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => res.render("home"));

전체코드

home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Chat
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body 
        header 
            h1 Chat
        main 
            h2 hello 
        script(src="/public/js/app.js") 

app.js

alert("hi")

server.js

const express = require('express');

const app = express();

const PORT = 3000;

app.set("view engine", "pug");
app.set("views", __dirname + "/views");

app.use("/public", express.static(__dirname + "/public"));

app.get("/", (req, res) => res.render("home"));

const handleListen = () => console.log(`Listening on http://localhost:${PORT}`);
app.listen(PORT, handleListen);

Nodemon

프로젝트에 수정사항이 있으면 서버를 재시작해준다.

install

npm install nodemon -D

code

nodemon.json 을 생성하여 아래와 같이 적어준다.

{
    "ignore": ["src/public/*"],
    "exec": "babel-node src/server.js"
}

프로젝트에 변경사항이 있으면 babel-node src/server.js 을 실행한다.
이때 src/public/* 에 위치한 파일의 변경사항은 반영하지 않는다.

Babel

작성한 코드를 컴파일 해준다.

install

npm install @babel/core @babel/cli @babel/node -g
npm install @babel/preset-env -D

code
babel.config.json 을 생성하여 아래와 같이 적어준다.

{
    "presets": ["@babel/preset-env"]
}