소통과 구현을 통해 최선의 선택을 찾아가는 프론트엔드 개발자

이우성

"PoC 구현을 통해 최선의 선택을 찾아가고자 합니다."
문제 해결을 위해 다양한 상황들을 PoC(Proof of Concept) 형태로 직접 구현해보며 최선의 해결책을 찾고자 노력합니다. 구현을 통해 다양한 케이스의 동작 과정과 적용 기술의 원리에 대해 이해도를 높이고, 이를 기반으로 여러 케이스들을 비교 분석하며 현재 상황에 가장 적합한 해결책이 무엇일지에 대해 고민합니다.

"자동화 및 적극적인 의사소통 환경을 추구합니다." 
이에 더해 효율적인 환경 구축과 함께 해결하는 자세를 지향합니다. GitHub Actions와 Husky를 이용한 자동화 환경 구축과 같이 효율적인 업무 환경을 구축하길 지향하고, 프론트엔드라는 직군에 얽매이지 않고 문제가 있다면 적극적으로 소통하며 함께 문제를 해결하고자 합니다.

성실함

협업 지향

꼼꼼함

커뮤니케이션

문제 해결사

OPIc

SQLD

Github - leewooseong

<h4>:: 프로젝트 소개</h4>휴식을 위한 다양한 모임 개설 및 참여 서비스<hr><h4>:: 프로젝트 환경</h4>- 프로젝트 기간: 25.01.02 - 25.02.13 (6주)- 프로젝트 인원: FE 4명- FE 개발 환경: NextJS 14+, React 18+, TypeScript, Tailwind, React-Query v5, Zustand- URLs: <a target="_blank" rel="noopener noreferrer nofollow" href="https://together-renewal.vercel.app/">Deploy</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/codit-team-6/together">Github</a> | <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/codit-team-6/together-renewal-ws?tab=readme-ov-file">Refactoring</a><hr><h4>:: 프로젝트 개발 사항</h4><blockquote>"NextJS의 다양한 기술들을 적용해보면서, vercel을 이용한 배포까지 경험해볼 수 있었던 프로젝트입니다. 현재는 리팩토링을 진행하며 서비스 개선 중에 있습니다."</blockquote>1. BFF 방식의 인증 시스템 구현 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/BFF-1abe1d6ada4f8003a486f9b8e2fc0c34?pvs=74">링크</a>)<ul><li>인증 관련 api의 보안 제약 사항을 극복하기 위해 middleware와 route-handler를 이용해 cookie 방식으로 토큰을 관리하도록 인증 방식 개선</li></ul>2. react-hook-form과 zod를 이용해서 form 개발 개선하기<ul><li>NextJS에서 동적인 크기의 캘린더 구현하기 (NextJS Client Component와 React Component의 랜더링 방식 차이 체감하기) (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/NextJS-Client-Component-React-1a2e1d6ada4f80cca31fdb34dbe29fd6">링크</a>)</li><li>react-hook-form을 이용해 로그인, 모임 생성 모달 form 개발</li><li>validation 관심사 분리를 위한 zod 적용</li></ul>3. 협업 환경에 자동화 시스템 도입 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/with-github-action-husky-1a2e1d6ada4f805a8c4ac86069148156">링크</a>)<ul><li>husky &amp; github actions를 이용해 기능 개발 브랜치 내용에 문제 없는 코드만 반영하기</li><li>github actions를 이용해 원격 develop, main 브랜치 보호 및 vercel 배포 자동화</li></ul>4. 브랜치 전략 변경으로 개발 환경 개선하기 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/1a2e1d6ada4f80a19b07e2144d324517?pvs=74">링크</a>)<ul><li>base, feature 브랜치 전략 도입을 통해 리뷰할 코드양 60% 감소 및 기능 개발 PR 마다 발생하던 conflict 문제 해결</li><li>develop to main을 base to main으로 변경하여 배포 환경과 개발 버전 분리해서 main 브랜치에 테스트 되지 않은 코드가 유입되는 문제 개선</li></ul>

같이 달램

