본문 바로가기

전체 글56

[Moitz] 1.2초의 렌더 블로킹, 네이버 지도 API 동적 로딩으로 최적화하기 모잇지 서비스에서 네이버 지도 API로 인한 Render Blocking 제거를 통한 성능 최적화한 내용을 기록합니다. 들어가며사용자에게 더 나은 웹 경험을 제공하기 위한 성능 최적화는 프론트엔드 개발의 핵심 과제 중 하나입니다. Moitz 프로젝트의 성능을 측정하던 중, Lighthouse 성능 점수가 46점 에 머무르는 심각한 병목 현상을 발견했습니다. 가장 큰 원인은 'Render blocking requests' 항목으로, 네이버 지도 API 스크립트가 초기 렌더링을 1,240ms(약 1.2초)나 차단하고 있었습니다. 본 포스팅은 초기 렌더링을 가로막는 동기 스크립트 문제를 진단하고, 이를 동적 로딩(Dynamic Loading)으로 전환하여 사용자 경험을 개선한 과정을 공유합니다. .. 2025. 12. 4.
eslint-config-prettier | ESLint indent 규칙과 Prettier 규칙 간의 충돌 해결 배경ESLint와 Prettier는 각각 다른 목적을 가진 도구입니다 ESLint는 코드의 품질 검사하고, Prettier는 코드의 스타일 포맷팅을 하죠하지만 두 도구가 동시에 코드 스타일을 검사하려고 하면서 충돌이 발생했습니다. 문제 정의문제를 정의하면 다음과 같습니다."ESLint의 indent 규칙과 Prettier의 들여쓰기 규칙이 충돌하고 있다" 기존에는 ESLint의 indent 규칙을 수동으로 끄는 방식으로 해결했습니다https://github.com/woowacourse-teams/2025-moitz/pull/403 하지만 이는 임시방편일 뿐, 다음과 같은 문제가 있습니다:다른 스타일 규칙들도 충돌할 수 있음충돌이 발생할 때마다 수동으로 규칙을 꺼야 함팀원들이 규칙을 다시 켤 수 있어.. 2025. 11. 24.
[Moitz] CSR 환경에서 동적 og 태그 적용 (CloudFront Functions 활용) 본 글은 ‘CSR 환경에서 og 태그 동적 적용’에 관한 내용을 정리했습니다.하단의 참고자료를 바탕으로 저의 이해를 위해 정리한 글입니다. 서론카카오톡이나 슬랙과 같은 플랫폼에 네이버 링크를 공유했을 때, 어떤게 보여질까요?아래 사진과 같이 미리보기로 서비스 링크의 이미지, 제목, 설명이 보여집니다. 이 미리보기는 링크를 통해 접속하는 유저에게 클릭을 유도하는 첫인상과도 같은 요소입니다.만약 이 미리보기가 텅 빈 이미지나 올바르지 않은 정보로 표시된다면, 우리는 이 링크를 신뢰하지 않게 되죠.결국 '첫인상'을 망치는 치명적인 UX 문제이자, 비즈니스적으로는 클릭률을 낮추는 큰 손해가 될 수 있습니다. 오늘은 바로 이 링크 미리보기에 관련한 저희 팀의 트러블 슈팅 경험을 이야기해보려 합니다. 요구사.. 2025. 11. 19.
선언적으로 Modal 시스템 구현하기 🌀 서문이번 글에서는 모달(Modal)을 구현하는 과정 속에서 마주했던 전역 상태 관리의 복잡성과 성능 저하 문제, 그리고 이를 해결하기 위해 overlay-kit 라이브러리에서 영감을 받아 우리만의 모달 시스템을 구축한 경험을 공유해 보려고 합니다. 🌀 Modal사용자에게 중요한 정보를 알리거나, 간단한 액션을 유도할 때 모달 UI 컴포넌트를 자주 사용하죠. 프로젝트 초기, 저희는 간단한 useState 기반의 커스텀 훅(useModal)으로 모달의 열림/닫힘 상태를 관리했습니다. 처음에는 아무 문제 없어 보였습니다. 하지만 프로젝트가 성장하고 모달의 종류가 다양해지면서 문제가 발생하기 시작했습니다.여러 컴포넌트에서 동일한 모달을 제어해야 할 때 상태 관리가 복잡해졌습니다.상태를 끌어올리고(lif.. 2025. 10. 20.
useQRCode를 만들어보자 훅포넌트 스터디에서 ‘useQRCode’를 구현한 과정을 기록했습니다 🌀 배경프로젝트에서 링크 공유 기능에 QR 코드 옵션을 추가하기 위해 useQRCode 훅을 구현해보겠습니다. 🌀 문제 정의1-1. QR 코드 생성 방법우선 현재 QR 코드를 생성할 수 있는 방법을 찾아봤습니다.Google QR Codes API 에 요청 하는 방법 ❌Open Source를 통한 Local에서 생성 ✅QR Code 생성을 제공하는 기타 사이트(네이버, 어도비 등등) ❌1번에 해당하는 Open API를 사용하기에는, 여러가지 절차, 통신, 인증,인가, API Spec 등 고려해야 할 부분이 많습니다. 또한 현재는 구글 API 가 지원종료되어 사용할 수 없다는 단점이 있습니다. 이런 이유로 이번 글에서는 오픈소.. 2025. 9. 30.
[FYT] 디자인 파트 멘토링 1회차 'GDGoC 4th FYT 스터디' 에서 진행한 내용을 정리했습니다. 🔽 예상 독자- figma 를 처음 사용하는데 기본적인 사용방법을 익히고 싶으신 분을 대상으로 합니다.- 나는 이정도 한다! 하시면 편안하게 보셔도 좋습니다.피그마 좌측 우측 탭을 자유롭게 사용 가능하다.기본적인 단축키를 사용할 수 있다.Layer 를 잘 안다.Auto layout 잘 안다.Component + asset 을 잘 이해하고 쓸 수 있다.페이지 제작 가능하다. 🔽 머릿글이번 디자인 파트 1회차에서 진행한 내용은 아래와 같습니다.FYT 프로젝트 소개 : 나만의 포트폴리오 웹 만들기기본이 되는 포트폴리오 웹 페이지 와이어프레임 설명figma 멘토링 진행글꼴 설치 프로그램좌우측 탭 확인layerlocal styles .. 2025. 9. 22.
requestAnimationFrame(raF), 알고 사용하시나요? 'raF()'의 등장 배경, 원래, 사용 방법에 대해 정리했습니다. 🔽 웹 애니메이션웹에서 애니메이션은 단순한 장식이 아니라, 사용자의 경험을 매끄럽게 만들어 주는 중요한 요소입니다. 예를 들어, 버튼을 클릭했을 때 부드럽게 색이 변하거나, 로딩 중에 프로그래스바가 자연스럽게 움직이는 것은 모두 애니메이션 덕분이죠. CSS의 `transition`, `animation`, `transform` 만으로도 다양한 애니메이션을 만들 수 있습니다. 하지만 CSS 애니메이션만으로는 한계가 있습니다. 예를 들어, 스크롤 위치에 따라 요소 크기를 동적으로 바꾸거나, 실시간 데이터(예: 프로그래스바, 그래프) 를 반영하는 애니메이션은 JS 제어가 필요합니다. 전통적으로는 `setInterval` 같은 .. 2025. 9. 15.
[단상] 일 잘하는 사람의 특징 '일 잘하는 사람의 특징' 에 대한 나의 생각을 정리했습니다. 🔽 예상 독자- 일을 잘하고 싶은 주니어 개발자- 일을 잘하는 사람들의 특징을 알고 싶은 사람 🔽 들어가며최근 일 잘하는 사람의 특징에 대해 곰곰히 고민해보게 되었다.나의 해우소와 마찬가지인 #쩡킹출몰지역에 질문을 던졌고 인상깊은 내용들이 많았다. 아래는 그 대화들을 정리하고, 나 스스로 곱씹어본 생각들이다. 🔽 야근 없이 제시간에 끝내는 힘일 잘하는 사람의 첫 번째 특징은 정해진 시간 내에 업무를 완료하는 능력이다. "야근 안하는데 자기일 다 하는사람"이라는 표현이 핵심을 보여준다.이는 단순히 빠르게 일하는 것이 아니라 우선순위를 정확히 파악하고, 중요한 일부터 처리하는 능력에서 나온다. 시간을 투입하는 것과 성과를 내는.. 2025. 9. 3.
[아키텍처] FSD 아키텍처 : Feature-Sliced Design 🔽 목표늘 '팀 프로젝트를 잘하려면 어떻게 구조를 설계/분리해야할까?'라는 궁금증이 생겼다. '잘 분리'하기 위해서는 재사용성이 좋게 역할과 책임을 분리해야하고, 다른사람이 이해하기 쉬운 코드가 가장 중요하다고 생각했다. 그래서 다른 개발자가 협업함에 있어서 가독성이 좋고, 역할과 책임이 잘 분리된 구조를 설계해보는걸 목표로 진행중이던 프로젝트를 수정해봤다. 🔽 현재 구조적 문제 상황아래는 기존 프로젝트 구조로 페이지 단위로 분리되었다.react-shopping-cart├─ src│ ├─ apis 👈 api│ │ ├─ cartItems│ │ └─ httpClient.ts│ ├─ pages .. 2025. 6. 12.
[TypeScript] type vs interface 🔽 TypeScript에서 type과 interface의 차이 및 선택 기준최근에 TypeScript에서 데이터를 패치하고 받아오는 과정에서 데이터 response의 타입을 지정할 때, type과 interface 중 무엇을 써야 할지 고민이 생겼는데요. 두 가지 모두 객체의 구조를 정의할 수 있지만, 각각의 특징과 차이점이 존재합니다.오늘은 이 내용에 대해 정리해보고자 합니다! 🔽 type alias, interface타입스크립트에서 객체 타입을 지정하는 방식으로 거의 비슷한 기능을 가진다.type B = { a: string; b: number;};interface C { a: string; b: number;} 🔽 확장 방식type aliastype TA = { a: strin.. 2025. 6. 3.
[UX 개선] 낙관적 업데이트(Optimistic Update) 🔽 낙관적 업데이트란?낙관적 업데이트(Optimistic Update)는 사용자가 어떤 작업(예: 데이터 수정, 삭제, 추가 등)을 요청했을 때, 서버의 응답을 기다리지 않고 UI를 즉시 변경하여 사용자가 빠른 피드백을 받을 수 있도록 하는 기법입니다. 즉, 서버가 요청을 성공적으로 처리할 것이라고 가정하고, 미리 화면을 업데이트하는 방식입니다. 이 방식은 네트워크 지연이나 서버 응답이 느린 환경에서도 사용자 경험(UX)을 크게 개선할 수 있습니다. 다만, 서버 요청이 실패할 경우 UI와 실제 데이터가 불일치할 수 있으므로, 실패 시 원래 상태로 되돌리는(롤백) 처리가 반드시 필요합니다. 🔽 리액트에서의 낙관적 업데이트 예시 1. 직접 상태 관리 (useState 등)예를 들어, 할 일(Todo).. 2025. 6. 3.
[TanStack Query] 서버 상태 관리 라이브러리 안녕하세요오늘은 서버 상태 관리 라이브러리인 TanStack Query에 대해 정리해보고자 합니다. 🔽 TanStack QueryTanStack Query(이전 명칭 : react-query)는 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해줍니다. 🔽 왜 사용하는 가? (Why?)클라이언트 상태(useState, useReducer)와는 달리, 서버에서 가져온 데이터는 시간이 지나면 바뀔 수 있고, 언제든 다시 가져와야 할 필요가 있습니다.하지만 전통적인 방식(예: useEffect + axios + useState)으로 이걸 처리하려면 다음과 같은 문제가 발생합니다: ❌ 기존 방식의 문제점loading, error, data 상태를 직접 관.. 2025. 6. 2.

티스토리툴바