● 이론0_Vscode의 React 단축키 기능
○ 기능1_ 단어의 일부만 입력하면, 나머지 완성 기능 //ToolTip 기능
예 : useState() 입력시, 자동 import문까지 생성
이렇게 입력 도중, "useState" 탭창이 나오고, Enter나 Tab 누를 시,
import문과 함수까지 자동 입력이 된다.
○ 기능2_ 컴포넌트 내에서 함수 작성 후, 태그 내 onClick 속성에 대입 시,
=> 속성의 일부 알파벳만 적어서 완성 시키는 기능
해당의 속성 "onClick"을 선택한 후, Enter를 누르면, onClick 속성이 자동 완성 된다.
=> 위에 선언된, 함수이름도 일부 알파벳만 입력하면, ToolTip이 추천 메소드로 나온다.
해당의 "handleButtonClick"을 선택한 후, Enter를 누르면, handleButtonClick 메소드가 자동 완성 된다.
○ 기능3_ 멀티 커서 기능 //같은 단어만 멀티 커서
예_ "문서 내 handleButtonClick" 내용을 멀티 커서 기능으로 한번에 수정하기
해당 메소드를 딱 한번만 Alt + Shift + 'L' 키를 누르면, 같은 이름의 단어들이 전부 드래그가 된다.
그리고 바꾸고 싶은 내용으로 변경하면, 모두 수정이 된다.
다시 해제하고 싶을 경우 => 'Esc' 누르면 된다.
○ 기능4_ 멀티 커서 기능으로 부분 단어 까지 모두 변경
"Button"이 포함된 모든 단어들의 Button만 부분 수정 하고 싶을 경우 => "Button"을 드래그 후 || 텍스트 두번 클릭
=> Alt + Shift + 'L' 키를 누른 후 수정
○ 기능5_ 외부 js 메소드 작성 후, 호출 시, import 자동완성 하기
예_ [util.js]의 1~n의 난수 반환의 메소드 getRandNum()
그리고, Enter 누른면, 함수와 자동으로 import 문까지 작성된다.
○ 기능6_ export 된 메소드에서 export 파일 js로 이동 후, 함수 메소드명 바꿀 시, 모든 파일의 메소드 명 변경하기
- 해당 메소드 텍스트에 마우스 over을 한 후, ctri을 누르면, 링크가 생기고, 클릭을 하면, => export 작성된 파일로 이동 된다.
- 이동 후, 해당 메소드 이름에 "F2" 를 누른다.
- Enter를 치면, 외부의 모든 getRandNum() 메소드명이 변경된 것을 확인할 수 있다.
● 이론1_Prettier 확장프로그램 적용하기 => 문서 저장 시, 코드 자동 정리 기능
○ Prettier 설치 후, Vscode에 적용하는 방법
▶ 순서1_ Prettier 설치 :
▶ 순서2_ 설정에 들어가 세부 옵션 설정하기 :
▶ 순서3_ Editor 항목의 "Default Formatter" 와 Editor 항목의 "Format On Save" 항목을 아래의 그림과 같이 설정한다.
설정하면, 이제 문서 작성 후, Ctrl + S 눌러 저장 시, 자동으로 코드가 정리가 된다.
