개발자의 개발 블로그

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. 

1) 컴포넌트 라이프사이클(Component Lifecycle) : 렌더링

컴포넌트는 생성되면서부터 여러 기능들을 정해진 순서대로 실행하는데 

이것을 Component Lifecycle이라 부른다.

컴포넌트 수명은 페이지 렌더링 되는 순간 시작해서, 페이지가 사라질 때 끝난다.

즉, render를 통해 우리에게 보여주고 그 다음 흐름까지 정해진 함수들이 존재한다.

이것은 개발자가 고려하지 않아도 자동으로 진행된다.

따라서, 반드시 구현해야 하는 메소드는 아니므로, 원할때 클래스 안에서 호출하여 사용하면 된다.

1) constructor(props)

2) componentWillMount()

3) render()

4) componentDidMount()

순서는 위와 같다. 콘솔로 확인을 해보면,

이렇게 구글 개발자 콘솔에서 확인할 수 있다.

메서드는 엄청 많다.

그 중에서, 

Will~~~ 붙은 것은 어떤 작업을 하기 전에 실행되는 메소드이며,

Did~~~ 가 붙은 것은 어떤 작업을 작동한 후에 실행되는 메소드이다.

라이프 사이클(Life Cycle)은 마운트, 업데이트, 언마운트 카테고리로 나눠진다.

01) 컴포넌트 라이프사이클(Component Lifecycle) : 마운트

DOM이 생성되고, 웹 브라우저상에 나타나는 것을 마운트(Mount)라고 한다.

마운트될 때, 호출하는 메소드는 다음과 같다.

1. constructor

- 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메소드.

2. getDerivedStateFromProps

01) 컴포넌트 라이프사이클(Component Lifecycle) : 마운트

업데이트할때는 4가지 경우이다.

1. props가 변경될 때

2. state가 변경될 때

3. 부모 컴포넌트가 변경될 때

4.. this.forceUpdate로 강제로 렌더링할 때

먼저, 

Splice의 사전적 정의는

(밧줄의 두 끝을 함께 꼬아서) 잇다   2. (필름・테이프 등의 두 끝을) 붙이다

이다.

삭제하는 메소드를 찾았는데 잇다, 붙이다라니? 이것이 과연 배열 요소를 삭제하는 메소드가 맞을까?

맞다!

1. splice를 이용해 삭제하는 방법

var a = [1, 2, 3, 4, 5, 6, 7];

이런 배열이 있다고 가정하다.

삭제하는 방법은 다음과 같다.

a.splice(0, 3);

이 명령어의 의미는 : 0번 배열부터 3개를 제거하라

따라서 a 배열은

[4,5,6,7]이 된다.

2. splice를 이용해 배열을 두개 만드는 방법

만약, var 에 변수에 값을 넣게 되면 어떻게 될까?

var b = a.splice(0, 3);

결과

console.log(a); // 결과 : [4,5,6,7]

console.log(b); // 결과 : [1,2,3]

즉, 떼버린 값을 b에 넣어 배열이 두 개로 쪼개졌다.