1
2
3
4
5
6
7
8
9

// input
1
2
3

// output
3
2
1

• 역전?시킬 수 있다
• 외에도 중복라인삭제, 셔플 등의 기능이 있다

참고

• https://github.com/earshinov/vscode-permute-lines/

• 익스텐션으로 사용하던 Bracket Pair Colorizer가 vscode 기본 기능이 되었다
• 기존에 사용하던 익스텐션을 제거하고, 세팅에서 활성화해주었다

1
2
3
4

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}

참고

• https://github.com/CoenraadS/BracketPair#readme

상황

• live server로 리액트 빌드 결과를 실행해보고 싶었다
• github pages로 호스팅하기 때문에 basePath?가 있었다
• live server에서 일단 로컬로 실행해보고 싶었는데,
• basePath와 spa를 어떻게 실행해 볼 수 있을까?

해결

1
2
3
4
5

// .vscode\settings.json
{
  "liveServer.settings.mount": [["/go-home-time", "./"]], // package.json에 homepage필드가 있는 경우
  "liveServer.settings.file": "index.html"
}

참고

• https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md

• nodejs, javascript, typescript 등 어떤 카테고리에 넣어야할지 고민하다가 그냥 vscode에 넣었다

• 왜냐하면 vscode를 재시작하는 게 중요 포인트이기 때문이다

• ESLint: Restart ESLint Server 또는

• developer: reload window 을 꼭 해주자

• eslint config를 수정했으면 vscode창을 다시 실행한다
• eslint config를 수정했는데, 린트가 동작하지 않는데, 뭐 때문에 동작하지 않는지 모른다면
• yarn eslint tmp.ts 같은 명령을 사용해서 아웃풋을 확인한다
• 그러면 어떤 패키지가 없어서, 어떤 유효하지 않은 설정을 사용해서 동작하지 않는다는 정보를 얻을 수 있다
• 그리고 eslintrc에 들어가는 내용을 너무 다 세세히 알려고 하지 말자
• 일단 동작하면 그러려니 하면 된다
• 나중에 관련해서 더 세세하게 커스텀 하고 싶을 때만 알아보자

eslint 장점

• 코딩 실력이 크게 늘었다?
• eslint가 잡아주는 오류들을 수정하면서
• js의 유용한 문법이나,
• 불필요한 코드들을 많이 지울 수 있었다

• 예를 들면, prefer-destructuring룰로 구조 분해 할당 같은 문법들을 알게 된다라던가
• 반복문 안에서 비동기 함수를 await을 붙여 실행하는데,
• 당시에는 비동기가 익숙하지 않아서 무조건 await을 붙여서 값을 바로 꺼내서 핸들 하기 급급했는데,
• 린트가 Unexpected 'await' inside a loop. 에러를 뱉어줬다
• 관련해서 검색하고 공부하고, Promise에 대해 자세히 공부해보고,
• 결국 이전의 결과가 다음에 필요하지 않다면
• Promise.all로 실행해서 병렬로 처리 후에 한 번에 결과를 받아서 핸들 한다던가

• 선생님 같은 느낌으로 정말 도움이 많이 되었다

eslint rule 설정할 때

“off” or 0 - turn the rule off
“warn” or 1 - turn the rule on as a warning (doesn’t affect exit code)
“error” or 2 - turn the rule on as an error (exit code is 1 when triggered)

• 문자열 또는 숫자로 설정할 수 있다
• https://eslint.org/docs/user-guide/configuring/rules

prettier와 함께쓰기

1

yarn add -D prettier eslint-config-prettier

• eslint-config-prettier를 설치한다
• eslint와 prettier같 충돌나는 룰을 disable해준다

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

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:react/recommended",
    "airbnb",
    "prettier" // 여기 추가
  ],

• eslintrc > extends 배열 마지막에 prettier를 추가한다
• https://github.com/prettier/eslint-config-prettier

참고

• https://eslint.org/docs/rules/no-await-in-loop
• https://eslint.org/docs/user-guide/configuring/rules
• https://github.com/prettier/eslint-config-prettier

• 오…
• alias.r1=! r1() { git reset --soft HEAD~1 ; } ; r1
• 나는 평소 이런 식으로 이전 커밋을 되돌렸다
• 직접 치려면 많이 긴 명령어라 줄여서 사용했는데,
• 이제는 undo last commit명령을 알아서 애용할 것 같다

참고

• https://youtu.be/9-R2GiAqyhY
• https://www.youtube.com/channel/UCs5Y5_7XK8HLDX0SLNwkd3w
  • vscode 유튜브 채널이다. 여기서 이것저것 꿀팁을 알려준다

• tab을 눌렀을 때 자동완성 적용을 삭제한다

• tabout의 when을 아래처럼 수정한다
• editorTextFocus && !editorHasMultipleSelections && !inSnippetMode
• 기본값에서 자동완성 추천이 안 보일 경우 조건을 삭제해 주었다

참고

• https://stackoverflow.com/questions/57938988/vscode-how-to-disable-tab-autocomplete

• 로컬에 있는 프로젝트를 고대로 도커 컨테이너로 가져와 작업 가능..!

쉽게

• Remote-Containers: Add Development Container Configuration Files...
• 원하는 환경 선택!
• 그러면 .devcontainer 폴더와 그아래 Dockerfile 과 컨테이너 devcontainer.json 이 자동 생성된다
• Remote-Containers: Reopen in Container로 컨테이너에서 개발을 해볼 수 있겠다

