시그널링 서버(signaling server)실시간 화상채팅을 구현하기 전에 Signaling 서버에 대해 알아야 합니다. WebRTC에서 시그널링 서버(signaling server)는 매우 중요한 역할을 합니다. 이 서버는 WebRTC 연결을 구성하기 위해 필요한 메타데이터와 control 메시지를 주고받는 데 사용됩니다. 시그널링 서버는 peer-to-peer 간의 초기 설정, 네트워크 정보 교환, 세션 관리 등을 합니다. WebRTC 프로토콜 자체에서 제공해주는 기능은 아니기 때문에 시스템 구조 및 상황에 맞게 개발자가 시그널링 프로세스를 구현해야 합니다. (예를들어, 화상 채팅 앱을 만든다면, 인증 및 채팅 방을 관리하기 위한 프로세스가 필요합니다. 이런 프로세스를 직접 시그널링 서버에 구현해햐..

자바스크립트(Javascript)에서 변수를 선언하는 키워드에는 var, let, const가 있습니다. 각각의 키워드는 모두 변수를 선언하는 것은 동일하지만, 스코프(scope), 호이스팅(hoisting), 재할당 가능 여부의 차이를 가지고 있습니다. 본 글에서는 이 세 가지 변수 선언을 위한 키워드의 차이점을 소개합니다. 스코프(Scope)스코프는 변수가 코드 내에서 접근 가능한 범위를 의미합니다. var, let, const는 각각 아래와 같은 스코프를 가집니다.var: 함수 레벨 스코프(function-level scope)let: 블록 레벨 스코프(block-level scope)const: 블록 레벨 스코프(block-level scope)블록 레벨 스코프(block-level scope)를..

자바스크립트(JavaScript)에서 무작위 수를 생성하는 것은 개발하면서 종종 사용하는 함수 중 하나입니다. 예를들어, 게임, 무작위 테스트 데이터 생성, 보안 분야 등에서 중요한 역할을 합니다. 본 글에서는 자바스크립트의 Math.random() 함수를 통해 어떻게 무작위 수를 생성하는지, 그리고 그 활용 방법에 대해 설명합니다. Math.random() 함수란? 자바스크립트의 Math.random() 함수는 0 이상 1 미만의 범위에서 소숫점 형태의 무작위 수를 생성합니다. 이 함수는 매개변수를 필요로 하지 않으며, 사용하는 방법도 매우 간단합니다. const randomNumber = Math.random(); console.log(randomNumber); // 예: 0.123456789 무작위..

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 언어 중 하나이며, ES6(ECMAScript 2015)는 그 사용성과 편의성을 크게 향상시킨 중요한 업데이트입니다. 특히, 배열을 다루는 데 있어 map, filter, reduce 함수는 개발하면서 가장 많이 사용하는 함수라고 해도 과언이 아닙니다. 본 글에서는 이 세 함수의 개념과 사용 방법을 설명합니다. map 함수 map 함수는 첫번째 인자로 함수를 받습니다. 배열의 요소를 순회하면서 인자로 받은 함수의 반환값을 새로운 요소로 가지며, 새로운 배열을 반환합니다. 즉, 원본 배열을 변형하지 않고 새로운 배열을 생성합니다. 예를들어 어떤 배열 요소들의 제곱수를 가지는 배열을 구한다고 하면, 아래와 같이 작성할 수 있습니다. cons..

Javascript 배열(Array)에는 every 메소드와 some 메소드가 있습니다. 개인적으로 평상시에는 find, map, filter, reduce 만큼 자주 사용하진 않지만 종종 사용하는 경우가 있습니다. every() every는 모든 배열의 항목이 조건을 만족해야만 true를 반환하고, 아닌 경우 false를 반환합니다. 예를들어, 어떤 배열의 원소들이 모두 짝수인지 확인하고 싶은 경우, every()를 사용하면 간단하게 구현할 수 있습니다. const isEven = (num) => num % 2 === 0; const nums = [2, 4, 6, 8, 10, 12, 14]; console.log(nums.every(isEven)); // true 다른 예시로 하나라도 홀수인 원소가 있..

서비스(Service)란 서비스는 NestJS에서만 사용하는 개념은 아니고, 소프트웨어 개발시 공통적으로 사용하는 개념입니다. 서비스는 보통 복잡한 비지니스 로직 또는 데이터베이스 관련된 로직을 처리할때 사용합니다. 정답은 없겠지만 종종 Controller에서 비지니스 로직을 처리하는 경우를 종종 보게 되는데, 컨트롤러는 라우팅을 정의하는 목적으로만 사용하고 복잡한 비지니스 로직은 서비스로 분리하는 것이 유지 보수 측면에서도 좋을거 같다고 생각합니다. NestJS에서의 서비스 NestJS에서 서비스를 정의할때는 @Injectable 데코레이터를 사용합니다. (Injectable 영어 단어로만 보더라도, "주입할 수 있는"로 해석할 수 있는데, Spring에서 DI와 동일한 개념) 해당 데코레이터에 의해,..

webpack이란? 웹팩(Webpack)은 모던 웹 개발에서 매우 중요한 도구 중 하나입니다. React나 Vue 등 요즘 대세인 javascript 프레임워크로 개발을 할때도 사용합니다. 간단하게 설명하면 javascript 기반의 프로젝트 번들링하기 위해 사용합니다. 번들링이라고 하면, 여러개의 나눠진 파일들을 하나의 파일로 묶어주는 역할을 합니다. (물론 html, scss 등 javascript가 아닌 파일들도 번들링이 가능합니다) pug란? html 코드를 좀 더 간략하게 작성할 수 있도록 도와줍니다. 파이썬과 같이 indent를 사용하여 depth를 구분하기 때문에 꺽새를 사용하는 html 코드에 비해 더 간략합니다. 코드로 예를들면, Google 위 html 을 pug로 작성하면, 아래와 같..

Object.assign() map 형태의 자료형 object를 2개 이상을 합치고 싶을때, Object.assign() 함수를 사용할 수 있습니다. 예를들어, 아래와 같이 2개의 object가 있을때, Object.assign() 을 사용하면 하나의 object로 합칠 수 있습니다. const userInfo = { name: '길동', age: 28 }; const address = { address: '서울특별시', addressDetail: '강남구' }; const nextUserInfo = Object.assign(userInfo, address); console.log(nextUserInfo); // Object { name: "길동", age: 28, address: "서울특별시", add..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

nextjs를 사용하는 이유 Link 컴포넌트를 사용하는 이유에 대해 알아보기 전에 CSR과 SSR에 용어 정리가 필요합니다. nextjs를 사용하는 이유 중 가장 큰 이유는 서버 사이드 렌더링(Server Side Rendering) 이라고 할 수 있습니다. 서버 사이드 렌더링은 줄여서 SSR이라고 부르기도 합니다. 반대로 React의 경우는 Client Side Rendering, CSR 입니다. 단어에서도 알 수 있듯이 SSR은 서버에서 미리 렌더링하여 html 파일을 만들어주고, 만들어진 html 파일을 사용자에게 전달하는 방식으로 동작합니다. 반면에 CSR의 경우는 javascript에 의해 클라이언트에서 화면을 렌더링한다는 차이점이 있습니다. SSR은 서버에서 미리 html 파일을 만들어주기 ..