Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sonsurim/movie_auto-search
바닐라 타입스크립트를 이용하여 구현된 영화 자동 검색기 입니다.
https://github.com/sonsurim/movie_auto-search
typescript
Last synced: 3 months ago
JSON representation
바닐라 타입스크립트를 이용하여 구현된 영화 자동 검색기 입니다.
- Host: GitHub
- URL: https://github.com/sonsurim/movie_auto-search
- Owner: sonsurim
- Created: 2022-03-25T10:18:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-07T15:50:45.000Z (over 2 years ago)
- Last Synced: 2023-07-20T18:44:31.554Z (over 1 year ago)
- Topics: typescript
- Language: TypeScript
- Homepage:
- Size: 936 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 프로젝트 소개 💡
🎬 바닐라 자바스크립트를 이용하여 구현된 영화 자동 검색기 입니다.
## 프로젝트 실행 방법 🔧
```
npm install
npm start
```
## 기술 스택 🦾
- TypeScript
- Webpack
- Babel
- ES Lint
- Prettier
## 주요 기능 및 페이지 소개 ⚙️
사이트 동작 화면
API 캐싱 화면
주요 기능
## 디렉토리 구조 📂
자세히 보기
```
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── Favicon.ico
│ └── index.html
├── src
│ ├── App.module.scss
│ ├── App.ts
│ ├── api
│ │ ├── index.ts
│ │ └── types.ts
│ ├── assets
│ │ ├── images
│ │ │ ├── icon-close.svg
│ │ │ ├── icon-search.svg
│ │ │ └── image-logo.svg
│ │ └── styles
│ │ ├── index.scss
│ │ └── variables.scss
│ ├── components
│ │ ├── base
│ │ │ ├── Input
│ │ │ │ ├── index.ts
│ │ │ │ └── types.ts
│ │ │ └── index.ts
│ │ ├── core
│ │ │ ├── Component.ts
│ │ │ └── index.ts
│ │ ├── domain
│ │ │ ├── index.ts
│ │ │ └── search
│ │ │ ├── SearchInput
│ │ │ │ ├── SearchInput.module.scss
│ │ │ │ ├── index.ts
│ │ │ │ └── types.ts
│ │ │ ├── SearchResultList
│ │ │ │ ├── SearchResult.module.scss
│ │ │ │ ├── index.ts
│ │ │ │ └── types.ts
│ │ │ └── index.ts
│ │ └── index.ts
│ ├── data
│ │ ├── constants
│ │ │ ├── api.ts
│ │ │ ├── images.ts
│ │ │ └── index.ts
│ │ └── models
│ │ ├── declarations.d.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── main.ts
│ ├── services
│ │ ├── index.ts
│ │ └── movie.ts
│ └── utils
│ ├── dom
│ │ ├── index.ts
│ │ └── types.ts
│ ├── helpers
│ │ ├── index.ts
│ │ └── types.ts
│ ├── index.ts
│ └── storage
│ └── index.ts
├── tsconfig.json
├── tsconfig.path.json
└── webpack.config.js
```
- `/.github`: 깃허브 관련 디렉토리
- README.md 파일의 프로젝트 소개 이미지
- `/.api`: API Request 관련 디렉토리
- `/index.ts`: service에서 호출되는 API 함수
- `/.assets`: 이미지, 스타일 관련 디렉토리
- `/components`: App에서 사용되는 컴포넌트 관련 디렉토리
- `/core`: 컴포넌트들의 기본 구조가 되는 컴포넌트
- `/base`: domain에서 사용되는 최소 단위의 컴포넌트
- `/domain`: 해당 도메인에서만 사용되는 컴포넌트
- `/data`: 타입과 상수 관련 디렉토리
- `/constants`: 프로젝트 전역에서 사용되는 상수
- `/models`: 프로젝트 전역에서 사용되는 타입
- `/service`: api 데이터를 가공하는 함수관련 디렉토리
- `/utils`: 유틸함수 관련 디렉토리
### 컴포넌트 구조 🛠
- `index.ts`: types와 styled를 이용하여 구현한 컴포넌트
- `types.ts`: 해당 컴포넌트의 type들이 정의되어 있는 컴포넌트
## Core 컴포넌트 Data Model ✅
```
interface Component {
node: Element
state: StateType
preventRenderStateKey: Set
needRender: boolean
needUpdate: boolean
subscribers: Set
}
```
## Core 컴포넌트 구조 ⚙️
- **컴포넌트 데이터**
- **`node`**: 컴포넌트의 node
- **`initalState`**: 컴포넌트 상태의 초기값
- **`preventRenderStateKey`**: 구독중인 컴포넌트의 상태 변경 시, 내부적으로 상태만 업데이트 후 자식 컴포넌트만 렌더링하기 위한 key
- **`needRender`**: 컴포넌트의 상태 변경에 따른 렌더링 여부
- **`needUpdate`**: 컴포넌트의 상태 변경에 따른 setState 여부
- **`subscribers`**: 컴포넌트 상태 변경 시, 상태가 같이 변경될 하위 컴포넌트
- **컴포넌트 메서드**
- **`template()`**: 컴포넌트의 markup을 반환하는 메서드
- **`init()`**: 렌더링 전, 내부적으로 사용될 변수, 함수 정의 또는 초기 데이터를 받아올 때 사용되는 라이프사이클 메서드
- **`fetch()`**: 초기 렌더링 이후 컴포넌트의 fetching이 필요할 때 실행되는 라이프 사이클 메서드
- **`render()`**: 빈 태그를 컴포넌트의 markup으로 변환, 이벤트를 바인딩, 하위 컴포넌트를 부착을 하는 라이프 사이클 메서드
- **`update()`**: 상태 변경 시, 렌더링을 위한 라이프사이클 메서드
- **`updateChildren()`**: 상태 변경 시, 하위 컴포넌트의 렌더링을 위한 라이프 사이클 메서드
- **`attachChildComponent()`**: 하위 컴포넌트를 상위 컴포넌트의 template과 연결하는 라이프 사이클 메서드
- **`subscribe()`**: 상위 컴포넌트에 구독을 하는 메서드
- **`validationState`**: 컴포넌트의 상태 변경 시, 현재 컴포넌트가 가지고 있는 상태인지 판별하는 메서드
- **`setState()`**: 컴포넌트의 상태 변경 시, 컴포넌트의 상태를 업데이트, 하위 컴포넌트들에게 알리는 메서드
- **`notify()`**: 상위 컴포넌트로부터 받은 새로운 상태로 하위 컴포넌트들의 setState(), render()하게 해주는 메소드
- **`setEvent()`**: 컴포넌트의 node에 이벤트를 바인딩하는 라이프 사이클 메서드
- **`clearEvent()`**: 컴포넌트의 node에 바인딩되어 있는 이벤트를 지우는 라이프 사이클 메서드