youtube project

React + Typescript config

https://create-react-app.dev/docs/adding-typescript/

// tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "lib": ["es6", "dom"],
    "rootDir": "src",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true
  },
  "include": [
    "./src"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

// webpack.config.js

module.exports = {
    entry: {
        dev: "./src/index.tsx",
    },
    output: {
        filename: "./build/index.js",
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
    },
    module: {
        loaders: [
            // Typescript
            { test: /\.tsx?$/, loader: "ts-loader" },
        ],
    },
};

npm i --save-dev @types/react @types/react-dom

can only be default-imported using the 'esModuleInterop' flag error

https://pewww.tistory.com/26

TypeScript"module.css" import

// global.d.ts

declare module "*.css" {
  const content: { [className: string]: string };
  export = content;
}

// tsconfig.json

{
  "compilerOptions": {
  ...
  },
  "include": [
    "./src",
    "global.d.ts"
  ],
  ...
}

bos shadow generator

https://html-css-js.com/css/generator/box-shadow/

React useRef typescript

https://linguinecode.com/post/how-to-use-react-useref-with-typescript

const SearchHeader = ({ onSearch }: SearchHeaderProps) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const handleSearch = () => {
    if (inputRef.current !== null) {
      const value = inputRef.current.value;
      onSearch(value);
    }
  };
  ...
}

리액트 컴포넌트는 최대한 멍청하게? 만들고 네트워크 처리나 스토리지를 쓰는 등은 개별적인 클래스를 만들어 API 를 제공하도록 만드는 것이 좋음

process.env

환경 변수

https://create-react-app.dev/docs/adding-custom-environment-variables
항상 앞에 REACT_ prefix 붙이기. CRA가 만들어 놓은 규칙

// .env
REACT_APP_API_KEY=...

// .gitignore
# API KEYs
.env

undefined error

일단은 해결..

const youtube = new Youtube(process.env.API_KEY as string);