CodeHoon

Vue.js 프로젝트를 webpack을 이용해 

npm run build

를 하였을 때 나타나는 경고 문구

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack.config.js 에 어떤 모드로 프로젝트를 설정한것인지 기재를 안해놓았기 때문이다.

그렇기에 mode: 'production'  혹은 'development' 를 추가해주면 된다.

웹소켓에 대해 외부접속도 가능하게 하려고 그간 많은 노력을 했으나 번번이 실패하여 어느덧 3주-4주의 시간이 흘렀다.

로컬 환경에서는 여러 번 성공하였으나 외부접속 부분에서 계속 실패. 방향을 바꿔버렸다.

`그냥 로컬로 돌리자`

간단한 서버가 될 코드 내용이다. index.js 등으로 구현

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
  cors: { origin: "*"  }
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

// websocket으로 데이터 받아오기
const socket = io('ws://localhost:3000');

io.on('connection', (socket) => {
  console.log('a user connected');
});

나를 괴롭혔던 몇 가지의 문제들이 있었다.

1. Port 처리
2. CORS (Access-Control-Allow-Origin) 에러
3. REST API

첫째로 포트 문제였다.

공인 아이피로 접속해야하는데 자꾸 접속이 안됐었다. 서버를 돌려도 안되었고, 등등..
원인은 포트포워딩이었다. 과거에 서버를 설치하는데 내가 직접 건들지 않았던 부분이었기 때문에 신경 자체를 쓰지 못했다.

내 능력부족일 뿐,, ㅠㅠ

그리고 이번 기회로 네트워크 단의 공부를 잘 하게 되었다. 어떤 식으로 흘러가는지 대충 알았던 모습을 그림도 그려가면서 공부하며 이해를 할 수 있었다. ㅂㄷㅂㄷ.. 시간 잡아먹은거 생각하면 치가 떨림.

두 번째로 CORS 에러. 

프론트엔드 개발자들이 가장 자주 보고 친숙한 에러 중의 하나라고 하는데, 이해가 된다. 
걸핏하면 CORS에러에요~ 뿌잉뿌잉하면서 빨간 글씨로 나타나는 녀석이다.

서버에서 분명히 아래와 같이 주었는데도, 계속 에러나고 ㅋㅋㅋ 열받아 죽겠다.

cors: {  origin: "*"  }

ORIGIN * 는 함부로 주면 안된다.

그래도 어느정도 해결해서 다행이다. 전체적인 프로세스도 잘 알았고, 역시 부딪히는만큼 알게 되는 법

마지막으로 REST API 이다.

그래도 위의 두 녀석보다는 훨씬 애를 덜 먹였다. 왜냐하면 기존에도 자주 사용하는 방식이었기 때문. 
RESTFUL API 환경구성을 하기 위해 프론트와 백을 일부로 구분하여 사용하였다.

기존에는 Legacy였기 때문에 코드를 직접 보기 너무나도 끔찍하여 토할 것 같았으나, PHP를 백으로 놓고 데이터만 내뱉게 만들어놓고, Javascript로 나머지를 충당했다. 쓴 라이브러리 등은 ajax를 처음에는 사용하였으나, vue.js를 공부하면서 axios에 대해 알게되었고, 이제는 axios위주로 사용한다. 
axios에 대해서는 과거에 작성한 내용을 참고 바랍니다.

nodejs로 서버를 구성하고, socket.io 를 통해서 웹소켓을 구성하려고하는데 해당 에러가 발생하였다.

node.js TypeError: path must be absolute or specify root to res.sendFile [failed to parse JSON]

이유인즉슨, result.sendFile( ) 에서 [절대 경로 설정 or Root 경로 설정] 을 해주지 않았기 때문이다.

(라고 stackoverflow에서 말함)

그래서 해결방법은 간단하다.

__dirname 을 추가해주면 된다. -> 요청한 경로를 따라옴

app.get('/', function(req, res){
        res.sendFile(__dirname + '/index.html');
        });

