미리보기
기본 정보

프론트엔드 개발자로서 2년 이상의 경력을 쌓으며 회사 내에서 4개의 프로젝트를 성공적으로 완료했습니다. 프로젝트를 진행하는 과정에서 발견한 미흡한 부분들을 수정하고 보완하여, 개인 프로젝트에서의 경험을 통해 지속적으로 성장했습니다. 끊임없는 도전을 통해 배우며 항상 더 나은 방법을 생각합니다.
기술 스택
JavaScript, TypeScript, React, Next.js
경력
주식회사 조이스
팀원 | 개발팀
2022.04. ~ 2024.05. (2년 2개월)
게임 매니징 서비스 스타트업
4개의 프로젝트의 프론트엔드 개발 및 운영
개발 프로세스 개선
react-query 도입
코드 리뷰와 스프린트 회의를 도입하여 팀의 협업 효율성과 코드 품질 향상
잦은 디자인/기능 변경으로 지속적인 버그 발생.
Typescript도입으로 타입 안정성을 강화하고 테스트 코드를 도입하여 버그 발생률 감소
배포 환경 구축
프로젝트
보스라인
주식회사 조이스
2022.04. ~ 2024.04.
사용 기술
React
Redux
react-query
emotion-styled
jest
기능 개발
랜딩페이지, 분배페이지 등 사이트 내 다양한 페이지 개발
화면공유 및 음성채팅 기능 개발
마이크 볼륨 조절 및 음소거 기능 개발
실시간 채팅 기능 개발
이미지 Drag&Drop 기능 개발
무한스크롤 기능 개발
최적화 및 오류 수정
API 병렬 요청으로 요청 시간 감소
문제
직렬적으로 수행할 필요가 없는 두 개의 API요청으로 인한 요청 시간 증가
해결
Promise.all을 사용하여 병렬 요청 -> 기존 0.5s에서 0.2s로
60%
향상됨
모바일 WebSocket 연결 오류
문제
모바일에서는 os정책 등의 이유로 http/https프로토콜로 웹소켓 연결이 안되는 상황 발생
해결
wss프로토콜로 연결하며 해결
IOS환경에서의 new Date()메서드 오류
원인
일부 브라우저는 비표준 날짜 형식을 허용하지만, iOS의 Safari 브라우저는 엄격하게 ISO 8601 형식의 날짜 문자열만을 허용
날짜 문자열에 타임존 정보가 포함되지 않은 경우, iOS에서 날짜를 잘못 파싱
해결
날짜 문자열의 하이픈을 슬래시로 변환
ex)
const date = new Date("2025/01/12T17:00:00Z");
Dynamic Import를 통한 빌드 시 오류 해결 및 성능 향상
문제
당시 배포 방식은 인스턴스 내에서 빌드를 진행하였음 -> CPU 사용률 100% 임박 -> 빌드 멈춤
해결
Dynamic Import를 통해 번들 사이즈를 줄이며 메모리 사용량을 낮춤
<Suspense/>를 통한 유지보수성 향상
문제
data fetching중 IsLoading 상태를 따로 관리해야한다는 불편함이 있었음
해결
<Suspense/>로 로딩 관련 코드를 관리하여 유지보수성 향상
공통 컴포넌트 개발
Modal UI컴포넌트
Toast UI 컴포넌트
Header, Navigation Bar 컴포넌트
Calender 컴포넌트
Avadot
주식회사 조이스
2023.05. ~ 2023.11.
사용 기술
React
Redux
react-query
emotion-styled
기능 개발
결제 기능 개발(토스 페이먼츠)
본인인증 기능 개발(NICE ID)
사용자와의 소통 창구 마련(채널 톡)
번역 기능(프론트엔드 부분) 개발
랜딩페이지 및 기타 페이지 개발
최적화
LazyLoading 적용
문제
많은 이미지가 포함된 페이지에서 이미지가 한 번에 로딩되며 성능과 렌더링 시간 증가
해결
초기에 IntersectionObserver API를 이용해 구현 -> 브라우저 호환성을 생각하여 react-lazy-load-image-component라이브러리로 변환
SEO 향상
문제
Next.js가 아닌 React.js를 이용했기에 SEO에 약한 문제가 발생
해결
사이트맵 작성, react-helmet라이브러리로 메타태그 관리, robots.txt로 SEO향상
공통 컴포넌트
네비게이션 바 및 헤더 컴포넌트
Storist
주식회사 조이스
2023.02. ~ 2023.05.
사용 기술
React
Redux
react-query
emotion-styled
기능 개발
랜딩페이지 및 대시보드 페이지 개발
모달 UI 컴포넌트 개발
제작된 스토리의 문서 Export 기능 개발
휴대폰 본인인증 기능 개발(Firebase)
최적화
SEO 향상
문제
Nextjs가 아닌 순수 React.js를 이용했기에 SEO에 약한 문제가 발생
해결
사이트맵 작성, react-helmet라이브러리로 메타태그 관리, robots.txt로 SEO향상
PlumAI
주식회사 조이스
2023.11. ~ 2024.01.
사용 기술
React
Redux
react-query
emotion-styled
기능 개발
이미지 생성 페이지 및 마이 페이지 개발
이미지 수정 기능(프론트엔드) 개발
IDesign
팀 프로젝트
2024.06. ~ 2024.10.
사용기술
Javascript
Three.js
webpack
개요
GestureNodeHandMover라는 프로젝트를 진행한적이 있습니다. 이 프로젝트는 많은 노드들을 손동작 인식을 통해 제어하는 것이 주된 과제였습니다. 하지만 CPU의 성능상 한계에 부딪혔고 WebGL에 관심을 갖는 계기가 되었고, WebGL을 사용하는 Three.js또한 관심이 갔습니다.
기능 개발
3D 물체 렌더링 기능
2D 물체 생성 및 변환 기능(링크)
면적 및 길이 Geometry 렌더링
대시보드 페이지 개발
Git actions, Docker를 이용한 CI-CD 무중단 배포
최적화 및 문제해결
TextGeometry 렌더링 최적화
문제
Three.js에서 제공하는 TextGeometry는 매 프레임마다 업데이트하기에 많은 연산이 소모됨
해결
troika-three-text 라이브러리를 이용하여 성능 문제 해결 (링크)
2D 물체의 외벽 설정
문제
2D 물체의 외벽을 설정하는데, 외벽 간 빈공간 및 겹치는 부분 발생
해결
평면좌표(중등수학)를 이용하여 문제를 해결하였음(링크)
웹펙 적용
문제
순수 자바스크립트로 작성되어있는 탓에 번들링되지 않은 코드
해결
웹펙을 적용하며 코드 스플릿, 모듈 번들링 기능 추가
페이지 네이션에서 무한 스크롤로 수정(UX)
Media-soup-sfu
개인
2024.02. ~ 2024.04.
사용기술
React
mediasoup
node.js
개요
주식회사 조이스에서 화면공유, 음성/화상채팅 기능개발을 맡은 적이 있습니다. 당시에는 P2P 토폴로지로 구성 하였고 속도 측정 부분에서 감점 되었습니다. 이에 개인프로젝트로 SFU토폴로지를 mediasoup 라이브러리를 이용하여 구현했습니다.
기능 개발
클라이언트 및 서버 기능 개발(링크)
결과
음성 속도 측면이 최대 0.6s에서 0.1s로 80% 향상
회사에서 진행했던 프로젝트는 P2P 토폴로지로 구성되어있었습니다. 때문에 2인, 최대 4인 정도까지 클라이언트에서 peerConnection을 유지하기에 적합했습니다. 하지만 실제 측정 결과 최대 0.6s까지 속도가 지연되는 것을 확인하였습니다. 이에 좀 더 안정적인 토폴로지를 공부하였고 개인 프로젝트로 SFU토폴로지를 구현하였습니다.
GestureNodeHandMover
개인
2024.05. ~ 진행 중
사용 기술
React
FigmaAPI
MediaPipe Gesture Recognizer
개요
Figma와 같은 디자인시스템에 손동작을 통해 제어하는 기능을 추가하면 어떨까하는 아이디어로 시작하게되었습니다. <canvas/>태그를 사용하여 진행하였고 CPU의 한계에 현재 중단되었습니다.
IDesign 프로젝트를 시작하게된 계기가 되었습니다.
포트폴리오
교육
유한대학교
대학교(학사) | 정보통신공학과
2015.03. ~ 2021.02. | 졸업
자기소개
저는 이런 개발자입니다.
“끊임없이 도전하는 개발자”
이전 회사에서 국가 R&D 시험 인증 과제로 음성/화상 채팅 기능을 구현한 경험이 있습니다. 해당 기능은 P2P 토폴로지로 구성되었으며, 총 4대의 기기가 접속한 상태에서 속도를 측정했습니다. 예상보다 속도가 느려 감점을 받았지만, 과제 검증시험이 종료된 후에도 더 나은 해결책을 찾고자 했습니다. 이를 위해 SFU 토폴로지를 개인 프로젝트로 구현하여, 시험 당시 최하 음성 속도 0.6초에서 0.1초로 80% 단축시킬 수 있었습니다.
또한, “디자인 툴인 Figma를 손동작으로 제어할 수 있을까?”라는 아이디어에서 시작한 개인 프로젝트는 CPU 제어의 한계에 부딪혀 중단되었습니다. 이를 해결하기 위해 GPU를 활용한 제어 방법을 찾았고, JavaScript를 사용해 WebGL을 쉽게 활용할 수 있게 해주는 Three.js를 알게 되었습니다. 이를 학습하며 “IDesign”’ 프로젝트에서 3D 기능 구현을 담당하였고 프로젝트를 성공적으로 마칠 수 있었습니다.
“변화를 제시하는 개발자”
이전 회사에서는 외국에 거주하는 디자이너님과의 소통에 시차 문제로 어려움이 있었습니다. 이를 극복하기 위해 주 2회의 정기 회의와 비정기 회의를 추가적으로 진행하여 프로젝트의 진행 속도를 높였습니다. 이러한 변화는 프로젝트의 완성도를 높였고, 개발팀 내에서도 적극적으로 변화를 제시했습니다. 프로젝트 중 여러 수정 사항과 버그가 발생했지만, 이를 최소화하기 위해 테스트 코드와 TypeScript 도입을 제안하여 채택되었습니다. 또한, 보고 형식의 개발 회의에서 일주일 동안의 목표를 세우고 이에 도달하는 과정에서 발생한 어려움과 문제를 나누고 다양한 시각에서 해결책을 모색하여 성장과 팀워크를 강화하였습니다.
“다양한 해결 방법을 제시하는 개발자”
‘IDesign’ 프로젝트는 인테리어 커스터마이징 서비스를 제공하는 팀 프로젝트였습니다. 저는 3D 및 2D 기능을 담당하며, 각 변에서 일정 거리만큼 떨어진 외벽을 설정하는 문제에 직면했습니다. 단순히 각 꼭지점에서 일정 거리만큼 떨어진 좌표를 계산하면 외벽 간 빈 공간이 생겼고, 이를 해결하기 위해 다양한 접근 방식을 고려했습니다. 마름모 형태로 외벽을 설정하는 방법을 시도했지만, 겹치는 부분이 생겨 또 다른 문제에 봉착했습니다. 이때, 평면좌표를 이용한 수학적 접근을 통해 문제를 해결했고, 이러한 해결 방법을 블로그에 공유하여 지식을 나누었습니다.