새로운 기술 블로그가 추가되었어요
조건문이 많은 Composite action을 Map 기반 JavaScript action으로 리팩터링하는 과정을 정리했습니다. @actions/core, @actions/github와 캐싱을 활용해 GitHub Actions에서 안정적으로 실행하는 방법도 다뤘습니다.
View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.
Vue Transition으로 버튼과 입력 영역의 등장·퇴장 애니메이션을 자연스럽게 구현한 경험을 소개했습니다. `v-if` 전환, `opacity` 조정, `mode="out-in"` 적용 과정을 정리했습니다.
카카오페이 카페톤 1등 수상작인 변수명 추천 봇의 개발 과정을 소개합니다. 챗봇 형태로 변수명 후보를 제안하는 도구를 만든 사례입니다.
병원 상세 웹뷰를 사례로 웹-앱 통신 방식과 OS별 UX 차이를 정리했습니다. 또한 크로스 브라우징과 유지보수 개선 포인트까지 함께 다뤘습니다.
하이 레벨 언어와 동적 타입 언어의 특징을 비교하며 아키텍처 관점의 장단점을 정리했습니다. 값 타입, 레퍼런스 타입, Variance, 덕 타이핑을 통해 표현력과 제약을 함께 설명했습니다.
정확한 명명과 시각적 코드 구조화를 통해 유지보수성과 협업 가독성을 높인 사례를 소개했습니다. 표·목차·용어·각주 형태의 비유로 조건문과 로그 처리 코드를 개선했습니다.
바닐라 JavaScript로 Fragment 해시 기반 SPA 라우터를 구현하는 과정을 소개했습니다. 경로 등록, 페이지 전환, 프로그래밍 이동, path parameter 추출을 다뤘습니다.
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
바닐라 JS로 해시 라우터를 직접 구현하는 과정을 설명했습니다. 경로 매핑, navigate, path parameter 추출까지 확장하는 방법을 다뤘습니다.
리팩터링의 의미와 코드 악취, 적용 시점을 정리한 글입니다. 함수 추출부터 조건문 분해까지 기본 기법을 예시와 함께 소개했습니다.
리팩터링을 기능은 그대로 두고 코드 구조를 개선하는 방법으로 정리했습니다. 함수 추출, 조건문 분해, 특이 케이스 추가 같은 기본 기법과 적용 흐름을 소개했습니다.
XState로 FSM의 상태, 이벤트, 전이와 컨텍스트를 분리하는 방법을 장바구니 예제로 설명했습니다. React 훅, 가드, 액션, 비동기 서비스로 복잡한 UI 흐름을 선언적으로 관리합니다.
XState로 유한 상태 기계의 개념과 사용법을 장바구니 예제로 설명했습니다. React에서 상태, 컨텍스트, 액션, 가드를 어떻게 연결하는지 정리했습니다.
카카오엔터테인먼트 신입 FE 개발자의 온보딩부터 페이지 파트 배정까지의 과정을 소개했습니다. 원격 협업 문화와 리뷰·협력자 중심 개발 방식을 공유합니다.
