수민's 개발 이야기

이제 인턴 업무를 하기 위해 전에 작성되었던 코드를 분석하기 시작했는데 /update API로 시야를 조정하는 부분은 이해를 했느데 Barrel Distortion이란?: 직선이 휘어보이는 현상 , 이미지 중심에서 멀어질수록 더 많이 휘어지는 왜곡배럴 왜곡 현재 구현 코드 apply_distortion = distortedif apply_distortion: frame = self.apply_barrel_distortion(frame)@staticmethod def apply_barrel_distortion(frame): np_arr = np.frombuffer(frame, np.uint8) image = cv2.imdecode(np_arr, cv2.IMREAD_COL..

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

이번에 인턴을 하게 되면서 라즈베리 파이에서 촬영되고 있는 동영상을 실시간으로 송출하는 앱을 만들어 달라는 과제를 받게 되었다. 현재의 문제점 - ⭐️ 영상 딜레이가 심하다 ⭐️- 영상 화질이 별로다 와 같은 문제점들이 있었다. 그래서 이 부분들을 해결하는 것이 나의 과제였고 영상 화질이 별로인 것은 촬영 영상은 괜찮으나 crop이 잘못되고 있어서 앱 구현할 때 해상도를 조정하면 될 것 같다고 생각이 들어서 수월하게 해결할 것 같았는데 가장 중요한 문제는 영상 딜레이가 심하다는 것 이었다. 그래서 이걸 어떻게 구현할 수 있다고 고민을 해보다가 펫캠 어플을 오마주해서 개발하면 괜찮지 않을까? 라는 생각이 들었고 조사해본 결과 Web RTC라는 기술이 있다는 것을 알게 되었다 Web RTC란? 웹 애플리케이..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 1. 17:56

어떤 기업 지원 미니 프로젝트를 하면서 성능 개선에 도전해보았다. 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