주니어 프론트엔드 개발자 박시우입니다.

Github발표 자료발표 영상

스냅 사진사와 이용자를 매칭하는 SNS 서비스입니다.

• React.js
• JavaScript
• styled-components

• Backend API 호출이 용이한 useAPI Custom Hook 개발 (실제 사용 예시)
  • 서버와의 비동기 통신시 사용되는 반복되는 패턴을 공통 훅으로 분리
  • State로서 응답과 에러를 헨들링할 수 있도록 개발
  • API를 객체로 관리해 편리한 API 호출이 가능하게끔 설계
• 유연한 컴포넌트 설계를 위해 Compound Component 패턴 활용
  • 로직은 Custom Hook 패턴으로 분리하는 등 유지보수가 용이한 컴포넌트 디자인(실제 사용 예시)
• JSDoc을 적극적으로 활용해 개발 경험 향상
• SVG 파일 import문을 자동으로 생성해주는 node script 작성
• 팀 리더로서 참여
  • eslint, prettier, Live Share 등 다양한 툴을 활용해 코드 품질 향상 도모
  • Git-flow 활용, issue, commit message, PR 컨벤션 확립 등의 방법으로 협업 효율화

Github서비스 링크

코드를 서로 나눌 수 있도록 마크다운 입력이 가능한 커뮤니티입니다.

• React.js
• TypeScript
• styled-components
• Node.js
• Firebase

• node-mailer 모듈을 활용해 댓글이 달릴 경우 글 작성자에게 메일을 보내는 API 개발
• Code Splitting, 서브셋 폰트 등을 활용해 성능 최적화 (관련 포스트)
  • Lighthouse 기준 성능 점수 82점에서 91점으로 향상

Github블로그 링크

하나부터 열까지 직접 개발하는 기술 블로그입니다.

• Next.js
• TypeScript
• styled-components
• Node.js
• Firebase

• 빌드 후 바뀔 필요가 없는 점을 감안해, remark 를 활용 Markdown으로 작성한 포스팅을 정적 웹사이트로 빌드 (Static Site Generation)
• SEO를 고려한 시멘틱 웹 개발
  • Google 총 노출 수 2430회, 평균 게재순위 17.8위
• Express.js를 활용해 Thumbnail과 Open Graph Image 생성 자동화
• 블로그 내 게시물 검색용 엔드포인트 구현 및 debouncing 기법 활용해 API Call 최적화 (관련 포스트)

Github설문지 링크

AHP 분석법에 기반해 사용자가 슬라이더를 움직이면 실시간으로 유효성을 검증하는 복잡한 로직의 웹 설문지를 개발했습니다.

• Next.js
• TypeScript
• Recoil
• Cypress
• Tailwind

• Python으로 개발된 유효성 검증 로직을 TypeScript로 마이그레이션
  • 비효율적인 로직 개선 및 리팩토링 병행 (관련 포스트)
  • 복잡한 로직의 동작 확인을 위해 Cypress 활용해 e2e 테스트 코드 작성
• 사용자가 슬라이더를 움직일 때마다 실시간 유효성 검증 구현을 위해 recoil 사용
  • selector 를 활용해 검증 계산의 결과를 여러 컴포넌트에서 구독할 수 있도록 개발
  • 모든 문제의 유효성이 통과되었는지 여부를 확인하고, 통과하지 못한 문제는 Global Navigation Bar에서 확인 가능하도록 상태관리 플로우 구축
• Backend 엔드포인트 명세 설계

Github서비스 링크

금연을 도전하는 사람들에게 담배를 끊어 얻게된 이득을 실시간으로 보여줘 금연에 대한 동기를 부여해주는 Web App입니다.

• React.js
• Redux
• Bootstrap
• Firebase

• React.lazy() 활용해 레이지 로딩 구현
• React.Suspense 활용해 loading indicator 구현

Github작품 설명

경로 기반 일정 관리 크로스플랫폼 어플리케이션입니다.

• Flutter
• Django
• PostgreSQL
• AWS

• 도시과학대학장상 수상
• 순서와 경로가 담긴 스케줄 데이터를 효율적으로 다루기 위해 Frontend / Backend 양측에서 Serializer, Deserializer 개발
• 직관적인 일정 관리를 위해, 스크롤이 가능한 수직 타임라인에 드래그 앤 드롭으로 일정 블록의 순서를 바꾸거나 삭제하고, 길게 누르며 드래그해 일정 블록의 지속 시간을 변경할 수 있는 위젯을 구현
  • 스케줄의 종류, 장소, 순서, 시각, 시간이 자유자재로 바뀔 수 있도록 로직을 설계
  • 타임라인을 벗어나거나 최소 스케줄 시간은 넘도록 하는 등 다양한 상황을 고려해 예외처리
• Django Rest Framework를 사용해 8개의 엔드포인트를 가진 RESTful API를 구현
• 순서가 있는 공간 데이터를 효과적으로 다룰 수 있도록 DB 설계

기능 설명 봇 카카오톡 오픈프로필

코인 가격 조회, NFT 가격 조회 등 20 ~ 30가지의 블록체인 투자 관련 기능을 가진 카카오톡 봇과, 커뮤니티 관리 기능을 탑재한 디스코드 봇입니다.

• Node.js

• 카카오톡 봇 실 사용자 약 500여 명 (서비스중)
  • 코인 초성검색/이름검색 구현
  • UPBit, Binance, Gate.io, Bithumb 등 각 거래소별로 상이한 Open API 사용에 맞춰 쿼리 및 데이터 파싱
  • JSON 활용해 로컬 데이터베이스 구축, 사용자가 직접 특정 NFT의 한글명을 등록할 수 있도록 기능 구현
• NFT 프로젝트 커뮤니티 관리를 위한 이벤트 봇 개발
• NFT 정보 검색 및 보유중인 NFT를 한눈에 볼 수 있는 ‘가족사진’ 기능 개발
  • 약 2800여 명의 사용자가 있는 NFT 프로젝트에서 실사용

인천시 각 구에서 수집하는 생활폐기물 수거 기록과 카드 사용 데이터, 택배 데이터, 통신사 유동인구 데이터 등을 활용해 생활폐기물 발생량을 분석했습니다.

• Python
• PostgreSQL

• 인천시 내의 각 구에서 보내주는 Raw Data의 형식에 일관성이 없고 품질이 매우 낮아 Python과 C# ASP.NET 등으로 자동화 프로그램 개발, 200GB의 텍스트 및 공간 데이터 수집
• PostgreSQL을 활용해 분석용 데이터를 DB화
• GIS, Python 등을 이용해 데이터를 시각화하고 데이터의 특성을 파악