개발자의 개발 블로그

맥북을 구매했다. 

vs code를 설치한 뒤, 터미널에서 작업 중에 바로 VS Code창을 띄우려고 했다. 

원래는 다음과 같이 작성하면 자동으로 열렸다.

code .

이렇게 하게 되면, 터미널에 있는 경로에서 VS Code 프로그램이 실행된다.

그런데,이런 메시지를 돌려주면서 명령어를 인식하지 못 했다.

command not found: code

이런 상황이라면 다음과 같이 하면 된다.

1. vs code 를 실행한다.

2. 명령팔레트를 실행한다. 단축키는 ⇧⌘P 를 동시에 누른다. 그러면, 상단에 입력창이 나온다.   > 

3. Shell Command 입력 후 실행한다.

이렇게 install을 해주면 터미널에서 code .을 사용할 수 있게 된다.

리액트 설치 후, 프로젝트를 오픈했다.

그리고 파일을 열었는데... 한 화면에서 계속 바뀌면서 열렸다.

여러개 뜨는 걸 예상했기때문에 당황스러웠다.

뭐지?

a

b

c

d

파일이 있다고 하면,  a b c d 선택을 하면 파일 4개가 열려야하는데...

a에서 b누르면, a있던 곳에서 b가 나오고,,,

b에서 c누르면, b있던 곳에서 c가 나오고,,,

c에서 d누르면, c있던 곳에서 d가 나오고,,,

결국하나만 나온다.

검색해봤다.

위 3개중에 중간 Workbench > Editor: Enable Preview를 

체크 해제해주면 된다.

쉽다. 좋다. 해결. 끝.

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

이것을 사용하면 된다.

코드를 복붙하거나...

파일을 복붙하거나...

하면 수정해야 할 부분이 많다...

그냥 위에 패키지를 설치한 뒤,

클래스 기본이나 함수 기본 또는 자주쓰는 react-dom이나 redux와 같은 것을 한꺼번에 생성할 수 있어서 좋다.

App.js 파일 생성후에, rcc 를 입력하면?

import React, { Component } from "react";

class App extends Component {

render() {

return <div> </div>;

}

}

export default App;

이 틀이 그냥 생성된다!

rsc를 입력하면?

import React from 'react';

const App = () => {

return (

<div> </div>

);

};

export default App;

이와같이 함수 컴포넌트가 생성된다. 

대박~

물론, html 파일이 있는 디렉토리로 이동해서 더블클릭해서 브라우저로 확인할 수 있다.

그럴경우, 주소창에는 

file:///Users/jangseongho/Documents/htmlTest/index.html

이런식으로 나오게 된다.

하지만, vs code를 사용한다면 라이브 서버를 설치하여 바로 띄울 수도 있고, 코드 수정 시 리로드없이 적용이 가능하다.

아래 패키지를 설치하면 된다.

주소창에서는

http://127.0.0.1:5500/01_basic_layout.html

이렇게 바뀐다.

참고로, 127.0.0.1는 자기 자신의 로컬호스트이다.

즉, 로컬로 서버를 띄우고, 포트를 5500으로 지정된 것이다.(자동으로)

그리고, 접속을 안 할시, 금방 서버가 종료되므로 다시 접속해서 사용해야한다.

이것을 설치하게 되면, React 관련 템플릿을 단축키로 작성할 수 있게 된다.

가장 기본적인 단축키로 rcc와 rsc가 존재한다.

rcc 는 class 형태의 컴포넌트 템플릿이고, rsc는 stateless 즉, 함수형 컴포넌트를 만들어준다.

vs code에서 .js 자바스크립트 파일을 생성한 뒤,

rcc 또는 rsc를 입력하면 자동으로 생성하면 코드가 자동으로 생성된다.

1. 터미널에 들어가서 해당 디렉토리에서 

code . 

을 입력하면 vs code가 바로 열린다.

하지만, 초기 세팅이 필요하다.

세팅없이 사용하려고 하면, 다음과 같은 에러가 발생한다.