일단 그래서 해당 에러는 해결이 되었다.

사용환경 :  Ubunut 20.0.4 LTS, Apache2.x, Node.js, Javascript

Apache설정 변경

# /etc/apache2/sites-available/000-default.conf  내용 추가

<VirtualHost  *:80>
ServerName example.com

           ProxyRequests Off
           ProxyPreserveHost On
           ProxyVia Full
           <Proxy *>
              Require all granted
           </Proxy>

           <Location /nodejs>
              ProxyPass http://localhost:3000
              ProxyPassReverse http://localhost:3000
           </Location>

            <Directory "/var/www/example.com/html">
                    AllowOverride All
            </Directory>
</VirtualHost>

3000포트로 허용함을 설정

$ sudo service apache2 restart

아파치 서버 재구동 

# /var/www/html/nodejs/hello.js

var http = require('http');
http.createServer(function (request, response) {
   response.writeHead(200, {'Content-Type': 'text/plain'});
   response.end('Hello World! Node.js is working correctly.\n');
}).listen(3000);
console.log('Server running at http://127.0.0.1:3000/');
console.log('It is running now...');

마찬가지로 3000포트 연결 설정

hello.js 파일 실행

$ node /var/www/html/nodejs/hello.js 

http://example.com:8080/node.js/
접속

일단 서버 내에서 8080포트로 접속하여 3000포트의 Websocket communication 로그 출력이 완료되었다.

Vue.js 3 에서 Custom Directives 를 사용하는 방법에 대해 포스팅 하겠다.

■ Custom Directive

1. v-model, v-show 디렉티브 같은 기본 디렉티브 이외에도 사용자가 직접 디렉티브를 정의해서 사용할 수 있다.
2. 전역에서 사용할 수 있다. 물론 각각의 컴포넌트에서도 가능하다.
  -> 사용하기에 따라 유용하겠죠?

예시) 사용자가 컴포넌트에 접속했을 때,
        입력필드로 자동 포커스 ( === autofocus) 되는 커스텀 디렉티브와
        배경이 노란색의 컴포넌트

■ 전역 컴포넌트 사용하기

// Directives.js

// 1.배경색 노란색으로 설정
export const MyHighlightDirective = {
    beforeMount(el){
        el.style.background = 'yellow'
    }
}

// 2. mounted 후에 focus로 해당 항목에 자동으로 focus. === html: autofocus
export const MyFocus = {
    mounted(el) {
        el.focus()
    }
}

// main.js
import { MyHighlightDirective, MyFocus } from './directive/HighlightDirective'

// 보기 편하게 directive를 2개로 분리하였다. 배열로 해도 상관없을까?
createApp(App)
.directive('highlight', MyHighlightDirective)
.directive('focus', MyFocus)
.use(router).mount('#app')

main.js에 import 후, 아무 컴포넌트에서 해당 directive를 호출이 가능
-> 전역으로 등록하였기 때문에 별도의 선언·호출 없이 사용이 가능하다.

// Directives.vue
<template>
  <div>
      <h1>Directives</h1>
      <p v-highlight>It will be background yellow by Direction : "v-highlight" by Directions</p>
      <input v-focus type="text">
  </div>
</template>

■ 컴포넌트 내부에서 선언하고 사용하기

- 오히려 전역으로 등록하는 것보다 간단하다.

// Directives.vue
<template>
  <div>
      <h1>Directives</h1>
      <p v-highlight>It will be background yellow by Direction : "v-highlight" by Directions</p>
      <input v-focus type="text"><br>
      <p v-backgroundRed>It will be background red</p>

  </div>
</template>

<script>
export default {
    directives: {
        backgroundRed: {
            beforeMount(el) {
                el.style.background = 'red'
                el.style.color = 'white'
            }
        }
    }
}
</script>

이상입니다.

Node.js, JavaScript의 Websocket을 이용해 간단한 셀프 채팅 어플리케이션을 구현하겠습니다.

웹소켓의 기본적인 구성은 다음과 같습니다.

굳이 개념치 않다면 안보셔도 무방합니다.

■ ws 설치 

$ npm install ws

우선 npm 명령어로 ws (web socket) 을 설치하도록 하겠습니다.

■ Server.js

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { port: 8900 } );    // 포트번호는 자유롭게 작성해주세요.

wss.on( 'connection', function(ws){
    console.log("connected");

   // 클라이언트가 메시지를 전송했을 때 수신하여 다시 보내는 과정.
    ws.on( 'message', function(msg){
        console.log("msg[" + msg + "]" );
        ws.send( msg );
    });
});

포트번호(port)는 본인이 사용하는 포트번호를 지정하면 됩니다.

그리고 구동하는 방법은 터미널에서

$ node server.js

로 js파일을 구동시킵니다.

■ Client.html

html파일이던 php파일이던 상관없습니다. 중요한건 javascript로 한다는 것이니까요.

<!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">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <title>Document</title>
   </head>
   <body>
    <form>
     <input id="Send" type="text" autofocus>    <!--메시지 작성 영역-->
     <button type="button" onclick="sendMessage();" >Send</button>  <!--전송버튼-->
    </form>
    <div id="Recv"></div>   <!-- 보낸 메시지가 기록되는 곳 -->
    <script>
        $( document ).ready( function() {
            var txtRecv = $('#Recv');
            ws = new WebSocket("ws://localhost:8900");

            // websocket 서버에 연결되면 연결 메시지를 화면에 출력한다.
            ws.onopen = function(e){
            txtRecv.append( "connected<br>" );
            };
      
            // websocket 에서 수신한 메시지를 화면에 출력한다.
            ws.onmessage = function(e){
            txtRecv.append( e.data + "<br>" );
            };
      
            // websocket 세션이 종료되면 화면에 출력한다.
            ws.onclose = function(e){
            txtRecv.append( "closed<br>" );
            }
        });
      
        // 사용자가 입력한 메시지를 서버로 전송한다.
        function sendMessage() {
            var txtSend = $('#Send');
        
            ws.send( txtSend.val() );
            txtSend.val( "" );
            txtSend.focus()
        }
       </script>
   </body>
   </html>

■ 결과

· 서버 구동 -> 연결 -> 페이지 접속마다 터미널에 "connected" 라는 로그가 찍힙니다.

· 메시지를 작성하고 버튼을 통해 전송하였을 때,

■ 결론

-> 몇가지 보완할 내용이 존재하긴 하다.

1. jQuery로 작성하였다는 점.
    -> 필자는 jQuery를 선호하지 않는다.
        비동기통신 위주로 사용하는 스타일인데, 예전에는 ajax 사용할 때 사용했지만,
        요즘은 axios 위주로 사용하기 때문에 이마저도 잘 사용하지 않는다.

2. 사소한 버그가 있다.
    -> 메시지를 작성하고 송출하였을 때, 해당 메시지가 웹페이지에 제대로 출력이 되지 않고,
         [ Object Object ] [ Blob ] 이런식으로 작성되더라. 
    -> e.data를 통해 해당 내용을 append 시켜 작성하였는데, 아무래도 해당 node 자체가 입력이 된것이라 판단하다.
    -> 해결방법으로 <p> 를 하나 생성해서 해당 내용을 생성하여 삽입할 수 있다.

3. 뭐 그냥.. 그렇다고..

참고

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요, 상훈입니다.

■ Websocket (웹소켓)

- Websocket이란?
- Websocket과 socket.io
- Websocket, JavaScript
- Websocket, Socket.io

■ Websocket이란? / Websocket의 특징

1. 서버(server)와 클라이언트(client)간의 특정 포트를 이용해 지속적인 실시간 양방향 통신 
2. 실시간 통신이 필요한 경우에 사용
   ex) 실시간 스트리밍 방송, 채팅, 게임 등
