1. VS CODE
다운로드 링크 https://code.visualstudio.com/Download
본인에게 맞는 설정으로 다운로드 이후 설치
2. Live Server
VSCode로 웹개발 할 때 실시간으로 내용을 확인할 수 있는 방법으로
Live Server 라는 확장 프로그램을 설치하여 실시간 서버를 오픈하여 실시간 반영을 할 수 있습니다.
확장팩 에서 Live Server 다운
Live Server 다운로드 후 옆에 톱니바퀴 설정 클릭
기본 null 값 설정에서 크롬으로 변경
크롬으로 변경해주면 이후 코드 저장 후 마우스 우클릭을 통해 Open with Live Server 이용시 크롬으로 바로연결됨! :)
Test Run
vs code 우측 상단을 통해 test1.html 파일 생성 (폴더 생성후 파일 생성해도 됨)
주의사항 영어 사용! 파일경로나 폴더경로에 한글이 섞이면 나중에 오류날 가능성이 있음 :(
<!DOCTYPE html>
<html>
<head>
<title>first front Ex1</title>
<script>
alert('hello javascript!!!');
</script>
</head>
<body>
<!-- 주석문입니다 -->
<h1>hello html && javascript</h1>
<br/>
<h2>h2 tag text</h2>
</body>
</html>
Open with Live Server
실행확인 :)
3. Code Runner
각종 언어를 실행할 수 있게 도와주는 Code Runner 도 확장팩을 이용해 설치
Test Run
test2.js 자바스크립트 테스트용 파일 생성
let intValue = 100;
console.log(intValue);
console.log("first javascript!!!");
Ctrl + Alt + N 이나 , 우클릭 Run Code 를 이용해 실행
출력문 확인! 출력은 되었으나 깨짐 현상 발생 이를 해결하기위해
4. Node js
node js 사이트 접속해서 다운로드 진행
Next 를눌러서 기본값으로 Setup 진행
Finish 를 눌러 완료 후 Vs code 한번 껏다 켜주면 적용 완료 :)
다시 Run code 시 정상적으로 나오면 완료
5. 추가
필수 사항은 아니지만 기본 Vs code 다운로드시 영어로 되어있는것을
확장팩에서 Korean 을 통해 다운로드 받을 수 있음!!
이제 기초 준비완료 :)
