개발 블로그

#1.7 Nicknames part One

이제 메세지를 콘솔창이 아닌 스크린에 띄워보자.

위 html 내애서 만든 li에 메세지를 입력한뒤 그 li 를  ul 안에 넣어주면 된다.

front가 새로운 메세지를 받으면 새로운 li 를 만든 후, (line 11)

새로 만든 li에 받은 메세지를 넣어주고 (line 12)

메세지를 messagList에 append 해준다. (line 13)

그 후 메세지를 입력하면 각 브라우저에서 보낸 메세지가 양 쪽 브라우저 스크린에 출력된다. 

이제 닉네임을 설정할 수 있도록 해보자. 

그러나 그 전에 앞서, 우리가 입력한 메세지가 닉네임인지 또는 채팅 내용인지를 구분해줘야한다.

html에 form 을 하나 더 추가함으로써 nick, message 가 구분되도록 한다. 

front 쪽도 수정을 해준다.

상단에 변수 하나를 더 추가하여 nickname 과 message 를 구분한다. (line 2,3)

그 후 nickForm에 대한 eventListener 도 추가하고 이에 대한 function 도 새로 작성한다. 

여기까지 하면 입력창은 두개 생기지만 message 를 구분할 수 없고 동일하게 입력한 닉네임 값을 브라우저 스크린에 그대로 출력한다. 

이 문제를 json을 활용해서 해결해보자. 

현재 input value 값이 string type 인데 이걸 json type으로 변경해주자. 

아래와 같이 type과 payload를 지정한 뒤 재실행해보면 

아래와 같이 object 형식으로 나온다. 즉 safari -> server -> chrome 으로 가는 과정 중 server 에서 type 변환이 되지 않은 것이다.

어떻게 하면 이걸 변경할 수 있을까? 

콘솔창에 아래와 같이 입력해본다. 

그럼 parsing 가능한 것을 확인할 수 있다. 즉 backend 에서 이 string type 데이터를 가져다가 JSON 형식으로 parse 할 수 있다는 것이다. 

역으로 JSON.parse 를 해보면 다시 정상적으로 원복된다. 

이제 JSON 즉 Object 형식을 기반으로 front <-> back 간에 통신을 해보자. 단 이때 front, back 양 측에 전송 전 후로 Type 변환(Object <-> String) 을 해주는 기능이 필요하다. 

먼저 front 쪽에 해당 기능을 구현해보자. 

line 6~9에 makeMessage 메소드를 구현했다. 

그 후 front->back 으로 메세지 전송하는 부분에 makeMessage 메소드를 넣어준다. (line 29, 38)

즉 backend 에 string 형식으로 메세지를 보내야하지만 JSON으로 type 구분을 해야하므로

string 을 보내기 전에 Object를 만들고 

makeMessage 메소드를 통해 Object를 string type 으로 변경해서 backend 로 보낸 것이다. 

refresh 후 nickname 에 safari 라고 입력하면 backend 가 그 메세지를 받은 후 다시 front 로 전송해준 모습을 확인할 수 있다. 

이제 type 에 따라 출력되는 것을 구별해보자. 

#1.6 Chat Completed

html 로 메세지를 전송하는 버튼과, 메세지 리스트를 보여줄 수 있는 화면을 작성해보자.

line 13 ~ 16 을 추가해준다.

html에서 작성한 ul, form 을 브라우저 쪽에서 변수로 선언해주고,

from 에 대한 변수인 messageForm에 eventListener 를 add 해준다. 

즉 submit 이벤트가 발생했을 때  line 17~21 메소드를 실행한다.

* preventDefault() : submit 되었을 때 defulat 동작은 초기 화면으로 돌아오는 것인데, 해당 함수를 통해 그 default 동작을 막는다. 즉 submit 이 되어도 그 화면을 그대로 유지할 수 있도록 해준다. 

 다음 서버를 실행하고 브라우저에 hello 를 입력하면 정상 실행됨을 확인할 수 있다. 

이제 input.value를 console.log 로 출력하는 대신, socket.send 를 사용해서 

front->back 으로 입력 값을 전송해보자. 

또한 input.value 값을 초기화해줌으로써 submit 후에 입력 창에 문자가 남아있지 않도록 해준다. 

서버 재실행 후 브라우저에서 숫자를 입력해보면 backend 에서 그 값을 확인할 수 있다. 

backend 가 받은 메세지를 그대로 다시 front 로 전송해보자.

line 32를 line 33으로 수정해주면 

아래와 같이 브라우저에서 hi 라고 입력 후 send 버튼을 누르는 즉시 back->front 로 그 메세지를 다시 전송하여 콘솔 창에서 그 메세지를 확인할 수 있다. 

