자바스크립트와 비주얼 스튜디오 코드 설정

비주얼 스튜디오 코드 와 자바스트립트

자바스크립트 기본 환경과 자바스크립트 코드 작성을 위한 비주얼 스튜디오 코드에 대해 메모해 봅니다.

 

비주얼 스튜디오 코드

 

자바스크립트 소스 코드 편집을 위해 비주얼 스튜디오 코드를 설치합니다.

비주얼 스튜디오 다운로드 : https://code.visualstudio.com/download 

Download Visual Studio Code - Mac, Linux, Windows

 

비주얼 스튜디오 코드 설치 후 설정

설정 화면 : 관리 -> 설정, 단축키 (윈도우) Ctrl+',' (맥) Command + ','

 

# 한글 코딩 글꼴 설치

한글환경에 맞는 코딩글꼴인 D2Coding 글꼴을 깃허브에서 다운로드한 후 설치 합니다.

D2Coding 다운로드: https://github.com/naver/d2codingfont 

GitHub - naver/d2codingfont: D2 Coding 글꼴

 

# D2Coding 글꼴 설치 후 환경 지정

비주얼 코드 설정 화면에서 "Editor: Font Family'  부분에 "D2Coding" 이라고 지정하면 앞으로 D2Coding 글꼴을 사용해서 소스를 표시하게됩니다.

 

# 탭 들여쓰기

탭 들여쓰기는 본인 또는 개발환경에 따라 선택 입니다.
소스 코드를 작성할때 자동으로 4칸씩 들여쓰기가 됩니다. 이런 경우 소스코드가 길어지면 보기가 어려울 수 있으므로 탭 들여쓰기를 2칸으로 수정합니다.

비주얼 코드 설정 화면에서 "Editor: Tab Size" 에서 기본값을 '2'로 변경

 

비주얼 스튜디오 코드 확장기능

 

# 라이브 서버

라이브 서버(Live Server)는 웹 개발시, 비주얼 스튜디오 코드에서 웹 문서를 수정하면  웹 브라우저에 즉시 결과를 볼수 있도록 개발서버 역할을 합니다.

# 프리티어

프리티어(Prettier)는, 코드 포매터(code formatter)라고 하는 확장기능입니다. 
비주얼 스큐디오 코드에서 코드 작성시 소스코드를 보기 좋게 정리할 수 있습니다.

단축키: Ctrl + Shift + P

# 머티리얼 테마

비주얼 스튜디오 코드에서 기본적으로 제공하는 색 테마에 머티리얼 테마를 확장 합니다.

# 머티리얼 아이콘 테마

머티리얼 아이콘 테마는 비주얼 스튜디오 코드 파일 목록에 파일의 종류에 따라 아이콘을 달리 보여주는 확장기능 입니다.

 

자바스크립트 

 

자바스크립트 관련 기본 문법 기술 합니다.
* 다음 내용은 학생 스터디 자료를 위해 특정 교제를 바탕으로 타이핑 하였습니다.

 

자바스크립트 코드 삽입

소스코드에 자바스크립트 삽입하기

# 인라인 스크립트

HTML 태그 안에 직접 자바스크립트 코드 작성

<a href="javascript:alert('알림')">클릭</a>
<button onclick="alert('알림')">클릭</button>

# 내부 스크립트

웹 문서안에 <script></script> 태그 사이에 자바스크립트 코드 작성

<script>
  alert('알림');
</script>

# 외부 스크립트

자바스크립트 소스코드를 따로 파일에 작성한 후 링크로 연결

<script defer src="javascriptfile.js"></script>

* defer 속성은 외부 스크립트 파일 링크시 HTML 문서를 다 읽어온 후 스크립트 소스를 실행 하라는 속성 입니다.

# use strict

엄격 모드/스트릭트 모드(strict mode)

일반 적인 자바스크립트는 느슨한 모드(sloppy mode)로 동작합니다. use strict 를 사용하면 자바스크립트 엔진이 소스 코드를 깐깐하게 오류 점검을 진행 합니다

 

입 출력

 

웹 브라우저에 알림 팝업 도출
alert()
confirm()
prompt()

 

웹 브라우저 콘솔 창에 내용 표시
console.log()

console.log("웹 브라우저 콘솔 창에 메시지가 표시 됩니다.");

 

웹 브라우저 창 본문에 내용 표시
document.write()

document.write("웹 브라우저 창 본문에 내용이 표시 됩니다.");

 

자료형

 

var 변수명 - 사용을 지양 합니다.
let 변수명
const 상수명

 

# typeof(값 또는 변수)

typeof 괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려줍니다.

# 템플릿 리터럴

문자열과 변수, 식을 섞어서 하나의 문자열로 전환하는 표현식

console.log('${name}님, 나이는 ${age} 입니다.');
-> 홍길동님, 나이는 19 입니다.

# 논리형

불리언 Boolean 유형 : 참 true, 거짓 false

그리고

falsy : 숫자 0, 빈 문자열 ""

숫자가 아님 NaN

값이 할당되지 않음 undefined, null

# 객체 

