프로젝트 소개

url만으로 자신의 옷을 등록하고 스타일을 공유하는 나만의 옷장 서비스

핵심 기능

• 웹스크래핑을 활용한 간편 옷장 등록

• 서로의 코디를 공유하고 상품 정보를 얻는 SNS

예상 타겟 및 기대효과

• 패션에 관심이 많은 사람들이 자신의 의류 목록을 손쉽게 관리하고 정보를 공유

• 자신의 보유한 패션 아이템에 대한 유저들의 활용 사례 추천

  ---

맡은 역할 및 개발파트

역할

• 프로젝트 팀장 및 스크럼마스터

  • 프로젝트 설정 및 환경설정

  • 개발 일정 관리 및 역할 분배

• 풀스택 개발

  • 백엔드 구축 및 프론트 기능 구현

개발 파트

• Backend

  • MongoDB를 통한 Database 관리

  • DB 구조 설계 및 data 스키마 정의

  • 데이터 패칭을 위한 REST API 구축

  • 로그인 및 회원가입을 위한 암호화

  • middleware를 활용한 protect route

  • puppeteer를 활용한 웹 스크래핑 및 알고리즘 구현

• 로그인

  • Next-auth v5를 활용한 사용자 로그인 관리(Credential)

• 메인 페이지

  • 프로모션 섹션 캐러셀 구현

  • 사용자가 등록한 아이템에 따른 스타일을 랜덤하게 추천

프로젝트 소개

도서 정보 공유, 독서모임, 독후감, 도서 거래 등 책에 관한 모바일 기반 웹 커뮤니티 플랫폼

핵심 기능

• 독서 모임

• 독후감 공유 및 댓글

• 채팅

예상 타겟 및 기대효과

• 독서 모임 및 도서관련 커뮤니티 활동을 원하는 2030

• 추후 중고 도서 거래 기능 추가 시 어린 자녀를 둔 부모부터 독서를 통한 자기계발을 원하는 사용자들로 이용 타겟 확장 가능

맡은 역할 및 개발파트

역할

• 프로젝트 팀장 및 스크럼마스터

  • 프로젝트 설정 및 환경설정

  • 개발 일정 관리 및 역할 분배

개발 파트

• 최적화

  • useCallback 및 메모이제이션으로 Rerendering 감소

  • 이미지 최적화 (spriteSVG, image 빌드 최적화)

  • Vecel speedInsight 100점

• Routing 환경 구성

  • React router로 route 설정

  • Lazy Loader 적용으로 로딩 시간 단축

  • useLoader를 통한 데이터 패치 선행

  • 로그인 여부에 따른 Protect routing 구현

  • 하단 GNB NavLink로 Active 상태 구현

• 채팅

  • Websoket 기반의 api를 사용한 실시간 채팅 기능 구현

  • Optimistic Update를 적용해 즉각적인 메세지 전송 UI 구현

  • textarea 개행에 따른 크기 조절

• 독서 모임 - 메인

  • InfiniteQuery적용으로 연속적인 유저 경험 구현

  • params를 활용한 모임 리스트 정렬 및 필터 기능 구현

  • 좋아요 버튼에 Optimistic Update를 적용하여 즉각적인 사용자 인터랙션 구현

• 독서모임 - 상세, 관리, 생성

  • 로그인 사용자의 상태에 따른 버튼 상태 변경 (신청하기, 이미 신청한 모임, 관리하기)

  • white-space pre 속성으로 유저가 작성한 본문의 공백 및 줄바꿈 그대로 표시

  • 참여 승인 여부에 따른 즉각적인 UI 인터랙션

  • Zustand를 활용한 입력폼 내용관리

회고록

• 사용자 중심 개발

  • Loader를 활용한 데이터 패치 선행과, Lazy를 통한 불필요한 데이터 패치 후행으로 페이지 로딩 성능 개선

  • Tanstack Query로 데이터를 캐싱, 불필요한 리로딩 방지

  • 채팅, 좋아요 같은 사용자 인터렉션 시 Optimistic Update를 활용한 UI 즉각 반응 구현

  • 라우팅을 SPA로 구성, 페이지 간 이동이 자연스럽게 UX를 향상, 그러나 최초 진입이 MPA 대비 느리고, Helmet으로 SEO 최적화를 시도했으나 모든 크롤링 봇이 읽지 못해 한계를 느낌 → 이후 Next 학습 계기가 되었음

  • vercel speed insight 점수 100점 달성

