프론트엔드 기술 블로그 최신 글

파수 AI 2026년 3차 신입 공개 채용, 접수 기간 10월 12일~25일

필터 0

선택된 필터 없음

2022년 3월 14일

프론트엔드

Android Jetpack Compose 한 번 써봤습니다

Jetpack Compose를 송금 기능에 점진 적용하며 TextField 포맷팅과 LazyColumn 무한 스크롤을 구현했습니다. 선언형 UI의 편의성은 높았지만 기존 위젯과의 UX 차이는 커스텀이 필요했습니다.

#Android#Jetpack Compose

2200

2022년 3월 3일

프론트엔드

Tailwind CSS 사용기

Tailwind 테마 확장으로 반복적인 arbitrary value를 줄이는 방법을 소개했습니다. Preflight와 클래스 우선순위, twin.macro·Headwind 활용 시 주의점을 정리했습니다.

Tailwind CSS 사용기

Tailwind의 arbitrary value를 테마 확장으로 줄이고 Preflight 동작을 점검하는 방법을 소개했습니다. 클래스 우선순위 충돌은 twin.macro, 긴 클래스 정리는 Headwind로 보완했습니다.

React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)

SWR과 React Query로 서버 상태를 Redux의 전역 상태와 분리하는 방식을 설명했습니다. 조건부 요청, 캐시 갱신, 재검증 옵션과 두 라이브러리의 사용 차이를 비교했습니다.

React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)

SWR과 React Query로 서버 상태를 선언적으로 관리하는 방식을 비교했습니다. 조건부 요청, 캐시 갱신, 재검증 옵션의 차이를 정리했습니다.

프론트엔드 테스트 팁

유닛·통합·E2E 테스트의 역할과 비즈레버 프론트엔드 적용 사례를 설명했습니다. Cypress의 실행 성능 문제와 React Testing Library·Jest 활용 팁을 공유합니다.

E2E Test를 Cypress로 해보자.

React 카운터를 대상으로 Cypress 설치부터 data-cy 기반 요소 선택과 클릭 검증까지 소개했습니다. 브라우저 E2E 테스트와 Jest 단위 테스트를 분리하는 전략을 검토했습니다.

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

Babel·Terser의 트랜스파일링과 코드 경량화 역할, Rust 기반 SWC의 동작 원리를 설명했습니다. Next.js 실험으로 SWC의 빌드 시간 단축 효과와 플러그인 호환성 제약을 확인했습니다.

#JavaScript#Next.js

000

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

2022년 2월 17일

프론트엔드

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

Babel과 Terser의 트랜스파일링·코드 경량화 역할을 초보자 관점에서 설명했습니다. Next.js의 SWC가 반복 빌드 시간을 줄일 수 있는 배경을 소개했습니다.

StoryBook을

React 컴포넌트의 다양한 초기 상태를 Storybook 스토리로 분리해 한 번에 확인하는 방식을 소개했습니다. UI 협업과 QA에 유용하지만 엣지 케이스 작성·유지 비용과 디자인 협업이 필요합니다.

IDE를 활용한 Jira 연동 및 코드 리뷰

IDE에서 Jira 이슈·브랜치·상태를 연동하는 작업 흐름을 소개했습니다. CodeStream으로 GitHub PR을 체크아웃하고 diff 기반 리뷰를 진행합니다.

[Figma]컴포넌트에 적용된 값들이 사라지지 않게 대체하기

Figma 마스터 컴포넌트 교체 시 텍스트 값이 사라지지 않도록 기존·신규 컴포넌트를 함께 두고 이관했습니다. 텍스트 출력 오류는 Resizing을 Fill container로 변경해 해결했습니다.

카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰은 CSS-in-JS와 CSS Module의 특성을 비교하고 라우팅 성능을 측정했습니다. CSS Module을 기반으로 Tailwind를 병행하되 동적 영역은 CSS Module로 보완했습니다.

Bootstrap-vue를 활용해서 새로운 컴포넌트 제작하기

Bootstrap-vue 기반 어드민에서 반복되는 UI·입력 로직을 공통 컴포넌트로 분리한 과정을 공유했습니다. 과도한 범용화 대신 숫자 입력 목적에 집중한 컴포넌트 설계를 선택했습니다.

#Vue.js#Bootstrap-vue

1100