<h4>:: 프로젝트 소개</h4>실시간 소켓 통신을 활용한 3D 멀티 플레이 퀴즈 게임으로 친구와 함께 즐기면서 배우는 스피드 게임 학습 플랫폼입니다.<hr><h4>:: 프로젝트 환경</h4>- 프로젝트 기간: 24.04.08 - 24.05.17 (6주)- 프로젝트 인원: FE 3명, BE 3명 (6명)- FE 개발 환경: NextJS 14, TypeScript, Tailwind, React 18, React-Query v5, Zustand- URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/5wonju/frontend">Github</a> (교육 기관에서의 리소스 지원 중단으로 현재 배포 링크는 만료된 상태입니다.)<hr><h4>:: 프로젝트 개발 사항</h4><blockquote>"NextJS App router를 이용하여 페이지 개발을 해보고 React 환경에서 소켓 통신을 전담해서 작업해볼 수 있었던 프로젝트입니다."</blockquote><h5>1. ReactJS를 이용한 소켓 통신 구현</h5><ul><li>ReactJS의 hook, zustand, WebSocket API를 이용하여 소켓 통신 환경 구현</li><li>게임 소켓 수신 로직 외 모든 소켓 작업 전담</li></ul>2. 기타 개발 내용<ul><li>대기방 페이지 개발</li><li>채팅 기능 개발</li></ul>

Mo or do

<h4>:: 프로젝트 소개</h4>자신의 버킷 리스트를 공유하고, 나와 유사한 관심사를 가진 사용자들을 추천받으며 교류하는 SNS 서비스입니다.<hr><h4>:: 프로젝트 환경</h4>- 프로젝트 기간: 24.1.03 - 24.02.16 (7주)- 프로젝트 인원: FE 2명, BE 4명 (6명)- FE 개발 환경: React 18, React-Query, TypeScript, Tailwind, Zustand- URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ggumms/ggumtle">Github</a> (교육 기관에서의 리소스 지원 중단으로 현재 배포 링크는 만료된 상태입니다.)<hr><h4>:: 프로젝트 개발 사항</h4><blockquote>"사용자 관점에서 프로젝트를 개선점을 고민해보며 다양한 기술 스택을 도입해볼 수 있었던 프로젝트입니다."</blockquote>1. UX 경험 향상을 고려한 개발 진행<ul><li>버킷리스트 생성 및 수정에 대한 퍼널 페이지 구현을 위해 react-router-dom의 Outlet을 활용해&nbsp;페이지 분할 기능을 적용 및 state 방식으로 추가 개선 적용 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/Outlet-state-119e1d6ada4f81ed96fddbf639686ff3">링크</a>) 버킷 리스트 생성 시&nbsp;FileReader를 이용하여 이미지 미리보기 기능을 제공 버킷리스트의 달성을 결정하는 달성 페이지에서&nbsp;Web Animations API를 이용해 CSS in JS 방식에 비해 랜더링 효율 90% 개선 및 부드러운 애니메이션 경험 제공 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/Web-Animations-API-119e1d6ada4f810d970ccea03a056151">링크</a>)</li></ul>2. 기타 개발 내용<ul><li>React-query를 활용해 프로젝트 내 무한 스크롤 적용 버킷리스트 달성 상세 페이지 및 댓글 기능 구현 버킷리스트 후기 작성을 위한 React-Quill 에디터 적용</li></ul>

꿈:틀

<h4>:: 프로젝트 소개</h4>여행 후기 블로그들의 URL을 기반으로 주변 지역 맞춤 유사한 여행지를 추천해주고 여행 계획 작성을 도와주는 서비스입니다.<hr><h4>:: 프로젝트 환경</h4>- 프로젝트 기간: 23.02.19 - 24.04.05 (7주)- 프로젝트 인원: FE 3명, BE 3명 (6명)- FE 개발 환경: Vite, TypeScript, Tailwind, React 18, React-Query v5, Zustand- URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/fast-boys/frontend">Github</a> (교육 기관에서의 리소스 지원 중단으로 현재 배포 링크는 만료된 상태입니다.)<hr><h4>:: 프로젝트 개발 사항</h4><blockquote>"FE 팀의 리더를 맡으며 팀 리딩에 있어 많은 노력을 기울였던 프로젝트입니다."</blockquote>1. 여러 api 동시 호출 시 waterfall을 막기위해 useQueries 활용하기<ul><li>설문조사 페이지 내에서 각 분야별 장소 정보를 한번에 표시하기 위해 react-query의 useQueries 활용을 통해 API 응답 시간 1초 대로 개선 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://scratched-cephalopod-eb9.notion.site/useQuery-useQuries-1a2e1d6ada4f806ba2dbf349fce4470e?pvs=4">링크</a>)</li></ul>2. 기타 개발 내용<ul><li>OAuth 인증 방식을 사용한 카카오, 구글 로그인 구현</li><li>Vite 환경에서 PWA 적용</li><li>로그인 페이지, 검색 페이지 및 여행 생성 페이지 개발</li></ul>