Portfolio


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
}


{
  "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"
  }
}


//.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;

프론트 초기 개발 환경 설정

TypeScript + 추가적인 환경 설정하기

이슈

NVM 을 이용한 node 버전 고정

NVM 이 사라짐

emotion/styled vs styled-components?

babel 이 뭐야? babel preset은 뭐야? craco는 뭐야? craco.config.js는 왜 해?

@emotion/babel-preset-css-prop

emotion/css의 역할은 무엇인가?

package.json

Eslint prettier + ts적용

왜 이건 되고 이건 안돼?

useEffect 콜백을 async 함수로 쓰면 안되나?

Async, Await 의 사용 의의. 비동기 함수에 무조건 써야해?