Dev

FSD를 위한 ESLint 플러그인 개발 일지

11개월 전

FSD 프로젝트를 진행하면서, 수동으로 설정하는 데 불편함을 느꼈다. 제대로된 플러그인이 존재하지 않았고, 개발을 편하게 하기 위해 ESLint 모듈을 만들어보기로 했다.

캔버스와 네이버 지도 API를 연동하기 위한 과정

약 1년 전

유튜브와 넷플릭스, 사파리와 크롬에서 다르게 동작하는 이유

6개월 전

사파리에서 4k가 되는 넷플릭스는 크롬에서는 1080p로 제한됩니다. 반대로, 유튜브는 크롬에서도 4k가 가능하죠. 이유가 무엇일까요? 살펴봅시다.

이벤트 처리에서 옵저버와 이벤트 핸들러의 차이를 딥다이브 해보자!

7개월 전

이벤트 처리에서 옵저버와 이벤트 핸들러의 차이를 살펴보고, 언제 무엇을 사용해야하는 지 명확한 근거를 제시합니다.

리액트는 프레임워크인가? : 부채가 아닌 투자를 위한 질문

약 1년 전

리액트가 프레임워크인가? 라는 의문에 대한 글입니다. 또한 이를 통해 기술 부채가 아닌 기술 투자가 될 수 있게 근거를 마련하는 행위의 중요성을 서술합니다.

자바스크립트에서의 순환 참조 문제

약 1년 전

자바스크립트에서 순환 참조 문제가 무엇인지, 이를 해결하는 방법을 알아보자.

해보면서 느낀 리액트 성능 최적화에 대한 고찰

약 1년 전

항해 플러스를 진행하면서 리액트 성능 최적화를 진행했습니다. 그 과정에서, 최적화를 하는 방법을 배울 수 있었습니다. 최적화 기법을 도입한 결과 성능이 좋아지기도 했지만, 저하된 경우도 있었습니다. 이에 대한 기록입니다.

리액트 개발자 도구 탐구

약 1년 전

최적화를 하기 위해서는 성능을 측정하는 방법을 알아야 한다. 동시에, 이게 어떻게 렌더링이 되며, 어떤 과정을 거쳐서 변화가 되는지도 파악할 필요가 있다. 이를 도와주는 개발자 도구에 대해서 알아보자.

리액트 훅이란?

약 1년 전

리액트 훅이 무엇인지 이해하고, 리액트 훅이 어떤 문제를 해결하고자 하는지 알아봅니다.

합성 패턴(Composition pattern)으로 살펴보는 리액트 컴포넌트 설계 핵심

약 1년 전

리액트에서 쓰이는 합성이라는 개념의 핵심이기에 자주 접했고, 함수를 바탕으로 한 리액트를 통해 일상적으로 사용했으면서도 크게 와닿지 않았던 것 같다. 이번에 프로젝트를 진행하면서 몇가지 컴포넌트들을 직접 구현하면서 이 개념의 의미가 받아들여지게 되었다. 지금부터 내가 이해했던 개념을 정리할 겸, 정리한번 해보고자 한다.

MDX 컴포넌트 예시

약 1년 전

MDX에서 사용할 수 있는 다양한 컴포넌트와 스타일 예시입니다.

마크다운 스타일 테스트

약 1년 전

모든 마크다운 문법과 스타일을 테스트하는 페이지입니다.