/TS_Projects

Primary LanguageTypeScript

Vanllia TS SPA 프로젝트

TypeScript만으로 다양한 미니 프로젝트가 담긴 SPA를 구현하는 프로젝트


배포 링크

https://ts-projects.vercel.app/


학습 목표

  • javascript구현 능력 향상
  • 성능과 재사용을 고려한 효율적인 컴포넌트 구현
  • 프레임 워크의 동작 원리 이해
  • webpack, babel, EsLint 등 개발 환경을 직접 구현해보며 익히기
  • class사용법 익히기
  • TypesScript 익히기

기술 스택

TypeScript Scss Webpack5

babel ESLint Prettier

HistoryAPI Fetch


구현 내용

  • 클래스로 구현한 베이스 컴포넌트를 기반으로 공통 메소드와 프로퍼티를 확장하여 컴포넌트 생성
  • 리액트 컴포넌트 라이프 사이클과 상태기반 렌더링 개념 도입
  • 렌더링 시 상태를 의존하고, innerHTML+템플릿 리터럴을 사용하면서 특정 자식 컴포넌트 부분 렌더링 가능
  • HistoryAPI로 라우터 기능 구현 → 메인 페이지에서 각 미니 프로젝트의 이름 클릭 시 페이지 전환
  • Fetch api로 서버 통신