백엔드5 [220317] socket.io 설치 & 세팅 socket.io 설치 $ npm install socket.io socket.io 의 구조 Namespace ㄴ Room ㄴ Socket socket.io는 이런 구조로 이루어져있다. Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다. socket.io 세팅 원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다. 빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아..... 그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음) ( socket.io 공식 홈페이지 : https://socket.io/docs/.. 2022. 3. 18. [220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18. [220304] 간단히 보는 AJAX 개념 [목록] 1. AJAX란? 2. 비동기통신 코드 만들기 1. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트. 간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다. 사용하는 기본 내장 객체로는 XMLHttpRequest이 있다. XML은 데이터 통신을 하는 옛날 형식을 말한다. 요즘은 JSON으로 대체되고 있다. 엘리먼트 형태인 XML보다 객체형태인 JSON으로 작성했을때 코드 길이가 1.5배가 줄어들기 때문. 통신할때 html보다는 데이터만 주고 받음. 그 데이터를 받는 형태가 옛날.. 2022. 3. 10. [220304] AJAX를 응용해서 입력값 받아오기 [목록] 1. ajax를 사용하여 로그인 정보 받아오기 2. 비동기통신 코드 만들기 3. 비동기통신으로 받아온 값을 출력하기 1. submit버튼을 누를때 form이 시작되지 않게 만들고 싶음. = submit을 누를때 액션값으로 이동이 안되게 하고싶음 = 이 곳에서 submit이나 form을 조작할 수 있어야 가능함. = 코드를 언제 실행시킬지 시점을 잡을 수 있어야함. //DomContentLoaded : body영역까지 html 렌더링이 끝난 후에 init이 실행됨. document.addListener('DomContentLoaded',init) function init(){ } 1.1 DomcontentLoaded 이벤트 작성 1.2 form 가져오기 or 조작할 수 있는 환경 만들기 1.3 d.. 2022. 3. 4. [211220] 브라우저의 구성과 html 기초 목차 1. 브라우저의 구성 2. html의 기초 3. 엘리먼트의 속성과 작성법 4. 엘리먼트의 종류 1. 브라우저의 구성 1-1. 프론트, 백엔드, css 1-2. 인터넷 창을 구성하는 2가지 네트워크(주소창) 화면을 구성하는 렌더링 1-3. 그렇다면 화면은 어떻게 만드는 것일까? 3가지로 이루어진 렌더링 : html, css, 자바스크립트 브라우저별로 개별적으로 다른 렌더링. 개발자 도구(F12) -> html을 볼 수 있음, 볼 수 있는 위치 지정 가능, 화살표를 누르면 항목별로 알 수 있음. 2. html의 기초 2-1. visual studio 작업 환경 만들기 visual studio 프로그램 설치 -> 확장 탭에서 korean 설치, live server 설치 visual studio code.. 2021. 12. 20. 이전 1 다음
