미리보기

Description

React Next.js zustand Tailwind CSS

일상 속에서 발생하는 자투리 시간을 의미 있게 사용할 수 있도록 돕는 개인 맞춤형 활동 추천 서비스 (Website)

• CLOVA Studio와 Open AI를 이용해 자투리 시간 활동 추천

• 추천 활동 완료 후 활동 종류 및 시간 아카이빙

Experience

[프로젝트를 위한 노력과 성과]

• 가독성 높은 퍼널을 구현하기 위해 공용 컴포넌트 <IF>를 구현 및 사용

• 소셜 로그인 기능, 자투리 시간 활동 추천 퍼널, 트리맵을 통한 아카이빙 가시화 기능 개발

  • switch문을 이용해 키워드별 활동 시간 파악을 위한 트리맵 로직 직접 구현

• Multi-stage 방식을 이용한 CI/CD를 구축하여 Docker 이미지 최적화

[팀원을 위한 노력과 성과]

• 팀원이 배포 과정을 이해할 수 있도록 CI/CD 구축 과정을 정리한 자료 공유

• GNB를 기준으로 2주씩 스프린트를 돌리는 협업 방식을 제안하여 적용

  • 이를 통해 애자일 방법론을 실행하기 위해 노력

• 디자이너와의 원활한 소통을 위해 storybook을 이용하여 story 구현 중

조각조각 Repository 링크 ⬅

Description
React Next.js TypeScript Zustand Tailwind CSS Jest

기능 구현에 초점이 맞춰 제작한 기존 프로젝트의 사용자 경험과 성능을 높이기
위해 리팩토링을 진행했습니다. (Website)

• ‘왜’에 초점을 맞춰 적절한 기술을 선정하기 위해 노력

• Clean Code 규칙 설정, 소통하기 쉬운 코드 구현을 위해 노력

• 웹 표준과 웹 접근성을 고려해 개발

Experience
[프로젝트를 위한 노력과 성과]

• 이미지 Lazy Loading을 통해 LCP 53% 단축(6.2s → 2.9s)

• 로딩되는 이미지 포맷을 변경하여 이미지 용량 20% 단축

• 날씨 데이터 공유 로직을 개선하여 날씨 관련 코드의 가독성과 재사용성 증가에 기여

• tabIndex와 ARIA 속성을 사용해 키보드 접근성 개선 (테스트 영상)

• Zustand를 통해 로그인 정보를 전역적으로 관리

  • Recoil과 비교해보며 각 상태관리 라이브러리 사용의 적절한 상황을 이해

• 웹 표준을 준수하기 위해 프로젝트 전체에 시맨틱 태그 적용

• Jest와 RTL을 이용해 단위 테스트 및 통합 테스트 구현

  • MSW로 외부 API를 모킹하여 API 테스트 구현

[팀원을 위한 노력과 성과]

• 프로젝트 리더로서 칸반 형식으로 이슈를 관리할 수 있는 GitHub의 project 기능을 도입해
  효율적으로 PR 관리

• 컴포넌트의 재사용성을 높이는 아토믹 디자인 패턴을 적용

  • enum을 이용해 공용 아톰 설계 및 개발 환경 셋팅 후 팀원들에게 사용방법 공유

  • const enum을 주로 사용하여 typescript에서 enum 사용 시 발생하는 트리 셰이킹 문제를 최소화

• 프론트엔드 성능 최적화 메뉴얼 및 적용 과정을 정리한 자료 공유

• Clean Code 규칙, 웹 표준과 접근성을 학습하며 정리한 자료 공유

리팩토링 Repository 링크 ⬅️

Description
React Next.js TypeScript Recoil
날씨와 기온별 코디를 공유하고 소통할 수 있는 SNS입니다. (사이트 주소)

• 날씨와 기온 정보가 함께 올라가는 코디 업로드 기능

• 현재 최고/최저 기온 범위 내 카테고리 및 코디 추천 기능

Experience
[프로젝트를 위한 노력과 성과]

• 성능 최적화에 유리한 Next.js 도입

  • CSR, SSR 방식의 차이점을 이해하고 상황에 맞게 적용

• 피드 페이지, 메인 페이지, 구글 로그인 페이지 구현

• Recoil을 이용해 각종 상태 관리

  • 날씨 정보와 로그인 정보를 전역적으로 관리

  • 해시태그와 카테고리 데이터를 전역적으로 관리하여 검색 기능 구현

[팀원을 위한 노력과 성과]

• 빠른 기능 테스트와 피드백을 위해 React + Docker + Nginx + GitHub action + AWS EC2 이용하여 CI/CD 구축

• 올바른 TypeScript 사용을 위한 메뉴얼 작성 및 공유

옷늘날씨 Repository 링크 ⬅️

• 개발, 기획, 디자인이 모여 함께 가치를 창출하는 한국대학생IT경영학회

• 기업의 문제를 함께 고민하고 풀어나가는 기업 프로젝트 참여

  • PM을 맡아 개발, 기획, 디자인 사이에서의 의견 조율에 힘썼고,

  • 상세 페이지에서의 사용자 이탈률 문제를 해결할 개선안을 개발 및 제안하여 적용

    • 사용자가 정보를 빠르게 파악할 수 있도록 하는 액티브 탭 기능 구현 (적용 페이지)

  • 기업의 업무 방식을 익히고 소통하는 방식을 배울 수 있었던 경험

• 기획 단계부터 함께 고민하여 서비스 배포 및 시연까지 진행하는 밋업 데이 참여

• 큐시즘 내 서류 스터디 '서류왕 큐형' 운영

• 6개월동안 교육을 진행하며 4개의 프로젝트를 진행
• GitHub와 slack 등을 이용한 팀 프로젝트를 하며 협업 경험
• 기획부터 시작해 서버 배포까지 풀스택 개발
  • ERD 및 API 설계부터 프로젝트 설계를 할 수 있게 되었고, 백엔드와의 커뮤니케이션 능력 습득

동아리 운영진으로써 조의 멘토가 되어 프로젝트 및 창업 서비스를 기획하고 진행했습니다.

• 공생멍냥 학대당한 동물들을 위한 기부형 크라우드 펀딩

  • 목표 펀딩 금액의 176% 달성

• 2022학년도 SSU Startup Challenge: Demo Day

  • 의류폐기물 문제 해결과 오프라인 리폼시장의 쇠퇴를 막는 리폼중개플랫폼 ‘소잉박스’ 기획

  • 저렴하게 구입한 의류 폐기물을 이용해 큰 수익을 얻을 수 있는 비즈니스 모델 구축

  • 선순환을 통해 쇠퇴하는 시장을 살릴 수 있는 사업이라는 호평을
    받으며 대상 수상