미리보기

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

레이아웃 설계 부터 상태 조작 , 자동 배포까지 개발,운영했습니다.

css- styled component - tailwind 3 - vanilla extract 까지 다양한 스타일 도구를 사용해왔습니다.

리액트 라이프 사이클에 대한 명확한 이해를 가지고 작업해왔습니다.

핀옵스를 신경쓰며 스케일 조정가능한 배포 작업을 경험해보았습니다.

다양한 경험을 바탕으로 약간 더 신경쓰는 습관은 제가 프로젝트를 완성시키는대 큰 역할을 하였습니다.

팀원과 각자 프로젝트 진행시 겪는 어려운 사항들을 공감하며 협력할 수 잇는점을 찾아서 해결하곤 했습니다.

서비스 작성시 어떤게 문제이고 어디가 프로젝트 내의 함정일지 항상 염두하며 행동했습니다.

다양한 경험들은 어떤 sw를 만들지라도 올바른 문제 정의와 정확한 탐색만 한다면 웹개발에 있어서 불가능은 없다 생각합니다.

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

프로젝트 개요

수천개의 데이터가 실시간으로 변경되며, 뷰포트 한 화면에 최소 250개 이상의 상품을 노출 , 반응형,적응형 웹을 모두사용해야하는 ui 였습니다. 초기 빠른 프로토 타입작성으로 인한 높은 프로젝트 복잡도를 시간이 지나고 리펙토링을 진행하여 많은 부분들을 개선시켰습니다.

많은 컴포넌트를 자주 변경함에도 사용자의 경험에 문제가 없어야하는 도전적인 과제였으며, 런타임환경에서의 복잡한 데이터처리 로직과, 상태관리를 기술적으로 해결하였습니다.

• B2B 중심의 커머스 플랫폼 마이그레이션

• 데이터 처리 , 실시간 가격 변동 기능을 포함한 프로젝트 설계

• 디자인 패턴을 사용한 클라이언트 사이드에서의 복잡한 데이터 처리

• 백오피스 설계 및 작성 ( 인사 정보 관리 , 데이터 aggregation , 파일 관리 등 )

  
  

사용한 기술 스택

• Next.js 12.3.4 , React 17, MUI Data Grid, Zustand, React Query, i18n

• AWS Lambda, Cloud Flare Image, AWS SNS, AWS WAF, Vercel , etc..

  ---

  주요 구현 및 성과

  실시간 가격 변동 및 대용량 데이터 처리 최적화

  250개이상에 달하는 상품컴포넌트를 뷰포트내에서 쾌적하게 처리되게 해본 경험이있습니다.
  클라이언트 런타임환경에서 복잡한 정렬, 여러단계의 어려운 유효성검사를 처리해본 경험이있습니다.
  

  • 실시간 데이터 수신·처리

    • 4초 간격 최대 10,000개(페이로드 5~25 MB) 상품 정보를 HTTP 통신으로 수신받아 처리

    • 서버 처리 제약 보완을 위해 클라이언트 사이드에서 수신·파싱·정렬·검색·필터링 처리 작업 수행.

  • 정렬 알고리즘 개선 및 FCP(초기 컨텐츠 페인팅) 최적화

    • 정렬 알고리즘 개선 (N³ → N log N)으로 전체 정렬 시간 대폭 단축 ( 평균 정렬 시간 70 ms → 6~10 ms 단축)

    • 복잡한 프로토타입 컴포넌트를 데이터 처리 영역,UI영역으로 나눈 다음 단순한 컴포넌트로 리펙토링해여 렌더링 시간 개선.

  • 선택 유효성 검증을 위한 Rule Engine 적용

    • 최소 5개 이상의 복합 조건(카테고리, 국가, 여러 시간 단위,브랜드 ,브랜드,국가별 제한 등 ) 충족 시 장바구니에 담게 하는 로직 구현

    • zustand store에서 엔진 생성 및 동작 위임.

    • rule engine을 사용함으로서 해당 로직의 코드 구조 개선, 재사용성 확보.

  • 우선순위 기반의 정렬 기능 추가

    • 복잡한 정렬 조건을 키워드·수식어 기반 동적 상세정보 우선순위 정렬을 통한 성능 확대. ( n^2 => n log n )

  • 공통 모듈화

    • 다양한 리액트 디자인 패턴을 사용해 팀원간 기능 이식 및 사용을 용이하게 작성.

    • context api · custom hook 를 사용해 컴포넌트간 결합력을 줄이고 유지보수성 및 확장성 확보

  • 프로젝트 전반의 레이아웃,스타일 설정,파일 구조 설계
    

    ---

    백오피스 웹앱 작성

    100개 이상의 통계,HR 기능 등 B2B를 위한 백오피스 웹앱을 효율적으로 작업

    • 여러페이지에서 등장하는 컬럼의 경우 컴포넌트화 시켜 재사용 가능하도록 설계

    • React 16 fiber 도입 이전 버전에 맞게 작성된 오픈소스 위지윅 에디터를 fiber 구조를 포함한 라이프 사이클에 맞게 에디터 생성 후 재구성 해 사용.

    • 새로운 cdn변경 작업( 기존 aws s3기반 cdn=>cloud flare image 로 변경)

    • busboy를 사용해 다중 파일 업로드 기능 구현.

    • 소리 알람 기능을 위한 브라우저 Notification API 를 통한 권한 처리 , 자연스러운 사용자 인터렉션을 통한 권한 획득 기능 추가

    • 백엔드와 많은 회의를 통해 데이터 처리 영역 조율

    제한적 영역에서 i18n 국제화 도구 적용

    • 제품의 특정 영역의 키워드에 한해 국제화 기능 지원.

