블로그를 운영하며, 교내 컨퍼런스에서 연사자로 2회 참여하여 제 경험을 공유했습니다.**
School | 경북SW마이스터고등학교 SW개발과 졸업예정
Email | [email protected]
Github | https://github.com/806gw
LinkedIn | https://www.linkedin.com/in/hongjeee
전문적인 판교 용어가 어려운 주니어 개발자들을 위한 판교어 번역 서비스입니다. 출시 후 7일간 500+건의 요청을 처리했으며, 1300+명의 블로그 방문자를 기록했습니다.
바로가기 → Github → [Blog →](https://velog.io/@806gw/판교-사투리..-%EC%96%B4%EB%A0%B5%EC%A7%80-%EC%95%8A%EC%9C%BC%EC%8B%A0%EA%B0%80%EC%9A%94)
Frontend 1명, Backend 1명 | 2025.10.29 ~ 운영 중
AI 교육 페스티벌에 출품 | 2025.11.21 ~ 2025.11.22
Frontend 개발 100% | UI/UX 디자인
Figma , Typescript , Next , React-Query , vanilla-extract
동적 메시지 로딩 시스템 구현
클립보드 복사 기능 구현
PWA 웹앱 구현
메인 페이지
<aside>
문제 배경
입력 텍스트가 길어질수록 UI 반응 속도가 현저히 느려지는 문제가 발생하였습니다. 매 렌더링마다 새 배열과 함수를 생성하기 때문이였습니다.
해결 방법
성능 저하의 원인을 파악하기 위해 React 렌더링 최적화 자료를 찾아보던 중, Props로 배열이나 객체를 직접 넘기면 매번 새로운 참조가 생성되어 자식 컴포넌트의 메모이제이션이 무력화된다는 것을 확인하였습니다. 참고한 자료 →
문제를 해결하기 위해 useCallback과 useMemo를 활용하여 props의 참조를 안정화시켰습니다.
이전 코드와 비교
이전 코드는 매번 새로운 배열, 함수를 생성하여 잦은 렌더링이 발생합니다. 하지만 useCallback과 useMemo를 활용하여 불필요한 연산이 약 66% 감소하였습니다.
화면 기록 2025-12-13 오후 12.11.10.mov
최적화 전 - 렌더링 2회 → 4회 → 6회로 선형 증가
화면 기록 2025-12-13 오후 12.07.34.mov
최적화 후 - 렌더링 2회로 일정 유지
해당 경험을 통해 알게된 점
부모 컴포넌트의 Props가 불안정하다면 자식의 모든 최적화를 무력화시킬 수 있다는 것을 알게되었습니다.
앞으로 배열과 객체를 직접 넘기지 않고, useCallback과 useMemo 등을 이용하여 렌더링을 줄일 것입니다.
</aside>
<aside>
문제 배경
단어 목록에서 어떤 단어가 수정되었는지 한눈에 확인하기 어렵다는 사용자 피드백이 있었습니다. 단어를 찾을 때 하나씩 읽어 내려가야 해서 불편하다는 의견도 있었습니다.
해결 방법
단어를 표시할 때 어느 부분이 수정되었는지 시각적으로 구분되도록 개선하였습니다.
단어에 커서를 올리면 해당 단어 설명으로 자동 스크롤되도록 하여 즉시 내용을 확인할 수 있도록 기능을 추가하였습니다.
이전 스타일과 비교
피드백 적용 전 번역 결과
피드백 적용 후 번역 결과
해당 경험을 통해 알게된 점
사용자가 실제로 겪는 불편함을 해결하는 것이 서비스 성장의 핵심이라는 것을 깨달았습니다.
</aside>
• vanilla-extract