'How to' 태그의 글 목록 (2 Page)

사용환경 : Vue.js 3, Firebase 9.1.5

youtube에 있는 동영상 강의를 보던 와중 자꾸 firebase 관련한 에러가 해결이 안되어서 직접 찾아보고 적용하여 성공하였다.

1. 모듈 생성 (module exports part.)
2. 실제 적용 위치

이렇게 두 가지로 나뉘어서 어느곳에서도 사용할 수 있도록 모듈을 생성해놓았다.
그리고 실제 적용 위치에 대한 내용을 작성하도록 하겠다.

1. Module exports = { } !

firebase 8번대의 버전부터 이전과는 다르게 적용해야한다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 프로젝트 생성 후 받은 정보를 복사 붙여넣기 해주시면 됩니다.
const firebaseApp = initializeApp({
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
})
const db = getFirestore(firebaseApp)
export default db

initializeApp ({ }) 내부에 들어갈 내용으로는 이곳을 참고하면 된다.

>> 그래도 잘 모르시겠다면 이 글의 맨 마지막에 찾는 방법을 작성해놓았습니다. 확인부탁드립니다.

2. 실제 적용 위치

해당 함수를 호출할 때에는 반드시 Promise 방식인 async await을 적용해서 작성해야 한다.

import db from '@/firebase/firebaseInit.js'
import { doc, setDoc } from "firebase/firestore";

methods: {
    async uploadInvoice () {	// async 함수 를 작성     
        // 저장될 데이터 내용
        const docData = {
          ...
        }
        //await 로 담아주기 
        await setDoc(doc(db, "data", "one"), docData);
        // 후처리는 알아서!
      }
}

해당 내용을 실행 후, 파이어베이스 프로젝트로 이동하여 내용을 보면, 아래와 같이 데이터가 들어가있음을 확인이 가능하다.

끝~!

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

만약, 내 key 관련한 정보를 찾지 못하겠으면 아래의 경로로 들어가주시면 확인이 가능합니다.

본인의 프로젝트 - 앱 소개 - setting - 일반 - 아래 스크롤(내 앱)

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] 페이지 탭의 이름 설정하기, How to config the Name of page Tab. Router. (0)	2022.02.17
[ Vue.js ] vue3 를 사용하여 Drag & Drop 구현하기. 드래그 드롭 (0)	2022.02.11
[ Vue.js ] Vue-router 사용하기 + 데이터 전달하기 (바인딩) , $route, router, how to use, useRoute (0)	2022.02.08
[ Vue.js ] Computed 속성 다루기 (0)	2022.02.05
[ Vue.js ] LocalStorage 이용하는 방법, 예제 (0)	2022.02.02

vue 3, vue-cli 4.5.x 의 환경을 사용하고 있습니다.

■ LocalStorage

- 로컬 스토리지에 관하여 자세한 내용은 MDN의 링크를 확인해주시기 바랍니다.

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.

developer.mozilla.org

사용 방법은 아주 간단합니다.

localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다.

번외로 localStorage.removeItem() 로 지정하여 삭제가 가능하고, localStorage.clear()로 모두 삭제가 가능합니다.

■ 예제

//add.vue

<template>
  <div class="add">
      <input 
        type="text" 
        class="add__input" 
        placeholder="Enter your task" 
        v-model="newTodoItem"
        @keyup.enter="addTodoItem"
      />
      <button 
        class="add__button"
        @click="addTodoItem"  
      >Add</button>
  </div>
</template>

Input:text 창에서 enter를 누르거나, button을 클릭하면 addTodoItem이라는 함수가 호출되게 하였습니다.

v-model을 통하여 input에 작성되어져 있는 value와 연동하였습니다.

