미리보기

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

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

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

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

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

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

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

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

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

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

  • enum을 이용해 공용 아톰 설계 및 개발 환경 셋팅

• Next의 Fetch로 리소스를 캐싱하여 데이터 호출 시간 약 70% 감소

  • 서비스 워커를 적용해 Fetch에 대한 리소스를 캐싱하여 데이터 호출 시간 97% 단축
    (254ms -> 6.5ms)

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

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

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

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

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

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

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

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

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

리팩토링 Repository 링크 ⬅️

Description
역할 : 프론트엔드 리더
날씨와 기온별 코디를 공유하고 소통할 수 있는 SNS입니다. (사이트 주소)

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

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

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

• 첫 페이지에 날씨와 적합한 코디를 빠르게 보여주고
  싶었고, 이를 가능케 하는 Next.js 도입

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

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

• OpenWeatherMap API와 Kakao 지도 API를 이용해 현재 위치 기반
  날씨와 기온을 사용자에게 보여주는 코드 구현

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

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

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

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

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

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

옷늘날씨 Repository 링크 ⬅️

Description
역할 : 프로젝트 리더 (풀스택 개발)
포스코x코딩온 웹 풀스택 과정 내에서 만들어진 프로젝트들을 서로 공유하고,
팀으로 클론코딩을 함께 할 수 있는 플랫폼 서비스입니다. (소개 자료)

• 프로젝트 업로드 및 공유 기능

• 업로드된 프로젝트를 클론코딩하고 싶은 사람들을 모아 함께하는
  리코프런 기능

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

• 이미지 업로드시 addImageBlobHook을 이용해 AWS S3로 올리고,
  S3에서 이미지 url을 가져와 100줄 이상이었던 이미지 주소를 2줄 내외로 줄여
  사용자 경험을 개선

• AWS EC2와 Nginx를 이용해 서버 배포

• 메인페이지와 마이페이지 RESTful API 구현

• JWT를 이용해 로그인 인증 토큰을 암호화 및 복호화하는 코드를 구현하며
  서비스 보안 증가에 기여

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

• SQL문이 서툰 팀원들의 빠른 이해를 위해 익숙한 JavaScript로 SQL문을 작성하는
  Sequelize 도입을 제안했고, 함께 학습하며 ERD 설계 및 DB 구축

Coplearn Repository 링크 ⬅️

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

• 감사자료 제작 및 검토 과정을 사무국장과 함께 주도하며 '문제 없음'으로 마무리하는 과정에 기여

• 학생회 행사 예산 산정 및 협의체 선정 과정에 참여

• 학생회비 사용 내역 기록 및 감사자료 제작

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

• 왈과왈부 미용실습견을 위한 기부형 크라우드 펀딩
  • 목표 펀딩 금액의 120% 달성
• 공생멍냥 학대당한 동물들을 위한 기부형 크라우드 펀딩
  • 목표 펀딩 금액의 176% 달성
• 2022학년도 SSU Startup Challenge: Demo Day
  • 의류폐기물 문제 해결과 오프라인 리폼시장의 쇠퇴를 막는
    리폼중개플랫폼 ‘소잉박스’ 기획
  • 저렴하게 구입한 의류 폐기물을 이용해 큰 수익을 얻을 수 있는 비즈니스 모델 구축
  • 선순환을 통해 쇠퇴하는 시장을 살릴 수 있는 사업이라는 호평을
    받으며 대상 수상

두 가지 주축이 되는 활동을 기반으로 2년 연속 최우수 동아리 선정

• 교육의 기회가 적은 지역아동센터의 아이들을 위해 스크래치와 아두이노 교육 봉사 진행

  • 효과적인 스크래치 교육을 위해 3D 프린터로 코드 블록을 만들고,
    손으로 조립해 보는 체험형 교육 기획 및 도입

  • 함께 만든 RC카로 레이싱을 개최하며 참여율을 높임

• 학업에 지친 학생들을 위해 게임 및 작품을 전시하는 '스크래치 게임 전시회' 및 '아두이노 체험전' 진행

  • 지역아동센터 아이들과 동아리원들이 만든 스크래치 게임을 점심시간마다 전시

  • 체험전 개최 당시 상황에 맞는 테마(더운 여름 오락으로 시원하게 보내자, 아두이노로 코로나 현명하게 보내기 등)를 설정하여 성공적으로 완수