프론트엔드 개발자

곽대양

React 기반의 프론트엔드 설계 및 개발을 단독으로 진행했고 서비스를 위한 간단한 페이지 , 복잡한 웹앱, 모바일 애플리케이션을 경험했습니다. 
여러 문제들을 기술에 기반하여 해결하였습니다.

협업 지향

학습 지향

커뮤니케이션

기술적

적응력

약 한달간 진행되었으며,리액트 코어 코드 해석과 리액트에서 렌더링을 동작시키는 순서에 대해 깊게 알아보는 그룹 스터디를 진행하였습니다.리액트 Fiber 도입 이전과 후를 알아보고 hook, 렌더링 과정에 대해 상세히 알아보고 발표를 진행하였습니다.리액트의 모든 코드를 들여다 보는것이 아니라 hook 동작, 렌더링 순서에서 필요한것들, 리액트의 렌더링 방식에서 동작하는 코드들에 대해 리액트 core의 실제 코드를 해석하여 이해하는 방식으로 공부하였습니다.

리액트 딥다이브  그룹 스터디

ENGLISH

JAPANESE

개인 블로그

<h5>프로젝트 개요</h5><ul><li>B2B 중심의 커머스 플랫폼 마이그레이션</li><li>복잡한 데이터 처리 , 실시간 가격 변동 기능을 포함한 프로젝트 설계</li><li>디자인 패턴을 사용한 프론트엔드 중심 비즈니스 로직 처리</li><li>백오피스 설계 및 작성 ( 인사, 데이터 aggregation , 통계 기능 등 ) </li></ul><h5>사용한 기술 스택</h5><ul><li>Next.js 12.3.4, React 17, MUI Data Grid, Zustand, React Query, i18n</li><li>AWS Lambda, CloudFront Image, AWS SNS, AWS WAF, Vercel , etc..<hr><h3>주요 구현 및 성과</h3><h4>실시간 가격 변동 및 대용량 데이터 처리 최적화</h4>4초 간격 1만 개 의 데이터 요청 , 페이지네이션 처리된 페이지 별 1천 개 의 개별 컴포넌트 ,1천 개 마다 존재하는 20개의 상세데이터를 사용자가 불쾌하지( 0.4ms 이내 ) 않은 시간 내로 렌더링 하였습니다.렌더링 및 정렬 성능 개선<ul><li>정렬 알고리즘 최적화 (N³ → N log N), 정렬 시간 70ms → 6~10ms로 개선</li><li>JSX 컴포넌트 구조 및 데이터 구조 개선: 6-depth → 3-depth, 컴포넌트 깊이 개선, 컴포넌트 병렬화 처리</li><li>FCP(First Contentful Paint) 기준 렌더링 성능 60% 개선 (프론트엔드 파트 300ms → 110ms)</li><li>상세 데이터의 수식어 기반 우선순위 정렬 기능.</li></ul>공통 모듈화 기반 개발 생산성 향상에 기여<ul><li>여러 복잡한 기능을 context api, store, custom hook 등 상태별로 구독되어있는 기능을 팀원들이 다른 프로젝트에서 손쉽게 적용 가능하도록 유연하게 설계 </li></ul><hr> <ul><li>상품선택시 Rule Engine을 사용해 조건부 선택 기능 개발<ul><li>store에 생성된 Rule Engine을 사용해 상품 선택시 지정된 조건에 맞는 상품 및 옵션이 적용 가능하도록 설계.</li><li>카테고리에 따른 복잡한 옵션제한 기능을 클라이언트 단에서도 처리 </li></ul></li><li>HTTP 기반 실시간 가격 데이터 수신 및 정렬 처리 로직 개발<ul><li>4초 간격, 최대 10,000개의 상품 정보를 수신 (1회 Fetch: 5~25MB)</li><li>클라이언트 런타임에서 정렬/검색/필터링 처리하여 서버 부담 최소화</li></ul></li><li>복합 정렬 조건 처리 기능 구현<ul><li>대분류(카테고리, 시간 등), 소분류(국가, 지역, 5분/10분 단위 등) 조건에 따른 정렬을 전략패턴을 사용해 구현 ( 지정해둔 전략에맞춰 핸들러 추가 및 변경 )</li><li>상세정보 표기 시 수식어 및 키워드 기반의 우선순위 정렬을 추가 적용</li></ul><hr><h4>백오피스 웹앱 작성</h4>100개 이상의 통계,HR 기능 등 B2B를 위한 백오피스 웹앱을 효율적으로 작업 <ul><li>여러페이지에서 등장하는 컬럼의 경우 컴포넌트화 시켜 재사용 가능하도록 설계</li><li>React 16 fiber 도입 이전 버전에 맞게 작성된 오픈소스 위지윅 에디터를 fiber 구조를 포함한 라이프 사이클에 맞게 에디터 생성 후 재구성 해 사용.</li></ul><ul><li>새로운 cdn변경 작업( 기존 aws s3기반 cdn=&gt;cloud flare image 로 변경)</li><li>busboy를 사용해 다중 파일 업로드 기능 구현.</li><li>소리 알람 기능을 위한 Notification API 를 통한 권한 처리 , 자연스러운 사용자 인터렉션을 통한 권한 획득 기능 추가</li><li>백엔드와 많은 회의를 통해 데이터 처리 영역 조율</li></ul><h4>제한적 영역에서 i18n 국제화 도구 적용</h4><ul><li>제품의 특정 영역의 키워드에 한해 국제화 기능 지원.</li></ul></li></ul></li></ul>프로젝트 초기엔 여럿이서 진행 하였지만 중반부 부터는 단독으로 프론트엔드를 작성하였습니다.

