2024년을 되돌아 보며

이 글은 자바스크립트로 게임을 만들면서 진행한 성능 최적화에 대한 글입니다. 성능을 1초라도 끌어올리기 위해 어떤 방법들을 시도해 보았는지 알 수 있습니다.

이 글에서는 브라우저에서 사용할 수 있는 여러 가지 유용한 디버깅 트릭을 소개합니다. 어느 정도 디버깅에 익숙하신 분들을 위한 글로 기본적인 사용법을 다루지는 않습니다. “이럴 땐 어떻게 디버깅하지?“라는 생각이 들 때 이 글을 찾아보면 도움이 될 것 같습니다.

이 글에서는 텍스트 Diff 알고리즘을 이용해 차이점을 분석할 때 성능을 개선할 수 있는 전, 후처리 방법에 대해 소개합니다.

배럴(Barrel) 파일을 많이 사용하고 계신나요? 배럴 파일은 index.js 처럼 특정 파일에서 모듈들을 다시 export 해서 모듈을 사용하는 쪽에서 import 간결하게 하도록 도와주는 패턴을 뜻합니다. 이 글에서는 배럴 파일이 성능에 미치는 영향에 대해 이야기하고 배럴 파일을 사용하지 말 것을 권고하고 있습니다

ES2023에 도입되는 새로운 배열 메서드의 사용법에 대해서 알아볼 수 있습니다.

웹 사이트를 만들 때 SVG 이미지를 어떻게 가져와 사용하시나요? 저는 JSX로 변환해 리액트 컴포넌트로 만들어 사용하곤 했었는데요. 사용하면서 혹시나 런타임 성능에 안 좋지 않을까라는 생각을 하곤 했습니다. 이 글에서는 이런 SVG를 사용하는 방식과 성능에 대한 궁금증을 해결해 주고, 다른 대안을 제시해 주고 있습니다. 이 글이 웹 사이트 성능 개선에 관심 있는 분들께 도움이 되었으면 좋겠습니다.

최근 진행한 프로젝트에서 부득이하게 Next.js Static Exports 와 next-i18next을 같이 사용해서 다국어가 지원되는 정적 웹페이지를 구성해야 했습니다. 하지만 next-i18next에서 서버사이드 런타임에 동작해야 하는 로직 때문에 에러가 발생했는데요. 해결 과정에서 이 글을 찾게 되었고 프로젝트를 성공적으로 구성할 수 있었습니다. 같은 어려움을 겪는 분들에게 도움이 되었으면 좋겠습니다.

최근 진행한 프로젝트에서 부득이하게 Next.js Static Exports 와 next-i18next을 같이 사용해서 다국어가 지원되는 정적 웹페이지를 구성해야 했습니다. 하지만 next-i18next에서 서버사이드 런타임에 동작해야 하는 로직 때문에 에러가 발생했는데요. 해결 과정에서 이 글을 찾게 되었고 프로젝트를 성공적으로 구성할 수 있었습니다. 같은 어려움을 겪는 분들에게 도움이 되었으면 좋겠습니다.

이 글에서는 Next.js 와 react-router-dom 을 이용해 SPA를 구성하는 방법에 대해 소개합니다. 일반적으로 Next.js를 사용하는 경우 내장된 라우터만 사용하는데요. 최근 저는 서비스의 특별한 이유로 react-router-dom 과 내장된 라우터를 같이 사용해야만 했고, 프로젝트를 구성하는데 이 글에서 도움을 받았습니다. 저와 같은 문제를 겪으시는 분들에게 도움이 되었으면 좋겠습니다.

이 글에서는 CSS 커스텀 프로퍼티를 활용해서 CSS 와 자바스크립트 간에 데이터를 공유하는 방법에 대해 설명합니다. 짧은 글이지만 CSS 커스텀 프로퍼티를 활용해 간단한 방법으로 요소의 스타일을 조작할 수 있다는 점을 알게 되어 공유합니다.