export default {
  data () {
    return {
      newTodoItem: ''
    }
  },
  methods: {
    addTodoItem () { 
      if(this.newTodoItem !== '') {

        const value = {
          item: this.newtodoItem,
          date: `${new Date().getMonth() + 1}/${new Date().getDate()}`,
          compeleted: false
        }

        // setItem 이라는 method 속에 key, value를 전달
        localStorage.setItem(this.newTodoItem, JSON.stringify(value))
        this.clearInput()

      }
    },
    clearInput () {
      this.newTodoItem = ''
    }
  }

}

localStorage.setItem( )은 key와 value를 전달 수가 있는데, 이를 응용하여 value에 JSON 객체를 전달하도록 하였습니다.

value라는 객체에 위에서 작성한 input의 값을 저장하고, localStorage에 데이터를 저장하였습니다.

로컬 스토리지에 저장된 것을 확인하고 싶다면, 개발자도구 -> Application -> 저장용량 -> 로컬 스토리지 에서 확인하실 수 있습니다.

좌: KEY값에 따른 VALUE, 우: JSON객체로 지정한 VALUES

저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] Vue-router 사용하기 + 데이터 전달하기 (바인딩) , $route, router, how to use, useRoute (0)	2022.02.08
[ Vue.js ] Computed 속성 다루기 (0)	2022.02.05
[ vue.config.js ] config Error - appendData 에러 해결 (0)	2022.02.02
[ Vue.js ] Arrow funciton ()=> ? why?? (0)	2022.02.02
[ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0)	2022.02.01

Webpack 이란?

html, css, javascript 등 많은 파일을 하나의 .js파일로 변환 해주는 도구
코드 관리 용이, 로딩 속도 증가, 버전 관리 용이 등의 장점이 있음.

필요조건

node, npm

구현 내용

수학문제 프로그램
create 에서 build 까지 기술
build 후에는 구동되고 있는 웹서버에 올리고 index.html 파일을 실행하는 것으로 사용이 가능함

전체 구현내용 흐름

프로젝트 폴더 생성, 이동
npm init : package.json 생성
npm i vue : npm module 로 vue 설치
npm webpack webpack-cli -D : npm module로 webpack과 cli 를 developer모드로 설치
npm i vue-loader -D : npm module로 vue-loader를 설치
npm i vue-template-compiler -D : npm module로 vue-temnplate-compiler 설치
npm i css-loader : css-loader 설치
npm i vue-style-loader : vue-style-loader 설치
npm run build : 8번 이후 코드를 작성 후 프로덕션 프로젝트 생성

Codes

// main.js

import Vue from 'vue'
import app from './App.vue'

new Vue(app).$mount('#root')

<!-- index.html -->
<!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>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>

// package.json : build 명령어 추가

"scripts": {
    "build": "webpack --watch",
  },

// webpack.config.js

// entry객체 내에 app의 path.join 지정  
const path = require('path')        
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: 'production',
    entry: {    // app => 합쳐질 파일명, main.js => webpack으로 build 할 파일
        app: path.join(__dirname, 'main.js') 
    },
    module: {    // rules를 통해 '.vue'로 끝나는 파일은 vue-loader를 사용하겠다고 정의
        rules:   // 이유: webpack은 기본적으로 javascript를 처리 App.vue 파일은 javascript 파일이 아니기 때문에, vue-loader가 처리하게 만듬
				[{ 
            test: /\.vue$/,
            use: 'vue-loader'
        },
        {
            test: /\.css$/,
            use: ['vue-style-loader', 'css-loader']
        }
    ]},
    plugins: [  // vueloader plugin을 사용하기 위해 vue-loader plugin 모듈을 가져옴
        new VueLoaderPlugin()
    ],
    output: {   // build결과물에 대한 정보. 
        filename: 'app.js', // build 파일명 
        path: path.join(__dirname, 'dist')  // 파일이 저장될 디렉터리 지정
    }
}

기타

node.js 와 vue.js 에서 모듈들을 삽입하는 방식의 차이. require, import...

// In node.js
 require, module.export

// In Vue.js
 import, export default