실시간 가격변동 커머스 마이그레이션 프로젝트

<h4>Next.js 기반 유저 커뮤니티 마이그레이션 프로젝트</h4><h5>프로젝트 개요</h5><ul><li>동영상 롱,숏폼 공유 및 운영자 관리</li><li>기존 앵귤러로 작성된 커뮤니티 사이트를 Next.js 12로 마이그레이션</li></ul><h5>핵심 기능 및 서비스</h5><ul><li>CloudFront + S3 + next api 를 활용한 동영상 숏폼/롱폼 업로드 및 관리 대시보드 구축 (s3 pre-signed URL 사용 )</li><li>nextjs SSR 기능과 middleware를 사용한 유저 단계별 권한 처리 ( 관리자, 유저 등 )</li><li>서비스 품질관리에 대한 많은 경험 획득. 유저,클라이언트 피드백을 통한 편의성 강화<ul><li>다양한 인터렉션에서 발생하는 개별 에러메시지 처리를 통한 UX 개선 경험</li><li>서버내 정보를 즉시 반영</li></ul></li></ul><h5>배포 및 인프라</h5><ul><li>AWS Beanstalk을 활용한 배포 환경 구축</li></ul>

유저 커뮤니티 마이그레이션 프로젝트

<h4>소규모 회사 랜딩 페이지 개발 및 SEO 최적화 경험</h4><h5>프로젝트 개요</h5><ul><li>소규모 회사의 간단한 소개를 위한 랜딩 페이지 개발</li><li>차기 마이그레이션 프로젝트가 Angular로 작성되어 Angular 15 기반으로 진행</li></ul><h5>SEO 최적화 및 검색 엔진 노출</h5><ul><li>시멘틱 태그 활용 및 사이트맵 구성</li><li>Google Domains, 네이버 서치 어드바이저 설정</li></ul><h5>AWS 기반 앵귤러 유니버설 웹앱 배포</h5><ul><li>CodeCommit + pipeline을 사용한 자동 배포Beanstalk의 롤링 배포 방식 지원으로 안정적인 배포 환경 구축</li></ul>

소규모 회사 랜딩 페이지 개발

<h3>프로젝트 개요</h3><ul><li>클라이언트 요구기반으로 작성한 모바일 앱 개발</li><li>지정된 조건의 문자 중 특정 내용만 서버로 전송 → 대시보드에서 모니터링 가능 및 비즈니스 로직에 적용.</li><li>Android API 30~33 시기, React Native 및 Java로 개발 ( 빠른 개발을 위해 학부시절 경험한 java사용 )</li></ul><hr><h3>핵심 기능</h3><ul><li>은행에서 전달받은 특정 문자열에 한 해서 재처리 후 서버로 전송.</li></ul><ul><li>포그라운드 서비스 동작 → 안드로이드 스마트폰의 SMS DB 조회 및 중복 처리, 브로드 캐스팅을 사용한 데이터 전달</li><li>보안 정책 대응 → 디바이스 내 저장장치 미사용으로 변경, 안드로이드 api가 권장하는 방식의 전송방식 사용</li><li>안드로이드 버전 변경 대응 → 2번의 코드 재작성, 최종 업데이트에서 API 20 이상 모든 버전 지원 하도록 변경 해외 시중 모든 은행의 특정 문자 내용만을 검출 한다는 전제 조건을 포그라운드에서 할당 받을 수 있는 적은 시간 적은양의 디바이스 연산으로 처리하기엔 무리가 있어 문자열 분석 기능은 백엔드서버로 위임하게되었습니다. knox api를 단기간에 습득하기엔 러닝커브가 너무 길어 knox api가 최대한 개입하지 않는 선에서 개발 하였습니다. </li></ul>

클라이언트 맞춤형 안드로이드 문자 모니터링 어플리케이션

단순한 랜딩 페이지부터 복잡한 웹앱 그리고 간단한 모바일 앱을 작성했습니다.대부분의 프론트엔드 프로젝트는 단독으로 설계 및 개발 하였으며 중간에 잠깐 다른 팀원이 생겼을때는 팀원간 협의 하에 공통된 방식으로 협업하였습니다.서드파티 api를 연동해본 경험이 있습니다. 다량의 정보를 한 화면에 최적화 시켜 렌더링 한 경험이 있습니다AWS,Cloud flare, vercel등 다양한 Pass도구를 실제 운영해보았고새로운 기술을 금방 도입하고 적응해왔습니다.

아르바이트 경험을 바탕으로 현장 관리 및 시공 실무자로 삼부르네상스 더 퍼스트 시공 현장에서 지하층 시공을 진행하였습니다. 관리직들과 함께 먹고자고 생활하면서 일은 현장직들과 같이하였습니다. 책임감있게 지시사항을 완수 하고 인원들을 관리,감독 하는 역할을 하였고 시공사 공무들과의 친분으로 현장일 전반에 대한 경험, 이해를 쌓았습니다.