프론트엔드 개발자

프론트엔드 신입개발자 전승규입니다

안녕하세요 신입 프론트엔드 개발자 전승규입니다.

과거 경제단체에서 근무하며 기업 고객의 불편을 해결하는 업무를 수행했습니다. 그 과정에서 기업의 입장에서 능동적으로 고민하고 불편을 예방 및 해결하는 과정에서 보람을 느낄 수 있었습니다.

이러한 성향처럼 저는 개발자로서 프로젝트를 수행하면서도 사용자 경험에 대해 깊게 고민하고, 해결하는  것에 중점을 두고 있습니다. 코드-숲 프로젝트를 수행하며 사용자에게 즉각적인 반응을 제공하기 위해 Optimistic Update 구현을 통해 사용자 경험을 개선할 수 있었습니다.

앞으로도 저는 사용자 경험에 대한 고민을 바탕으로 기술적 문제를 풀어가는 프론트엔드 개발자로 성장하고자 합니다.

<h4>프로젝트 개요</h4>
<ul>
<li>개발자들이 의견을 나누고 토론할 수 있는 커뮤니티 코드숲</li>
<li>1인 개발 및 유지보수</li>
<li>Firebase를 활용한 서버리스 아키텍처를 적용, 풀스택으로 구현</li>
<li>회원가입, 유저 및 게시글 CRUD 기능 구현</li>
<li><a href="https://code-forest.store">서비스페이지</a> (ID : <a href="mailto:readme@test.com">readme@test.com</a>, PW : password!@)</li>
<li><a href="https://github.com/kyu3638/community">Github</a></li>
<li><a href="https://seung-q.tistory.com/category/PROJECT/code-forest">Blog</a></li>
</ul>
<h4>구현사항</h4>
<ul>
<li>ProtectedRoute를 통해 권한별 페이지 접근 인가 관리</li>
<li>Tanstack Query를 통한 서버 상태관리<ul>
<li>useQuery, useMutation 등 훅을 활용한 커스텀 훅 사용을 통해 코드 재사용성 및 유지보수성 향상</li>
</ul>
</li>
<li>Tanstack Query를 활용한 Optimistic Update 구현으로 사용자에게 즉각적인 반응 제공</li>
<li>React-Helmet을 통해 페이지별 meta tag 동적 설정하여 SEO개선</li>
<li>Github Action을 이용한 배포 자동화(CI/CD) 구축</li>
</ul>
<h4>최적화</h4>
<ul>
<li>Vite-Bundle-Analyzer, 네트워크 탭, Lighthouse를 활용하여 LCP 및 빌드 소요시간 등 측정과 분석</li>
<li>코드 스플리팅을 통해 빌드 소요시간, FCP, LCP 등 성능 평균 30%이상 향상</li>
<li>사용자가 등록한 이미지를 용도에 맞게 3가지 사이즈로 Resize 후 저장하여 사용함으로써 이미지 로드 시간 감소로 사용성 향상</li>
</ul>
<h4>Skills</h4>
<p>Typescript, React, TailwindCSS, Tanstack Query, Context API, Firebase, Github, AWS S3・CloudFront・Route53</p>


코드숲

<h4>프로젝트 개요</h4>
<ul>
<li>집에서 편하게 친구들과의 술자리를 제공하는 영상통화 서비스</li>
<li><a href="https://bit.ly/44vnxxe">시연영상</a></li>
<li><a href="https://github.com/kyu3638/hompocha">Github</a></li>
</ul>
<h4>구현사항</h4>
<ul>
<li>다자간 영상통화로 비대면으로 술자리를 가질 수 있습니다.</li>
<li>대화 보조 기능과 미니게임을 통해 대화에 재미를 더해줍니다.</li>
<li>음성 인식과 동작 인식을 통해 마우스, 키보드 사용을 줄여 손쉽게 이용할 수 있습니다.</li>
</ul>
<h4>트러블슈팅 : 클라이언트 간 게임 시간 동기화 문제</h4>
<ul>
<li>문제상황<ul>
<li>개별 클라이언트의 성능 차이와 네트워크 상황에 따라 게임 시작 타이밍이 일치하지 않는 문제 발생</li>
</ul>
</li>
<li>해결과정<ul>
<li>개별 클라이언트가 아닌 서버를 중심으로 시작과 종료 신호를 전달하여 동기화</li>
<li>[1단계] 각 클라이언트가 게임 화면으로 이동하여 준비가 완료되면 신호를 서버로 전송</li>
<li>[2단계] 모든 유저가 준비 완료되면 서버를 통해 게임 시작 신호 전송</li>
</ul>
</li>
</ul>
<h4>Skills</h4>
<p>JavaScript, React, NestJS, Amazon EC2, Amazon Aurora, NGINX, OpenVidu, MediaPipe, WebSpeech API, Github</p>


홈술포차

<h4>기업 지원 프로젝트 수행</h4>
<ul>
<li>중소기업 지원을 위한 다양한 기관과 협업<ul>
<li>지자체 행정부서, 시의회 등 유관기관과 협업하며 프로젝트 수행</li>
</ul>
</li>
<li>프로젝트 기획부터 운영까지 경험</li>
<li>회원사 매출액 증가 등 성과</li>
</ul>