그러나 이 기능은 메세지를 입력한 그 브라우저와 서버 간에 통신을 하는 것이다. 즉 크롬 브라우저와 사파리 브라우저간의 통신이 되지 않느다. 이를 확인하기 위해 사파리에 동일한 주소로 접속을 한 뒤 메세지를 입력하면 이는 사파리에서만 확인 가능하지 크롬에서는 확인이 불가하다.

이제 chrome <-> server <-> safari 구조로 chrome ~ safari 사이에 통신할 수 있도록 해보자. 

현재 socket 에 누가 연결이 되었는지 모르므로 fake database를 생성해주자. 

앞으로 누군가 서버와 connection이 되면, 그 연결 정보인 socket 을 sockets 배열에 넣어줄 것이다. 

line 27, 30을 통해서 하나의 socket(브라우저)을 통해 받은 메세지를 다른 socket(브라우저들)들에 전송할 수 있다. 

현재 코드로는 자신의 브라우저에도 메세지를 보내는 방식이지만 추후 이 방식은 개선하도록 한다. 

line 38과 같이 연결된 모든 브라우저에 socket 을 통해 메세지를 보내주는 기능을 추가한 뒤 

크롬에서 메세지를 send 하면 safari 에서도 그 메세지가 출력됨을 볼 수 있다. 

반대로 safari 에서 입력해도 동일하게 chrome 에 출력된다.

#1.4 WebSockets Messages

앞서 server.js 에서 handleConnection 이라는 함수를 따로 정의했었는데,

on 함수의 두번째 인자 내에 바로 함수를 생성해보자. (line 26~28)

이 방식으로 하면 line 23~25 방식에 비해, socket이 현재 어떤 상태인지 알기 쉽다. 즉, 연결이 되면 socket이 인자에 들어온다는 것을 직관적으로 이해할 수 있다. 

이제 console.log 대신 "welcome to chat" 이라는 메세지를 보내보자. 

send 메소드는 server의 메소드가 아닌 socket 의 메소드이며, 이는 socket 과의 직접적인 연결을 제공해준다.

backend 에서 메세지를 보냈으니, 이를 Frontend에서 받아보자. 가능한 옵션은 네가지가 있고 이 중 open을 입력하자. open은 connection 이 opne 되었을 때를 의미한다.

backend 쪽도 로그를 추가해주자. 

다음으로 socket에 이벤트 두개를 추가해보자. message와 close 이벤트를 추가한 코드이다. 

message이벤트는 메세지를 받을때마다 아래 내용을 출력한다. 

서버에도 브라우저와 잘 연결되었다는 메세지가 출력된 모습이다. 

브라우저 쪽도 잘 작동한다.

이 중에 직접 받은 data 만 받고 싶다면 위 사진의 line 8 중 message 파라미터를 message.data 로 바꿔보자. 

data 만 출력한 모습이다. 

이 상태에서 서버 터미널에 ^C를 입력하여 서버를 kill 하면, 브라우저에서는 서버 연결이 끊겼다는 메세지가 발생한다. 

동일하게 서버에서도 close event에 대한 Listener 를 등록해보자. (socket.on () )

브라우저에서 연결을 끊기 위해 크롬 창을 닫으면,  아래와 같이 터미널창에 브라우저로부터 연결이 끊겼다는 메세지가 출력된다. 

서버와 브라우저 간 양방향 통신에 대해 알아봤고,

이제 frontend -> backend 로 메세지를 보내보자. (위에서는 backend -> frontend 만 했음)

보내기 전에 10초를 기다리기 위해 timeout 을 설정하자. 

timeout을 설정함으로써 메세지를 순차적으로 보낼 수 있다. 

브라우저가 보낸 메세지를 backend 에서 받기 위해 eventListener를 작성해보자. (line 31~33)

이제 서버를 재실행하면,

1. back -> front : hello! 메세지를 보냄. ( 위 사진의 Line 34)

2. front -> back : front에서 10초 후 메세지를 보내면 backend 터미널에 hello from the server 라는 메세지 출력됨.

그러나 아래와 같은 에러가 떠서

강의 아래 있는 코멘트를 보고 수정한 뒤 재실행 하니

정상적으로 출력된것을 확인할 수 있었다.

* 메세지를 받을 때, frontend 에서는 addEventListener() 메소드로 받고, backend 에서는 socket.on() 메소드로 받는다. 

출처 : https://nomadcoders.co/noom/lectures/3111

#0.1 Requirements 

[BackEnd]

• ExpressJS
• app.get()
• Pug
• (req, res) => 
• package.json
• babel
• nodemon

[FrontEnd]