3. 일반 TCP Socket과 다른 점
   → 최초 접속 = 일반 Http Request를 통해 handshaking과정 거친다.
4. 기존의 port : 80, 443으로 접속→ CORS적용, 인증 등을 유지 가능
5. → 추가 방화벽을 열지 않고 통신이 가능함

■ 추가. 비동기(Http)통신을 웹소켓처럼 사용하면 지속적인 연결을 요청하기 때문에 과부하가 걸린다.

■ Websocket과 socket.io

  - WebSocket과 socket.io 는 다르다.

→ WebSocket
  : 양방향 소통 프로토콜, socket.io : 양방향 통신을 위해 웹소켓 기술을 활용하는 라이브러리.
    ⇒ JavaScript & jQuery 의 관계

참고

■ 사용 방법 - JavaScript

웹소켓을 사용하려면 Web Socket 객체 생성을 해야한다.

→ 이 객체는 자동으로 서버와 연결을 열려고 할 것이다.

1. 필수 파라미터 1개 : url
2. 선택 파라미터 1개 : protocols
3. ERROR : SECURITY_ERR ⇒ 포트 차단일 경우 발생
   

• 한개의 프로토콜

 var exampleSocket 
   = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

• 여러개의 프로토콜

var exampleSocket
 = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

• 서버에 데이터 전송
  • 전송 가능한 데이터 유형 : String, Blob, ArrayBuffer
  • 바로 데이터를 전송하면 실패할 수 있기 때문에 onopen() 으로

exampleSocket.onopen = function (event) {
  exampleSocket.send("Here's some text that the server is urgently awaiting!");
};

• 서버로부터 데이터 수신
  • 메세지가 수신되면 message 이벤트 ⇒ onmessage 함수로 전달된다.

• exampleSocket.onmessage = function (event) {
    console.log(event.data);
  }

• 연결 종료
  • 웹 소켓 사용 종료 시 close() 메소드를 호출하여 연결을 종료한다.

  exampleSocket.close();
  

  • 네트워크에 전달이 되지 않은 정보가 아직 남았을 수도 있으니, bufferedAmount Attribute를 조사하여 데이터를 검사하는 것도 좋다.
    
• 고려사항 - 보안
  • 웹소켓은 혼합 연결 환경에 이용할 수 없다.
  • ex) HTTPS로 로드 된 페이지 → non-secure 웹소켓 연결 수립, non-secure 웹소켓 연결 → HTTPS로 로드 된 페이지

참고페이지 : MDN

■ 사용방법 - Node.js

Node.js에서 웹소켓을 구성하려면 ws 패키지를 사용해야 한다.

$ npm install ws

1. 서버측
   • port: 3000 으로 웹소켓 서버를 연다.

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', ws => {
  ws.on('message', message => {
    console.log('received: %s', message)
  })
  ws.send('something')
})

1. 클라이언트측
   • 마찬가지로 port:3000 으로 연결하고 데이터를 전송

const ws = new WebSocket('ws://localhost:3000')

ws.on('open', () => {
  ws.send('something')
})
ws.on('message', data => {
  console.log(data)
})

참고페이지 : 웹소켓

출처: 메시지 아이콘 제작자: Freepik - Flaticon

Vue.js 에서 클릭 이벤트 (click event) 로 한 개의 이벤트가 아닌 여러 개의 이벤트를 주고 싶을 때 사용할 수 있다.
=> 당연히 method 실행도 가능하다.

버튼을 누르면 2개의 알림창( alert() )이 출력되도록 하겠다.

<template>
    <main>
        <button type="button" @click="event1(), event2()">다중이벤트버튼</button>
    </main>
</template>
<script>
export default {
    name: '',
    components: {},
    methods: {
        event1() {
            alert('event1')
        },
        event2() {
            alert('event2')
        }
    }
}
</script>

콤마로 구분해놓으면 첫번째 실행이 끝난 후 실행이 된다.