미리보기

배포 링크 | 깃허브

책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼

🔮 기술스택

• TypeScript, React, Next.js(app), TailwindCSS, React-Query, ContextAPI,
  Storybook, react-hook-form, github-actions, PWA, SEO, GA

✨ 기여한 내용

점진적 Next.js App router 마이그레이션 진행

• Next.js App router로 마이그레이션 및 RSC 작성을 통해 JS 번들 크기를 약 64% 감소시켰습니다.
  (첫 JS 로드 크기 223KB -> 80.1KB)

Funnel 기법 도입 (링크)

• 많은 입력 폼으로 인해 사용자의 집중력을 분산시켜 UX를 해치는 문제를 발견하여
  useFunnel을 작성하고 퍼널 기법을 도입했습니다.

검색 결과 유지 기능 구현 (링크)

• 페이지 이동 시 검색 결과가 초기화되는 문제를 쿼리파라미터 활용을 통해 해결했습니다.

  
  useQueryParam을 작성해 관심사 분리 및 재사용성을 높였습니다.

GitHub Actions 워크플로 작성 (링크)

• Google Lighthouse CI 워크플로를 작성하였습니다.
  PR 코멘트를 통해 수치화된 페이지 성능 지표를 볼 수 있도록 했습니다.

검색 엔진 최적화(SEO) 진행 (링크)

• 검색 엔진 친화적 서비스가 될 수 있도록 메타데이터, 동적 사이트맵, 네비게이션 스키마를 작성했습니다.

PWA 구현 (링크)

• 사용자가 모바일에서 손쉽게 웹앱으로 사용할 수 있도록 PWA를 구현했습니다.

• 구현 중 iOS 크로스 브라우징 이슈들을 해결하였습니다.

자체 이미지 최적화 구현 (링크)

• API routes, Sharp 라이브러리를 활용한 이미지 최적화 기능을 구현했습니다.
  (검색 결과 페이지 이미지 요청 리소스 약 40% 감소)

📝 배운 내용

• App router 마이그레이션을 진행하며 Next.js의 새로운 패러다임과 css-in-js에 대해 고민해 볼 수 있었습니다.

• Funnel 기법을 도입하며 기존 UI에서 문제점을 찾고 원인을 정의하며 코드를 통해 개선할 수 있는 능력을 기를 수 있었습니다.

• 워크플로 작성을 통해 자동화를 경험하며 개발자 경험 또한 중요한 요소라는 것을 알게 됐습니다.

• PWA 구현 중 여러 크로스 브라우징 이슈를 경험할 수 있었습니다.

• 자체 이미지 최적화 구현을 통해, 최소 비용 최대 성능을 끌어내는 작업을 경험할 수 있었습니다.

배포 링크 | 깃허브

책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼

(beta 버전이에요.)

🔮 기술 스택

• TypeScript, React, Next.js(13 page), Chakra-ui, React-Query, Recoil

✨ 기여한 내용

3D 컴포넌트 제작

• 사용자의 시각적 흥미를 끌기 위한 3D 책 컴포넌트를 제작했습니다.
  구현 중 CORS 에러가 발생하여 Next 서버를 활용해 CORS 정책을 우회했습니다.


무한 스크롤 구현 (링크)

• 웹앱의 특성을 고려하여 더 나은 사용자 경험을 제공하기 위해 무한 스크롤을 구현했습니다.
  React-Query의 useInfinityQuery를 활용했습니다.

낙관적 UI 업데이트 적용 (링크)

• 요청 직후 빠른 UI 피드백을 제공할 수 있도록 좋아요 기능에 낙관적 업데이트를 적용했습니다.

  
  요청 실패를 고려한 쿼리 롤백 로직을 작성했습니다.

📝 배운 내용

• <canvas>로 인한 CORS 에러를 경험하며 CORS 정책에 대해 이해할 수 있었습니다.

• 무한 스크롤, 낙관적 UI 업데이트 적용을 통해 여러 방법으로 긍정적 사용자 경험을 만들 수 있다는 것을 배웠습니다.

• 프로젝트가 기간이 길어질수록 프로젝트 초기 세팅은 굉장히 신중해야 한다는 것을 배웠습니다.

링크트리

세계최초 온체인 키캡놀이 NFT 프로젝트

🔮 기술 스택

• TypeScript, React, Next.js(12 page), Chakra-UI, web3.js, caver.js
Solidity, OpenZeppelin

✨ 기여한 내용 (프론트엔드)

메인 페이지, 관리자 페이지 작성

• 사용자가 NFT 프리뷰 감상과 Draw를 할 수 있는 버전2 메인 페이지를 작성했습니다.

• NFT 민팅과 수량 관리, Draw 상태 설정과 소비자 가격 책정을 할 수 있는 관리자 페이지를 작성했습니다.

반응형 UI 적용

• 모바일 사용자를 고려하여 최소 너비 320px까지 이용할 수 있도록 했습니다.

전자지갑 상태관리

• use-wallet 라이브러리를 활용하여 사용자 전자지갑 상태를 관리했습니다.

✨ 기여한 내용 (컨트랙트)

기존의 NFT에 새로운 기능 추가

• 홀더가 소유한 PFP NFT에 닉네임을 각인할 수 있는 기능을 추가했습니다.

플랫폼 마이그레이션 (링크)

• 기존 Klaytn 플랫폼이였던 서비스를 Polygon 플랫폼으로 마이그레이션 및 테스트넷 배포를 진행하였습니다.

📝 배운 내용

• 서비스가 하나가 만들어지는 사이클을 경험할 수 있었습니다.

• 반응형 UI 적용을 통해 UX의 중요성을 깨닫게 되었습니다.

• PM, 디자이너와의 소통을 통해 일관된 프로젝트 방향성 유지의 중요성을 알 수 있었습니다.

🏃 활동 내용 (링크)

• app/api-reference/file-conventions/page.mdx 문서 번역

• 기여자들과 컨벤션과 이전 번역 사례를 바탕으로 검수 작업 진행

🏃 프론트엔드 교육과정

• 협업 경험과 지속 가능한 성장을 위해 해당 교육과정에 지원

• 구현형 과제, 코드 리뷰, 스터디를 통한 학습

• GitHub, Slack, Notion, Figma를 활용한 2번의 팀 프로젝트 진행

• 최종 프로젝트 최우수 협업 팀 선정, 고용노동부와 인터뷰 진행