웹소켓에 대해 외부접속도 가능하게 하려고 그간 많은 노력을 했으나 번번이 실패하여 어느덧 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(..

FrontEnd/JavaScript 2022. 1. 20. 14:41

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'); }); 일단 그래서 해당 에러는 해..

FrontEnd/JavaScript 2022. 1. 11. 15:21

사용환경 : Ubunut 20.0.4 LTS, Apache2.x, Node.js, Javascript Apache설정 변경 # /etc/apache2/sites-available/000-default.conf 내용 추가 ServerName example.com ProxyRequests Off ProxyPreserveHost On ProxyVia Full Require all granted ProxyPass http://localhost:3000 ProxyPassReverse http://localhost:3000 AllowOverride All 3000포트로 허용함을 설정 $ sudo service apache2 restart 아파치 서버 재구동 # /var/www/html/nodejs/hello.js ..

FrontEnd/JavaScript 2022. 1. 10. 18:05

Vue.js 3 에서 Custom Directives 를 사용하는 방법에 대해 포스팅 하겠다. ■ Custom Directive 1. v-model, v-show 디렉티브 같은 기본 디렉티브 이외에도 사용자가 직접 디렉티브를 정의해서 사용할 수 있다. 2. 전역에서 사용할 수 있다. 물론 각각의 컴포넌트에서도 가능하다. -> 사용하기에 따라 유용하겠죠? 예시) 사용자가 컴포넌트에 접속했을 때, 입력필드로 자동 포커스 ( === autofocus) 되는 커스텀 디렉티브와 배경이 노란색의 컴포넌트 ■ 전역 컴포넌트 사용하기 // Directives.js // 1.배경색 노란색으로 설정 export const MyHighlightDirective = { beforeMount(el){ el.style.backg..

FrontEnd/Vue.js 2022. 1. 5. 23:12

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"); // 클라이언트가 메시지를 전송했을 때 수신하여 다시 보..

FrontEnd/JavaScript 2022. 1. 4. 18:14

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요, 상훈입니다. ■ Websocket (웹소켓) - Websocket이란? - Websocket과 socket.io - Websocket, JavaScript - Websocket, Socket.io ■ Websocket이란? / Websocket의 특징 서버(server)와 클라이언트(client)간의 특정 포트를 이용해 지속적인 실시간 양방향 통신 실시간 통신이 필요한 경우에 사용 ex) 실시간 스트리밍 방송, 채팅, 게임 등 일반 TCP Socket과 다른 점 → 최초 접속 = 일반 Http Request를 통해 handshaking과정 거친다. 기존의 port : 80, 443으로 접속→ CORS적용, ..

FrontEnd/JavaScript 2021. 12. 29. 13:57

Vue.js 에서 클릭 이벤트 (click event) 로 한 개의 이벤트가 아닌 여러 개의 이벤트를 주고 싶을 때 사용할 수 있다. => 당연히 method 실행도 가능하다. 버튼을 누르면 2개의 알림창( alert() )이 출력되도록 하겠다. 다중이벤트버튼 콤마로 구분해놓으면 첫번째 실행이 끝난 후 실행이 된다.

FrontEnd/Vue.js 2021. 12. 22. 17:47

Vue.js 에서 v-for 객체배열을 통해 반복문을 연습하기 예제입니다. 반복문 사용하기 제품명 가격 카테고리 배송료 {{ product.name }} {{ product.price }} {{ product.category }} {{ product.delivery }} 오히려 이전 발행글보다 난이도가 낮아진 기초의 느낌입니다. [ Vue.js ] 반복문 사용하기 for .. in .. , 객체 리스트 출력하는 방법 안녕하세요 상훈입니다. Vue.js에서 반복문을 사용하고, 그 속에서 data binding이 된 객체 데이터를 출력하는 방법을 포스팅하겠습니다. 1. data 2. template 1. data import products from './assets/listData.j.. code-hoon..

FrontEnd/Vue.js 2021. 12. 21. 17:47