참고

• https://code.visualstudio.com/docs/remote/containers
• https://code.visualstudio.com/docs/remote/containers-tutorial

• Rest Client라는 도구가 있다
• text 기반으로 간편하게 리퀘스트를 작성할 수 있다

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

###
GET http://localhost:3000/movies/ HTTP/1.1

###
GET http://localhost:3000/movies/1 HTTP/1.1

###
POST http://localhost:3000/movies/ HTTP/1.1
Content-Type: application/json

{
    "title": "sung",
    "year": 2020,
    "genres": ["mind blown"]
}

• 확장자는 http로 한다
• 한 파일에서 여러 개의 리퀘스트를 작성할 때는 ###으로 구분하여 작성한다
• 리퀘스트 작성할 때 메서드(get, post, put, delete,…)를 입력하면 자동완성 스니펫을 제공한다
• 단축키로는 ctrl alt R로 리퀘스트를 보낼 수 있다

Variables

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

@endpoint = http://localhost:3000

###

POST {{endpoint}}/login HTTP/1.1
Content-Type: application/json

{
    "username": "sung",
    "password": "1234"
}

###

GET {{endpoint}}/profile HTTP/1.1

• 변수를 사용할 수 있다
• 계속 중복해서 사용하는 문자열이나, 나중에 변경될 여지가 있는 것들을 변수로 만들 수 있다

Environments

• ctrl alt e 로 환경을 설정해 줄 수 있는데, 먼저 환경을 만들어야 한다

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

{
  // ...
  "rest-client.environmentVariables": {
    "$shared": {
      "version": "v1",
      "prodToken": "foo",
      "nonProdToken": "bar"
    },
    "local": {
      "version": "v2",
      "host": "localhost",
      "token": "{{$shared nonProdToken}}",
      "secretKey": "devSecret"
    },
    "production": {
      "host": "example.com",
      "token": "{{$shared prodToken}}",
      "secretKey": "prodSecret"
    }
  }
}

• .vscode/settings.json 에 json으로 정의해줄 수 있다
• 이제 ctrl alt e 명령으로 원하는 환경을 선택해 사용한다

활용

2개의 유저로 번갈아 가면서 테스트할 때 활용했다

• .vscode/settings.json 에 user1, user2의 토큰을 적는다

• 스위치 해가면서 같은 api를 실행한다

쿠키 지우기

• ~/.rest-client/cookie.json 삭제, vscode 재시작
• 인증 구현중이라면 서버를 다시 켜서 세션을 날리는 방법도 있겠다
• https://github.com/Huachao/vscode-restclient/issues/117

참고

• https://marketplace.visualstudio.com/items?itemName=humao.rest-client
• https://github.com/Huachao/vscode-restclient

• 메모장에서 F5를 누르면 현재 시각이 찍힌다
• vscode에서도 그런 기능이 있나 살펴보았다
• 없으면 확장도구!

참고

• https://marketplace.visualstudio.com/items?itemName=jsynowiec.vscode-insertdatestring
• https://github.com/jsynowiec/vscode-insertdatestring

상황

• 여러 테스트 파일을 만드는데, 기본적으로 작성해야 하는 틀이 있다
• 기본 틀이 되는 코드를 scaffold.test.ts 파일로 만들어서 내용을 복사해서 사용하거나, 복사본을 만들면서 새로운 테스트 파일들을 생성했다
• 반복하다 보니까 이마저도 불편했다
• 그러다가 커스텀 스니펫을 만들기로 한다

목표

1
2
3
4
5
6
7
8
9

/**
 * problem
 */

describe('id', () => {
  test('should ', () => {
    expect(solution(prams)).toEqual(er);
  });
});

• 내 목표는 te를 입력하면 내가 등록한 스니펫을 통해 위 코드를 완성시킬 것이다

스니펫 만들기

• 상단바에서
• File > Preferences > User Snippets 을 선택한다

• 어떤 언어에서 만들 것인지 선택한다
• 나는 타입스크립트에서 사용할 것이다
• 그러면 %userprofile%\AppData\Roaming\Code\User\snippets\typescript.json이라는 파일이 생성되고
• 설명과 예제가 나와있다

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

{
  // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "cotejs test": {
    "prefix": "te",
    "body": [
      "/**",
      "* ${1:problem}",
      "*/",
      "",
      "describe('${2:id}', () => {",
      "$0",
      "  test('should ', () => {",
      "    expect(solution(${3:prams})).toEqual(er);",
      "  });",
      "});"
    ],
    "description": "base"
  }
}

• prefix ; 나는 te로 설정했다. 스니펫이 어떤 문자열에 추천될지 설정하는 곳이다
• body ; 내가 완성시키고 싶은 스니펫을 등록한다. 줄 바꿈을 기준으로 배열로 쪼개 줘야 한다
• description ; 스니펫에 대한 설명을 적는다

• 특히 자동 완성할 때 tab를 누르면 커서가 원하는 순서로 이동하게 할 수 있다
• $1, $2, $3,..., $n, $0을 통해서 가능하다
• 각 커서에 기본값을 추가하고 싶으면 ${1:one} 이런 식으로 가능하다
• $0은 마지막 커서 위치를 설정할 수 있다

참고

• https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets