맨틀 이야기

고차 함수(higher-order function)는 함수를 인자로 받거나 함수를 리턴값으로 주는 함수를 말한다. 함수를 인자로 받는 경우는 많이 보고 써봤는데, 함수를 리턴하는 함수는 실전에서 써 본 적이 없어서 확실히 알아보려고 한다. Closure함수가 함수를 리턴할 경우, 그 리턴된 함수를 어떻게든 사용하려면 일단 변수에 저장해야 한다. 변수에 저장한 뒤에 해당 변수를 함수로 호출하면 고차 함수가 리턴한 함수가 실행된다.function greet() { return function () { console.log("hello, world"); };}const sayHello = greet(); // sayHello 변수에 저장sayHello(); // "hello, world" 출력 이렇게..

자바스크립트에는 프록시라는 객체가 있다. 어떤 객체를 생성할 때, 그 객체가 만들어지는 과정 도중에 난입해서 객체의 요소들에 영향을 줄 수 있는게 프록시다. 프록시 객체는 변형할 타겟 객체와 변형 액션을 수행할 핸들러를 인자로 받아 생성한다:const proxyObject = new Proxy(target, handler); 핸들러 함수는 트랩(trap)이라고도 부르며, 여러가지 함수가 담긴 객체로 전달한다. 우리는 트랩을 통해 타겟 객체의 값이나 메소드를 바꿔 프록시 객체를 만들게 된다. 몇가지 주요 트랩 함수들을 알아보자. handler.get()타겟 객체의 요소에 접근할 수 있는 함수로, 타겟 객체가 가진 요소의 값을 바꿀 때 쓴다. 타겟 객체(target), 타겟 객체의 요소(property), ..

이제까지 계속 fetch만 고집하다가 드디어 Axios를 써보기로 했는데, 시작하자마자 에러와 씨름하게 됐다. 어째선지 axios 패키지 자체를 import할 수 없는 모양이다. 검색해보면 CDN으로 해결하는 방법은 나와있지만, 패키지 설치만으로는 이렇다할 해결책을 찾을 수 없었다. 혹 프레임워크에서도 문제일지 실험해볼 겸 리액트와 Next.js에서도 써봤더니 에러 없이 잘 import되는 것을 확인했다. 프론트엔드 프레임워크를 사용하면 import 문제가 없고, 바닐라 JS 환경에서 패키지만 설치해 쓰려고 하면 모듈을 찾을 수 없다는 에러가 뜬다. 이 부분을 바탕으로 해결책을 더 찾아보기로 했다. 파일을 번들링해도 문제가 발생할지 확인해보기 위해 먼저 바닐라 JS 환경에 웹팩을 설치해 번들링을 해봤다...

Vue는 선언적 렌더링(declarative rendering)에 중점을 두고 있는 프론트엔드 프레임워크다. Vue 앱을 굴러가게 만드는 기본적인 building block에 대해 알아보자. SFC 파일Vue는 리액트와는 전혀 다른 고유 문법을 사용한다. Vue 컴포넌트는 Single-File Component(SFC)라고 하는 하나의 단독적인 파일로 이루어진다. 확장자 .vue를 붙여 저장하는 SFC 파일에는 자바스크립트, HTML 태그, CSS 스타일이 다같이 들어가 아래와 같은 구조를 이룬다. {{ username }} 상태 저장Vue 컴포넌트의 상태는 reactive()나 ref()로 저장할 수 있다. reactive()는 객체만 저장할 수 있는 반면, ref()는 제한 없이 모든 데이터 타..

react-calendar 라이브러리를 사용해 달력 컴포넌트를 만들 때, locale을 한국으로 설정하면 아래 이미지와 같이 모든 날짜 뒤에 "일"이 기본값으로 붙은 다소 난잡한 UI가 탄생하게 된다.import Calendar from "react-calendar"; 다행히도 달력에서 문자열을 지우는 건 매우 간단했다. react-calendar에서 제공하는 Calendar 컴포넌트는 CSS 스타일링은 물론 달력에 보이는 모든 텍스트를 커스터마이징할 수 있게 해준다. 일, 월, 연도는 각각 formatDay, formatMonth, formatYear prop으로 타겟 날짜의 string 값을 리턴하도록 함수를 전달하면 된다.import Calendar from "react-calendar"; date..

클린코딩 철학을 따라 코드를 모듈화하고 기능대로 분리해서 사용하다 보니 import할 컴포넌트나 메소드들이 점점 늘어가는 것을 문득 체감했다. 파일 최상단에 import 줄이 길어지면 export ... from을 써서 코드를 정리하는 것을 고려해보자.import한 즉시 exportexport ... from은 다른 파일에서 코드를 import함과 동시에 해당 파일에서 다시 export하는 문법이다. export ... from을 사용하면 여러 모듈에서 import해온 함수, 상수, 컴포넌트 등을 한 곳에서 한꺼번에 export할 수 있다.// aggregator.js// 여러 파일에서 import해온 것을 export...from을 써서 한 파일에서 export하도록 함export { 유틸함수1 } f..

setInterval 함수를 사용해 카운트다운 타이머를 구현한 내 웹앱을 모바일에서 실행했을 때 치명적인 오류를 발견했다. 타이머를 실행한 상태에서 모바일 기기의 화면을 끄면, 화면이 꺼진 상태로 있는 동안에는 setInterval 함수도 멈춰버리는 것이다. 당연히 화면이 꺼진 상태에서도 setInterval 함수로 인해 카운트다운이 계속 진행되고 있을 거라고 생각했는데, 실제로는 타이머의 시간이 흐르지 않고 멈춘 상태였다가 모바일 기기의 화면이 다시 켜지면 그때 이어서 동작하도록 돼있었다. 찾아보니 모바일 기기에서는 배터리 수명 보존과 퍼포먼스 향상을 위해 setInterval, setTimeout과 같은 시간과 관련된 함수들을 스로틀링한다고 한다. 화면이 꺼져있는 동안에는 동작을 일시정지 시켰다가, ..

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