신비한 개발사전

참여하고 있는 팀 프로젝트에서 계획에는 없었던 실시간 채팅 기능을 만들기로 결정됐다. 노마드코더에서 Socket.IO로 Zoom 클론코딩을 해봤던 경험이 있어서 자신있게 프론트에서는 내가 웹소켓을 맡겠다고 했으나... 서버쪽 구현을 맡은 멤버가 처음 들어보는 STOMP로 웹소켓을 구현했다고 해서, 같은 웹소켓이지만 완전 새로운 공부를 하게 됐다. STOMP란?STOMP는 Simple(또는 Streaming) Text Oriented Messaging Protocol의 약자로, 웹소켓(WebSocket) 환경에서 돌아가는 HTTP 서브프로토콜이다. 메세지 기반 전송에 특화되어 있어서 실시간 채팅 서비스 등을 구현할 때 사용하기 좋다고 한다. STOMP의 구독—발행 구조가 이해하기 쉬워서 다행히 사용법을 빨..

Intersection observer는 특정 DOM 요소가 트리거로 지정된 다른 DOM 요소와 만났을 때 함수를 실행시켜주는 웹 API 기능이다. 트리거로 지정한 DOM 요소가 있어야 제대로 작동하는 만큼, 이런저런 상태 변화 때문에 리렌더링이 자주 일어나는 리액트 프레임워크에서는 유의해야 할 pitfall이 있다. 사라진 타겟Intersection observer를 활용하기 위해서는 observer가 바라볼 타겟 요소가 필요한데, 리액트에서는 일반적으로 querySelector 대신 useRef 훅에 많이 의존하게 된다.const Component = () => { const ref = useRef(null); // DOM 요소를 저장할 변수 return 내 컴포넌트; // DOM 요소에 ref ..

인터넷은 컴퓨터 기기가 타지에 위치한 다른 기기와 서로 통신할 수 있도록 하나의 장을 만들어주는 시스템이다. 컴퓨터는 프로토콜이라고 하는 표준을 사용해 외부 기기와 통신할 수 있고, 라우터를 통해 여러가지 데이터 또한 주고 받을 수 있다. 라우터는 컴퓨터 네트워크를 연결해주는 장치로, 인터넷에서 데이터가 어떻게 이동할지를 결정한다. 라우터는 패킷(packet)이라고 하는 작은 데이터 조각들을 출발지에서 목적지까지 보내주는 역할을 하는데, 반드시 정해진 루트를 따라 이동시키는 것은 아니다. 네트워크의 상태에 따라 데이터를 전송할 준비가 된 라우터에게 데이터를 포워딩한다. 라우터가 어디로 데이터 패킷을 보내면 되는지는 TCP와 IP 프로토콜이 알려준다. TCP/IPIP(internet protocol)는 인..

한 변수에 저장된 객체(array 또는 object)를 다른 변수에도 저장할 땐 유의해야 할 점이 있다. 단순한 대입 연산자로 변수 x 자체를 변수 y에 할당해주면, 변수 x와 y는 같은 메모리 공간에 저장된 데이터를 불러오게 된다. 새로운 메모리 공간에 객체를 저장한 것이 아닌, 기존과 동일한 메모리에서 데이터를 불러오는 변수만 하나 더 생긴 것이다.let x = [1, 2, 3];let y = x;console.log(x); // [1, 2, 3]console.log(y); // [1, 2, 3]y[0] = 5;console.log(x); // [5, 2, 3]console.log(y); // [5, 2, 3] 위 예시에서 y 변수에 [1, 2, 3]의 값을 가진 x를 저장했다. 콘솔창에 값을 찍어보..

코드는 여러 파일로 분리해서 작성하는 것이 좋다. 어떤 코드가 무슨 역할을 하는지를 명확한 파일명과 함께 체계적으로 저장하면 다른 개발자와 협업할 때 도움되는 것은 물론이고, 나중에 스스로 짠 코드를 돌아볼 때도 그때 당시에 로직을 짠 의도와 방향성을 빨리 파악할 수 있다. 코드가 저장된 하나의 파일을 모듈이라고 한다. 기본적으로 모듈별로 코드를 분리하면 변수나 함수는 생성된 모듈 내에서만 참조할 수 있지만, 다른 모듈에서도 참조할 수 있도록 내보내는 것 또한 가능하다. 한 모듈 안에 있는 코드를 외부에서 사용할 수 있도록 내보내는 것을 export라 하고, 반대로 다른 모듈에 있는 코드를 불러오는 것을 import라 한다. 자바스크립트에는 CommonJS와 ESM이라고 하는 두가지의 모듈 유형이 있다...

자바스크립트의 reduce 메소드는 배열을 아예 다른 형식의 데이터로 가공하는 데에 매우 유용한 함수다. 배열의 각 인덱스를 차례대로 돌면서 함수를 실행하고, 그 결과값을 따로 저장해두었다가 다음 인덱스의 결과값과 합치는 것이 reduce 메소드의 핵심이다. 아래는 reduce 메소드의 기본적인 구성이다.array.reduce((종합값, 현재값, 인덱스) => { 함수 }, 시작값); reduce 메소드는 두가지 파라미터를 필요로 한다: 각 인덱스마다 실행할 함수와 시작값이다.reduce 메소드가 실행시키는 함수는 지금까지 저장한 종합값, 현재 인덱스에 들어있는 값, 그리고 현재 인덱스 값을 인자로 받는다. 이 함수는 다음 인덱스에서 사용할 종합값을 리턴해야 한다.시작값은 reduce 메소드를 실행했을 ..

동적 언어자바스크립트는 동적 언어라고 한다. 데이터의 타입이 제대로 정의되었는지를 코드가 실행중일 때 확인한다는 것이다. 정적 언어인 C언어나 자바(Java)는 코드를 실행하기 전에 컴파일 단계에서 타입을 확인하기 때문에, 잘못 정의된 타입이 있으면 코드를 컴파일하기 전에 에러가 발생한다. 사전에 타이핑 실수로 인한 코드 오류를 발견할 수 있다. 하지만 자바스크립트는 타입 정의를 미리 확인하지 않는다. 따라서 코드 로직에 데이터 타입을 잘못 사용하는 허점이 있으면 자바스크립트 코드가 한창 실행되고 있을 때 에러가 발생하기 십상이다. 타입스크립트(TypeScript)타입스크립트는 자바스크립트도 정적 언어처럼 컴파일할 때 타입 체킹을 할 수 있도록 자바스크립트에 타입을 추가한 언어다. 타입스크립트로 코드를 ..

알고리즘 문제와 씨름하던 도중, 어떻게 동작하는지 이해할 수 없는 함수가 있어서 챗GPT한테 물어보기로 했다.function solution(n){ var count = 1; var sum=0; while( count=n ){ sum = sum + n--; count++; } return sum;} 1부터 인자로 받은 n까지의 숫자를 더해주는 함수다. while문 안의 `sum = sum + n--`가 `sum += n` 와 `n - 1`를 합친 것과 같은 동작을 한다는 것은 알겠는데, while문이 왜 무한으로 반복되지 않는지가 이해되지 않아서 챗GPT의 도움을 받기로 했다. 먼저 위 코드가 무엇을 하는지 포괄적인 질문을 해봤다. 단계별로 무슨 일이 일어나는지 친절하게 설명해주지만,..