미리보기

배포 링크: https://bb-fanchants.vercel.app/
관련 링크: github

기술 스택

TypeScript Next.js React Tailwind CSS Jotai react-i18next react-i18n-router Jest Testing Library Webpack ESLint Prettier

팀 구성 및 역할

• 개인 프로젝트

• 프론트엔드 개발 및 UI 디자인

핵심 기여

SEO 최적화

• Next.js의 SSG(Static Site Generation)을 활용한 정적 페이지 생성

• 메타 태그를 활용해 검색 결과에서의 표시를 최적화

• 2024년 9월, 구글에 "빅뱅 응원법" 검색 결과 2순위로 해당 사이트가 표시됨

다양한 사용자 유입

• Tailwind CSS를 활용한 모바일 중심의 반응형 페이지로 유저에게 쉽게 접근가능한 UI 제공

• 다국어 지원(한글, 영어)을 통해 전세계의 사용자 타겟팅

• 페이지 오픈 후 2주 동안, 약 500명 사용자 방문 및 2500 페이지 뷰 달성

• 한국을 비롯해 일본, 홍콩, 네덜란드, 미국, 싱가포르, 대만 등 다양한 나라의 사용자 방문 기록

테스트를 통한 코드 관리

• Jest와 Testing Library를 활용해 주요 로직 및 컴포넌트에 대한 테스트 작성 진행 중

관련 링크: github, 코드 리뷰 및 PR

기술 스택

Vite JavaScript React msw jotai react-query react-hook-form styled-components axios react-quill eslint jsdoc

팀 구성 및 역할

• FE 3명, BE 4명

• 프론트엔드 개발 및 UI 디자인, 테크리더

핵심 기여

기존의 모호하고 기술적으로 구현이 어려운 기획을 주도적으로 개편

• 지하철, 버스 전광판 등의 광고 업체 컨택 서비스 ->

  모임통장 형식의 펀딩으로 셀럽 서포트 및 광고를 관리하는 서비스

테크 리더로서 협업

• Github로 협업하는 문화를 전파하기 위하여 브랜치 전략 및 레파지토리 관리 안내 문서, 이슈 및 PR 템플릿 문서 작성

• 개인마다 주차별 진행도 관리를 통해 스프린트 관리

• 주차별 코드에 대하여 멘토와 소통하며 피드백을 반영

• 공통된 코드 스타일을 유지하기 위하여 프론트엔드 개발자들과 코딩 컨벤션을 정함

• 적극적으로 코드 리뷰에 참여하며 동료들과 의견을 공유하고 프로젝트 흐름을 파악

개발

• API 통신 관련 react-query 훅, 업로드한 파일 URL 변환 등 커스텀 훅 생성

• 계획된 개발 일정보다 늦어진 서버 배포 대응

  • API 스펙 변경에 빠르게 대응하기 위하여 Class 기반의 responseDto, reqeustDto를 적용

  • msw를 활용해 mock 서버를 개발하고 서버 배포 전에 API 연결

• prop-types와 jsdoc을 통해 컴포넌트의 타입을 관리하고 문서화

• 비개발자 중심의 타겟 유저층에게 좋은 사용자 경험을 제공하기 위하여 노력함

  • React Quill을 활용해 비교적 익숙한 블로그 형식의 에디터 구현

  • 모바일, 태블릿, PC를 고려해 반응형 디자인 구현

관련 링크: github, 멘토링 PR, 최우수상 발표 자료

기술 스택

Vite javascript React storybook jotai react-query react-hook-form styled-components axios prop-types eslint

팀 구성 및 역할

• 개인

• 프론트엔드 개발

핵심 기여

• 아토믹 디자인 패턴을 적용하고 storybook을 도입해 컴포넌트 문서화

• react-query로 서버 상태를 jotai로 전역상태를, react-hook-form으로 form 상태를 관리하며 상태관리 라이브러리를 비교하고 프로젝트에 적용함

• 반복되는 Intersection Observer 로직을 useIntersectionObserver으로 커스텀 훅화하고 useInfiniteQuery와 함께 활용하여 무한 스크롤 구현

• axios의 interceptors와 jotai의 atomWithStorage를 통해 accessToken을 localStorage에서 쉽게 관리

• 적극적으로 코드리뷰 및 멘토링에 참여하고 피드백을 수용하여 긍정적인 평가를 받아 프론트엔드 최우수상 수상

관련 링크: github, 개인 회고

기술 스택

FE: Vite javascript React styled-compoents recoil react-hook-form axios prop-types face-api.js socket.io
Signaling Server: nodejs Babel express ws socket.io

