Next + React Query로 SNS 서비스 만들기 강의를 듣다가 dayjs에 대해 알게 되었고, 강의 내에서의 dayjs configuration 코드를 보다가 알게 된 점이 있어 글로 남기고자 한다. (강의 내용과는 무관) dayjs는 플러그인 같은 개념이 있어서 쓰고자 하는 기능이 있으면 필요한 플러그인을 등록해줘야 한다고 한다. 예를 들면 이런 식이다. import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.locale("ko"); dayjs.extend(relativeTime); export default function Post() { // ...

requestAnimationFrame이란? 자바스크립트에서 기본으로 제공하는 Window 인터페이스의 메소드이다. 왜 사용하나요? 만약 자바스크립트로 애니메이션을 구현할 때 단순히 setTimeout 혹은 setInterval을 사용하여 특정 코드를 반복 실행시키면 여러 문제점이 존재한다. 애니메이션을 자연스럽게 만드려면 fps(1초에 몇 개의 프레임이 넘어가는지의 단위)를 신경써야 한다. 사람의 눈은 60fps에서부터 애니메이션을 부드럽다고 느낀다고 한다. 이를 위해서는 16.666 밀리세컨드마다 프레임이 바뀌도록 구현해야 한다. 하지만 setTimeout이나 setInterval을 통해 코드를 반복 실행시키면 콜백 코드 부분이 프레임 시작 시간에 맞춰 실행됨을 보장하지 못한다. 타이머 함수에서 콜백..

호이스팅이란? 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징. console.log(score); //undefined var score; //변수 선언문 위 코드는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 그러나 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 호이스팅에 의해 변수 선언이 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. ⇒ score 변수는 console.log()에서 찍을 시점에 호이스팅에 의해 이미 선언된 이후이므로, 에러가 나지 않고 undefined가 찍힌다. 변수 선..

팀프로젝트를 하면서 막판에 String과 Number를 비교하느라 생긴 에러를 디버깅하는 데 2시간을 허비했다. 너무 화가 나서 이 팀프로젝트가 끝나면 반드시 타입스크립트를 공부하겠어.... 라고 결심했었고, 팀플이 끝났다! 그래서 타입스크립트를 공부하려 한다. 공부한 강의 인프런의 타입스크립트 코리아 : 기초 세미나 강의를 수강했다. 처음에는 그냥 타입스크립트 공식문서로 부딪혀볼까 했는데, 막상 펼쳐보니 꽤나 방대하고 감이 잘 오지 않아서 강의를 찾아보게 되었다. 타입스크립트 타입스크립트는 인터프리터 언어인 자바스크립트와 다르게 컴파일 언어이다. 다만 전통적인 컴파일 언어와는 다르게 비슷한 수준의 추상화를 가진 언어(자바스크립트)로 변환되기 때문에, 트랜스파일이라는 용어를 사용하기도 한다. 타입스크립트..