this.self : 개발 포트폴리오

* 개발중 *

사용스택 및 이유

• NextJS : Easy Routing & SSR
• chakra-ui : Simple & Clean UI
• prettier & eslint : Pretty Linting
• xterm : Fake Terminal UI
• React : UseEffect hook to Dynamic importing xterm in NextJS SSR
• Vercel : Free, Easy hosting & serverless backend + Nextjs support

목표

• 반응형 웹사이트
• 개발자를 위한 포트폴리오
• 재미있는 포트폴리오
• xterm을 통한 가짜 터미널 UI 구현
• 깔끔한 UI 생성
• NextJS & Vercel
• Light & Dark Theme 구현
• i18N 다국어지원 구현

내용

• 프로젝트 경험 소개

  • 아로새김
  • GrEat
  • 분실둥실

• 토이프로젝트 경험 소개

  • Wave
  • Burger
  • UI Gallery (Toggle +a)
  • chanuCLI 개발 경험을 살려 Fake Terminal 구현
  • GIF generator
  • Thumbnail generator

미리보기

index (light/dark)

locale change, 다국어 지원

terminal 사용

project 페이지 (wave)

개발 중 이슈

• xterm backspace issue
• xterm importing -> Dynamic importing & useEffect hook
• xterm chrome android weird behavior (duplicate input & backspace input)

회고

• 개발 완료 후 업데이트 예정!