JavaScript, VSCODE 관련 사용법

codeing999·2022년 7월 17일
0
post-thumbnail

JavaScript의 문법 외적인 사용법들은 여기다 적겠다.

언어

얘는 써보니까 main함수란게 따로 없다. 그냥 빈 .js파일 에다가 쓰는 게 메인이라 보면 되는 듯.
만들어 놓은 함수를 어떻게 실행해봐야할지 몰라서 당황했었다.
그냥 함수 만들어놓고 바깥에서 호출해보면 됐었다.

VSCODE

프로젝트 처음 만들고 할 일

.gitignore 파일을 프로젝트 가장 상단에 만들고
node_modules/
.env
를 추가하고 저장.
.env 관련 자세한건 따로 글 쓸꺼.

js파일 실행하는 방법


얘는 밑에 터미널이란게 있어서 여기서 cd를 통해 js파일이 있는 경로로 이동해준 다음에
node test.js 와 같이 써주면 해당 js파일을 실행해볼 수 있다.
서버에서 실행해주는거?라고 팀원이 설명해줬다.

단축키

Ctrl + K + F : 전체 선택 후에 이거 하면 자동정렬해줌. K누른 다음 연달아서 바로 F.
Alt + ↑↓ : 현재 줄 코드를 위나 아래와 바꾼다.
Ctrl + Enter : 현재 커서 아랫줄에 빈 행 삽입.
Ctrl + ? : 현재 블럭처리한 부분을 주석 처리한다.
Ctrl + D : 단어선택. 누를 때마다 같은 단어가 더 추가되고. 멀티커서 상태가 됨.
Ctrl + Alt + ↑↓ : 위나 아래로 멀티커서 넓히기.
함수 바로 윗줄에서 /** 치고 Enter : 함수에 대한 설명을 작성할 수 있다. 설명 뿐만 아니라 인자값과 리턴값의 이름과 타입까지 쓸 수 있다. 이러게 작성해두면 이 함수 이름에 마우스커서를 가져다대면 이 설명들이 나온다.

터미널 명령어

node app.js //실행
npx nodemon app.js //수정하고 저장하면 알아서 다시 실행.

@ 명령어 칠 때 주의할 게 지금 내 터미널 경로가 루트인지 src나 어디 들어간 건지 확인하기. 이걸로 에러가 뜰 때도 있다.

git이나 협업 관련

@ .git 파일은 프로젝트 안에서는 안보이고 실제 폴더 가야 보인다. 뭐 해결 안나서 지워야할 땐 찾아가서 지워야 함.
@ .gitignore 에 적어놓은 경로나 파일은 push해도 반영 안되고 무시된다. node_modules/는 실제 설치된 모듈 파일들인데 다른 사람한텐 어차피 그 환경에 맞는 다른 버전이나 파일들이 설치되어야 하기 때문에 이거는 무시하는 것.
어떤 환경변수에 비밀스런 값 적어놓은 경우이거나 할 때 여기에 적어 놓음.
예)
node_modules/
.env
.env
.env.
!src/models/env/
.env.js
@ 왼쪽 아래에 현재 내 브랜치가 무엇인지 표시되어 있다. 굳이 git branch로 확인 안해도 되서 편함. 그리고 누르면 다른 브랜치로 switch도 편하게 됨.

에러 찾기 팁

@ user 라는 객체가 있고 그 안에 다른 객체나 함수가 있다치면.
user뒤에 바로 .을 치면 걔가 갖고있는 것들이 뜰 때가 있다.
그런게 뜨면 이 객체를 제대로 변수명 지정한거고 안뜨면 임포트를 잘못해온거라고 의심해볼 수 있다. 안뜬다고 다 잘못가져온건아니고 잘가져와도 안뜰 때도 있긴하지만 이거로 어느정도 의심을 더 해볼 수 있다.
근데 이 때 뜨는 것도 그냥 내가 평소 자주 쓰던 문자열이면 띄우는 걸 수도 있어서 아이콘 모양을 잘봐야한다. abc모양으로 뜨는 것들은 가지고 있어서 뜨는게 아니고 그냥 뜨는거고.
상자모양이나 f(x)로 뜨는 게 진짜 갖고있어서 뜨는 거다.

@ 또, 어떤 객체 위에 마우스를 가져다 대면 정확한 타입이 뜨지 않고 any라고 뜨는 경우가 있는데 이럴 때 잘못가져왔다고 더 의심해볼 수 있다.

@ 에러가 어디서 났나 모를 때는 console.log를 계속 안에서부터 최소 한줄한줄 올려가면서 어디까지 실행된건지 찾으면 된다.

기타

@ material icon them 이랑 material product icon 설치하면 아이콘같은거 더 눈에 띄고 구분하기 쉬워짐.

profile
코딩 공부 ing..

0개의 댓글