em

• 상위 요소 기준

rem

• 최상위 요소 html 기준

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style>
  html {
    height: 100vh;
  }

  body {
    height: 100%;
  }

  .flexbox-container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .flexbox-item {
    background-color: #ddd;
  }
</style>

<div class="flexbox-container">
  <div class="flexbox-item">hello world!</div>
</div>

1
2
3
4

.flexbox-container {
  justify-content: center;
  align-items: center;
}

• flex box로 수평수직 가운데 정렬하기

• 동일한 vscode 설정을 여러컴퓨터에 쉽게 동기화할 수 있다
• github 아이디만 있으면된다
• vscode setting, 확장도구 까지 모두 동기화할 수 있다

Settings Sync

• Settings Sync 확장도구를 설치한다
• 깃허브에 로그인하고 사용한다
• F1 > Sync: Update/Upload Settings 로 현재 세팅을 업로드한다
• 동기화하고싶은 다른 컴퓨터에서 F1 > Sync: Download Settings 를 실행해 다운로드한다

참고

• Settings Sync

1
2
3
4
5

rm -rf {디렉터리명}
rm -rf {파일명}
rm -rf {파일명} {디렉터리명} {이렇게 계속 나열하기}

rm -rf node_modules package-lock.json

• cli로 삭제할 파일 또는 디렉터리를 하나이상 나열하여 한번에 삭제할 수 있다

1

JSON.stringify(my, null, 2);

• 두번째 인자로 null 과
• 세번째 인자로 space argument 를 설정해주면된다
• space argument 는 들여쓰기를 간격에 대한 것이다

TMI

비교해보기

1
2
3
4
5
6
7
8
9
10
11

let my = {
  key: 'a',
  altKey: false,
  code: 'KeyA',
  ctrlKey: false,
  keyCode: 65,
  shiftKey: false,
};

console.log(JSON.stringify(my));
console.log(JSON.stringify(my, null, 2));

• F12 로 개발자도구를 열고, 콘솔에 복붙해보자

html로 출력하고싶을 때

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

<pre><code id="message"></code></pre>

<script>
  'use strict';

  const message_span = document.querySelector('#message');

  let my = {
    key: 'a',
    altKey: false,
    code: 'KeyA',
    ctrlKey: false,
    keyCode: 65,
    shiftKey: false,
  };

  message_span.innerHTML = JSON.stringify(my, null, 2);
</script>

• 로그로 남기는 것이 아니라 html로 그 결과를 보여주고 싶을 때에는
• 위처럼 pre태그 안에서 보여주면된다

참고

• pretty-print-json-using-javascript
• JSON.stringify() - JavaScript | MDN

1
2
3
4
5
6
7

```json
"scripts": {
    // ...
  "format": "prettier --write src/**/*.ts{,x}",
  "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
}
```

1
2
3
4
5
6
7

```json
"scripts": {
    // ...
  "format": "prettier --write src/**/*.ts{,x}",
  "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
}
```

• github repo의 md파일을 보면 json안의 주석이 빨간색으로 표시될 때..
• json 대신 jsonc 를 사용하면된다
• json with comments 라는 뜻이다

방법 바로 보기

react typescirpt eslint prettier airbnb style guide 적용 방법은 여기로…
https://github.com/chinsun9/typescript-react-eslint-prettier-practice

TMI

상황

• 진짜 여러 튜토리얼을 따라해도 뭔가 잘 안됬다
• 차근차근 따라하기보다 세팅을 빨리 끝마치고 싶은 생각에 복붙을 시전했다
• 일단 뭔가 쫌 되야 이렇구나 생각할텐데 잘안되서 머리가 아팠다

문제 & 원인

vscode setting.json

• eslint없이 prettier 를 사용하면서 설정해둔 설정값
• format on save 이것때문에, 린트 이후에 prettier가 다시 코드를 포맷팅하는 문제

1
2
3
4
5
6

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

• 처음에는 이거를 둘다켜놨엇다
• 기존에 eslint에서 fix한거 formatOnSave가 다시 prettier 포맷터로 다시 포맷해서 생겼었다

.eslintrc.js

Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js. The file must be included in at least one of the projects provided.

• 이유를 모르겠으나. .js 방식으로하면 위 오류가 떠서 안됬다
• 그래서 단순하게 .json방식으로 바꾸었다. 그랬더니 해결됬다…

알게된 것

• eslint-config-prettier 를 통해 별도 .prettierrc 파일없이
• eslintrc에서 prettier 설정이 가능하다

• reportWebVitals.ts 이런 자동생성된 파일은 린트를 적용시킬 필요가없다
• 파일 최상단에 /* eslint-disable */를 적어 무시해주자

• 빨간줄이 생기면 희소식이다. 빨간줄 조차 안생기면 eslintrc 파일에 문제가 생긴거다
• vscode도 재시작해보자

• “source.fixAll.eslint”: true 설정으로 eslint에서 포맷팅을 실행할 수 있다

• 쓸모없다고 생각하는 룰은 그냥 꺼버리자
• 마우스를 올려서 어떤 룰인지 확인하고 .eslintrc > rules 에 해당 룰을 적고 0으로 세팅한다

세팅법 - 여기까지 리액트 프로젝트

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

• readme.md에 설정하는 방법을 정리해두었다
• 커밋내역을 보면 명령어 입력 순서가 나와있으니 참고하면 좋을 것 같다

참고

• Create-React-App with TypeScript, ESLint, Prettier, and Github Actions | by Bryan Grill | Medium
• prettier/eslint-config-prettier

cas→ console alert method console.assert(expression, object)
ccl→ console clear console.clear()
cco→ console count console.count(label)
cdb→ console debug console.debug(object)
cdi→ console dir console.dir
cer→ console error console.error(object)
cgr→ console group console.group(label)
cge→ console groupEnd console.groupEnd()
clg→ console log console.log(object)
clo→ console log object with name console.log(‘object :>> ‘, object);
ctr→ console trace console.trace(object)
cwa→ console warn console.warn
cin→ console info console.info
clt→ console table console.table
cti→ console time console.time
cte→ console timeEnd console.timeEnd

• clg 를 치고 tab키를 console.log가 자동완성된다
• 이밖에도 import from 자동완성 등 여러가지가 있다
• ~ snippet 익스텐션을 깔면 사용할 수 있다
• 나는 다양한 스니펫을 제공하는 ES7 React/Redux/GraphQL/React-Native snippets 익스텐션을 설치해서 사용하고 있다

참고

• JavaScript (ES6) code snippets
• ES7 React/Redux/GraphQL/React-Native snippets

상황

• 로컬에 있는 퍼블리쉬하지 않은 브랜치 이름 바꾸기

브랜치이름 바꾸기

git branch -m {바꿀 브랜치명} {새로운 브랜치명}

참고

• Git Branch 이름 변경하기

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

[
  // ...
  {
    "key": "ctrl+shift+j",
    "command": "terminal.focus"
  },
  {
    "key": "ctrl+shift+j",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "terminalFocus"
  }
]

• 나는 위처럼 키바인딩을 해놨다
• Open keyboard Shortcuts (JSON) 으로 들어가 설정한다

• 가끔은 탐색에 포커스가 가있는 경우도 있는데, 이때에 에디터로 포커스하려면
• ctrl + 1, ctrl + 2 등 ctrl + 숫자 키로 코드 에디터에 포커스를 맞출 수 있다

참고

• switch-focus-between-editor-and-integrated-terminal-in-visual-studio-code