리액트 초기 세팅 (React Setting)

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 개발을 어느정도 진행해봤어서 기록한 내용이 조금 적습니다.

추후 추가하도록 하겠습니다! :)