이렇게 직접 하나씩 module들을 다운로드 하고 삽입하는 것은 vue-cli가 잘나와서 굳이 필요하다고는 생각치 않는다.
하지만 프로젝트 기본을 설정하는 webpack.config.js 를 어떻게 구조화하는지에 따라 명령어에 따라 에러가 발생할 수도있다는 것을 한 번 더 느끼게 해주었고, vue의 config가 어떤 식으로 돌아가는 지 이해가 더 잘되었다.

그간 프로젝트 만들고 에러 해결해 나가는 것에 급급해 했지만, 하나씩 기초를 다질 때가 된 것 같아 이렇게 webpack에 대해 알아보았다.

예전에 bootstrap css-framework를 사용하면서 dist가 무엇인가? 에 대해 의문을 가졌지만 그 때에는 그것보다 구현하는데에 급급했기에 넘어갔지만, 이번 기회에 dist가 왜 발생하고, 어떤 식으로 프로젝트를 구성하는지에 대해 좀 더 잘 알 수 있었다.

저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] Arrow funciton ()=> ? why?? (0)	2022.02.02
[ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0)	2022.02.01
[경고 해결 ] WARNING in configurationThe '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. (0)	2022.01.30
[ Vue.js ] How to use Custom Directives in Vue.js 3?? \| vue.js3에서 커스텀 디렉티브 사용하는 방법 예제 (0)	2022.01.05
[ Vue.js ] v-on, @ click 이벤트로 여러 개의 메서드 실행하기, 다중 메서드 실행 하는 방법 (0)	2021.12.22

SSH로 LINUX 혹은 다른 IP에 접속해서 VSCode로 내부 파일을 수정하려고 하는데 저장할 때에 에러가 발생.

해결방법은 해당 파일이나 폴더 등에 계정에 대한 권한을 할당하는 것이다.

## /var/www/html/example/ 경로일 때
sudo chown -R  계정명  경로명

이렇게 적용하면 바로 저장 혹은 수정할 수 있게 된다.

위와 같이 /var/www/html/example/ 라는 폴더 내부의 파일들을 모두 수정할 수 있는 권한을 주고 싶을 때,

## 현재 내가 있는 위치 :  /var/www/html/
sudo chown -R  username ./example

하면 우측하단에 에러 알림이 왔던 내용이 사라지고 저장 혹은 수정할 수 있게된다.

참고

https://pinkwink.kr/1343

VSCODE로 SSH로 접근해서 편집 파일을 저장할때 permission 문제

예전에 저는 VSCODE를 이용해서 SSH로 젯슨 나노나 라즈베리파이에 접근하는 방법을 이야기했었는데요. 그렇게 쓰다보면 아주 가끔 권한 문제로 파일을 저장할 수 없다는 에러가 날 수 있습니다.

pinkwink.kr

저작자표시 (새창열림)

'유용한 정보' 카테고리의 다른 글

[ VSCode, Lint ] 에러 해결 potentially fixable with the `--fix` option (0)	2022.01.20
윈도우 bash: node: command not found 에러 해결하기 (0)	2022.01.17
[ Tistory ] Syntax Highlight 적용하는 방법 / theme을 바꿔보시는건 어떠신가요? (0)	2021.12.01
[ Windows10/11 ] 가상키보드 기본 사이즈 변경하는 방법 (0)	2021.10.26
[ Window ] 부팅 시 프로그램 실행하는 방법 (0)	2021.10.26

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. 뭐 그냥.. 그렇다고..

참고

[JavaScript] WebSocket echo 클라이언트/서버 예제

WebSocket 기반 echo 서버를 node.js 기반으로 개발하는 방법은 다음과 같습니다. 1. ws 패키지 설치 아...

blog.naver.com

