수민's 개발 이야기

어떤 기업 지원 미니 프로젝트를 하면서 성능 개선에 도전해보았다. Chrome - performance 탭을 확인해보니 INP(: 사용자 인터랙션에 대해 브라우저가 실제로 화면을 업데이트하기까지 걸린 시간)가 32ms가 나왔다 찾아보니 너무 느린건 아닌데 페이지 화면이 딱 하나니까 그걸 고려하긴 해야한다. 성능 결과이렇게 나와서 어디에서 시간이 오래 걸리는지 확인해보니 ❗️prepareRender가 56%임 ➡️ 병목 발생 가능성 파악결론적으로 리팩토링은 성공적이었다. ✌️ 🔍 문제 원인 파일 탭 클릭마다 monaco.editor.createModel, setModel, updateOptions 등 동기적으로 실행이 작업들이 메인 쓰레드를 과도하게 점유 : pointerdown → commit →..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 5. 18. 22:04

이번 프로젝트에서 Jest 테스트를 하고 있는데 스냅샷 테스트가 무엇일까 ? 표 해석%Stmts : 전체 문장 중 테스트에 의해 실행된 비율 (if , let 등등)% Branch : 조건 분기 테스트 커버리지(if , switch 등등)% Funcs : 함수 커버리지% Lines : 실제 코드 라인기준 커버리지Uncovered Line #s : 테스트되지 않은 라인 >> getDarkmode에서 테스트 되지 않은 라인이 많아서 빨간색으로 표시된 것 Jest란? 자바스크립트 테스트 라이브러리 - UI가 바뀌었는지 테스트 가능 스냅샷 테스트란 ? 컴포넌트의 렌더링 결과(UI 구조)를 저장해두고, 이후 변경 사항을 비교하는 테스트 방식>> 그래서 Jest를 선택하게 됨 ✅ 장점- UI 변경 추적이 쉬움- ..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 5. 4. 22:26

크롬 익스텐션을 만들면서 가장 머리가 아픈 부분은 다른 사람이 이미 만들어놓은 (정보가 부족한) 웹사이트를 뜯어보며 침투해야하는 점이다. 예전에 selenium으로 크롤링했던 능력을 살려서 🤔 웹 구조 본격 분석.. (눈이 침침해지는 기분이었다.)식품 카테고리에 포함되어있으면 이 식품에 대한 정보를 이용해야하는 구조라서 꼭 필요한 로직이었다. 👀 식품 카테고리 찾기 일단 카테고리를 먼저 찾아야 하니 하나하나 뜯어보다 breadcrumb ul요소 안에 li 안에 a에 class breadcrumb-link라는 클래스를 가진 형태로 있는 것 같았다. const breadcrumbLinks = document.querySelectorAll( "#breadcru..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 4. 11. 16:04

처음 디자인을 받고 placeholder가 움직이고... 비키는게 현실적으로 가능한가?했는데 불가능은 없다 🤣 이 비현실적인 UI의 진실은 placeholder가 placeholder가 아니라는 것에 있다 😉내가 작성한 코드를 자세히 보면 움직여야할 placeholder가 안보인다.CSS와 React의 useState를 활용하여 상태에 따라 라벨 위치를 변경하는 방식으로 구현을 진행했기 때문이다. 👩🏻‍💻구현 코드  아이디를 입력하세요 setEmployeeId(e.target.value)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFoc..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 3. 5. 02:47

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 Recoil같은 상태 관리 라이브러리를 사용해야 하는 경우1️⃣ 여러 컴포넌트에서 동일한 상태를 공유할 때 ex) 로그인 상태 , 사용자 정보 , 테마 설정 등❌ useState 사용 : 여러 컴포넌트에서 상태 공유 어려움                              : *prop drilling 이 발생할 수 있음 *prop drilling  : React에서 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 때 중간 컴포넌트들이 불필요하게 prop을 전달해야 하는 문제2️⃣ 컴포넌트 간 상태를 동기화해야 할 때 ex) 필터 옵션 , 검색어, 사이드바 상태✅ 페이지 내 여러 섹션에서 동일한 데이터를 참조해야 한다면 Recoil을..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 21. 16:55

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 💻첫 상태관리 라이브러리를 Recoil을 선택한 이유 : react랑 가장 사용법이 비슷해서 러닝커브가 제일 적어서 선택작고 React스러운: recoil이 React의 주요 철학인 선언적 UI, 컴포넌트 중심의 설계, 그리고 훅스를 사용하는 방식을 기반import React from 'react';import { atom, useRecoilState } from 'recoil';const textState = atom({ key: 'textState', default: '', });function TextInput() { const [text, setText] = useRecoilState(textState); const..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 19. 02:53

더보기프론트엔드 개발자로 성장하기 위해서 큐시즘이라는 동아리에서 개발을 달리게 되는데 당장이라도 React-Query 등 안써본 개념들을 써봐야하기에 공부를 시작! 🖌️React-Query란?: fetching , caching, 서버 데이터와의 동기화를 지원해주는 라이브러리 ➡️ *ContextAPI를 기반으로 동작 *ContextAPI란 ?  : 리액트의 내장 API / 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 쉽게 공유할 수 있게 해줌     ➡️ 모든 컴포넌트에서 사용할 수 있는 데이터를 전달하는데 유용 ➡️ React-Query를 활용해 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결해줌🖌️Caching : 캐싱React-Query는 캐싱을 통해 동일한 데이터에 대한 ..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 18. 02:02