Side/slack

front end setup 원하는 곳에 my-slack 폴더를 만들고 하위 폴더로 front 폴더를 만듭니다. 제일 처음 해줘야하는 것 npm init name 은 웬만하면 npm 에 설치한 패키지와 겹치지 않게 주의! react로 작업하기 때문에 다음과 같이 설치합니다. $ npm i react react-domtypescript 도 설치합니다. $ npm i typescript @types/react @types/react-domeslint 와 prettier setup $ npm i -D eslint $ npm i -D prettier eslint-plugin-prettier eslint-config-prettiereslint 와 prettier 를 연결 해줍니다. * rc setup .prett..

현재 hello world 문구를 수정하면 build 를 다시해야 반영이 됩니다. 매번 build를 하지 않게 hot reloading을 설정합니다. hot reloading hot reloading을 사용하기 위해서는 front 에서도 server가 필요합니다. $ yarn add webpack-dev-server -D npm 의 사소한 에러들이 있는데 아직 해결하지 못해서 yarn 으로 대체했습니다. 추후에 수정하겠습니다. webpack-dev-server 는 추후에 proxy server의 역활도 합니다. cors에러 문제 해결 등등.. $ yarn add webpack-cli $ yarn add -D @types/webpack-dev-server $ yarn add @pmmwh/react-refr..

코드 스플릿팅 을 하기위해서 패키지를 설치합니다. yarn add @loadable/component yarn add -D @types/loadable__componettypescript를 사용할시 두번째 줄도 설치 import LogIn from "@pages/LogIn"; 에서 다음과 loadable을 import 한뒤 @import loadable from "@loadable/component"; const LogIn = loadable(() => import("@pages/LogIn")); 으로 변경할 수 있습니다. css in javascript styled component 와 emotion 가장 유명한건 styled component지만 emotion이 설정이더 간단하여 emotion을 사용..

front 폴더 아래 hooks 라는 폴더를 생성하고 useInput.ts 파일을 생성합니다. customhook 은 반복되는 상태 관리 코드를 줄이려고 할때 사용합니다. mkdir hooks && touch useInput.tsuseInput.ts import React, { useCallback, useState } from "react"; const useInput = (initalData: any) => { const [value, setValue] = useState(initalData); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler, setValue]; }; export ..