객체는 하나의 변수에 다양한 정보가 포함되어 있는 자료형태

객체명 = { key : value, key : value }

객체에서 값 가져오기

객체명. 키 이름
객체명["키 이름"]

# 배열

배열도 객체와 같이 하나의 변수에 여러 개의 값ㅇ르 저장할 수 있는 타입입니다.

배열명 = [값, 값, ... ]

배열에 값 선언

arrEmpty = [ ] // 빈 배열
arrColor = ["red', "blue", "green"] // 문자여 ㄹ배열
arrVal = [29, "apple", true] // 여러 자료형 배열

배열에서 값 가져오기

배열명.length // 배열 변수에 몇 개의 값이 있는지 확인 프로퍼티
배열명[2] // 0부터 시작해서 3번째 값을 가져온다

# 심벌

심벌(symbol)의 특징은 유일성을 보장, 주로 객체 프로퍼티의 키로 사용할 수 있다
Symbol() 할수를 사용하여 심벌을 만들면 변경할 수 없고,  동일한 값을 가진 심벌을 만들 수 없다.

let userId = Symbol();
const member = {
  name : "lee",
  [userId] : 2023
}
member 또는 member[userId] 

# 자동 자료형 변환 주의

자바스크립트는 타 프로그래밍 언어와 다르게 자료형이 변환됨으로 자동 형 변환에 조심해야 합니다.
된다고 임의로 구현하는 것은 나쁜 습관이...

# Number(값) 함수

지정된 값을 숫자로 변환

Number(true) //1
Number("20") // 20
Number("hi") // NaN

# parseInt(값) 함수

지정된 값을 정수로 변환

# parseFloat(값) 함수

지정된 값을 실수값으로 변환

# toString() 함수

null 과 undefined 자료형을 제외한 나머지 자료형을 문자열 데이터로 변환

값.toString()
값.toString(기본값)

# String() 함수

null 과 undefined 자료형까지 모두 문자열로 변환

String(값)

# Boolean(값)

값을 논리형으로 변환

Boolean("test") // true
Boolean(undefined) // false

 

연산자와 제어문

 

+, -, *, / 
% : c = a % b //첫 번째 피연산자값을 두 번째 피연산자값으로 나눈 나머지를 구합니다.
++ : 피연산자값을 1 증가
--  : 피연산자값을 1 감소

# 할당 연산자

= , += , -= , *= , /= , %=

# 비교 연산자

== , === , != , !== , < , <= , > , >=

=== 와 !== 의경우 데이터의 유형까지 비교 합니다.

# 논리 연산자

! , && , ||

 

조건문

 

# if 문

if (조건) { 조건이 true일 때 실행 }
if (조건) { 조건이 true일 때 실행 } else {조건이맞지 않을 때 실행}
if (조건1) { 조건1이 true일 때 실행 } else if (조건2) {조건2가 true일 때 실행} else {어떤 조건도 맞지 않을 때 실행}

 

# switch 문

체크해야 할 조건값이 많을 경우 유용

switch (조건)
{
  case 값: 문장
    break;
  case 값: 문장
    break;
  default: 문장
}

 

반복문

 

# for 문

for (초기값; 조건; 증가식) { ... }

for (let i = 0; i < 5 ; i++) {
  document.write(i);
}

# forEach 문

배열명.forEach(콜백 함수) {...}

const students = ["Park", "Kim", "Lee"];
students.forEach(function(student){
  document.write('${student}. ')
}

# for - in 문

배열을 포함해서 반복해서 객체의 값ㅇ르 가져와서 처리할 경우

for (변수 in 객체) { ... }

const gitBook = {
  title : "깃",
  pubDate : "2023",
  page : 12
}
for(key in gitBook) {
  document.write('${key} : ${gitBook[key]} <br>');
}

# for ... of 문

for...of 문은 문자열이나 배열과 같은 반복 가능 자료에 사용하는 반복문

const students = ["Park", "Kim", "Lee"];
for (student of students) {
  document.write('${student}. ');
}

# while 문과 do...while 문

while (조건) {
  실행할 명령
}

do {
  실행할 명령
} while (조건)

# break 문

반복문을 중간 종료 시킨다

# continue 문

조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 한 차례 건너뛰게 합니다.

 

# 함수 (function)

용도별로 여러 개의 명령을 묶어 놓은 것을 함수라고 합니다.

function 함수명() {
  명령들
}

# 스코프(scope)

스코프란, 선언한 변수의 적용 범위를 가리킵니다.

전역스코프 : 프로그램의 시작 부분에서 프로그램 전체에 사용할 수 있습니다.

지역스코프 : 변수를 특정 영역에서만 사용할 수 있습니다.

블록 스코프 : 자바스크립트에서 블록은 중괄호 {} 로 둘러싸인 영역을 가리키는데, 블록별로 변수의 유효 범위가 결정되는것을 블록 스코프라고 합니다.

 

* 시작부터 구글링에 의존하는 모습에 기초학습을 진행해 보았습니다...책 한권이라도 정독해 보시기를 추천 드립니다.
* 참고서적 : 모던자바스크립트 프로그래밍의 정석