not found이므로 found해주자.

-bash: code: command not found

설정 방법

1. VS Code 를 실행한다.

2. 명령팔레트를 실행한다. 이것은 보기 메뉴 맨 위에 위치한다. 영어로는 View - Command Pallete

3. Shell Command 입력 후 Install한다.

4. 다시 터미널로 돌아가서 재시도!

5. 뿅~

vs code 안에서 사용하는 단축키를 생각나는대로 적어보려 한다.

적어두지 않으면 또 까먹으므로...

Command + s(저장)

Command + c(복사)

Command + v(붙여넣기)

Command + x(잘라내기)

Command + z(되돌리기)

Command + a(파일 닫기)

Command + a(전체 선택)   

개발 환경은 맥(Mac)을 쓴다고 가정한다.

1. 자동 코드 정렬 : Shift + Option + F

- 말이 필요없다. 보기좋게 정렬해준다.

2. 검색하기 : Shift + Command + F

3. 하단에 터미널 띄우기 : control + `  

- 작은 따옴표 아님. 숫자 1 왼쪽에 있다. 작은 따옴표는 ' 이다.

4. 라인 한줄 복사해서 붙이기

- 블록 잡을 필요없이 복사하고자하는 행에 커서를 놓고 Command + c(복사)후, Command + v(붙여넣기) 입력.

- 또는 Shift + option + 방향키!  아래로 커서 있는 줄 또는 블록 잡은 것 복사됨.

5. 라인 한줄 들여쓰기 : Command + ]

- 맨 앞에 커서를 놓고, 탭(Tab)을 눌러서 움직일수도 있지만, 커서 위치와 상관없이 들여쓰기를 할 수 있다.

6. 라인 한줄 들여쓰기 : Command + [

- 탭(Tab)을 사용했을 때, 되돌리고 싶을 때는? 내어쓰기를 찾다보니, 5번과 세트로 단축키가 존재했다.

7. 변수 여러 개 한꺼번에 하이라이트 잡는 방법

- 첫 번째 : option 누른 상태로 원하는 변수를 더블클릭하면, 원하는만큼 잡힘 --> 한 번에 수정이 가능.

- 두 번째 : 동일한 변수를 잡고 싶다면 맨 위에 변수를 하이라이트 한 뒤, Command + D를 한번 할때마다 하나씩 잡힘.

8. 

HTML 작성시에는 워낙 잘 되서 필요가 없다.

하지만, 리액트에서 JSX파일을 수정할 때는 자동완성이 안되서 난감했다.

태그를 일일히 다 작성하고, 끝 태그(</..>)까지 일일히 맞춰줘야한다니...말도 안된다.

JSX에서 HTML을 작성할 수 있는 방법을 찾다가 못 찾았다.

대신, 자동으로 끝 태그를 생성해주는 패키지는 찾았다.

이름은 너무나 쉽다.

Auto Close Tag

이다.

이것을 패키지 창을 열고(왼쪽 수직으로 정렬된 항목 중 가장 마지막 네모)

이것을 누른 후, Search Extensions...

에다가 입력한다.

그리고 선택 후, Install 고고~

그 다음 Reload한 뒤 해보면 적용이 된다!

VS Code를 사용하다가, 변수 선언 중 색상이 다른 한 개를 발견했다.

다른것들은 하늘색인데, 이것만 회색...

뭔가 다른가해서 마우스를 갖다대보니...

위와 같이 경고가 뜬다.

'items'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.

선언은 되었으나 해당 파일에서 사용하지 않고 있다는 의미이다.

자바나 안드로이드 같은 경우 노란색으로 밑줄이 가는데, vs code에서는 경고 밑줄이 없어 놓치기 쉽다.

코드가 틀렸거나, 이 변수가 필요없거나 두 개 중 하나이다.

중복된 코드 부분을 복붙하다가 이 변수를 바꿔주는 것을 잊은 헤프닝이다.

쓸일이 없다면 제거해주면 된다.