JavaScript

socket.io 란 서버와 클라이언트가 상호작용하는 웹 서비스 통신 기술인 WebSocket을 간단하게 사용할 수 있도록 도와주는 모듈이다. 서버와 클라이언트는 아래 코드와 같이 연결하여 서로 통신할 수 있도록 만들 수 있다.(아래 서버 코드 예시는 Node.js에서

웹 브라우저에 애니메이션을 구현하는 방식에는 여러가지가 있다. CSS에서 transform, transition 속성을 부여할 수도 있고, JavaScript에서 setTimeout(), setInterval(), requestAnimationFrame() 등의 메소드

Socket.IO란 이벤트를 기반한 서버와 브라우저 간의 양방향 통신을 돕는 라이브러리이다. http는 일반적으로 양방향 통신이 불가능한데, polling, long-polling, WebSocket 등의 시스템 디자인을 사용하여 양방향 통신이 가능한 것처럼 구현할 수

reflow / repaint

JavaScript는 싱글 스레드로 동작한다. 싱글 스레드로 동작한다는 것은 stack이 하나밖에 없다는 뜻이고, 이럴 경우 동시에 하나의 작업만 처리할 수 있다. 브라우저에서 동작하는 JavaScript의 특성 상 한 번에 하나의 작업만 처리할 수 있다면 작업 속도가

SOP는 Same Origin Policy의 약자로 어떤 출처에서 가져온 리소스가 다른 출처의 리소스와 상호작용하는 것을 방지하는 정책이다. 악의적으로 한 웹사이트에서 유저 정보 등의 리소스를 접근하여 악용하는 것을 막아주는 보안 정책이다. 이 정책으로 인해 JavaS

JavaScript에서의 object는 함수이다. 콘솔 창에 Object를 입력해보면 아래와 같이 값이 나오는 것을 볼 수 있다.object가 함수라는 사실은 JavaScript에서의 Prototype을 이해하는데 있어서 중요한 사실이다. 함수가 생성될 때에는 해당 함

한 input 박스에 엔터 없이도 검색 결과를 나타내는 기능을 구현한다고 가정해본다. 이럴 경우 아래와 같이 input 박스의 객체에 input 또는 change 이벤트리스너를 추가하여야 한다.한 유저가 이 기능을 사용하여 벨로그를 검색하는 상황을 가정해보면, 유저가

진행중인 프로젝트에서 사용하는 MobX의 observable 동작 원리에 대해 간단하게나마 기록해두고자 해서 쓰게 된 글이다. (MobX v6 기준)MobX 상태 저장소를 생성하는 방법은 아래와 같이 세 가지가 있다.makeObservablemakeAutoObserva

이전글에서 MobX의 makeObservable 과 makeAutoObservable 함수에 대해 기록해두었다. 이 글에서는 observer 함수가 반환하는 컴포넌트 및 MobX 상태 변경 시 재렌더링하는 방식에 대해 간단히 기록해보려 한다.(혹시나 이 글을 보시는 분

정말 기본적이지만 부끄럽게도 잘 모르던 내용이다. JavaScript에서의 배열은 배열이 아니다. JavaScript에서의 배열은 객체이다. 이런저런 개발을 하면서 조금만 깊게 고민해봤으면 바로 알 수 있던 사실을 당연하게만 여기다 어느 순간 의문점이 들었었다.객체와