개발 일지

debounce와 throttle은 둘 다 자바스크립트에서 이벤트 처리를 최적화하기 위해 사용되는 기술이다. 이 두 가지는 이벤트 호출을 제어하는 방식에 차이가 있기 때문에, 각각의 상황에 맞게 적절하게 사용해야 한다. 두 차이점을 설명하기에 앞서 이벤트에 대해 짧게 짚고 넘어가자. 이벤트란 브라우저에서 발생할 수 있는 일련의 action 이다. 예를 들면, 브라우저의 창을 줄이면 "resize" 이벤트가, 버튼을 클릭하면 모달 창이 뜨는 것은 "click"이벤트가 발생하는 것이다. 아마도 우리의 최대 관심사는 이벤트 핸들러 함수(event handler function)에 구현된 로직이 브라우저에서 어떻게 작동되느냐 일 것이다. 이 handler function은 창 사이즈를 조절하여 UI 요소를 수정..

Socket IO 실시간, 양방향, 이벤트 기반의 통신을 지원해 주는 프레임워크 websocket은 방법 중 하나이다. 설치 방법 : npm i socket.io socket.io는 재연결 등의 부가기능이 있다. 웹소켓을 사용할 수 없을 때의 대안이 있다. socket.io를 백엔드에 설치한 것 처럼 프론트에서도 연결을 할 수 가 있는데, 브라우저에 socket.io를 설치해야 한다. 왜냐하면, 브라우저가 주는 웹소켓은 socket.io와 호환이 안된다. socket.io가 더 많은 부가기능을 가지고 있기 때문이다. 방법은 localhost:3000/socket.io/socket.io.js 라는 기본적으로 제공되는 url을 활용하면 된다. server.js import express from "expre..

chat 기능 구현하기, nickname value 추가하기 백엔드로 보내야 할 데이터 : 닉네임, 메세지 그런데, 백엔드는 이 두 개의 데이터를 알아서 구분하지 못한다. 따라서 분기 처리하는 코드가 필요해 보인다. 메세지를 구분하기 위해서 type 설정을 한다. JSON 형태로 type과 payload를 함께 보내는 것이 좋겠다. { type: "message", payload: "Hello", }, { type: "nickname", payload: "Anonymous", } JSON.stringfy로 string형태로 백엔드로 보내주면, 백엔드에서 JSON.parse를 통해 객체 형태로 출력이 가능하다. makeMessage 함수(app.js) const makeMessage = (type, pay..

🔖 WebSocekt( ) 링크 : https://developer.mozilla.org/ko/docs/Web/API/WebSocket 웹소켓 객체 생성하기 Ex) const socket =newWebSocket('ws://localhost:8080'); 이벤트리스너를 사용할 수 있다. 종류 : connection, close, error, headers, listening 그 중 connection을 사용할 건데, 연결 되었으면, 어떤 이벤트를 실행해~ 와 같은 의미이다. 이 메서드는 콜백으로 socket을 받는데, 쉽게 설명하자면 브라우저에 연결된 건너편의 누군가이다. socket을 이용하면 메세지를 주고 받고 할 수 있게 된다. 프론트 단 (app.js)에서도 socket을 정의, 백 단(serve..

이제까지 했던 세팅들을 정리해보자면, 다음과 같다. (1) pug로 뷰 엔진 설정 (2) express로 template이 어디에 있는지 지정(정적 리소스들) (3) public url을 생성해서 유저에게 보여줌 (4) home.pug를 렌더링해주는 라우터 handler 설정 약간의 편리한 스타일 적용을 위해 MVP.css를 html에 추가한다. (link=stylesheet)사용 https://andybrewer.github.io/mvp/ MVP.css - Minimalist stylesheet for HTML elements A decent MVP in no time More building and less designing with "set and forget" styling. "Uber for X..

2. 프론트 세팅 폴더세팅 - src/public 폴더 생성 ㄴ js 폴더 생성 ㄴ app.js 파일 생성 - src/views 폴더 생성 ㄴ home.pug 파일 생성 home.pug에서 일반적인 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 RTC body h1 It works! pug 세팅을 위해 server.js에서 import express from "express"; const app..

1. 백엔드 세팅 npm init -y 명령어를 실행하면 package.json이 생성된다. scripts, main은 삭제해주고, 기타 필요한 부분만 작성해준다. { "name": "zoom", "version": "1.0.0", "description": "Zoom Clone using WebRTC and WebSockets", "license": "MIT" } nodemon 설치 npm i nodemon -D * babel.config.json 파일 생성 * nodemon.json 파일 생성 * src 폴더 생성 ㄴ server.js 생성 바벨설치 npm i @babel/core @babel/cli @babel/node @babel/preset-env -D .gitignore에 /node_modul..

원본 배열을 변경하지 않고 참조만 하는 메서드 join() slice() concat() toString() 원본 배열을 변경하지 않고 반복적으로 참조만 하는 메서드 forEach() map() filter() every() some() reduce() reduceRight() entries() keys() values() 원본 배열을 변경하는 메서드 push() pop() shift() unshilft() fill() reverse() sort() splice() [참고] forEach와 map의 차이 - Array.prototype.forEach() 배열의 모든 요소가 한 번씩 순회하면서 제공된 함수를 한 번 실행한다. 각 배열의 요소에 특정한 작업을 수행할 때 사용된다. map과의 차이점은 배열을 ..