FE

| DOMPurify로 XSS 취약점 완벽히 해결하기 안녕하세요 팡일입니다. 현재 제작중인 회고 서비스, 'Relog'에서 발견한 취약점 중 하나를 개선한 이야기를 공유해보려고 합니다. 이전에는 임시 주석을 달아서 해결하려고 했지만, 이 부분으로 해…

| 서론 안녕하세요 팡일입니다. 프론트엔드 프로젝트를 일정 수준 이상 키우다 보면 자연스럽게 ‘코드 품질’이라는 벽을 마주하게 됩니다. 기능은 돌아가는데, 코드 스타일은 들쑥날쑥하고, 타입은 점점 any의 바다로 밀려오고, 조금만 방심하면 오류가 사…

| 서론 안녕하세요! 팡일입니다. 프로젝트에서 마크다운을 렌더링하는 기능을 만들다 보면, 체크박스(To-do 리스트)가 필요해지는 순간이 한 번쯤은 찾아옵니다. 리로그(Re-Log)도 마찬가지였습니다. 사용자들이 회고를 작성할 때, 작업 목록을 체크…

| 서론 안녕하세요, 팡일입니다. 현재 오픈 미션으로 re-log라는 서비스를 개발하고 있는데요? re-log는 사용자가 꾸준히 자신의 생각과 감정을 기록하며 성장할 수 있도록 돕는 회고 서비스입니다. 서비스를 운영하면서 “지금 사용자들이 얼마나 활…

| 서론 안녕하세요 팡일입니다! 지난 Vitest를 활용한 컴포넌트·유닛 테스트에 이어서, 이번에는 Playwright 기반의 E2E(End-to-End) 테스트 구축기를 공유해보려고 합니다. | Playwright 시작 준비 — 설치부터 기본 실행…

| 가볍고 정확한 테스트로 개발 경험을 한 단계 끌어올리기 안녕하세요! 팡일입니다. 이번 글에서는 작고 빠른 단위 테스트(Unit Test)와 컴포넌트 단위 테스트(Component Test)를 책임지는 Vitest 기반의 테스트 환경을 다뤄보겠습니…

| 서론 — “내 회고, 어떻게 ‘잘’ 공유할 수 있을까?” 안녕하세요 팡일입니다! Re-Log 프로젝트를 만들면서 가장 먼저 떠올린 기능 중 하나가 바로 공유였습니다. “내 회고를 다른 사람에게 링크로 건네줄 수 있다면 얼마나 편할까?” 처음엔 단…

| 서론: “이 화면에서는 버튼이 비활성화되어야 해요.” 안녕하세요 팡일입니다. 웹 애플리케이션을 만들다 보면, 같은 UI 컴포넌트를 여러 맥락에서 사용해야 하는 경우가 정말 많습니다. 제 회고 기록 서비스 re-log의 감정 선택(Emotion S…

| 서론: “이 버튼 색깔만 살짝 바꾸면 되는데…” 안녕하세요 팡일입니다. 우리는 흔히 프로젝트가 커질수록 컴포넌트는 수십, 수백 개로 늘어나고, 처음에는 단순했던 스타일 작업도 점점 복잡해집니다. 예를 들어, “우리 서비스의 포인트 컬러를 조금 더…

| “저장 버튼을 누르기 전에 브라우저가 닫혔습니다.” 안녕하세요 팡일입니다! 혹시 이런 경험 있으신가요? 상상만 해도 아찔한 상황입니다. 몇 시간 동안 공들여 작성한 글이 예기치 못한 브라우저 오류나 탭 닫기 한 번에 사라진다면, 누구라도 깊은 허…

| 도입: 혹시 아직도 복붙하고 계신가요? 안녕하세요 팡일입니다. 웹 서비스를 만들다 보면 누구나 마주치는 기능이 있습니다. 바로 ‘작성’과 ‘수정’ 기능입니다. ‘새 글 작성’ 페이지를 열심히 만든 뒤 얼마 지나지 않아 똑같이 생긴 ‘글 수정’ 페…

| 서론 훌륭한 사용자 경험(UX)은 종종 눈에 잘 띄지 않는 작은 디테일에서 시작됩니다. 특히 사용자가 키보드만으로 서비스를 원활하게 이용할 수 있도록 하는 '키보드 네비게이션'과, 현재 활성화된 요소를 명확히 보여주는 '포커스(Focus) 관리'…