Watchout-Pedia

왓챠 클론코딩 프로젝트

Prerequisites

Node.js
- Version 16.13.0 이상
Yarn
- Yarn Berry 사용

Getting Started

Installation

git clone https://github.com/chlee1001/watchout-pedia.git
cd watchout-pedia
yarn install

Directory Structure

.
├── config # webpack 설정
│   ├── paths.js
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
├── dist # 빌드 결과물
├── public
│   ├── favicon.ico
│   └── index.html
├── src 
│   ├── apis # API 호출 파일 관리
│   ├── assets # 이미지, lottie json 등 asset 파일 관리
│   ├── components # 컴포넌트 관리
│   ├── constants # 상수 관리
│   ├── hooks # 커스텀 훅 관리
│   ├── pages # 페이지 관리
│   │   └── HomePage # 페이지 별 폴더 생성
│   │       └── index.tsx
│   └── styles # 스타일 관리
│   │   ├── global-styles.tsx
│   │   └── style.d.ts
   ├── types # 타입 관리
│   ├── App.tsx
│   ├── index.tsx
├── tsconfig.json # typescript 설정
├── tsconfig.paths.json # typescript path 설정

Development server

Webpack dev server runs at localhost:3001.

yarn start

Production build

Build outputs are created in dist.

yarn build

Features

Dependencies

styled-components

webpack

webpack - Module and asset bundler.
webpack-cli - Command line interface for webpack
webpack-dev-server - Development server for webpack
webpack-merge - Simplify development/production configuration

Babel

@babel/core - Transpile ES6+ to backwards compatible JavaScript
@babel/preset-env - Smart preset for Babel
@babel/preset-react - Babel preset for all React plugins
@babel/preset-typescript - Preset for TypeScript

Babel plugins

@babel/plugin-proposal-class-properties - The compiler for next generation JavaScript
react-refresh - Implements the wiring necessary to integrate Fast Refresh into bundlers

Loaders

babel-loader - Transpile files with Babel and webpack
ts-loader - TypeScript loader for webpack
css-loader - Resolve CSS imports
style-loader - Inject CSS into the DOM

Plugins

clean-webpack-plugin - Remove/clean build folders
@pmmmwh/react-refresh-webpack-plugin - React Refresh Webpack Plugin
mini-css-extract-plugin - Extracts CSS file per JS file which contains CSS
html-webpack-plugin - Generate HTML files from template

Linters

eslint - Enforce styleguide across application
eslint-config-airbnb - Base JS styleguide of Airbnb
eslint-config-airbnb-typescript - Enhances Airbnb's ESLint config with TypeScript support
eslint-config-prettier - Implement prettier rules
eslint-plugin-import - Implement import rules
eslint-plugin-jsx-a11y - Static AST checker for accessibility rules on JSX elements
eslint-plugin-prettier - Dependency for prettier usage with ESLint
eslint-plugin-react - React specific linting rules for ESLint
eslint-plugin-react-hooks - This ESLint plugin enforces the Rules of Hooks
prettier - code formatter

License

This project is licensed under the MIT License.