리액트에서 useMemo를 언제 사용해야 좋을지 고민해 보신 적 있으신가요? 저는 useMemo를 사용할 때, 정말 성능 개선에 도움이 될지 의문을 가지곤 했는데요. 이 글에서는 useMemo의 성능에 대한 가설을 세우고 이를 검증하기 위해 복잡도별로 성능을 측정해 분석합니다. 저와 같은 고민을 하신 분들께 도움이 되었으면 좋겠습니다.

Well-Known 심볼에 대해 들어보셨나요? Well-Known 심볼은 ECMAScript 스펙에 정의되어 있는 특별한 심볼들인데요. 자바스크립트에서 기본적으로 제공되는 기능을 확장 및 변경할 수 있도록 해줍니다. 이 글에서 Well-Known 심볼 각각에 대한 설명과 예제 코드를 통해 사용법을 알아볼 수 있습니다.

이 글에서는 Next.js를 사용할 때, HTML 크기가 커지는 문제와 아키텍처 개선을 통해 이를 해결한 사례에 대해 설명합니다.

이 글에서는 JavaScript로 JSON 파서를 구현하는 방법을 소개합니다. JSON 파서를 구현하는 예시를 통해 문법 다이어그램, 파서 구현 방법, 파싱 에러를 처리하는 방법들을 살펴볼 수 있습니다.

이 글에서는 사용자가 웹 페이지를 떠날 때 로깅을 위한 요청을 안정적으로 전송하는 방법에 대해 소개합니다. 웹 페이지를 종료하거나 다른 페이지로 이동할 때 HTTP 요청이 취소되는 현상과 이를 해결할 수 있는 몇 가지 방법을 소개합니다.

카카오 사내 기술 세미나 ‘Techtalk’에서 발표했던 오픈소스 활동 소개와 오픈소스 활동을 통해 개발자로서 성장했던 이야기를 공유하고자 합니다.

falsy 와 truthy는 ECMA 스펙에 등장하는 단어는 아닙니다. JavaScript 동작을 이해하기 쉽게 하기위해 사용되는 단어입니다. 번역해보면 truthy는 "참 같은 값", falsy는 "거짓 같은 값" 정도로 해석되며...

보통 어떤 값을 반환하는 함수에서 마땅히 반환할 값이 없을 때 null 또는 undefined 을 사용하곤 합니다...

이번엔, 빌더를 JavaScript 관점으로 살펴보았습니다. 이 글에서는 현대적인 언어 특징을 활용하여 JavaScript, 특히 ES6에서 빌더를 모델링 하는 세 가지 기법을 살펴보겠습니다.

2020 오픈소스 컨트리뷰톤 행사에 멘토로 참여하게 되었는데 멘티로 참여하신 분들께서 후기를 작성해 주셨다.

.....

Js13kGames는 2012년부터 매년 1회씩 개최된 HTML5 Game 개발자를 위한 대회입니다. 대회의 조건은 파일 크기를 13kb 이내로 제출해야 한다는 것과, 브라우저 상에서 동작해야 한다는 조건이 있습니다. 대회가 시작하면 게임 대회의 테마가 공개됩니다. 테마는 키워드로 주어지게 되는데 자유롭게 해석하여 게임을 만들고 제출하면 됩니다.

.....

안녕하세요. 카카오 FE플랫폼팀의 Joah입니다. 최근에 팀에서 사용하는 JavaScript 스타일 가이드를 개선하는 업무에 참여했습니다. 업무를 하며 스타일 가이드에서 사용하고 있는 ESLint에 관심이 생기게 되었고, 어떻게 동작하는지 소스코드를 분석해보다가 ESLint에 직접 컨트리뷰션 하는 경험도 하게 되었습니다. 이 과정들에서 알게 된 ESLint를 조금 더 잘 활용할 수 있는 방법에 대해 정리해 보았는데요.

이전 글에 이어서 Javascript 코딩 컨벤션 관련 업무를 하며 ESLint 규칙을 통해 알게 된 점을 정리해 보았습니다.

ESLint 규칙을 찾아보면서 몰랐던 내용이나, 흥미로운 내용을 따로 정리해 보았습니다.