반응형
node, npm 설치하신 후 봐주세요 !
(javascript로 진행하실 분들은 ts, tsx 관련 세팅만 빼주시면 됩니다.)
❁ Create React Project
# javascript
npx create-react-app [project-name]
# typescript
npx create-react-app [project-name] --template typescript
❁ ESLint (Typescript)
- npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-airbnb-typescript
- package.json
"scripts":{
"lint": "eslint src --ext .ts,.tsx,.js,.jsx",
"lint:fix": "eslint -fix src --ext .ts,.tsx,.js,.jsx"
}
- .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
"project": ["tsconfig.json"]
},
plugins: ["@typescript-eslint"],
extends: [
"airbnb-base",
"airbnb-typescript",
"plugin:@typescript-eslint/eslint-recommended"
],
rules: {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"react/jsx-filename-extension": [0]
}
};
※ npm run lint
※ npm run lint:fix
❁ Design Pattern
- Presentational and Container Component Pattern
- presentational component : 화면에 보여지는 것
- container component : 동작에 관한 것 (로직)
- Atomic Desgin Pattern
React와 ReactNative 개발을 어느정도 진행해봤어서 기록한 내용이 조금 적습니다.
추후 추가하도록 하겠습니다! :)
반응형
'Computer > Front-End' 카테고리의 다른 글
[JavaScript] 📚 Date 문법 / 날짜 문법 / 자바스크립트 날짜 / Intl (1) | 2022.10.11 |
---|---|
[JavaScript] 📚 배열 음수 인덱스 사용하기 / 파이썬처럼 배열 사용하기 / at() / 최신 문법 / Array / index (0) | 2022.10.11 |
[React] 📚 리액트 생성 후 필요 없는 것들 정리하기 (0) | 2022.10.04 |
[Java] Swing / UI / 자바 / 스윙 / 자바 스윙 / Java Swing (0) | 2022.10.04 |
[React] 리액트가 라이브러리인 이유? 라이브러리 vs 프레임워크 (0) | 2022.09.26 |