바닐라 타입스크립트로 구현한 웹툰 검색기 입니다.
보러가기 -> https://yeeed711.github.io/webtoon-search/
- TypeScript
- SCSS
- Webpack
- Bable
- ES Lint
- Prettier
| 메인 화면 | 검색 했을 때 화면 |
|---|---|
 |
 |
| 검색 | 검색 키워드 강조 |
|---|---|
 |
 |
- 검색 : 제목, 작가명으로 검색가능
- 캐싱 : 새로고침시 현재 검색한 키워드, 검색 리스트, 리스트 스크롤 위치 유지
- 검색 키워드 강조 : 검색한 키워드중 매칭되는 텍스트를 강조
- 키보드 이벤트(검색 결과 리스트를 키보드로도 조작 가능)
상향 방향키: 리스트 목록 상향이동하향 방향키: 리스트 목록 하향이동Enter: 리스트 상세보기Escape: 모달 팝업 닫기
- 초기 화면 진입시 input focusing
- 검색 키워드 없을 시 API요청 방지
- 검색창에 debounce를 구현해 무분별한 API요청 방지
자세히 보기
├── 📁 public
│ ├── favicon.ico
│ └── index.html
├── 📁 src
│ ├── App.ts
│ ├── main.ts
│ ├── custom.d.ts
│ ├── 📁 api
│ │ └── index.ts
│ ├── 📁 components
│ │ ├── 📁 core
│ │ │ ├── Component.ts
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ ├── 📁 message
│ │ │ ├── 📁 ErrorMeg
│ │ │ └── index.ts
│ │ └── 📁 domain
│ │ ├── 📁 search
│ │ │ ├── 📁 SearchInput
│ │ │ ├── 📁 SearchItemInfo
│ │ │ └── 📁 SearchResult
│ │ └── index.ts
│ ├── 📁 constants
│ ├── 📁 models
│ ├── 📁 scss
│ └── 📁 utils
│ ├── 📁 dom
│ ├── 📁 helpers
│ ├── 📁 storage
│ └── index.ts
└── README.md
/api: api 요청 관련/components: 컴포넌트들의 집합/core: 코어 컴포넌트/domain: 도메인 컴포넌트의 집합
/constants: 전역으로 사용되는 상수들의 집합/models: 전역으로 사용되는 타입 정의(main data models)/scss: scss 스타일/utils: 전역으로 사용되는 함수들의 집합/dom: dom조작 관련 함수/helpers: 기능로직 관련 함수/storage: 스토리지 관련 함수
기능 개발을 하며 겪은 이슈들
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent