수민'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

NLP 프로젝트를 진행하기 위해 시각장애인을 유저로 한 앱 제작을 해야한다. 팀의 유일한 프론트엔드로서 열심히 알아보는 중이다. 스크린 리더기를 기반으로 한 프로젝트인 만큼 TTS 기본 대본 작성에 큰 힘을 쓰고 있다. 시각장애인을 위한 TTS(Text-to-Speech) 대본을 짤 때는 정보의 정확성뿐만 아니라 이해의 용이성, 흐름, 맥락 파악이 매우 중요하다. 1. 시각적 요소를 음성으로 충분히 설명하기이미지나 그래프가 있는 경우나 UI 요소를 모두 자세히 설명해야 한다. ex. “화면 좌측 상단에 로그인이 있습니다” → “첫 번째 화면 맨 위 왼쪽에는 ‘로그인’ 버튼이 있습니다.” ➡️ 진행하는 프로젝트는 챗봇 형태의 대화하는 형식이므로 이 부분은 패스. 2. 과도한 정보 압축 지양짧고 빠르게 ..

🤖 프론트엔드 개발자의 NLP 도전기 2025. 4. 15. 22:55

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

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

지금 진행하는 연구 프로젝트의 주제는 시각장애인 투자자 맞춤형 주식 AI 어드바이저 어플리케이션 개발이다. 나는 wisper AI를 이용해 음성 데이터를 추출 , 텍스트 데이터로 변환해서 LLM을 구축하는 것도 담당하지만, 유일한 프론트엔드 팀원으로서 프론트엔드 개발을 전적으로 담당해 진행하고자 한다. 😅그래서 타겟 유저가 시각장애인인 만큼 UIUX는 비장애인들이 사용하는 것과는 많이 다르다. 국제 웹 표준화 도구 W3C는 시각장애인을 포함한 모든 사용자가 웹 콘텐츠와 어플리케이션을 원활하게 이용할 수 있도록 다양한 접근성 지침을 제공하고 있다. 🖥️ 시각장애인 UIUX 국제 표준 지침- 웹 콘텐츠 접근성 지침 : WCAG (Web Content Accessibility Guidelines)    ➡..

🤖 프론트엔드 개발자의 NLP 도전기 2025. 3. 29. 22:48

⏰ 진행기간 : 2025.02.17-2025.03.13 이렇게 보면 한달 정도의 기간이 있으니 괜찮지 않은가? 라고 생각하실 수 있겠지만 이 시간 내에 기획, 디자인이 나오고 이를 개발까지 진행하기에는 매우매우 부족한 시간이었다 .. 정신없이 개발하느라 중간에 회고한건 고작 한번.. 큐스팅 벌금도 한번 내기..  이제 밋업 프로젝트 들어가기 전에 기업프로젝트 회고를 해보면 좋을 것 같아 기업 프로젝트 과정을 돌아보고자 한다.  📁 프로젝트 소개팀원 : 기획 2 디자인 2 프론트 2 백엔드 2프로젝트 : 서울우유_지능형 세금계산서 검증 시스템 구축팀명 : 음메 팀명의 의미 : 서울우유 하면? 소! 🐄 소가 내는 소리 “음메”는 우유의 시작을 의미하는 가장 직관적인 사운드입니다 🔊 즉, 우리는 서울우유..

😃 프로젝트를 마치며.... 2025. 3. 26. 14:34

구글 코랩에서 GPU가 있는데 이걸 어떻게 쓰는거야.. 하다가 그냥 CPU를 사용했다..ㅋㅋㅋㅋ 그랬더니 어제 새벽 5시까지 돌렸는데 고작 8프로만 수행되는 최악의 일이 발생했다 ✅ 코랩의 장점- 사용하고자 하는 라이브러리를 추가 설치 필요 없이 !pip install ~ 로 쉽게 불러올 수 있다- 그래픽 카드가 필요없다 -> GPU를 제공해줘서 ML 작업이 수월하게 가능하다(그게 아니었으면 아마 노트북 터졌을거다..) 1️⃣ 런타임을 눌러 런타임 유형 변경을 누른다 2️⃣ 런타임 유형을 CPU에서 T4 GPU로 변경한다 어제 새벽 5시까지 돌려서 8%를 채웠는데 40분 돌린 지금 이미 30%가 되었다 .. GPU 최고 ..👍

🤖 프론트엔드 개발자의 NLP 도전기 2025. 3. 26. 11:55

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

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