코드펜으로 연습하다가 클론코딩에 앞서 실제 프레임워크를 사용해보려 한다
어제만든 팝업 기능을 다시한번 연습하며 vscode에 익숙해지도록 하자
위 사진은 최종적으로 코드펜과 유사하게 커스텀한 vscode이다
- 폴더와 파일을 생성하고 삭제하는 곳
- 생성된 파일에 코드를 입력하는 곳
- 코드 작성시 실시간으로 보여주는 곳 (Extension을 설치해야한다)
- js의 결과값이나 터미널을 사용하는 곳
1. 단축키 커스텀
파일과 폴더 생성 단축키를 지정하고 싶어 조사해본 결과
거의 대부분의 블로그가 'Open keyboard Shortcuts (JSON)'을 사용해서 코드를 추가하고 바꾼다고 되어있을 것이다
chat GPT 마저도...
아무리 해당 json을 만져봐도 읽기모드라 편집도 안되고 어찌어지하여 읽기모드 해제 후 편집을 했더니 오류가 넘처나고...
vscode를 삭제하고 재설치를 반복하던 중 순간 그냥 단축키 설정에서 찾아볼까? 라는 전환이 결국 해결을 해줬다
vscode 단축키 설정 :
command+ k + s
자 이제 내가 바꾸고 싶은 단축키를 설정해보자
자주쓰는 단축키 - 코드 작성시
- 코드 복사 : Option + shift + 방향키
- 코드 이동 : Option + 방향키
- 주석처리 : Command + /
- 같은 코드, 같은 단어, 반복되는 코드 한번에 선택 : 해당 코드 드래그 후 Command + D
→ 한번씩 누르면 순서대로 이동
→ 꾹 누르고 있으면 전체 선택
- 이전의 커서 위치로 이동하기 : command + u
자주 사용할 단축키 - vscode 사용 시
여기서 나에게 맞는 단축키 설정을 몇 개 진행했다
- 커맨드 팔렛 : command + shift + p
- 파일저장, 파일 불러오기, 환경설정 등 vscode의 기본 명령을 마우스없이 사용 가능하다
quick open : command + p
해당하는 파일을 빠르게 네비게이션하고 불러올 때 마우스없이 사용 가능side bar 열고 닫기 : command+b
새 파일 : command + n
새 폴더생성 : commad + shift + n
새로운 vscode 창 : option + n
파일 창 이동 : command + alt + 방향키
터미널 보기 : command + shift + u
2. Extension
우선 기본적으로 필요한 기능을 설치하자
- 전체 코드 줄바꿈 맞춰주기
- 에러난 문법에 대한 방법 제시
- 실시간 라이브로 변경되는 view
- vscode 한글화
- 완성시 웹 브라우저로 바로열기
- 코드 범위 가독성 높이기
- prettier
코드 서식을 자동으로 정리해주는 도구
설정방법 : default값을 prettier로 줘야한다
- eslint
코드의 오류를 잡아주고 대안을 제시해주는 도구
사용법 : 오류난 빨간 밑줄에 커서를 올리면 된다
- Live Preview
코드입력시 실시간으로 변화되는 모습을 보여주는 도구
- 이전에는 'Live server'라는 익스텐션을 설치해서 확장프로그램으로 사용 가능했지만 지금은 단독으로도 사용 가능하다
최상단 이미지의 4번 참고
- korean Language pack
vscode를 한글버전으로 만들어주는 도구
- 굳이 설치해도되진 않지만 편의상 원한다면 추천
- 솔직히 왠만한 블로그 글들의 설명이 영어버전이여서 나는 다시 삭제할 예정이다
5. open in th browser
코드 완성 후 브라우저를 열어서 확인하고 싶을때 사용하는 도구
html에서 오른쪽 마우스 > open in default browser 클릭
6. rainbow braket와 rainbow indent
1. rainbow braket : 코드 안에 있는 (),{} 색을 통일 시켜준다
- rainbow indent : 코드의 범위를 보여준다. 부모자식관계나 함수의 범위을 파악하기 편하다
4. html, css, js 연동하는 법
코드펜에서는 상관없었던 부분인데 vscode에 익숙해지기 위해 팝업을 다시 작업하던 도중 실행이 되는지 확인해보려는데 아무것도 안뜨는 것이다?!
팝업 다시 연습하기도 꽤 걸리는데 이게 무슨 일인가...
각 파일들이 한 폴더에 모여있다고 자동으로 서로 연동되는것이 아니라... 파일 내에 코드로 연결고리를 만들어 주어야 서로 상호작용한다
1. html에 css연결해주기
! + tab을 하면 html의 기본 구성요소가 출력되는데 여기서 header영역에 아래의 코드를 입력해주자
<link rel="stylesheet" href="popup.css">
rel은href의 속성을 표현한다
다양한 속성중 필요한 속성은 찾아서 적용하자href에 내가 작성한 css파일명을 적어주면된다
2. html에 js 연결하기
script 태그에 src로 불러오면 된다
<script src="popup.js"></script>
js의 파일명을 입력해주면된다
여기서 중요한건 위 코드를 html의
body태그에 넣어주도록하자
-
조사하던 중 알아낸 꿀팁인데 우리가 사이트를 들어갈때 로딩중인 상태에서도 화면에 먼저 기본적인 틀이 나온걸 본적이 있을것이다
-
만약
<script>태그를<head>태그 안에 위치시키면, 브라우저는 html 문서의 파싱을 멈추고 javaScript 파일을 다운로드하고 실행한다 -
하지만
<body>에 넣으면 html 문서가 먼저 완료된 후, javaScript 파일을 다운로드하고 실행하기 때문에 페이지 로딩 속도가 빨라지는 효과를 보일 수 있다
4. jqery 연동하기
코드펜에서는 html에 src만 주면 자동으로 js에 연동이 되었는데 여기 또한 연동을 해주어야한다
- html에 jqery 연동 :
<script src="jqery Url"></script>
- js에 jqery 연동 :
$(document).ready(function () { js 코드들 입력});
코드들은 다 맞는데 jqery가 작동하지 않는다...
html의 jqery 삽입코드와 js 파일 불러오는 순서가 바뀌었다
js에서 jqery라이브러리를 사용하기때문에 html에서 jqery 삽입코드를 js 상대경로 위에 올려주어야한다! 주의하자
html > body 최상단부분 :
<script src="jqery Url"></script>
<script src="popup.js"></script>
Today Comment :
너무 코드펜에 익숙해져있어서 그런지 모든게 생소했고 접근하기 어려웠지만 지금이라도 접근해서 다행이다
코드펜은 너무 편했다...너무 많은걸 알아서 해줬다
그래도 만나서 반가웠고 다시는 만나지말자
