미리보기

젝트는 IT 사이드 프로젝트 동아리로, 다양한 포지션의 멤버들과 함께 협업하면서 다양한 활동을 진행하는 동아리입니다.

공식 홈페이지는 젝트의 다양한 활동 공유, 자주 묻는 질문 및 문의할 수 있는 창구, 모집 기간에 동아리 팀원 지원 접수를 받을 수 있습니다.

동아리 특색에 맞는 디자인 시스템을 도입하여 홈페이지를 개발합니다. 현재 운영진이 동아리 팀원과 지원서를 쉽게 관리하기 위한 관리자 페이지를 개발 중에 있습니다.

서비스 배포 주소 : https://ject.kr/

깃허브 레포지토리 : https://github.com/JECT-Study/JECT-Official-WebSite-Client

팀원 : 프론트엔드 2명, 백엔드 3명, 프로덕트 매니저 1명, 프로덕트 디자이너 1명

사용한 기술 및 협업 도구

• 프레임워크 및 라이브러리: React, Vite, TypeScript

• 상태 관리 : zustand, Tanstack-query

• 스타일링: Tailwind CSS, clsx

• 테스트 도구: Storybook,

• 모니터링 도구: Sentry, Amplitude

• 배포 및 CI/CD: AWS S3, cloudfront, Route53, Vercel(qa용), Github Actions, Qodana

• 협업 도구: Github, Slack, Figma, Notion, discord

개발 담당

• 디자인 시스템 개발

  • tailwindcss를 이용해 디자인 토큰 관리

  • Storybook을 이용한 UI 컴포넌트 문서화 및 관리, 동작 테스트 진행

• RESTful API 연동을 통해 비즈니스 로직 및 사용자 인터페이스 구현

  • 지원서 작성 기능, 지원하기 페이지, 동아리 부활동 소개 페이지, faq 페이지 개발

  • Tanstack-query 및 zustand 활용한 상태 관리

  • 키보드 네비게이션 등 접근성을 고려하여 개발

• 에러 및 예외 핸들링

  • Sentry 도구 도입으로 에러 로깅 및 성능 모니터링

• 버전 배포 전 vercel로 배포한 클라이언트로 QA 진행

• SEO 개선 작업

• 공식 홈페이지 운영 중 이슈 대응

잔디 일기는 꾸준한 일기 작성, 다른 사람의 일기를 통해 일상을 공유하며 내적 성장을 도모하기 위한 웹 일기장입니다. 꾸준히 기록하는 습관은 나의 내적인 성장 그리고 현재 상황을 인지하는데 큰 도움이 됩니다. 이러한 생각과 PC를 이용하면 일기를 쉽고 빠르게 작성할 수 있다는 것에 착안하여 프로젝트를 진행하게 되었습니다.

잔디 일기에는 “오늘의 질문”, “잔디 채우기”, “리워드 및 테마 상점 시스템”, “다른 사람과의 일상 공유” 와 같이 꾸준한 일기 작성을 위해 동기 부여 요소를 가지고 있습니다.

서비스 배포 : https://grassdiary.site/ (현재는 서비스 중단)

깃허브 레포지토리 : https://github.com/JECT-Study/Grass-Diary-Client

팀원 : 프론트엔드 3명, 백엔드 3명 프로덕트 매니저 1명, 프로덕트 디자이너 1명

사용한 기술 및 협업 도구

• 프레임워크 및 라이브러리: React 18, Typescript, Vite,

• 상태 관리 : Zustand(recoil에서 마이그레이션), tanstack(react-query)

• 스타일링: styled-components (styleX에서 마이그레이션)

• 배포 및 CI/CD: AWS S3, cloudfront, Route 53, Github actions

• 협업 도구: Github project & Issue, discord, 카카오톡 오픈채팅, Figma, Notion

개발 담당

• 공통 UI 컴포넌트 구현으로 개발 편의성 개선

  • 모달, 토스트, 헤더 및 푸터, 드롭메뉴 등 재사용성이 높은 컴포넌트를 분리하여 공통 컴포넌트로 구현

• zustand를 활용하여 유저 상태 관리, 모달 및 토스트 상태 관리, 댓글 상태 관리

• RESTful API 연동을 통한 기능 및 사용자 인터페이스 구현

  • react-query v5를 이용하여 서버 상태 관리

  • masonry 레이아웃의 일기 목록 조회 기능 구현

  • IntersectionObserver와 react query의 useInfiniteQuery를 사용하여 무한 스크롤 기능 구현

  • 일기 상세 조회 / 수정 / 삭제 기능 구현

  • 댓글 및 좋아요 기능 구현

  • 이미지 파일 업로드 기능 구현

• 페이지 예외 처리 및 예기치 못한 API 에러 처리

  • quertClient를 이용해 전역 에러 처리

  • 에러 모달, 에러 토스트, 에러페이지를 이용해 사용자에게 피드백 제공

    • 네트워크 에러 시 피드백 제공

    • 로그인 만료 타이머 구현 후 만료 시 피드백 제공

• 모바일 반응형 웹 개발로 사용자 접근성 개선

• 네이버 SEO 개선

  • 네이버에 서비스명 검색 시 첫페이지 상단부분에 노출되도록 SEO 개선

  • 네이버 서치 어드바이저에 잔디일기 사이트 등록

  • 메타 태그, robots.txt, sitemap 작성으로 네이버 SEO 개선

• AWS S3, Cloudfront, Route53을 통해 서비스 배포 및 github action으로 CI/CD 구축

젝트 동아리 운영진 활동

• 기간 : 2024.11 ~ 진행 중

• 동아리 운영 및 활동의 기틀 마련

  • 활동하던 스터디를 동아리로 확장시키며 동아리 운영 정책 마련

  • 몰입도 높은 팀 프로젝트 활동과 활발한 스터디 활동을 위해 가이드라인 및 규칙 작성

  • 활동 중인 팀 관리 및 피드백

• 젝트 동아리 홈페이지 개발

  • 프론트엔드 담당

• 젝톡 참여 : 개발 지식을 공유하는 발표 영상 제작 후 유튜브 업로드

젝트 동아리 1기 활동

• 잔디 일기 팀 프로젝트 활동

  • 기간 : 2024.02 ~ 진행 중

• 바닐라 자바스크립트 사이드 프로젝트 스터디

  • 기간 : 2024.03 ~ 2024.05

  • 활동 : 간단한 기능을 JS로 구현하고 발표 진행 / 팀원에게 시연 및 코드 설명하고 서로 피드백 주고 받기

Weiter 팀 프로젝트 활동

• 목적 : 이웃과 상품 구매에 대해 더치페이를 도와주는 웹 서비스

• 기술 스택 : HTML/CSS, Django

• 역할 : 프론트엔드

• 성과 :

  • 10기 동아리 아이디어톤 은상

멋쟁이 사자처럼 동아리 해커톤 참여 - 더치배달 프로젝트

• 프로젝트 목적 : 이웃과 배달 주문을 함께 하여 배달비를 아낄 수 있도록 도와주는 서비스

• 기술 스택 : JS, React, Django

• 역할 : 프론트엔드

• 액션 :

  • kakao 지도 Web API를 활용한 기능 구현 : 사용자의 현재 위치 조회와 더치배달을 요청한 이웃의 위치 조회 기능 구현

• 성과 :

  • 팀원들과 함께 밤새며 개발에 몰입했던 경험