Ctrl + Shift + P
F1

• F1 키로도 명령창을 열 수 있다

방법1 ; substr

1
2
3
4

let N = 7;
let padding = '00000000';

let result = (padding + N.toString(2)).substr(-padding.length);

“00000111”

• 2진수, 16진수 등 표현할 때 앞에 0을 추가해서 보여주고싶을 때가 있다
• 8자리로 표현하고싶으면, padding 변수에 0으로 8자리를 채운다
• padding 과 이진수를 더하고 substr로 뒤에서부터 8자리만큼 잘라주면된다

방법2 ; padStart

1
2
3
4

let N = 7;
let padding = '00000000';

let result = N.toString(2).padStart(8, '0');

• 오후 3:25 2021-03-24 추가
• 훨씬 더 간단한 방법이 있었다
• padStart() 첫 번째 인자로 자릿수를 지정하고,
• 두 번째 인자로 추가할 문자열을 입력한다
• 만약에 첫 번째 인자보다 긴 문자열일 경우 아무 일도 일어나지 않는다

• 비슷한 메서드로 padEnd() 가 있는데 이거는 패딩을 뒤에 추가한다

참고

• way-to-add-leading-zeroes-to-binary-string-in-javascript
• substr
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

1
2
3
4
5
6

npx create-react-app my-react-app
cd my-react-app

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/chinsun9/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

yarn start

• 누군가 자동으로 세팅하는 스크립트를 제작해두었다
• 명령어 3개만 입력하면 세팅이 끝난다
• windows에서는 gitbash에서 해당 명령을 실행하면 된다
• 추가로 eslint 확장도구가 설치되어 있어야한다

• 추가로, prettier 확장도구를 통해 자동포맷팅을 사용하는 사람들은

1
2
3
4
5
6

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false
}

• "editor.formatOnSave": false ; prettier 확장도구로 인한 포맷팅은 비활성화해주고,
• "source.fixAll.eslint": true ; eslint에서 포맷팅을 하도록한다

TMI

따라해도 나오는 오류

Replace onPerfEntry with (onPerfEntry)eslint (prettier/prettier)

• src/reportWebVitals.js 파일에서 1개의 파라미터만 받는 함수에 괄호로 묶어주라는 오류가 나올 것이다
• 이것만 고쳐주면 잘 동작한다

• 혹시 빨간줄이 계속남아있거나, 안된다면 vscode를 다시 실행해보자

계속된 세팅 실패

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

        leadingComments: [
          {
            type: 'Line',
            value: ' If you want to start measuring performance in your app, pass a function',
            start: 270,
            end: 344,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' to log results (for example: reportWebVitals(console.log))',
            start: 345,
            end: 406,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals',
            start: 407,
            end: 481,
            loc: [SourceLocation],
            range: [Array]
          }
        ],
      }
    ],
    parent: null
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-practice@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-practice@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chin_\AppData\Roaming\npm-cache\_logs\2020-11-17T06_40_37_514Z-debug.log

• eslint-config-airbnb 만 설치하면 위 오류가 뜨면서 실행조차 안됬다
• 이유는 모르겠다

eslint-prettier-airbnb-react 포크

• karlhadwen/eslint-prettier-airbnb-react를 포크해서 내가 오류난 부분을 바꿔주었다
• Delete `␍`eslintprettier/prettier 문제였는데,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "rules": {
    // ...
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80,
        "endOfLine": "auto" // <-- 추가
      }
    ]
    // ...
  }
}

• "endOfLine": "auto"를 추가해어 해결하였다

.prettierrc 파일 불필요

• eslint-config-prettier 을 사용해서 prettierrc 파일없이 eslint 설정만으로도 가능하다고한다
• eslintrc.json에 rule 아래 prettier/prettier이 있는데, 여기에 내가 필요한 포맷팅 설정을 해두면된다

여기까지 리액트 프로젝트

• https://github.com/chinsun9/react-eslint-prettier-practice

참고

• 동영상 Setup ESLint, Prettier & Airbnb Style Guide in under 2 Minutes
• eslint-prettier-airbnb-react

• Shell launcher 라는 확장프로그램을 통해 쉽게 다른 종류의 터미널을 열 수 있다
• 설치하면 바로 사용가능하다

• 윈도우 cmd를 쓰다가 리눅스 bash 명령어를 쓸일이 있어서
• git bash 터미널을 열어 쓰는데 불편함이 느껴졌다
• 기존에는 디폴트 터미널을 설정하고 터미널을 새로열면 해당 터미널을 사용할 수 있었는데,
• 디폴트 터미널을 변경되어서 다시 원래 쓰던 터미널로 돌렸어야했다
• 이제 그런 귀찮은 과정을 하지않아도 된다

참고

• how-to-add-multiple-terminals-in-vs-code
• Shell launcher

• 와… 진짜 너무 편하다
• 기존에 탭키를 누르면 탈출이 안되고, 들여쓰기 되서 힘들었는데
• 이 확장도구를 활성화하면 탭키로 () {} [] `` 이런 bracket? 들을 손쉽게 탈출할 수 있다

TabOut

• 설치하면 자동으로 active 상태이다
• Ctrl + Shift + P 에서 toggle tabout으로 활성여부를 토글할 수 있다

참고

• TabOut
• Request for tabbing past matching brackets similar to VS · Issue #22864 · microsoft/vscode

• ABI (Application Binary Interface)
• 일렉트론js에서 iohook 설치할 때 사용해보았다

참고

• ABI Stability | Node.js
• 응용 프로그램 이진 인터페이스

1
2

log(`__dirname`, __dirname);
log(`process.cwd()`, process.cwd());

C:\git>node tmp\app-root\index.js
__dirname C:\git\tmp\app-root
process.cwd() C:\git

• __dirname은 현재 실행하는 파일의 절대경로이다
• process.cwd()는 node명령을 호출한 작업디렉터리의 절대경로이다

app-root-path

1
2
3
4
5
6

const log = console.log;
const app_root_path = require('app-root-path').path;

log(`__dirname`, __dirname);
log(`process.cwd()`, process.cwd());
log(`app_root_path`, app_root_path);

• 프로젝트 루트를 찾아주는 패키지도 있다

참고

• Modules: CommonJS modules | Node.js Documentation
• app-root-path

1
2
3
4
5

node --inspect      app.js
node --inspect-brk  app.js

nodemon --inspect     app.js
nodemon --inspect-brk app.js

• node app을 크롬 개발자 도구로 디버깅 할 수 있다
• chrome://inspect/#devices

• --inspect-brk 옵션은 코드 시작전 멈추는 옵션이다

참고

• Debugging in 2017 with Node.js
• Node.js 8 inspector

• 즉각적인 프로토타이핑
• 초보자에게 빠른 피드백 제공
• 단순한 대화식 컴퓨터 프로그래밍 환경

• 주피터 노트북에서 파이썬 코딩하는 느낌인 것같다

참고

• REPL - 위키백과, 우리 모두의 백과사전
• REPL | Electron