# 참조 : https://www.youtube.com/watch?v=WUirHxOBXL4

아래 4가지 import 문장의 차이 이해

import { Module } from './module';
import   Module   from './module';
import * as myModule from './module';
const Module = await import('./module');

- mysql 혹은 mariadb 에는 csv 를 파싱하는 함수가 없음.

- user function 을 짤수는 있음.

- 편법으로는 아래처럼 json_value 혹은 json_parse 으로 추출하는 것이 가능함.

column1 = "1","2",3

column1 이라는 컬럼에 위와 같은 csv 포맷 데이타가 있다고 가정하면,

select json_value(concat('{"data": [', column1, ']}'), '$.data[0]') c1;
c1 = 1

select json_value(concat('{"data": [', column1, ']}'), '$.data[1]') c2;
c2 = 2

select json_value(concat('{"data": [', column1, ']}'), '$.data[2]') c3;
c3= 3

https://www.youtube.com/watch?v=RMNOQXs-f68 

docker images 에 나오는 이미지 저장 = save

docker ps 에 나오는 이미지 저장 = commit

# 참조 1) https://bekusib.tistory.com/73

# 참조 2) https://medium.com/@vdongbin/aws-elb%EC%99%80-nginx%EB%A1%9C-https-%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-736b8c5ee76

server {     
  listen       80;
  server_name  ~.;
  # redirect https setting
  if ($http_x_forwarded_proto != 'https') {
    return 301 https://$host$request_uri;
  }      
  location / {         
    proxy_set_header X-Real-IP $remote_addr;             
    proxy_set_header HOST $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # port setting , 서버의 port와 동일한 port로 pass 시켜야 합니다.
    proxy_pass http://127.0.0.1:8080;
    proxy_redirect off;
  }
}

1) vi /etc/fstab

2) 아래 추가 ( 붉은색 : EFS.파일시스템 ID, 파란색 : mount directory )

# 아래와 같이 하면 /home/ec2-user/algopa/ 라는 디렉토리가 생기며, algopa/ 이하는 EFS 로 연결된다.

fs-09e67890:/ /home/ec2-user/algopa efs tls,_netdev

3) df -h

127.0.0.1:/     8.0E   27G  8.0E   1% /home/ec2-user/algopa

4) 재부팅

install 하면 node-modules 에 모듈이 설치되는 건 동일하다.

# 참조 : https://velopert.com/1015

npm install --save-dev immutability-helper

import update from 'immutability-helper';

//원소추가

this.setState({

  list:update(this.state.list, {  $push: [newObj1, newObj2] } // 두개 Object 추가

});

// 원소 제거

this.setState({

  list:update(this.state.list, {  $splice: [[index, 1]] }

});

// 배열 원소 수정

this.setState({

  list:update(this.state.list, {  [index]: {field:{$set:"value"}, {{$set: "value2"}} }가

});

// 객체 원소 수정 = 배열원소수정에서 [index] 대신에 객체명:$set 사용

참조 : https://velog.io/@noah071610/CRA%EC%97%90%EC%84%9C-babel%EC%9D%B4%EB%82%98-webpack-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

노아입니다.

CRA는 Create react App 의 약자이다

즉 React App 의 초기설정을 쉽게 해주자는 취지로 만든건데

친절하게 기본적인 설정과 폴더 구분... 그리고 바벨과 웹팩까지 설정해준다니... 이건 써야돼!!

하지만 단점도 있으니 커스터마이징이 굉장히 어렵다는것이다

본인은 이모션이라는 css 라이브러리를 사용하고있었는데, 여기서 애를 먹었다.

이모션은 css props를 추가한 자체 jsx를 사용하고있어서 문서 상단에 항상

/** @jsxImportSource @emotion/react */ <- 이놈
import { css } from "@emotion/react";

이런식으로 구문을 추가해야지 비로소 Emotion이 작동했다

하지만 매번 새로운 컴포넌트에 이런식으로 구문을 추가하는건 뭔가 꺼림직하다

그래서 중복제거를 목표로 바벨 프리셋을 설정하려고 했지만 CRA는 바벨설정이 불가능하게 셋팅되어있다.

eject를 사용하게 되면 설정이 가능한데 그러면 CRA의 본질 자체를 잃어버린다.

마치 컴퓨터를 소비자를 위해 깔끔하게 조립해서 배송해줬더니 그걸 다 뿌수고 새로 조립하는 아이러니한 상황이 연출되는거다. (그럴꺼면 다나와에서 알아서 사서 조립하지 왜 조립해달라고 했어?)

그렇기 때문에 eject는 지양하고 craco를 사용해서 babel preset을 오버라이딩 해줬다

=> package.json

npm i @craco/craco
npm i -D @emotion/babel-preset-css-prop

=> craco.config.js

const emotionPresetOptions = {};

const emotionBabelPreset = require("@emotion/babel-preset-css-prop").default(
  undefined,
  emotionPresetOptions
);

module.exports = {
  babel: {
    plugins: [...emotionBabelPreset.plugins],
  },
};

루트폴더에 craco.config.js 를 추가하고 안에 preset을 추가해 준다.

그리고

=> package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

스크립트 명령어를 craco 로 바꿔 주도록한다.

그러면 eject 없이 CRA에 babel 설정을 override 가능하게 된다.

개인적으로 CRA는 양날의검이다.
프로젝트의 성향에 따라 사용할지 안할지를 결정해서 쓸데없는 시간낭비를 미연에 방지하도록 하자.

참조