IT & Tech

moment -> string

console.log('st 1642820725061?',moment(1642820725061).format("MM/DD hh:mm"));

npm install

npm uninstall

npm list: 설치된 패키지 목록 확인하기

-g global

--depth 0 옵션을 사용하지 않으면 전체 트리구조로 의존성 있는 모든 모듈이 나옴

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

 npm install material-table@1.X

• npm install --save-dev --save-exact prettier
• npm install --global prettier

npm install --save-dev redux-devtools-extension

material UI에서는 disabled 속성을 주면 됨

• <Button disabled>
• <Checkbox disabled>
• <Switch disabled>
• <Slider diabled>
• ...

div를 포함한 하위 component를 모두 막고 싶은 경우

• </div style={this.props.disable?{color:'#777777', pointerevents: 'none'}:{}}>

• array===[] (X)
• array && array.length===0 (O)
• array && !array.length (O)

axios
fetch


써드파티 라이브러리로 설치가 필요
현대 브라우저에 빌트인이라 설치 필요 없음


XSRF 보호를 해준다.
별도 보호 없음


data 속성을 사용
body 속성을 사용


data는 object를 포함한다
body는 문자열화 되어있다


status가 200이고 statusText가 ‘OK’이면 성공이다
응답객체가 ok 속성을 포함하면 성공이다


자동으로 JSON데이터 형식으로 변환된다
.json()메서드를 사용해야 한다.


요청을 취소할 수 있고 타임아웃을 걸 수 있다.
해당 기능 존재 하지않음


HTTP 요청을 가로챌수 있음
기본적으로 제공하지 않음


download진행에 대해 기본적인 지원을 함
지원하지 않음


좀더 많은 브라우저에 지원됨
Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

출처: https://inpa.tistory.com/entry/AXIOS-📚-설치-사용#axios란 [👨‍💻 Dev Scroll:티스토리]

범용적인 목적으로 js를 사용하기 위한 선결조건: 모듈화

• CommonJS
  • 브라우저 이외의 곳에서 JS를 사용하기 위한 모듈 시스템
  • 노드에서 많이 사용됨
  • CommonJS의 Common은 js를 브라우저만이 아닌 일반적인 범용언어로 사용살 수 있게 하겠다는 것
  • 필요한 파일이 모두 로컬디스크게 있어 바로 불러쓸 수 있는 상황 즉 서버사이드에서는 CommonJS가 AMD방식보다 간결함
• AMD(Asynchronous Module Definition)
  • ES6가 나오기 전에 많이 사용됨
  • 주요특징
    • 모듈(자바스크립트)의 비동기 로딩 (html에서 script태그를 통해서 관리하는게 아닌 js로 script태그를 append하여서 로딩함
    • 클로저를 통한 전역관리
    • CommonJS에 비해 사용법 간단
  • AMD방식을 사용하는 대표적인 오픈소스가 RequireJS
  • 필요한 파일을 네트워크를 통해 내려받아야 하는 브라우저와 같은 환경에서는 AMD가 CommonJS보다 더 유연한 방법을 제공
• ES6(2015)
  • 브라우저(frontend)에서는 요즘 거의 이것 사용
  • 그대로 쓰기보다 webpack/rollup 같은 번들러를 통해서 많이 사용됨

참고자료

https://isa-dev.tistory.com/217?category=994397

https://d2.naver.com/helloworld/12864

http://13.125.140.150:8080/posts
http://ec2-13-125-140-150.ap-northeast-2.compute.amazonaws.com:8080/posts
node /home/ec2-user/my-json-server/node_modules/.bin/json-server --host 172.31.10.248 --watch db.json --port 8080
nohup node /home/ec2-user/my-json-server/node_modules/.bin/json-server --host 172.31.10.248 --watch db.json --port 8080 &
-> 잘안되서 pm2 설치
pm2 start npm start -> 안됨
pm2 start `npm start` 됨!!!!

return fetch(`${API_BASE_URL}/admin/terms/published-terms?type=${data}`, {
  method: 'POST',
  headers: getHeaders(),
})
  //.then(res => res.json())
  .then(body => {
    console.log('body', body);
    console.log('body json', body.json());//이게 없으면 크롬인스텍서 preview, response에서 안보임
    console.log('body body', body.body);
    if (body.status===200)
      alert('Successfully Published !');
    else
      alert('Some Error Occured !');
  })
  .catch(() => {});

Access to fetch at 'http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg' 

from origin 'http://localhost:3000' 

has been blocked by CORS policy: 

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

그냥 이렇게 쓰면 됨, ``내부에 또 ``넣는 건 안되는듯

json.data[0].word
  ? `${json.data[0].word} (${json.data[0].reading})`
  : `${json.data[0].reading}`