미리보기
기본 정보
Github: https://github.com/armd482
자기소개
새로운 기술에 도전하는 것을 두려워하지 않는 프론트엔드 개발자입니다. three.js와 openvidu와 같은 최신 기술을 빠르게 배우고 적응하는 능력을 바탕으로 여러 프로젝트에서 다양한 문제를 해결해왔습니다. 끊임없이 발전하는 기술 환경 속에서 다양한 도구와 기술을 활용하여 사용자에게 만족감을 줄 수 있는 솔루션을 제공하기 위해 노력하고 있습니다
교육
한국외국어대학교
대학교(학사) | 산업경영공학/컴퓨터전자시스템
2020.03. ~ 현재 | 재학 중
프로젝트
Keydeuk
Quad8
2024.05. ~ 2024.08.
링크
Github: https://github.com/Quad8/quad8-front
배포 사이트: https://keydeuk.com/
프로젝트 소개
커스텀 키보드를 쉽게 구매하고 주문할 수 있는 사이트를 기획하였습니다. 키보드와 관련된 제품을 구매하고, 커스텀 키보드 옵션을 선택하여 구매할 수 있고, 구매 후기를 통해 정보를 얻을 수 있습니다.
팀 구성
프론트엔드 4명
백엔드 2명
디자이너 1명
기술 스택
Next.JS, Tanstack-Query, Sass, Three.js
담당 업무 수행 내용
Three.js를 이용한 키보드 3D 렌더링
사용자가 선택한 옵션을 실시간 반영하여 키보드 glb 파일을 렌더링, 결과를 canvas에 표시
사용자가 선택한 키보드 옵션을 쉽게 확인할 수 있도록 함
Web Audio API를 이용한 키캡 타건 사운드 재생
사용자가 선택한 키캡의 타건 소리를 재생하는 도움말 모달 제공
사용자가 스위치 옵션을 더 쉽게 선택할 수 있도록 함
검색 기능 구현
디바운스를 사용해 입력한 키워드에 기반 상품 목록을 실시간으로 표시
로컬 스토리지를 활용해 사용자의 검색 기록 저장, 표시
키보드 방향키 입력으로 자동 완성 기능 구현
사용자가 원하는 상품을 더 쉽게 검색할 수 있도록 구현함
알림 기능 구현
사용자가 쿠폰을 발급 받거나 상품을 구매할 때, 내 게시글에 댓글이 달렸을 때 알림으로 표시
Server Sent Event를 이용해 커뮤니티 댓글에 대한 실시간 알림 표시 구현
JWT 토큰 관리
Fetch API에 인터셉터 클래스를 구현하여 토큰이 만료되거나 유효하지 않을 경우, 토큰을 재발급하고 재요청하거나 삭제하도록 처리
토큰 관리의 코드의 가독성을 높이고 유지 보수를 용이하게 함
MeetProject
개인
2024.08. ~ 진행 중
링크
Github: https://github.com/armd482/meetproejct
배포 사이트: https://www.meetproject.shop/
프로젝트 소개
OpenVidu를 이용한 화상 통화 사이트입니다. 구글 미트의 UI를 참고하여 실시간 통화에 참여하면서 기본 음성, 비디오 장치를 이용한 통화와 더불어 화면 공유, 채팅, 반응, 손들기를 이용해 참여자와 소통할 수 있는 사이트입니다
기술 스택
Next.JS, Tailwind, Openvidu
담당 업무 수행 내용
Openvidu를 통한 세션 관리
초기 세션 입장 시 모든 참가자의 스트림 정보를 불러오고,
새로 들어온 사용자와 나간 사용자 스트림 정보를 업데이트하여 화면에 반영되도록 구현
실시간 사용자 채팅과 반응을 화면에 렌더링되도록 구현
화면 공유 기능을 구현하여 사용자가 화면을 공유할 경우 레이아웃이 변경되도록 설정
세션에 참여하는 모든 참가자의 비디오와 오디오 상태를 실시간으로 확인할 수 있으며 다양한 방식으로 교환하여 더 원할한 소통 환경을 조성
MongoDB를 통한 세션 정보 관리
세션이 생성될 때 10자리 ID를 생성하고, 이를 mongoDB에 저장하여 고유성을 확보
현재 세션에 참여 중인 참가자 ID를 DB로 관리하여 세션에 참여하기 전에 현재 몇 명이 참여하고 있는지 확인할 수 있도록 구현
기존 openvidu에서 생성한 세션 ID보다 더 짧은 ID를 생성하여 사용자가 편리하게 ID를 입력하고 세션에 참여할 수 있도록 구현
AudioContext를 이용한 사운드 관리
오디오 입력 장치 선택 토글에서 현재 선택된 오디오 장치의 입력 볼륨을 계산하여 크기를 시각화함
참여자가 많은 경우 특정 인원 수만 비디오를 렌더링하고 남은 참여자들의 스트림을 하나의 오디오 소스로 통합하여 하나의 오디오로 출력하도록 구현
오디오 스트림을 하나로 통합함으로써 시스템 리소스를 효율적으로 사용하고 오디오 렌더링 성능을 향상시킴
사용자 장치 권한 관리
세션에 들어가기 전이나 스트림이 필요할 때, 사용자의 장치 권한을 전부 확인한 후 미디어 스트림을 얻도록 구현
스트림 사용 중 권한이 변경된 경우, 변경된 권한을 반영하여 미디어 스트림을 다시 가져오도록 구현
장치 권한이나 상태가 변경된 경우, 변경 사항을 즉시 반영하여 사용자가 페이지를 새로 고치지 않고도 서비스를 이용할 수 있도록 함으로써 사용자 경험을 향상시킴.
기술 스택
JavaScript, TypeScript, React, Next.js, HTML/CSS
포트폴리오
첨부파일
대외활동
코드잇 스프린트 부트캠프
Codeit
JavaScript, TypeScript, React, Next.JS 등 프론트엔드 개발자에게 필요한 기술 강의 수강
3개의 팀 프로젝트를 진행하면서 백엔드 개발자, 디지이너와 협업하는 방법과 다양한 기술들을 활용하는 역량을 익힘