Difference between fetch, ajax, and xhr

https://stackoverflow.com/questions/52261136/difference-between-fetch-ajax-and-xhr

JS

remove white space

https://codingbeautydev.com/blog/javascript-remove-all-spaces-from-string/
str.replace(/ /g, '')): To match and remove whitespace characters (spaces, not tabs and not  newlines)
str.replace(/\s/g, ''): To match and remove all whitespace characters (spaces, tabs and newlines)

\s

스페이스, 탭, 폼피드, 불 바꿈 문자등을 포함한 하나의 공백 문자와 매칭됩니다.

([ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000] 와 동일)

/\sbar/는 "foo bar"의 " bar"에 매칭됩니다.

 \S

공백이 아닌 하나의 문자와 매칭됩니다.

([^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000] 와 동일)

/\S+/는 "foo bar"의 "foo"에 매칭됩니다. (가장 먼저 오는 공백아닌 문자열)

/g 전역검색의 의미

g 플래그를 이용하여 매칭되는 모든 문자열을 가져올 수 있습니다. 만약 g 플래그를 사용하지 않는다면 처음으로 매칭되는 값만을 가져오게 됩니다.

출처: https://beomy.tistory.com/21 [beomy:티스토리]

예제)

• 핸드폰번호 정규식 var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
• 일반 전화번호 정규식 var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
• 비밀번호 정규식
• 특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식
  • var regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
• 숫자와 문자 포함 형태의 6~12자리 이내의 암호 정규식
  • var regex = /^[A-Za-z0-9]{6,12}$/;
• 이메일 var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

- / / 안에 있는 내용은 정규표현식 검증에 사용되는 패턴이 이 안에 위치함
- / /i 정규표현식에 사용된 패턴이 대소문자를 구분하지 않도록 i를 사용함
- ^ 표시는 처음시작하는 부분부터 일치한다는 표시임
- [0-9a-zA-Z] 하나의 문자가 []안에 위치한 규칙을 따른다는 것으로 숫자와 알파벳 소문지 대문자인 경우를 뜻 함
- * 이 기호는 0또는 그 이상의 문자가 연속될 수 있음을 말함

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