Next.js 기반 유저 커뮤니티 마이그레이션 프로젝트

다음 해외 b2b 프로젝트를 위한 사전 단계였으며, 프로젝트의 서비스 아키텍쳐 설계 부터 기능 구현까지 직접 구현했습니다.

FFmpeg와 pre-signed url을 통해 대용량 파일을 처리하였습니다.

프로젝트 개요

• 동영상 롱,숏폼 공유 및 운영자 관리

• 기존 앵귤러로 작성된 커뮤니티 사이트를 Next.js 12로 마이그레이션

핵심 기능 및 서비스

• CloudFront + S3 + next api 를 활용한 동영상 숏폼/롱폼 업로드 및 관리 대시보드 구축 (s3 pre-signed URL 사용 )

• nextjs SSR 기능과 middleware를 사용한 유저 단계별 권한 처리 ( 관리자, 유저 등 )

• 서비스 품질관리에 대한 많은 경험 획득. 유저,클라이언트 피드백을 통한 편의성 강화

  • 다양한 인터렉션에서 발생하는 개별 에러메시지 처리를 통한 UX 개선 경험 ( 사용자의 의도되지않은 행동, 다양한 에러 메시지 핸들링 등 )

  • 서버내 정보를 즉시 반영

• RTK를 사용한 상태관리.

배포 및 인프라

• AWS Beanstalk을 활용한 배포 환경 구축

소규모 회사 랜딩 페이지 개발 및 SEO 최적화 경험

프로젝트 개요

• 소규모 회사의 간단한 소개를 위한 랜딩 페이지 개발

• 차기 마이그레이션 프로젝트가 Angular로 작성되어 Angular 15 기반으로 진행

SEO 최적화 및 검색 엔진 노출

• 시멘틱 태그 활용 및 사이트맵 구성

• Google Domains, 네이버 서치 어드바이저 설정

AWS 기반 앵귤러 유니버설 웹앱 배포

• CodeCommit + pipeline을 사용한 자동 배포

  Beanstalk의 롤링 배포 방식 지원으로 안정적인 배포 환경 구축

프로젝트 개요

문자 전달 및 알람 서비스.

• 클라이언트 요구사항으로 작성한 모바일 앱 개발

• 지정된 조건의 문자 중 특정 내용만 서버로 전송 → 대시보드에서 모니터링 가능 및 비즈니스 로직에 적용.

• Android API 30~33 시기 개발 , React Native 및 Java로 개발

핵심 기능

• 은행에서 전달받은 특정 문자열에 한 해서 재처리 후 서버로 전송.

• 포그라운드 서비스로 24시간 상시 동작하는 애플리케이션.

• 안드로이드 보안 정책 대응 → 디바이스 내 저장장치 미사용으로 변경, 안드로이드 api가 권장하는 방식의 전송방식 사용

  
  

약 한달간 진행되었으며,

리액트 코어 코드 해석과 리액트에서 렌더링을 동작시키는 순서에 대해 깊게 알아보는 그룹 스터디를 진행하였습니다.

리액트 Fiber 도입 이전과 후를 알아보고 hook, 렌더링 과정에 대해 상세히 알아보고 발표를 진행하였습니다.

리액트의 모든 코드를 들여다 보는것이 아니라 hook 동작, 렌더링 순서에서 필요한것들, 리액트의 렌더링 방식에서 동작하는 코드들에 대해 리액트 core의 실제 코드를 해석하여 이해하는 방식으로 공부하였습니다.