• JS to TS 리팩토링 경험

  • JavaScript로 개발했던 프로젝트를 TypeScript로 리팩토링 : 협업 시, 타입을 강제해 컴포넌트 사용을 더욱 명확히 할 수 있었음 리팩토링을 통해 기존 프로젝트를 변환하는 과정을 이해할 수 있었음

프로젝트 소개

목표

• 순수 자바스크립트로 “마켓컬리” 클론코딩하기

맡은 역할 및 개발파트

역할

• 스크럼마스터

  • 컨벤션 관리 및 Github관리

  • 프로젝트 설정 및 Netlify를 통한 배포

  • 데일리 스크럼 진행을 통한 프로젝트 완주 독려

개발 파트

• 회원가입

  • 각 입력정보 별 유효성 검증 진행

  • 카카오 주소 API를 활용한 주소등록

  • 포커스 순서 준수로 접근성 강화 및 A11Y 준수

• 상품 리뷰 및 문의하기

  • HTML 표준 준수로 접근성 및 SEO 최적화 (details, summary 태그를 사용한 아코디언 구현, dialog 태그를 사용한 모달 구현 등)

  • 추천순, 정렬순에 따른 정렬 기능 구현

  • 로그인 사용자에 따른 개인 정보 보호

회고록

• 바닐라 자바스크립트 프로젝트

  • JavaScript 만으로 프로젝트를 진행하므로, React 사용 시 잊힐 수 있는 DOM 조작과 JavaScript의 동작원리를 한 번 더 생각해 볼 수 있었음

• 시맨틱 마크업 및 HTML 표준 준수

  • details, summary 태그를 사용한 아코디언 구현, dialog 태그를 사용한 모달 구현 등 HTML 표준을 준수하여 접근성 및 SEO 최적화

  • 키보드 사용자를 위한 탭 인덱스 및 A11Y 준수를 위한 접근성 준수

• 유틸 함수 제작으로 재사용성 증가

  • Node를 선택하는 함수와 같이 자주 사용하는 함수를 유틸 함수로 제작

  • 버튼 및 각 요소의 상태를 조건 처리해 사용할 수 있도록 유틸 함수 제작

• 개인 회고

  • 현재 나와있는 수 많은 도구들을 뒤로하고 바닐라 자바스크립트로 프로젝트를 한다는 것은 어쩌면 매우 귀찮은 일이고 까다로운 일이었다. 그러나 이 경험을 통해서 프론트엔드 개발자에게 가장 근본인 자바스크립트와 가까워졌다는 측면에서 많은 성장을 할 수 있었다.

  • 또한 바날라 자바스크립트를 사용했기에 불편한 점들을 겪으면서 리액트가 왜 생겨났고, 현재 왜 가장 많이 사용되는 도구인지 깊이 이해할 수 있었고, 이는 리액트를 공부하기 위한 좋은 동기부여가 되었다.

  • 개발자로서 처음 참여해보는 프로젝트였기 때문에 처음 시작 때는 무엇부터 시작해야하는지 막막하고, 잘하고 있는지 답답한 마음이 들었지만 같은 프로젝트를 진행한 다른 조에 비해 가장 많은 기능을 구현하면서 함께 하는 팀원과 협동하고 의사를 나누는 것이 좋은 결과물을 만들고 불가능할 것 같은 일들을 가능하게 만드는 힘이 있다는 것을 깨닫는 프로젝트였다.

라이브 중계 전문 영상 프로덕션

• 영상 촬영

• 영상 편집

• 라이브 중계

• 사업 운영에 관한 전반적인 업무

[호주 워킹홀리데이]

[Domain brasserie](https://www.instagram.com/domainbrasserie)

25석 가량의 Botanic garden 인근 Brasseries

Cooking

• wok 및 pan 파트 (stir fry, pot thai, pasta ...)

• today's soup

• salad

Prep

• 재료 준비 및 손질

• 소스 준비 (데미그라스, 토마토, 마요네스, 타르타르 등)