• 바닐라JS (바닐라JS로 크롬 앱 만들기 참고)  
  •   document.querySelector, document.createElement, title.innerText=""
  •  js로 HTML에서 요소를 가져오거나 생성하는 방법
  • 클래스명 추가/삭제 방법 (ex  .classList.add() )

[NodeJS]

• ver 4.17.3 이상

#0.2 Server Setup

package.json 만들기

Babel, Nodemon 설정하기

npm이란?

Node.js Package Manager의 약자

노드 프로젝트를 시작할 때

$npm init

으로 시작한다. 

터미널에서 바로 vscode 실행하는 방법

vscode 에서 shift+cmd+p 누르고 code 검색 후 설치 

터미널에서 code . 명령어 실행

여기서 main, scripts 부분 삭제

상단의 Terminal 탭에서 New Terminal 클릭하여 터미널 창 신규 생성

touch README.md 명령어 실행하여 github 용 README 추가

https://server-talk.tistory.com/392

Nodemon 설치하기

npm i nodemon -D 

babel 파일 생성, nodemon.js 파일 생성, src 폴더 생성

Babel 설치

먼저 git init. 실행 후 babel 설치

git init .

npm i @babel/core @babel/cli @babel/node -D

touch .gitignore 

추가로 preset 설치

npm i @babel/preset-env -D

후 babel.config.json 파일에 아래와 같이 입력

npm i express

npm i pub

import express from "express";

localhost:3000 접속 후 확인 

#0.3 Frontend Setup

static file과 User 에게 가게 될 파일 만드는 단계

WebPack을 사용하지 않고 단순히 JavaScript를 User에게 전송할 것 

먼저 아래와 같이 public, js 폴더 생성 후 그 안에 app.js 파일을 생성한다. 

public 안에 veiws 폴더 생성 및 home.pug 파일을 생성한다.

일반적인 html 작업을 위해 html 5를 선택한다. 

 pug 페이지들을 렌더하기 위해 server.js 파일에 pug 설정을 해준다. (line 5,6)

line 6은 views 경로를 설정해준 것이다. 

이제 npm run dev 로 실행시켜 보자.

이제 Route 를 생성할 차례이다. ( 한 개만 사용함)

여기서 Express 로 하는 것은 view 를 셋팅하는 것과, render 를 하는 것이며,

나머지는 websocket 에서 실시간으로 일어난다. 

오류가 나서 views 디렉토리 경로를 line 7과 같이 수정한다. 정상동작됨을 확인하였다.

다음은 home 에 script 를 작성한다.

이 상태에서 line 10의 url로 이동하면 동작하지 않는다. url 동작을 위해서는 static 작업이 필요하다.

line 8은 static 작업을 한 내용이다. user가 public 으로 이동하면 __dirname+/public 폴더를 보여주는 것이다. 

그 후 User가 보는 FrontEnd 에 해당하는 app.js 파일에 hello; 를 입력한 뒤 서버를 재시작하면 다음과 같이 확인할 수 있다.

app.js 를 저장할 때마다 nodemon이 새로 시작된다. 이는 비효율적이므로 views 나 server 를 수정할 때만 ㅜodemon이 재시작되도록 해보자. 아래와 같이 nodemon.json 파일에서 해당 파일을 ignore 하면 된다.

* nodemon은 우리의 프로젝트에서 변경 사항이 발생하면 서버를 재시작해주는 프로그램. 

서버를 재시작하는 대신에 babel node 를 실행한다.("exec": )

Babel은 우리가 작성한 코드를 일반 NodeJS 코드로 컴파일해주는 역할이며, 그 작업을 src/server.js 에다가 해주는 것이다. 

정리하면,

Pug로 view engine을 설정하고, Express에 template이 어디있는지 설명해주고 (line 6,7)

puglic url 을 생성하여 유저에게 파일(public 폴더)을 공유해주고 (보안적인 측면에서 유저가 모든 부분을 볼 수 없도록 제한) (line 8)

home.pug를 render 해주는 route handler 를 만듦. (line 9)

이제 mvp css 를 사용해서 추가로 html tag 를 더 예쁘게 꾸며보자. 

아래의 href 링크를 복사해서 

header에 추가하자.

line 8 : 기존의 link:css 에서 href 를 위 mvp css 걸로 수정한다.

왼쪽이 mvp css 적용 전, 오른쪽이 적용 후 이다. 

마지막으로 javascript가 잘 연결됐는지 확인해보자.

위의 javascript는 제대로 frontend 로 가고 있는 것이다. 

#0.4 Recap

Line 10 과 같이 CatchAll Url 만들어보자. 유저가 아무 url 로 이동하려고 시도해도 home 디렉토리로 리다이렉트 시킨다.