왜 이 글을 작성하게 되었나?평소 React 개발하며 Hook을 코드 분리와 책임 분리 등을 위해 자연스럽게 사용해 왔습니다. Hook이라는 기능이 생긴 후로 정말 편리하게 활용해왔는데요, 최근 면접에서 "useABC 같은 Custom Hook이 어떻게 동작하는 건지, 자바스크립트의 어떤 원리로 가능한 건지" 질문을 받았을 때 제대로 답변하지 못했습니다. 😂사용하기만 해봤지 내부 동작 원리는 깊이 생각해보지 못했던 것 같습니다. 그래서 이번 기회에 어떤 원리로 동작하는지 정리해보겠습니다.Hook이란?Custom Hook의 동작 원리를 이해하기 전에, 먼저 Hook이 무엇인지 간단히 살펴보겠습니다. React Hook은 2019년 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서도 상태와 생명..

이 글은 React에서 다국어화(internationalization, i18n)를 구현하는 방법을 다룹니다.다국어화란?다국어화는 애플리케이션을 여러 언어와 지역에서 사용할 수 있도록 설계하고 구현하는 과정입니다. 'i18n'이라는 용어는 'internationalization'의 첫 글자 'i'와 마지막 글자 'n' 사이에 18개의 글자가 있다고 해서 만들어진 약어입니다.환경 설정하기필요한 패키지 설치가장 널리 사용되는 React 다국어화 라이브러리인 react-intl을 사용하겠습니다.npm install react-intl# 또는yarn add react-intl기본 설정src/App.js 파일을 열고 다국어 설정을 위한 기본 구조를 추가합니다. 먼저 애플리케이션의 최상위에서 IntlProvider..

최근 프론트엔드 개발에서는 Next.js와 Tailwind CSS 조합이 채용공고에서 자주 등장할 만큼 인기 있는 기술 스택으로 자리 잡았습니다. 특히 AI 서비스인 바이브코딩과 같은 프로젝트에서도 이 두 기술을 함께 사용하는 사례를 쉽게 찾아볼 수 있습니다. 이런 흐름을 보며 저 역시 Next.js와 Tailwind CSS를 본격적으로 공부하게 되었고, 그 과정에서 Tailwind CSS에서의 조건부 스타일링 방법에 대해 궁금증이 생겼습니다.기존의 CSS-in-JS 환경에서는 props를 활용해 손쉽게 조건부 스타일을 적용할 수 있었지만, Tailwind CSS는 클래스 기반 스타일링 방식이기 때문에 조건부 스타일을 적용할 때 문자열 안에서 로직을 처리해야 하는 불편함이 있었습니다. 특히 백틱(`)을 ..

React를 사용하다 보면 간단한 HTML 태그, 예를 들어나 같은 링크를 포함한 텍스트를 직접 렌더링해야 하는 상황이 생깁니다.const text = '궁금하시다면 매뉴얼을 참고해 주세요.';return ; // 이렇게 하면 텍스트 내부의 `` 태그가 실제 링크로 렌더링됩니다. dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격(XSS: Cross Site Scripting)에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 ..

Bun이란?Bun은 2023년 9월에 1.0 버전이 출시된 JavaScript 런타임으로, Node.js의 드롭인(drop-in) 대체를 목표로 합니다.Bun은 Zig언어로 개발되었으며, 구글 Chrome의 V8 엔진 대신 Apple의 JavaScriptCore엔진을 사용합니다. 이로 인해 속도와 실행 최적화에 강점을 가집니다.V8과 JavaScriptCore의 차이점특징V8(Chrome)JavaScriptcore(Safari)실행 속도 최적화고성능 JIT(Just In Time) 컴파일러, 빠른 실행빠른 초기 실행, 경량화메모리 사용비교적 높은 메모리 사용량최적화된 메모리 관리호환성Node.js와의 높은 호환성Apple 생태계 중심 최적화왜 0.xx 버전은 주목받지 못했을까?Bun이 처음 등장한 0.x..

유령 의존성이란?개발 하다 보면, 어떤 패키지는 package.json에 명시적으로 추가한 적이 없는데도 프로젝트에 사용할 수 있는 경우가 있습니다. 또는 npm install을 했을 때 예상보다 더 많은 패키지가 설치되는 경우가 있습니다. 이런 현상을 유령 의존성이라고 부릅니다.📌 유령 의존성이 발생하는 주요 원인직접 설치하지 않은 패키지가, 하위 패키지를 통해 설치되면서 마치 직접 의존하는 것처럼 보이는 경우패키지 매니저에 따라 의존성 트리가 다르게 구성되는 경우=> npm은 90개의 하위 폴더, pnpm은 9개의 하위 폴더가 생김 📌 예제 재현mkdir npm-test && cd npm-testnpm init -ynpm install react react-dom typescript eslintm..