• Web Dev Simplified의 Build a Real Time Chat App With Node.js And Socket.io을 보고 따라만들기
• nodejs에서 html과 socket.io로 간단하게 챗앱을 만드는 것을 따라해보았다
• Web Dev Simplified 정말 심플하게 잘알려준다.. ㄷㄷ 따라 만들면서 행복했다
• 따라만들고 카카오톡같은 css를 입히고,
• 디테일한 기능을 추가 해줬다

추가한 기능

• 고유한 프로필 사진 생성(랜덤색 + 이니셜)
• 현재 채팅에 참가한 유저 목록 위젯
• width값이 작아지면 유저 목록 위젯 숨김
• width값이 작아지면 프로필 사진 영역 숨김
• 같은 사람이 연달아 올릴 때 프로필 사진 생략
• 같은 사람이 같은 시간에 연달아 올릴 때 가장 최근 메시지에만 시간표시
• 메시지는 plain text로 표시

소스코드

• chat-app-nodejs-and-socketio

• Reqres 에서 다양한 api를 제공하고있다
• cors를 허용하기 때문에 localhost에서도 요청을보내고 응답을 받을 수 있다
• ajax 연습이나, 간단한 앱을 만들 때, 서버를 만들지 않고,
• reqres에서 제공하는 api를 사용할 수 있겠다

get api

https://reqres.in/api/users?page=2 // 유저 목록 2페이지 보기
https://reqres.in/api/users/2 // 2번 유저 보기
https://reqres.in/api/users/23 // 23번 유저 보기(없는 유저)

// products보기, products 부분은 어떤 문자열로든 치환이 가능해서 원하는 느낌의 문자열을 적어주면된다
https://reqres.in/api/products
https://reqres.in/api/products/1

• 서버를 열어놨는데, 외부에서 접근이 가능한지 불가능한지,
• 포트포워딩을 확인하고 싶으면
• 핸드폰을 열고 데이터를 켜서 내 서버로 접속해서 확인하는 등 번거롭게 확인했다
• https://www.yougetsignal.com/tools/open-ports/ 라는 포트포워딩 체크 웹이 있는데
• 이거를 한번 클론 코딩해보았다

영상설명

• 나는 ec2에 올려서 테스트해봤다

• 주소창에 보면 15.165.000.000:4000 으로 나오는데 내 ec2 ip인데 일부러 뒷부분을 000.000으로 바꿔놨다

• 이 앱은 ec2의 4000포트에서 동작중이다

• 도메인명이나 ip를 입력하고 포트입력란에 원하는 포트를 입력한다

• 그리고 check 버튼을 누르면 해당 포트가 열려있는지 확인한다

• 당연히 해당 포트를 리슨하는 서버가 동작하고 있어야한다

• 우측 common ports 에서 원하는 포트를 클릭하면 해당 포트로 요청을 보낸다

• Scan All Common Ports 버튼을 눌러 모든 common port를 스캔한다

• 0:18 중간에는 마인크래프트 서버를 체크해본다
• 0:35 localhost로 적으면 내 ec2의 포트를 스캔하게된다
• localhost를 common port를 모두 스캔해보니 3000번이 열려있다는 것을 알 수 있다
• 0:48 이 앱이 실행되고 있는 4000번 포트를 스캔해보니
• 당연하게 열려있는 모습을 확인할 수 있다

소스코드

• open-port-check-web

1
2
3

lsof -i:8080

kill -9 $(lsof -t -i:8080)

• ps -ef|grep node 이런식으로 node로 실행한 웹서버를 확인했었는데,
• node로 실행한 많은 앱이 있을때 어떤게 내가 생각하는 앱인지 헷갈릴때가 있다
• 이럴때 특정 포트를 사용하는 프로세스를 어떻게 검색할까 하다가 알아보았다

lsof

1

lsof -i:3000

COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 13721 ec2-user 18u IPv6 389226 0t0 TCP *:hbci (LISTEN)

• 이런식으로 해당 포트를 사용하는 프로세스를 확인할 수 있다

1

lsof -t -i:3000

13721

• -t옵션을 추가하면 pid만 깔끔하게 얻을 수 있어
• kill -9 $(lsof -t -i:3000) 이런식으로 묶어서 사용할 수 있다

참고

• https://stackoverflow.com/questions/11583562/how-to-kill-a-process-running-on-particular-port-in-linux

1
2
3

li {
  list-style-type: none;
}

• li의 앞에 붙는 . 을 없앨 수 있다

1

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

• 게시하고싶은 재생목록의 id값을 알아온다
• 재생목록을 가져온경우에는 id 뒤에 'playlist'를 붙여주면 된다
• 나는 playlist라는 카테고리를 만들고 내가 듣는 노래를 이달의 재생목록처럼 업로드할려고
• hexo에서 재생목록 표현하는 방법이 없나하고 알아보았다

유튜브 재생목록 id 알아내기

https://www.youtube.com/playlist?list=PLdEiQV70x8ZGjg6ONGRZcZKIXMosQ6k-B
id : PLdEiQV70x8ZGjg6ONGRZcZKIXMosQ6k-B

• 게시하고싶은 재생목록에 들어가면 url에 list라는 파라미터가 있는데 그게 id이다

hexo tag-plugin

1
2
3
4
5

{% youtube lJIrF4YjHfQ %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

• 기본 md에서는 표현하지 못하는 것을 표현하게 해줌
• 당연히 hexo 블로그에서만 사용가능
• 맨 마지막에 false를 붙여주면 Enable privacy-enhanced mode 라고 유튜브 쿠키를 사용하지 않도록 한다

참고

• https://hexo.io/ko/docs/tag-plugins.html#Examples

~

~

1

nodemon --watch app app/server.js

• nodemon을 사용해서 코드수정마다 서버를 자동으로 재시작하는데,
• view와 관련한 코드를 수정할 때 서버가 재시작되는 것은 불필요하고, 세션이 날라가는 등 오히려 불편할 수 있다
• nodemon이 모든 프로젝트 디렉터리가 아닌 특정 디렉터리의 변화를 감시하고 재시작되는 것을 알아보자

명령어

1

nodemon ./bin/www

• 보통 이렇게 아무것도 없이 사용하면, 거의 모든 변화마다 서버가 재시작된다

1

nodemon --watch routes ./bin/www

• --watch routes watch옵션을 넣어줌으로써 해당 디렉터리에서 변화가 있으면 재시작하도록 할 수 있다

1

nodemon --watch routes --watch libs ./bin/www

• 이런식으로 나열할 수 있다
• 기본적으로 디렉터리명을 적어야하며, 하위디렉터리는 자동으로 포함된다

• 그런데 여러개의 디렉터리를 나열을 해야하면은
• 반대로 무시할 디렉터리를 설정하는게 빠를 수 있다

config file로 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "restartable": "rs",
  "ignore": [".git", "node_modules/**/node_modules"],
  "verbose": true,
  "execMap": {
    "js": "node --harmony"
  },
  "events": {
    "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
  },
  "watch": ["test/fixtures/", "test/samples/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js,json"
}

• nodemon.json이름으로 파일을 하나 만들고 커스텀할 수 있다
• 무시할 디렉터리를 ignore 배열에 나열하면 된다

참고

• https://github.com/remy/nodemon#monitoring-multiple-directories
• https://github.com/remy/nodemon/blob/master/doc/sample-nodemon.md

• Button With Awesome Hover Effects using Html CSS & jQuery | mouseenter and mouseout events
• 위 영상을 보고 따라 만들었다
• 영상에서는 제이쿼리를 사용해서 구현하지만, 나는 제이쿼리없이 구현해보았다

결과

• 참고 ; 소스코드