Web Development/Problem Solving (8) 썸네일형 리스트형 [Problem Solving][git revert] 현업 Git 브랜치 전략: A 작업 일시 중단 후 B 작업 우선 배포 현업에서 개발 배포까지 완료된 A 작업을 잠시 중지하고, B 작업을 먼저 배포해달라는 요청을 받았습니다.이 상황에서 제가 문제를 해결한 방법을 정리해 공유드립니다.1. 브랜치 운영 구조main: 운영 배포 브랜치dev: 개발 서버 배포용 브랜치detail: 기능 개발 브랜치 (A, B 작업 진행)2. 기존 작업 흐름detail 브랜치에서 A 작업 수행A 작업을 dev 브랜치로 머지 → 개발 서버 배포QA 후 main에 머지하여 운영 배포3. 운영팀 요청A 작업을 운영에서 제외하고, B 작업을 먼저 반영해달라A 작업은 나중에 다시 적용할 예정4. 해결을 위한 선택지항목git revertgit reset기능커밋을 취소하는 반대 커밋 생성커밋 자체를 제거히스토리유지됨 (되돌리는 커밋이 추가됨)잘라냄 (되돌린 .. [Problem Solving] useSelector, 커스텀 훅, 그리고 리렌더링 최적화 React + Redux 프로젝트를 하면서, 사용자 상태에 따라 UI가 변화하는 요구가 많아졌습니다. 이를 깔끔하게 관리하기 위해 커스텀 훅을 만들었고, 그 과정에서 useSelector의 리렌더링 조건과 최적화 방식에 대해 고민하게 되었습니다. 이 글은 그 과정을 정리한 실전 기록입니다.1. 사용자 관련 조건을 커스텀 훅으로 분리하다조건이 많아지면서 복잡한 분기를 커스텀 훅으로 분리했습니다.// hooks/useUserSegment.jsimport { useSelector } from 'react-redux';export const useUserSegment = () => { const isAuthed = useSelector((state) => state.isAuthed); const user =.. [Problem Solving] 프론트엔드 성능 최적화 기본 개념 프론트엔드 성능 최적화프론트엔드 성능은 단순히 페이지를 빠르게 보이게 하는 것을 넘어, 검색 엔진 최적화(SEO), 사용자 경험, 전환율 등에 직접적인 영향을 미칩니다.핵심 성능 지표: Core Web Vitals지표설명기준LCP최대 콘텐츠가 로딩 완료된 시점2.5초 이하INP전체 상호작용의 평균 응답 시간 (FID 대체)200ms 이하CLS예기치 않은 레이아웃 이동의 누적 점수0.1 이하Core Web Vitals는 SEO에도 직접적인 영향을 주는 사용자 중심의 성능 지표입니다.주요 성능 최적화 전략1. LCP 개선 전략이미지 최적화: WebP 포맷 사용, 크기 조절, 압축 적용반응형 이미지 제공: srcset 및 sizes 속성 활용지연 로딩 적용: loading="lazy"필수 CSS는 인라인 처리.. [Problem Solving] Zustand로 폼 상태 최적화하기: Context를 버리고 구독 범위를 좁히다 React로 복잡한 폼 페이지를 만들다 보면 점점 많은 상태들이 생겨나게 됩니다.이 글은 프로젝트 초기에 설계했던 상태 관리 방식에서 출발해, 기능 고도화로 인한 문제를 어떻게 해결했는지,그리고 Zustand를 활용한 최적화 과정과 결과를 공유하는 글입니다.초기 설계: useFormDatas로 상태 통합 관리프로젝트 초반에는 useFormDatas라는 커스텀 훅을 통해 모든 폼 상태를 한 곳에서 통합적으로 관리했습니다. 이 방식의 장점은 다음과 같았습니다:상태 흐름을 추적하기 쉬움하나의 파일로 팀원 간 이해가 쉬움유지보수 용이// form과 관련된 모든 데이터를 저장하는 커스텀 훅export const useFormDatas = () => { const [formData, setFormData] = u.. [Web] Light house를 이용한 페이지 최적화 Light house의 성능 지표 분석 결과First Contentful Paint (FCP): 1.9초 사용자가 처음으로 페이지의 콘텐츠를 볼 수 있는 시간. 50~89 사이이므로 평범Largest Contentful Paint (LCP): 17.6초 Lighthouse, Google의 웹 성능 지표에 따르면, LCP의 적정 시간은 2.5초 이하 : 우수, 2.5 ~ 4 : 개선 필요, 4 ~ : 성능 저조 이다. 2.5초 이하로 LCP를 떨어뜨려야 한다.LCP는 페이지의 주요 콘텐츠가 완전히 렌더링되는 시간이다. 여기서 말하는 주요 콘텐츠는 아래와 같다.- 이미지 요소(태그)- 비디오 포스터 이미지(태그의poster속성)- 백그라운드 이미지(CSSbackground-image속성)- 텍스트 블록 (,.. [Web] 페이지에 잔상이 남는 현상 처리 회사 업무 중, 페이지 전환 시 이전 페이지의 잔상을 보이지 않게 해달라는 요청을 받았습니다. 예를 들어, A 세미나 상세 페이지에서 세미나 목록 페이지로 이동한 후 B 세미나 상세 페이지로 이동할 때, B 세미나 상세 페이지에서 A 세미나 상세 페이지의 이미지가 보이는 현상이 발생했습니다.문제 원인 분석세미나 상세 페이지는 전역 변수를 주요 데이터로 사용하는 페이지였습니다. 페이지 이동 시, 이전 페이지의 데이터가 전역 변수에 남아 있어 잠시 동안 이전 페이지의 잔상이 남는 현상이 발생했습니다.초기 시도 및 문제점처음에는 전역 변수 사용을 배제하고, 페이지 내에서 새로운 state를 만들어 문제를 해결하려고 했습니다. 그러나 해당 전역 변수는 세미나 페이지 컴포넌트 외부에서 사용하는 컨트롤바에서도 사용.. [Web] dangerouslySetInnerHTML 사용 시 나타날 수 있는 문제점 dangerouslySetInnerHTML을 사용하여 동적으로 HTML 콘텐츠를 삽입할 때, 예상치 못한 태그 생략이나 삭제 문제가 발생할 수 있습니다. 이는 주로 다음과 같은 이유로 발생합니다:1. HTML 구조의 오류잘못된 HTML 구조로 인해 브라우저가 자동으로 수정하면서 태그가 생략되거나 변경될 수 있습니다. 예를 들어, 닫히지 않은 태그, 잘못된 중첩 등이 있을 경우 브라우저는 이를 자동으로 수정하며, 이 과정에서 의도치 않은 변경이 발생할 수 있습니다.2. 브라우저의 보안 정책일부 태그는 보안상의 이유로 브라우저에서 필터링되거나 제거될 수 있습니다. 특히 태그는 dangerouslySetInnerHTML로 삽입하더라도 대부분의 브라우저에서 실행되지 않거나 제거될 수 있습니다.3. React의.. [Web] 이미지 프리로딩과 브라우저 캐시 저장 원칙 이미지 프리로딩의 장점이미지를 미리 로딩하면, 필요한 시점 이전에 이미지를 미리 다운로드 받아 브라우저의 캐시에 저장할 수 있습니다. 이렇게 하면 실제로 이미지가 필요할 때는 이미 캐시된 이미지를 가져와서 다운로드 속도를 높일 수 있습니다. 이는 로딩 스피너와 CSS 효과를 통해 이미지 전환이 자연스러워 보이게 하는 것보다 실질적인 다운로드 속도를 줄이는 데 도움이 됩니다.브라우저 캐시 저장의 기본적인 원칙브라우저의 기본 캐시 동작:대부분의 브라우저는 서버로부터 받은 리소스를 캐시하려고 합니다. 이는 페이지 로드 성능을 향상시키기 위함입니다.이미지 파일은 일반적으로 캐시 가능 리소스로 간주됩니다. 따라서 브라우저는 이미지 요청이 있을 때 이를 캐시에 저장하려고 합니다.캐시 제어가 없는 경우:명시적인 Ca.. 이전 1 다음