저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ Socket.io ] node.js TypeError: path must be absolute or specify root to res.sendFile [failed to parse JSON] (0)	2022.01.11
[ WebSocket ] Ubuntu + Apache + nodeJS 웹소켓 구현 / 기본 포트(8080)에서 다른 포트(3000) 띄우기 (0)	2022.01.10
[node.js / ws] Websocket 사용하기, 내용 정리 및 예제 / How to use Websocket (0)	2021.12.29
[ Chart.js ] 에러해결 ■ Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. / Canvas.js 에러 (1)	2021.12.21
[ JavaScript ] function - 목록 안의 요소들 없애기 (0)	2021.12.20

사용환경 : Window10 (pro)

리눅스같은 os에서는 바로 실행하면 되지만 윈도우는 직접 그 디렉터리 내로 들어가 실행해야 한다.

/c/ProgramData/ComposerSetup/bin

특정한 조작없이 Composer의 기본 경로는 위와 같다.

이제 이 위치에서 update를 해주면 된다.

$ composer self-update

Administrator의 권한이 필요하다고 나오는데, y 를 입력해주면 된다.

버전 롤백은

composer self-update --rollback 을 작성해준다.

How to update Composer in Windows 10

I am using Composer for my PHP project. I am new to Composer. Now when I update my dependencies using composer update command, it is saying that my Composer version is too old and ask me to update....

stackoverflow.com

저작자표시 (새창열림)

'BackEnd > PHP' 카테고리의 다른 글

[ PHP ] 문자열 교체, 변경 하는 방법 str_replace(), substr_replace() (0)	2021.11.23
[ PHP, Vue.js ] 에러 해결 Access to XMLHttpRequest at blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. net::ERR_FAILED 200 (0)	2021.11.11
[ Apache2 Error ] 에러 해결 서버 구동 Apache2 'sudo service apache2 start' - Error (0)	2021.10.27
[ Node.js ] npm Error: Cannot find module 'semver' 에러 해결 하는 방법 (0)	2021.10.27
[ Npm Error ] 에러 해결 npm : Depends: node-gyp (>= 3.6.2~) but it is not going to be installed (0)	2021.10.26

1. 분산형 버전 관리 시스템
2. 이력 관리 저장소
3. 변경을 기록하는 Commit
4. Work Tree & Index

1. 분산형 버전 관리 시스템

① 동시 편집 시, 발생할 수 있는 덮어쓰기 현상을 방지할 수 있다.
-> 편집 내용이 충돌 시, 알림
② 소스코드가 변경된 이력을 쉽게 확인이 가능하다.
③ 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수 있다.

2. 이력 관리 저장소

비슷한 파일이라도 실제 내용 중 일부가 다르면 다른 파일로 인식
-> 파일을 변경사항 별로 구분해 저장이 가능

① 원격 저장소 (Remote Repository)
-> 파일이 원격 저장소 전용 서버에서 관리되며, 여러 사람이 함께 공유하기 위한 저장소
② 로컬 저장소 (Local Repository)
-> 내 PC, 개인 전용 저장소

3. 변경을 기록하는 Commit

① 파일 및 폴더의 추가/변경 사항을 저장소에 기록하려면 ‘Commit’을 해야한다.
② 시간 순으로 저장된다.

③ 각 커밋에는 영문/숫자로 이루어진 40자리 고유 이름이 붙는다.
→ 저장소에서 커밋을 구분하고 선택하는 기준이다.
④ 커밋 시, -m 옵션으로 메세지를 필수로 기입해야한다.

💡 Commit 작성팁
1번째 줄 : 커밋 내의 변경 내용을 요약
2번째 줄 : 빈 칸
3번째 줄 : 변경한 이유

4. Work Tree & Index

① 작업트리 - Work Tree
→ Git에서 말하는 작업 폴더

② 인덱스 - Index
→ 커밋을 실행하기 전의 저장소와 작업 트리 사이에 존재하는 공간
→ `스테이징(Staging)한다` 라고 표현하기도 함.

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

누구나 쉽게 알 수 있는 Git에 입문하신 것을 환영합니다. Git을 사용해 버전 관리를 할 수 있도록 함께 공부해봅시다!

backlog.com

저작자표시 (새창열림)

