IT & Tech

  let test = '  ';

  console.log('[test]', test);

  if (test) console.log('[TRUE]'); //' ', 1, -1, 1 / 0=Infinity,[],{}, () => {}

  else console.log('[FALSE]'); //undefined,null,'', false, 0, 0 / 0=NaN

보통 이런식으로 특정조건이  true/false이냐에 따라 화면 추가여부 결정됨

<div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>

그런데 true/false를 판단하는 변수가 number일 경우 - 0->false ->number '0'이 노출되므로 조심해야함

{lastPage && (//lastPage===0일때 전체가 0으로 노출됨, 방지하려면 lastPage===undefined등으로 변경
  <div
    style={{
      height: 'inherit',
      display: 'flex',
      alignItems: 'center',
      padding: '0 35px 0 10px',
      fontSize: '18px',
    }}
  >
    <div className={classes.pageInput}>
      <input
        className={classes.input}
        type="text"
        name="currentPage"
        value={currentPage}
        onChange={this.handlePageInputChange}
        onKeyDown={this.handlePageInput}
        onBlur={this.handlePageInputBlur}
      />
    </div>
    <div className={classes.slash}> /</div>
    <div className={classes.page}> {lastPage} </div>
  </div>
)}

reduce(callbackFn, initialValue)

• initiallValue없으면? If initialValue is not specified, previousValue is initialized to the first value in the array, and currentValue is initialized to the second value in the array.
• initialValue없고 대상array내 값이 1개뿐이라면?
  • 뭘해도 [A] -> reduce(...) -> A 형태로 결과가 나옴, 즉 1개 있던 value가 array를 빠져나오게됨

reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

• previousValue: accumulated values until now

CSV는 결국 delimeter로 구분된 string

const Papa = require('papaparse/papaparse.min.js');

Papa.unparse(내용에 들어갈 array-[{a,b},{a2,b2},...]);

let blob = new Blob(['\ufeff' + bodyData]), url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'exportEventLogs.csv';
a.click();
window.URL.revokeObjectURL(url);//revokeObjectURL: URL.createObjectURL()로 생성한 객체 URL해제
//참고로 revoke는 re + voke(vocal 과 같은 어원, 부르다) 다시 불러들이다 -> 취소/해제하다

let blob = new Blob(['\ufeff' + csvData]),

여기서 \ufeff 붙이는 이유는? 

• /ufeff는 해당 file이 어떤 문자열로 코딩되었는지를 의미하는 일종의 식별자입니다. “이 문서의 인코딩 방식은 뭐에요”라는 걸 알려주는 메타 정보인 것이죠. 보통 이러한 방식은 해당 파일의 맨 앞에 집어넣곤 합니다.
• --> 이런걸 unicode BOM(Byte Order Mark)라고 하나봄

https://frhyme.github.io/python-basic/py_eff_byte_order_mark/

BOM이란 문서 맨 앞에 눈에 보이지 않는 특정 바이트(byte)를 넣은 다음 이것을 해석해서 정확히 어떤 인코딩 방식이 사용되었는지 알아내는 방법을 나타냅니다. 자세하게 유니코드가 little-endian 인지 big-endian 인지 아니면 UTF-8 인지 쉽게 알 수 있도록, 유니코드 파일이 시작되는 첫부분에 보이지 않게, 2~3바이트의 문자열을 추가하는데 이것을 BOM이라고 합니다. BOM은 텍스트 에디터 화면에서는 보이지 않고, 헥사 에디터(Hex Editor)*로 열었을 때만 보입니다.

https://brownbears.tistory.com/124

function extractBodyFieldKey(body, timeType, intl) {
 let addUpDay = body.reduce( (acc, cur) => {
  return acc.concat(cur);
 });
 addUpDay = sortByTimestamp(addUpDay);
 return Papa.unparse(addUpDay.map(log => {
  let eventTime = getTimeZoneTime(log, timeType);
  let event =  intl.formatMessage({id:  util.eventLogMessageByCode(log.code)});
  let userId = log.userKey;
  let userName = log.userName;
  let deviceDisplayName = log.deviceName;
  return {eventTime, event, userId, userName, deviceDisplayName}
 }))
}

[07-22 오전 11:30] 구본관: 저희 모카키도 그렇고 에어팝 포털도 그렇고 CSV 내보내기 할 때 대량으로 생성하게 되면 block 걸리는 경우가 발생합니다. 위에 이번에 변경된 UI도 파일작업을 할 때 동작을 멈추게 됩니다. addUpDay.map 이나 Papa.unparse 부분에서 시간이 굉장히 오래 걸리게 되는데 이때 렌더링이 멈추게 됩니다 대량으로 데이터를 처리할때는 비동기 방식으로 처리할 필요가 있습니다. 저희가 사용하는 papaparse 라이브러리를 보면 step 이나 chunk 같은 옵션들이 있습니다. 이번에 수정하려고 하는 것은 아니고 추후 개발에 참고하시면 좋겠습니다

-> 시간이 오래 걸려서 렌더링 멈춤? 상관없고 대량 데이터를 array로 한번에 처리해서 outOfMemory날뿐, 잘라서 처리해주면됨

.env.[localhost|development|production] 파일로 분리되어 각각의 파일안에 정의하고

package.json에서 --config webpack.[localhost|development|production].js 를 설정하면

.env.[개발환경]안에 정의한 변수명 process.env.REACT_APP_SERVER_LOCATION 으로 사용가능

[mocaKey] package.json안에서 set REACT_APP_VERSION=dev 지정하면 process.env.REACT_APP_VERSION변수로 사용

"scripts": {
  "start": "set HTTPS=true&&react-scripts start",
  "start:beta": "set HTTPS=true&&set REACT_APP_VERSION=beta&&react-scripts start",
  "start:dev": "set HTTPS=true&&set REACT_APP_VERSION=dev&&react-scripts start",
  "hot": "react-app-rewired start",
  "build": "react-scripts build",
  "build:beta": "set REACT_APP_VERSION=beta&&react-scripts build",
  "build:dev": "set REACT_APP_VERSION=dev&&react-scripts build",
  "test": "react-scripts test --watchAll=false",
  "test:verbose": "react-scripts test --verbose",
  "test:report": "react-scripts test --verbose 2> report.txt",
  "test:coverage": "react-scripts test --coverage --watchAll=false",
  "eject": "react-scripts eject",
  "cypress:open": "cypress open",
  "cypress": "cypress run --browser=chrome",
  "cypress:test": "set START_SERVER_AND_TEST_INSECURE=1&&start-server-and-test start:dev https-get://localhost:3000 cypress"
},

let LEVEL = process.env.REACT_APP_VERSION;
LEVEL = LEVEL || dev;

if (LEVEL !== dev) {
  console.log = function() {};
  console.warn = function() {};
  console.debug = function() {};
}

• 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;
      });

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)