Articles / Frontend

Frontend 글

웹 인터페이스, 브라우저, 개발 도구를 다루며 얻은 경험을 정리합니다.

017 ENTRIES

Latest first

Frontend articles

최신 발행순 · 17개

A027Frontend / Toolingbun이란? bun 설치 및 사용해보기런타임 실행이 가능하고, npm, yarn 과 같이 패키지 매니저 역할도 하며, 번들러 & 트랜스파일러 역할도 하는 bun에 대해서 설명하고, bun을 사용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다.2025. 08. 01.3 MIN
A025Frontend / HTML시맨틱 태그(semantic tag)의 종류와 사용해야하는 이유시맨틱(semantic) 태그는 HTML5에 등장한 개념입니다. 문서 구조에 의미를 부여하여 사람뿐 아니라 검색 엔진 등 기계(robot)이 컨텐츠를 이해하기 쉽도록 도와주는 역할을 합니다. 본 글에서는 시맨틱 태그의 종류를 설명하고, 왜 사용해야 하는지 설명합니다.2025. 06. 02.8 MIN
A024Frontend / JavaScriptJavaScript의 이벤트 루프(Event Loop)JavaScript는 비동기 작업을 효율적으로 처리하기 위해 이벤트 루프(Event Loop) 라는 개념을 사용합니다. 본 글에서는 이벤트 루프의 동작 원리에 대해 설명하고 코드를 예시로 어떻게 동작하는지 살펴봅니다.2025. 06. 01.4 MIN
A023Frontend / ReactReact 프로젝트에 vitest로 Unit Test 환경 구축하기Vitest를 사용하여, Vite 기반의 React 프로젝트에서 unit test 환경을 구축하는 방법에 대해 소개합니다. 그리고, CI 단계에서 자동화 테스트를 위해, Github Actions과 연동하는 방법도 같이 소개합니다.2025. 05. 30.9 MIN
A022Frontend / Next.jsutterances로 Next.js 블로그에 댓글 기능 추가하기 (블로그 테마에 따른 댓글 UI)GitHub Issues 기반의 댓글 시스템인 utterances를 Next.js에 적용하여, 자신의 블로그에 댓글 기능을 추가하는 방법에 대해 소개합니다. 그리고 블로그 테마 변환에 따른 댓글 UI도 같이 변환 되도록 하는 방법에 대해서도 같이 설명합니다.2025. 05. 29.5 MIN
A021Frontend / ReactWordle 게임 만들며 겪은 문제, 트러블 슈팅React로 Wordle 게임을 만들어 보며, 겪었던 문제와 고민에 대해 설명합니다.2025. 05. 22.10 MIN
A017Frontend / Next.jsNext.js 15에서 Google Analytics 4 설정하기Next.js 15에서 Google Analytics 4 설정하는 방법을 소개합니다. 또한, nextjs의 Script 컴포넌트에 대해 자세하게 설명합니다.2025. 05. 02.4 MIN
A016Frontend / Toolingprettier plugin으로 import 순서 자동 정렬하기React 프로젝트에서 import 문들의 순서를 자동으로 정리할 수 있도록 도와주는 @trivago/prettier-plugin-sort-imports 플러그인 적용하는 방법을 소개하고, 사용벙을 설명합니다.2025. 04. 24.5 MIN
A014Frontend / ReactTurborepo에서 React 패키지 Storybook 설정하기Turborepo를 사용하는 Monorepo 프로젝트에서, React 패키지에 Storybook을 설정하는 방법을 설명합니다. 추가적으로 tailwindcss를 적용하는 방법도 설명합니다.2025. 04. 20.9 MIN
A008Frontend / TypeScript내가 현업에서 typescript 타입 정의시 사용하는 명명 규칙Frontend 개발자로서 typescript를 사용하면서 타입을 정의할 때, 어떤 규칙을 사용하고 있는지에 대해 작성한 글입니다. 속해있는 팀과 개인 취향에 따라 다를 수 있으니 참고만 해주시면 좋겠습니다.2025. 02. 11.5 MIN
A007Frontend / Browser브라우저 렌더링 과정 Reflow, RepaintHTML, CSS, JavaScript로 만들어진 웹 페이지가 브라우저에서 어떻게 화면에 그려지는지 그 과정을 상세히 설명합니다.2025. 02. 02.8 MIN
A006Frontend / ReactTailwind CSS vs styled-components최근에는 사용할 수 있는 스타일링 도구가 많습니다. 본 글에서는 보편적으로 사용하는 Tailwind CSS와 Styled-components의 특징, 장단점, 그리고 프로젝트 상황에 따른 선택 기준을 설명합니다.2025. 01. 29.6 MIN
A005Frontend / Next.jsNext.js 15에서 PWA 설정하여 블로그 글 캐싱하기PWA는 웹 애플리케이션을 네이티브 앱처럼 동작하게 만드는 기술입니다. 본 글에서는 Next.js 15에서 Progressive Web App(PWA)을 설정하는 방법을 설명합니다.2025. 01. 16.13 MIN
A004Frontend / Next.jsNext.js에서 Dark/Light 테마 기능 구현 (화면 깜빡임 없이)최근 웹 사이트에서 거의 필수적으로 다크 테마를 구현합니다. 본 글에서는 Next.js에서 화면 깜빡임 없이 다크/라이트 테마를 구현하는 방법에 대해 설명합니다.2025. 01. 13.13 MIN
A003Frontend / ReactReact에서 FSD 프로젝트 구조 적용해보기프로젝트를 시작할 때마다 항상 폴더 구조를 고민합니다. 프론트 영역은 특히 빠르게 변화하다보니 백엔드 영역과 다르게 보편적으로 사용되는 폴더 구조가 없습니다. 여러가지 프로젝트 구조가 있지만, 본 글에서는 FSD(Feature-Sliced Design)라는 아키텍처 패턴을 소개합니다.2025. 01. 10.13 MIN
A002Frontend / ReactReact의 useEffect와 useLayoutEffect 차이React 훅에는 useEffect와 useLayoutEffect가 있습니다. 비슷하지만 다른 useEffect와 useLayoutEffect 차이에 대해 설명하고 어떤 경우에 사용하면 좋을지 설명합니다.2025. 01. 09.7 MIN
A001Frontend / Next.jsNext.js 16으로 GitHub Pages 블로그 구축하기Next.js 16의 Static Export로 GitHub Pages에 정적 블로그를 만드는 과정을 정리했어요. 이 글에서는 MDX 기반 글 작성과 코드 하이라이트, sitemap.xml, robots.txt를 활용한 SEO 설정까지 다루고 있어요.2025. 01. 07.15 MIN