'Git' 카테고리의 다른 글

[ GitHub ] Collaborator 로 지정되었을 때 Repository 들어가는 방법, How to access repository when I'm a collaborator? (0)	2022.02.21
[ GitHub ] git personal access token 생성하여 적용하기 (0)	2022.02.15
[ GIT ] gitHub Repository와 연동하기. 깃 레파지토리, (0)	2021.12.15
[ GIT ] Git Hub에서 데이터 가져오기, how to get codes from my or others repository (0)	2021.12.15
[ GitHub ] Git, 연결된 git 해제 하는 방법 (0)	2021.09.01

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

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

■ Websocket (웹소켓)

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

■ Websocket이란? / Websocket의 특징

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

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

■ Websocket과 socket.io

- WebSocket과 socket.io 는 다르다.

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

참고

■ 사용 방법 - JavaScript

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

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

필수 파라미터 1개 : url
선택 파라미터 1개 : protocols
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

서버측
- 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')
})

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

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

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

참고페이지 : 웹소켓

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

저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ WebSocket ] Ubuntu + Apache + nodeJS 웹소켓 구현 / 기본 포트(8080)에서 다른 포트(3000) 띄우기 (0)	2022.01.10
[ Node.js & Javascript ] WebSocket 서버와 클라이언트 구현하기 - 짧은 예제 / How to create server & client by Websocket? (0)	2022.01.04
[ Chart.js ] 에러해결 ■ Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. / Canvas.js 에러 (1)	2021.12.21
[ JavaScript ] function - 목록 안의 요소들 없애기 (0)	2021.12.20
[ JavaScript ] js 에서 쿼리스트링 (query string, uri ) 받아오는 방법 (0)	2021.12.06

How to

1. Module exports = { } !

2. 실제 적용 위치

'FrontEnd > Vue.js' 카테고리의 다른 글

'FrontEnd > Vue.js' 카테고리의 다른 글

Webpack 이란?

필요조건

구현 내용

전체 구현내용 흐름

Codes

기타

'FrontEnd > Vue.js' 카테고리의 다른 글

SSH로 LINUX 혹은 다른 IP에 접속해서 VSCode로 내부 파일을 수정하려고 하는데 저장할 때에 에러가 발생.

해결방법은 해당 파일이나 폴더 등에 계정에 대한 권한을 할당하는 것이다.

이렇게 적용하면 바로 저장 혹은 수정할 수 있게 된다.

위와 같이 /var/www/html/example/ 라는 폴더 내부의 파일들을 모두 수정할 수 있는 권한을 주고 싶을 때,

하면 우측하단에 에러 알림이 왔던 내용이 사라지고 저장 혹은 수정할 수 있게된다.

'유용한 정보' 카테고리의 다른 글

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

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

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

■ ws 설치

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

■ Server.js

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

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

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

■ Client.html

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

■ 결과

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

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

■ 결론

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

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

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

참고

'FrontEnd > JavaScript' 카테고리의 다른 글

사용환경 : Window10 (pro)

리눅스같은 os에서는 바로 실행하면 되지만 윈도우는 직접 그 디렉터리 내로 들어가 실행해야 한다.

특정한 조작없이 Composer의 기본 경로는 위와 같다.

이제 이 위치에서 update를 해주면 된다.

Administrator의 권한이 필요하다고 나오는데, y 를 입력해주면 된다.

버전 롤백은

composer self-update --rollback 을 작성해준다.

'BackEnd > PHP' 카테고리의 다른 글

1. 분산형 버전 관리 시스템

2. 이력 관리 저장소

3. 변경을 기록하는 Commit

4. Work Tree & Index

'Git' 카테고리의 다른 글

■ Websocket (웹소켓)

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

■ Websocket이란? / Websocket의 특징

■ Websocket과 socket.io

■ 사용 방법 - JavaScript

■ 사용방법 - Node.js

'FrontEnd > JavaScript' 카테고리의 다른 글

티스토리툴바

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

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