미리보기

소개

• 넥슨 API를 사용한 fc온라인 전적 검색 사이트

링크

• 깃허브 링크

• 배포 주소

기술 스택

React, Tanstack-Query, Typescript, styled-components, Redux-toolkit, react-hook-form

서비스 기능

• 구단주 검색창 / 최근 검색창 구현

• 구단주 상세 정보

• 매치 리스트 ( 공식 경기, 친선 경기, 감독 모드)

• 매치 상세 기록

• 해외 축구 정보

성과

• 넥슨 API의 경우 할당량이 존재하기 때문에 이를 개선하기 위해 Tanstack-Query 사용

• 최근 검색어 키보드 이벤트 구현으로 UX 개선

• react-hook-form으로 효율적인 form 관리

• react-transition-group으로 매치 상세 기록 애니메이션 구현

• fotmob api를 사용하여 해외 축구 정보 제공

소개

• React와 Firebase를 사용한 중고사이트

링크

• 배포 주소

• 깃허브

기술 스택

React, Typescript, Firebase, Redux, styled-components, react-image-file-resizer

서비스 기능

• 로그인/ 회원가입

• 프로필

• 메인 / 상세 페이지

• 상품 등록

• 관심목록

• 검색창

• 채팅

성과

• Firebase로 Authentication, CRUD 구현

• react-file-resizer로 이미지 포맷을 webp로 변경, 리사이징 구현하여 image 성능 개선

• React.lazy()로 해당 컴포넌트를 불러올 때 로딩 되도록 구현하여 FCP 개선

• react-intersection-observer로 무한 스크롤 및 레이지 로딩 구현

• 그 결과 LightHouse 성능 77에서 95으로 향상

소개

• 특정 유튜브 채널의 커버곡을 들을 수 있는 뮤직 플레이어

• 개발 1명(본인) , 기획자 겸 업로더 1명, 믹싱 2명

기술 스택

React, Typescript, styled-compoents, redux-toolkit, React-player, react-slick

링크

• 배포 링크

• 깃허브

서비스 기능

• 메인 페이지( top 10, 최근에 추가된 곡 )

• 차트 페이지

• 플레이 리스트

• 마이 리스트

성과

• 기획자가 제공한 디자인대로 구현

• 셔플 재생 구현

• react-slick을 사용하여 최근에 추가된 곡 슬라이더 형태로 구현

• react-player를 사용하여 뮤직 플레이어 형태로 구현

• 필터 버튼을 통해 해당 값이 포함된 곡만 보여주도록 구현

• checkbox를 사용하여 자신이 원하는 곡만 들을 수 있도록 구현

- 총 48시간 인터넷 강의
- React, Typescript, Next.js 문법에 대한 이해 및 경험
- Context API 와 Redux를 사용한 전역 상태 관리
- React의 작동 원리 이해
- custom hook 만들기
- http 요청, 응답 처리법
- 리액트 라우터를 사용한 다중 SPA
- Next js를 사용한 SSR 사이트 구현 및 배포 경험
- 파이어베이스 호스팅 배포 경험

- todolist 사전과제
- 1주차 : 팀으로 일하는 법, 개발자의 기본기 (eslint, prettier, husky), github actions with CI/CD , 서버와 클라우드, AWS
- 팁 협업 과제 : 사전 과제의 Best Practice를 찾아서 업그레이드
- 2주차 : 렌더링 최적화 , 관심사 분리, SRP , Custom hook
- github api를 사용하여 issues 목록 및 상세 페이지 만드는 팀 프로젝트 과제
- 3주차 : Context API , 의존성, Typescript
- 한국임상정보 사이트 클론 코딩 팀 프로젝트 과제
- 4주차 : 소프트웨어 테스트, 실행 컨텍스트, 클로저
- 주어진 데이터를 사용하여 시계열 차트 구현 개인 과제