IT & Tech

frontend server build 확인방법

• npm run build (빌드결과물 생성됨)
• npm install -g serve (serve 설치)
• serve -s build (bash에서 실행해야함, 윈도우 터미널에서는 동작안함, 완료되면 localhost:5000에서 확인가능)

빌드완료되면 다음위치에 다음과 같은 결과물이 떨어짐
File sizes after gzip: 485.41 KB
build\static\js\2.f302d4b6.chunk.js 62.8 KB (-50 B)
build\static\js\main.42c20a87.chunk.js 53.73 KB
build\static\js\3.60c20971.chunk.js 39.12 KB
build\static\js\5.3a36e225.chunk.js 6.39 KB
build\static\js\4.f1151a7d.chunk.js 1.16 KB
build\static\js\runtime~main.39277503.js 283 B
build\static\css\main.3655cd5e.chunk.css

jss1 - max-whith:520px고정문제로 인해 로그인 첫화면 사이즈 작아짐, 원인은?

"@babel/runtime-corejs3": {
    "version": "7.9.6",
    "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.9.6.tgz",
    "integrity": "sha512-6toWAfaALQjt3KMZQc6fABqZwUDDuWzz+cAfPhqyEnzxvdWOAkjwPNxgF8xlmo7OWLsSjaKjsskpKHRLaMArOA==",
    "dev": true, --->  이게원인인듯 
    "requires": {
        "core-js-pure": "^3.0.0",
        "regenerator-runtime": "^0.13.4"
    },
    "dependencies": {
        "regenerator-runtime": {
            "version": "0.13.5",
            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
            "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
            "dev": true --->  이게원인인듯 
        }
    }
},

mainpage = <Redirect to="/dashboard" />;

mainpage=<meta http-equiv="refresh" content="0; url=/signin"/>;

window.location.href = '/signin';

mainpage = <Route path="/" component={Signin} />; re-render OK, not refresh

history.push('/PROGRAM/programlist');re-render ?, not refresh

import { Route, Redirect } from 'react-router-dom';

• export
  • default
    • function, class만 가능, 아니면 Parsing error: Only expressions, functions or classes are allowed as the `default` export.에러남
    • import시   import 그냥  from  이렇게 사용
  • named
    • import시 import {일케}  from이렇게 해야함
    • export A를 import {B}로 바꿔서 사용가능
    • import {A as B} 이렇게도 변경가능
    • import * as lib from 이렇게 해서  전체를 lib로 받고 lib.a로 사용가능

vsCode에서 사용방법

• prettier 규칙적용: F1 > Format Document
• 저장시 자동적용: settings.json에 추가 - "editor.formatOnSave": true,
• eslint: F1 > ESLint fix all auto-fixable Problems

https://prettier.io/docs/en/options.html

https://meetup.toast.com/posts/130

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

yarn start error방지

    "scripts": {
        "start": "PORT=8000 react-scripts start", //PORT=8000 삭제해야 yarn start error안남
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "test:debug": "react-scripts test --env=jsdom --verbose false",
        "lint": "eslint src",
        "eject": "react-scripts eject"
    },

Redux사용을 위한 변경 (Window에서 개발하기 위해서 추가했던 것 같음)

before

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import cdp from '../reducers';
export default function configureStore (initialState) {
    const store = createStore(
        cdp,
        initialState,
        applyMiddleware(thunkMiddleware)
    );
    return store;
}

↓

after

import { createStore, applyMiddleware, compose(얘도추가함) } from 'redux';
import thunkMiddleware from 'redux-thunk';
import cdp from '../reducers';
export default function configureStore (initialState) {

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;//이부분 추가

    const store = createStore(
        cdp,
        initialState,
        composeEnhancers(applyMiddleware(thunkMiddleware))//이부분 추가
    );
    return store;
}

* Promise: http://webframeworks.kr/tutorials/translate/es6-promise-api-1/

• async-await ()
  • await 키워드로 Promise 를 기다린다
  • 함수앞에 async 키워드를 붙여준다
  • 에러 처리는 try-catch 로 한다
  • async 함수의 반환값은 Promise 형태이다

https://velopert.com/2597

Map: Array를 다른 Array로 변환

매개변수는 순서대로 currentValue[, index[, array]]인듯

매개변수 이름을 중요하지 않고 순서만 중요한듯... 헷갈리는 개념!!! 알아두자!!!

참고) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map