TypeScript + 추가적인 환경 설정하기
npm install -g yarn (yarn 미설치 되어있을 시) npx create-react-app . --template typescript //이거네... yarn add @craco/craco yarn add @emotion/react yarn add @emotion/babel-preset-css-prop //이거 왜깔지? npx -p @storybook/cli sb init //왜 패키지지 이거는? , npm run storybook/yarn storybook yarn add @emotion/styled -> @emotion/styled/base를 찾을 수 없다고 나와서 새로 깔아주었다. //ESLint + Prettier yarn add -D prettier yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser yarn add -D eslint-config-prettier eslint-plugin-prettier yarn add -D eslint-plugin-react eslint-plugin-react-hooks yarn add -D eslint-plugin-jsx-a11y eslint-plugin-import yarn add @types/react; -> ts(2604)에러가 자꾸 떠서 깔아줌
npx create-react-app . --template typescript yarn add @craco/craco yarn add @emotion/react yarn add @emotion/babel-preset-css-prop npx -p @storybook/cli sb init yarn add @emotion/styled yarn add -D prettier yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser yarn add -D eslint-config-prettier eslint-plugin-prettier yarn add -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import git branch -M main //npm install -g commitizen //https://www.npmjs.com/package/@digitalroute/cz-conventional-changelog-for-jira craco.config.js .eslintrc.js .prettierrc
module.exports = { babel: { presets: ['@emotion/babel-preset-css-prop'], }, };
module.exports = { env: { browser: true, es2021: true, node: true, }, parser: '@typescript-eslint/parser', plugins: ['react', '@typescript-eslint'], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:prettier/recommended', 'plugin:react/jsx-runtime', ], };
{ "singleQuote": true, "jsxSingleQuote": true }
이슈
NVM 을 이용한 node 버전 고정
NVM 이 사라짐
home brew nvm
nvm not found Error
vi .zshrc
emotion/styled vs styled-components?
babel 이 뭐야? babel preset은 뭐야? craco는 뭐야? craco.config.js는 왜 해?
@emotion/babel-preset-css-prop
emotion을 쓰기 때문에 깔아야 하는 플러그인
이거 왜 써 → JSX 구문을 JS 형태로 바벨이 변환시켜준다. 이런 변환 권한을 React 스크립트에서 emotion으로 위임시켜주는 플러그인이다.
Styled component 의 형태로 컴포넌트를 사용할 수 있도록 해 주는 플러그인
module.exports = {
babel: {
presets: ['@emotion/babel-preset-css-prop'],
},
};
emotion/css의 역할은 무엇인가?
package.json
{ "name": "type-script-study", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.4.1", "@emotion/babel-preset-css-prop": "^11.2.0", "@emotion/react": "^11.6.0", "@emotion/styled": "^11.6.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "overrides": [ { "files": [ "**/*.stories.*" ], "rules": { "import/no-anonymous-default-export": "off" } } ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "resolutions":{ "babel-loader": "8.1.0" // 여기 에러나서 해결해 줌 } , "devDependencies": { "@storybook/addon-actions": "^6.3.12", "@storybook/addon-essentials": "^6.3.12", "@storybook/addon-links": "^6.3.12", "@storybook/node-logger": "^6.3.12", "@storybook/preset-create-react-app": "^3.2.0", "@storybook/react": "^6.3.12", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "eslint": "7.11.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", "prettier": "^2.4.1" } }
Eslint prettier + ts적용
//.eslintrc.js module.exports = { env: { browser: true, es2021: true, node: true, }, parser: '@typescript-eslint/parser', plugins: ['react', '@typescript-eslint'], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:prettier/recommended', ], };
//.prettierrc { "singleQuote": true, "jsxSingleQuote": true }
왜 이건 되고 이건 안돼?
import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { ReactJSXElement } from '@emotion/react/types/jsx-namespace'; const BASE_URL = 'https://the-cocktail-db.p.rapidapi.com/popular.php'; interface Cocktail { strDrink: string; ingredients: string[]; instruction: string; } interface Drinks { drinks: Cocktail[]; } const getPopularCockTails = async (baseURL: string): Promise<Drinks> => { const result = await axios .get(baseURL, { method: 'GET', headers: { 'x-rapidapi-host': 'the-cocktail-db.p.rapidapi.com', 'x-rapidapi-key': 'd5f98e5c58msh028d73c20cef31bp170d51jsn7078ba1df0cf', }, }) .then((response) => { return response.data; }); return result.drinks; }; const APIContents = () => { const [resultState, setResultState] = useState([]); useEffect(() => { const result = getPopularCockTails(BASE_URL).then((data) => data); setResultState((prev: Cocktail[]): Cocktail[] => result); }, []); useEffect(async() => { const result = getPopularCockTails(BASE_URL).then((data) => data); setResultState((prev: Cocktail[]): Cocktail[] => result); }, []); return ( <div> {/* {result.map((cocktail, key) => ( <li key={key}>{cocktail.strDrink}</li> ))} */} </div> ); }; export default APIContents;