• css를 조금 더 아름답고 일관되게 작성해보자
• 기본 prettier 포맷팅을 사용하면 들여 쓰기를 예쁘게 고쳐준다
• 그런데 규칙 없이 나열된 속성들을 일관되게 포맷팅을 하고 싶은 욕구가 생겨서 찾아보았다
• 이런 것들은 직접 하는 것보다는 도구의 도움을 받는 게 훨씬 좋다고 생각한다

prettier-plugin-style-order

• (참고) 나는 scss로 작업했다

1
2
3
4

yarn add -D prettier-plugin-style-order

// postcss-scss 도 인스톨 하라고 메시지가 나옴
yarn add -D postcss-scss

• 이렇게 패키지를 설치하고,
• fonmat on save 옵션이 켜져 있다면,
• 아무 css 파일에서 저장을 해보면 순서가 아름답게 정렬되는 것을 알 수 있다
• 기존에 작업하던 것들을 일괄적으로 포맷팅 하고 싶다면
• npm script에 prettier 명령어로 원하는 경로의 css파일들을 지정해서 일괄 포맷팅 한다
• "cssSort": "prettier --write src/**/*.scss"

생각

• 이전에는 항상 css를 주먹구구 중에서도 주먹구구로 작성해왔는데,
• 그러지 않을 수 있겠다

• css property order, css property sort 이런 식으로 검색을 했었는데
• stylelint 등 여러 가지 css를 정렬하는 도구들이 있는 것 같았다
• 그런데 prettier을 사용하고 있기 때문에, 다른 거 쓰지 말고 prettier에서 플러그인을 깔아서 해결해 보자 하여 prettier-plugin-style-order를 설치해서 사용해 보았다

참고

• https://9elements.com/css-rule-order/
• https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
• https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

• 김정환님 영상을 보고 정리한 내용

단축키

• Ctrl Shift \
  • Go to Bracket
  • 현재 커서를 포함하는 괄호로 이동한다

• F12
  • Go to Definition

• Alt F12
  • Peek Definition

• Ctrl 0
  • Focus into Side Bar

• Ctrl Shift .
  • Focus Breadcrumbs

• Ctrl T
  • Go to Symbol in Workspace
  • #

• Ctrl Shift O
  • Go to Symbol in Editor
  • @

참고

• https://youtu.be/_QCNqV_EfzE

• 프로젝트 루트 경로를 / 로 표현하고 싶은데, 방법이…

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

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      //Assuming your components/utilities live in ./src
      //Update this path as necessary
      "/*": ["./*"]
    }
  },
  //Add any build/compiled folders here to stop vscode searching those
  "exclude": ["node_modules", "build"]
}

• 프로젝트 루트 경로에 jsconfig.json을 생성하고 내용을 위처럼 한다

• 이렇게 내가 지정한 대로 참조가 되는 것을 확인할 수 있다
• 참고로, 위 opt디렉터리는 내 프로젝트 루트에 있는 디렉터리이다

활용한 곳

• sam project에서 공통 모듈을 layer로 빼는데,
• layer로 뺀 공통 모듈을 임포트 할 때 상대 경로를 사용하기 껄끄러운 문제가 있었다

• 로컬에서 개발할 때는 상대 경로로 개발하다가 (자동완성 위해)
• 람다를 배포할 때에, 배포하기 전에 절대 경로로 바꿔준다거나 하는 귀찮은 과정이 있었는데
• jsconfig로 절대 경로를 사용해 내가 만든 공통 모듈을 임포트 해서 사용하니까
• 그런 귀찮은 과정을 하지 않을 수 있었다

참고

• https://nimblewebdeveloper.com/blog/absolute-alias-imports-in-javascript-vscode

1
2
3
4
5
6
7
8
9

{
  // ...
  "paths": {
    "/*": ["./*"],

    // 이런것도 된다
    "@hello/*": ["./src/*"]
  }
}

• 한타 ; 534타
• 영타 ; 329타 / 65 WPM

한타

영타

• Format Document 로 .sql 포맷팅하기

• https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter
• sql-formatter 확장도구 설치

1
2
3
4
5
6
7
8
9
10

{
  // ...

  "[sql]": {
    // 방금 설치한 익스텐션을 통해 포맷팅하도록
    "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
  },
  // sql 키워드(select, from 등)를 대문자로 자동 치환해줌
  "sql-formatter.uppercase": true
}

• 위처럼 세팅해주고 Format Document 명령을 실행하면 잘 동작하는 것을 확인할 수 있다

참고

• https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter

• Learn Sass In 20 Minutes | Sass Crash Course 를 보면서
• sass, scss 를 공부해보았다

sass

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

// 변수
$primaryBtn: rgb(78, 201, 253);
$textColor: rgb(0, 0, 0);

button {
  background: $primaryBtn;

  // 중첩 nesting 가능
  //   & ; 상위 선택자
  &::after {
    content: 'hellooo';
  }

  // 중첩된 속성
  margin: {
    top: 10px;
    left: 20px;
  }
  padding: {
    bottom: 40px;
    right: 30px;
  }
}

• 중첩 이 기능 하나만으로도 엄청나게 강력한 기능이라고 생각한다
• 스타일 적용되는 것도 직관적이고, html이랑 같은 구조로 css를 작성할 수 있을 것 같다

연습 코드 저장소

• https://github.com/chinsun9/sass-practice

• 윈도우 디펜더 프로세스가 메모리를 엄청나게 먹어서 골머리 아프다
• 기본 300mb 정도이고 어쩔 땐 막 2gb 가까이 올라간다..
• 그땐 마우스가 막 끊기면서 불편하다..
• 해결법 보고 따라 했는데 300mb 정도 나오는데 더 지켜봐야겠다

• 8기가로는 이것저것 하기엔 좀 부족한 메모리인 것 같다

참고

• 윈도우즈10 Antimalware Service Executable 메모리 점유 과다 문제 ; https://antilibrary.org/2371

1
2
3
4
5
6
7
8

<input
  ref={inputRef}
  type="text"
  value={shareLink}
  onClick={onLinkClickHandler}
  spellCheck={false}
  readOnly
/>

1

<input type="text" spellcheck="false" />

• input안의 빨간 줄 생기는 것을 없앨 수 있다