팀 구성 및 역할

• FE 1명, BE 1명, AI 1명

• 시그널링 서버, 프론트엔드 개발 및 UI 디자인

핵심 기여

• face-api.js를 활용한 인공지능 기반 얼굴 인식 기능 구현

• UI 디자인을 기반으로 API 명세서를 작성하고 BE 개발자와 소통하며 API 스펙 정리 및 문서화

• Class 문법을 활용해 WebRTC 로직을 가독성이 좋게 분리: 기존 코드 163줄 => 65줄 작성한 블로그

• react-hook-form을 활용해 비제어 컴포넌트 방식으로 form을 관리하고 useFormContext 훅을 사용해 재사용 가능하도록 컴포넌트화 작성한 블로그

• ref 외부 클릭 시 callback 함수가 실행되는 useOutsideClick 커스텀 훅과 Portal을 활용해 외부 클릭 시 닫히는 모달창 구현 작성한 블로그

관련 링크: github

기술 스택

FE: CRA javacript React styled-components axios recoil react-helmet-async @toast-ui/react-editor
BE: nodejs express MongoDB

팀 구성 및 역할

• 개인

• 백엔드, 프론트엔드 개발 및 UI 디자인

핵심 기여

서버

• 포스트 CRUD, 댓글 CR, 좋아요 CRD 기능 및 이미지 업로드 기능 구현

• MVC 패턴으로 코드 관리

• 데이터베이스 설계부터 서버 개발을 경험하며 백엔드 개발자의 입장을 이해하고 이를 토대로 추후 원활한 협업 진행

프론트엔드

• 모바일, 태블릿, PC 환경에서 긍정적인 사용자 경험을 제공하기 위하여 grid를 활용한 반응형 디자인 구현

• styled-components와 recoil을 활용해 전역상태에 따른 다크 모드 기능 구현

• 이미지 업로드 기능이 포함된 블로그 에디터 구현

관련 링크: v1 github, v2 github, 에코노베이션 2022 Summer Dev 발표

기술 스택

vite javascript React styled-components axios mui react-helmet-async

팀 구성 및 역할

• FE 1명, BE 1명

• 프론트엔드 개발 및 UI 디자인

• 참여 페이지: 메인, 상세, 책 목록, 기자재 목록, 검색 목록, 관리자, 내 정보

핵심 기여

• v1에서 반복되던 레이아웃을 v2에서 UI 통일성 및 코드 유지보수성을 위하여 컴포넌트로 리팩토링함: InfoListLayout, RenteeDetail, RenteeInfo

• Intersection Observer을 활용한 무한 스크롤을 구현함

• 첫 FE 개발이었던 1차 스프린트 후 v2에서 리팩토링을 진행하며 리액트의 컴포넌트 특징을 살려 가독성이 좋은 코드 작성을 위해 고민함

• 모바일 브라우저에서 100vh가 예상대로 동작하지 않는 이슈 해결: css custom propery에 window.innerHeight / 100 저장하는 로직을 커스텀 훅 use100vh으로 생성 작성한 블로그

• 프론트엔드 관련 강의 수강
• 개인 카카오 쇼핑하기 클론 프로젝트를 진행하고 해당 프로젝트로 프론트엔드 최우수상 수상
• 팀 프로젝트에 프론트엔드 개발자 및 테크 리더로 참여

• 개인 블로그 프로젝트에서 풀스택 개발
• 팀 디스코드 클론 프로젝트에 프론트엔드 개발자 및 애자일 마스터로 참여
• PMP 문서, 아키텍처 문서, 중간공유문서, 최종발표문서 등 문서화와 목표와 달성 사항을 고려한 스프린트를 관리를 경험

• 총 4번의 프로젝트에 참여: AI 1번, FE 3번
• 에코노베이션 소속의 자바스크립트, CSS, 피그마 스터디 참여하며 동아리원들과 의견을 공유하고 함께 성장
• 신입모집TF팀 참여, 관리부 활동, 1년 반 동안의 멘토링 진행

• 제공되는 FE, BE, 기획 교육 프로그램 수강
• 초기 운영진으로서 개발이 처음인 대다수의 부원들의 성장을 위해 다양한 피드백을 주고받으며 동아리를 이끎
• 동아리원 교육을 위해 백엔드(Django)와 기획 분야의 스터디 진행
• 프로젝트 쿠폰을 모으다를 통해 멋쟁이사자처럼 대학 아이디어톤 본선 진출(10위)
• 프로젝트 쿠폰을 모으다로 해커톤 참여