IT & Tech

• ES6
  • Set (가장 빠름)
    • [...new Set(arr)]
    • Array.from( new Set(arr) )
  • filter
    • arr.filter( (item,idx)=>arr.indexOf(item) === idx )
  • reduce
    • arr.reduce( (acc,curr)=>acc.includes(curr)? acc : [...acc,curr], [] )

https://dongmin-jang.medium.com/javascript-array-%EC%A4%91%EB%B3%B5-%EC%A0%9C%EA%B1%B0%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-es6-b5b9075361f9

•  ES 6사용못할때
  • reduce, indexOf사용

    • arr.reduce(function(acc,curr,index){
          acc.indexOf(curr) > -1 ? acc : acc.push(curr);
          return acc;
      },[]);

  • filter, indexOf사용

    • arr.filter(function(a, i, self){
      	return self.indexOf(a) === i;
      });

• display: block, 설정안하면 width는 부모로부터 받은 넓이를 다 사용, height는 자식꺼(height:100%일때)? 
  • full width available -> stretches out to the left & right as far as it can
  • starts on a new line -> vertical, 시작지점은 바로 앞 형제가 끝나고 바로 시작, 형제 안에 자식이 길거나 해도 무시함

    <div style="height:100px;">
    	<div style="height:500px;">
        </div>
    </div>
    <div>... -> 100px 끝나고 시작, 내부 자식이 500px짜리 있지만 무시함​​

     
  • example
    • <div>
    • <p> paragraph
    • <h1>~<h6> heading
    • <form>
    • <ol> ordered list
    • <ul> unordered list
    • <header><main><nav><footer>
    • <table>
• display: inline, width/height설정할수 없고 설정해도 효과없음, color/fontweight등은 설정가능
  • for text
  • horizontal
  • example
    • <span>
    • <a>
    • <img>
    • <button>
    • <input>
    • ...
• display: inline-block, inline이지만 width/height만 설정가능
• display: table
• display:flex

block level element와 inline level element의 차이에 대해 설명되어 있음

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-p-div-span-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

• visible
  • default, not clipped(안 자르고 다 보여줌)
• hidden
  • clipped - 넘치는 부분 잘라냄
  • 내부에 있는 애들이 빠져나가지 못하게 가둠(자기 자신이 더 커짐으로 해서라도)
• scroll
  • clipped
  • 넘치지 않아도 scroll이 기본으로 생김 (넘치치 않으면 위 아래로 이동은 안되고 자리만 차지하는 scroll생김)
• auto
  • clipped
  • scroll과 비슷하지만 넘치지 않으면 scroll없고 넘칠때만 생성
  • 만약 height가 고정이 아니라면 scroll생성안해도 되도록 height를 자동으로 늘이는듯(최대한 scroll없이 해결하고 정 안되면 scroll)

overflow-x, overflow-y로 방향지정 가능

<input> width:0으로 해도 변화가 없음 -> <input>의 기본 display:inline이라서 그런줄 알았으나 display:block이었음 -> input의 부모가 display:flex이고 선택된 tab들을 flex형태로 보여주는 데 이 경우 뭔가 제약이 있는 것 같음

TextField

Select

Autocomplete

Input

OutlinedInput

react node

<FormattedMessage> 사용하려면 IntlProvider를 윗단에서 아래와 같이 제공해줘야 함

import { IntlProvider } from "react-intl";
import enUsMsg from "./lang/en-US.json";
import koMsg from "./lang/ko.json";
import Page from "./Page";

const locale = localStorage.getItem("locale") ?? "ko";
const messages = { "en-US": enUsMsg, ko: koMsg }[locale];

function App() {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <Page />
    </IntlProvider>
  );
}

import { FormattedMessage } from 'react-intl';

<FormattedMessage id={'user.table.tool.total'}/> //총 사용자 : {total}
<FormattedMessage id={'user.table.tool.total'} values={{total: 1000}}/> //총 사용자 : 1000, values는 넘겨주는 변수지정
<FormattedMessage id={'user.table.tool.total'} defaultMessage='notFound' /> //id에 해당하는 번역어 없을때, defaultMessage나옴 defaultMessage없으면 id가 나옴

ui에 나타날때  padding 위아래 10 차지함 

String

String으로 쓰려면 useIntl이나 ingetIntl로 intl객체를 props로 받아와서 intl.formatMessage({id:...}) 형태로 사용해야함

import {injectIntl} from "react-intl";

const title = intl.formatMessage({id: 'index.portal.title'});

export injectIntl(...);

포커스 안가지만 커서가져가면 (/)표시나오지는 않고 회색-점선라인이 되지 않음 - 딱보면 비활성회된지 모르고 커서가져가야 할수 있음

<input readOnly={true} 작동함(포커스불가)O

<input readOnly='true'  작동함(포커스불가)O

<input readOnly='false'  작동함(포커스불가)O

<input readOnly  작동안함X -> 다시해보니 작동하는듯, 그리고 readonly가 맞는듯

포커스 안가고 커서가져가면 (/)표시나오고 회색-점선라인이 됨 - 딱봐도 비활성화되보임

<input disabled 작동함(포커스불가, 비활성화)O

<input disabled='true' 작동함(포커스불가, 비활성화)O

<input disabled='false' 작동함(포커스불가, 비활성화)O

document.getElementById('control_EMAIL').readOnly = true;//(o) 대소문자 주의
document.getElementById('control_EMAIL').readonly = true;//(x) 대소문자 주의


document.getElementById('control_EMAIL').setAttribute('readonly') //소문자는 setAttribute로 하니까 됨

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;      // 테스트 안해봐서 모름    
}

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