간단한 예제를 JS 실행 환경에서 실행하며 프로그램의 기본 작성법을 배웁니다. 문법 이전에 프로그램을 작성하는 방법과 프로그래밍과 관련된 용어, 사고방식을 배웁니다.
1. 실습 준비하기
1. 크롬 웹 브라우저와 Node.js 설치
-
컴퓨터의 OS에 맞게 받아주세요. 라이센스 동의 누르고 설치 진행주시면 됩니다.
-
책에서 Mac은 설치 경로를 선택할 수 없다는데 현재는 됩니다.
-
저는 기본으로 설정했습니다. 교재에서도 그렇습니다.
2. 텍스트 편집기 준비
-
윈도우의 메모장이나 맥의 텍스트편집기 등의 텍스트편집기만 있으면 가능합니다
-
프로그램 작성용 편집기나 통합 개발환경 IDE는 코드에 색을 칠해 문법 강조, 문법 오류 자동 확인, 코드 자동 완성 등이 있어 편리
-
유료 버전 : Sublime Text, 웹 스톰 (윈도, 맥, 리눅스)을 추천
-
무료 버전 : 비주얼 스튜디오 코드(윈도, 맥, 리눅스), 어도비 브래킷 (윈도, 맥)
-
비주얼 스튜디오가 아니고 비주얼 스튜디오 코드입니다.
-
어도비브래킷은 내장된 Node.js로 개발용 웹 서버를 동작시키는 실시간 미리보기가 있어 웹서버에 올리지 않고서도 빠른 결과물 확인이 가능
3. 파일의 확장자 표시 설정 변경
-
기본적으로 파일 확장자 표시 않도록 설정되어 바꿔야 함
-
윈도 7/8 : 시작 > 제어판 > 모양 및 개인 설정 > 폴더 옵션 > 보기 탭 > 고급 설정 > 알려진 파일 형식의 파일 확장명 숨기기 체크 해제
-
윈도 10 : 시작 > 파일 탐색기 > 보기 탭 > 파일 확장명 체크
-
맥 : Finder > 환경 설정 > 고급 탭 > 모든 파일 확장자 보기 체크
2. 간단한 예제
-
js_study라는 실습용 폴더를 만든 뒤 편집기 프로그램을 실행시키고 예제 2-1 코드를 입력
-
파일명은 factorial.js로 저장
예제 2-1 : 팩토리얼
function fact(n) {
if( n<=1 ) return n;
return n*fact(n-1);
}
for(var i=1; i<10; i++) {
console.log(i + "! = " + fact(i));
}
코드 입력 시 주의사항
-
직접 작성해보기
-
공백 문자 잘 체크해서 space로 입력하기
-
들여쓰기는 Tab을 사용
-
문장의 끝에는 세미콜론 잊지말기
저장 시 주의사항
-
파일 이름 끝에 확장자 붙이기. js는 .js, html은 .html
-
파일 문자 인코딩은 UTF-8로 지정해 저장
-
편집기에 따라 저장할 때 코드로 입력하거나 환경설정에 사전 지정할 수 있음
3. 프로그램 실행법
1. 웹 브라우저의 콘솔에서 실행
-
대부분의 웹 브라우저는 개발자 도구를 제공
-
개발자 도구에서 HTML, CSS로 설정한 내용을 확인, 임시 편집 가능
-
자스 코드의 디버깅과 네트워크 통신 내용을 분석할 수 있는 등 다양한 웹개발 도구 내장
-
콘솔은 짧은 프로그램의 실행을 확인할 수 있는 최적의 도구
-
크롬의 개발자 도구는 Chrome DevTools
개발자 도구 켜기
-
웹페이지 위에서 우클릭 > 검사 선택
-
맥 : Command + Option + I
-
윈도 : Ctrl + Shift + I
-
우측 중간의 사용자 정의 버튼을 누르면 개발자 도구를 새 창으로 분리하든지 하단, 좌측, 우측으로 옮길 수 있음
콘솔에서 프로그램 실행
-
개발자 도구에서 Console 탭을 선택
-
프롬프트 (>) 에 자스 코드를 입력하면 실행
-
문자열을 표현할 때 ""나 ''로 문자열을 묶음
-
실행 후 ↑ 나 Ctrl + P를 누르면 과거 입력한 코드를 다시 불러옴
-
프로그램은 Shift + Enter로 여러 줄에 나누어 입력 가능
-
clear() 입력하면 콘솔 청소
-
Enter를 누르면 프로그램 실행
-
여러줄 모드에서는 emacs와 유사한 단축키 사용이 가능
-
Node.js의 대화형 모드(REPL, Read Eval Print Loop)에서도 동일 단축키 사용 가능
여러줄 모드 단축키
-
Ctrl + F : 커서 우측 이동
-
Ctrl + B : 커서 촤즉 이동
-
Ctrl + A : 커서 줄 처음으로
-
Ctrl + F : 커서 줄 끝으로
-
Ctrl + D : 커서 위치 문자 삭제
-
Ctrl + H : 커서 우측 이동커서 왼쪽 문자 삭제
2. HTML문서에 삽입해 웹 브라우저로 실행
-
클라이언트 측 자스는 주로 HTML과 CSS 스타일을 제어해 대화형Interactive 웹 페이지를 만들 때 사용
-
이 때 자스 프로그램은 HTML 문서 안에 삽입해 실행
-
웹 페이지와 상호작용을 하지 않는 순수 자스 프로그램도 같은 방법으로 웹브라우저로 실행 가능
-
html 문서에 script 요소를 자식요소로 배치, 그 안에 자스 프로그램을 작성
-
script 요소는 html 문서의 위치와 개수에 제한은 없으나 위치는 일부 동작에 제한 있을 때도 있음
-
html 요소와 css 스타일 제어가 없는 순수 자스라면 script 요소는 head 요소의 자식 요소로 배치
-
이유 : 자스 프로그램, HTML 문서의 분리를 위하여
예제 2-2 : html을 웹브라우저로 실행 후 콘솔에 실행 결과 확인
// factorial.js
function fact(n) {
if( n<=1 ) return n;
return n*fact(n-1);
}
for(var i=1; i<10; i++) {
console.log(i + "! = " + fact(i));
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>팩토리얼 계산</title>
</head>
<body>
<script src="./factorial.js"></script>
</body>
</html>
// 콘솔 말고 <body> 요소 안에서 출력하기
document.write(i + "!=" + fact(i) + "<br />");
3. Node.js의 대화형 모드 (REPL)로 실행
-
주로 서버 측 자스 실행 환경으로 사용
-
Node.js 위에서 동작하는 서버 애플리케이션을 작성하면 다양한 웹 서버 구축, PC에 설치해 자스 프로그램을 실행
-
자스 실행 엔진으로 구글 크롬이 사용하는 V8이 탑재되 실행속도가 빠름
-
맥 : 터미널에 node를 입력해 실행
-
윈도 : 명령 프롬프트 (윈도 메뉴 우클릭 > 실행 > cmd 입력 후 확인)
-
엔터를 입력해 실행하며 크롬 콘솔과 사용법이 비슷
-
개행 문자를 입력하면 여러줄 모드로 변경되며 emacs와 유사 단축키 사용 가능
-
여러줄 모드는 코드 작성이 끝나거나 Ctrl + C를 눌러 해제 가능
-
편집기 모드 : .editor 입력
-
종료 : .exit (윈도우, 리눅스, 맥), Ctrl + D (리눅스, 맥), Ctrl + C 연속 두 번 (윈도우, 리눅스, 맥)
Node.js로 파일 읽어들여 실행
-
이 방법은 큰 규모 프로그램도 텍스트 편집기로 작성하거나 편집 후 실행시킬 수 있어 편리
-
Node.js의 대화형 모드에서 나온 후 터미널에 cd js_study 입력 (윈도는 cmd)
-
현 디렉터리 표시 : pwd (맥), cd(윈도)
-
디렉터리 안 파일 목록 표시 : ls(맥), dir(윈도)
-
ls *.js는 js 확장자 파일을 보이라는 뜻
-
node 파일 실행 : node 파일명.js + 엔터
4. 프로그램 작성법
1. 문자 코드
-
자스 프로그램은 유니코드 문자로 작성
-
유니코드 : 알파벳, 숫자, 기호, 세계 각국의 문자를 포함한 문자 체계
-
ECMAScript5 사양은 자스 엔진이 유니코드버전 3 이상 지원을 명시
-
ECMAScript6 사양은 자스 엔진이 유니코드버전 5.1.0 이상 지원을 명시
2. 대문자, 소문자
-
자스 프로그램은 알파벳 대소문자를 구별하여 각각 다른 문자열로 처리, 오류가 날 수 있음
3. 토큰과 공백 문자
토큰
-
토큰 (어휘) : 프로그램을 구성하는 최소 단위.
-
사람의 언어에서는 각각의 단어, 마침표 등이 토큰이며 더 나누면 단순나열이며 의미부여가 불가해짐.
-> 의미를 가지는 최소한의 문자 덩어리
-
어휘 분석 : 자바스크립트 인터프리터가 프로그램을 실행하기에 앞서 프로그램을 토큰으로 분해하는 것
-
구문 분석 (파싱) : 어휘 분석 후 토큰을 한줄로 나열하고 자스의 구문 규약에 맞는 올바른 프로그램인지 판정
-
인터프리터에 따라 어휘분석과 구문분석을 같이 실행하기도 함
-
구문 분석 (파싱) 결과 프로그램에 문제가 없으면 프로그램을 실행
공백 문자
-
토큰과 토큰 사이에 공백 문자를 입력해서 구분
-
공백 문자는 여러개 입력되도 하나로 간주
-
프로그래밍 언어별 공백문자 정의의 기준은 다름
-
ECMAScript5에서는 스페이스(\u0020), 탭(\u0009), 수직 탭(\u000B), 폼 피드(\u000C), 줄바꿈 없는 공백(\u00A0), 바이트 순서 표시 제어문자(uFEFF), 기타 유니코드 카테고리 Zs에 포함되는 모든 문자를 공백문자로 정의
-
HTML, CSS에서는 일본어 전각 스페이스를 공백 문자로 취급하지 않음
-
산술 연산자 앞뒤의 공백 문자, 괄호 앞뒤의 공백 문자, 세미콜론, 쉼표, 콜론, 마침표 앞뒤의 공백문자는 생략 가능
-
적정한 공백 문자는 가독성을 높이며 보통 개발 집단의 의견에 따라 개발하게 됨
-
대부분의 IDE에서는 개행문자를 입력하면 자동 들여쓰기 처리도 해줌
4. 문장
-
토큰을 나열해 문장을 만들고 문장을 이용해 컴퓨터에 명령을 내리게 됨
-
자스 문장은 세미콜론으로 끝남
-
복합문(블록문) : 문장 여러개를 중괄호로 감싼 코드로 이 끝에는 세미콜론을 붙이지 않음
-
복합문은 일반적으로 if문이나 while문의 제어구문에 사용
-
빈문장 : 세미콜론으로 작성(;)하며 인터프리터가 아무 작업을 하지 않으나 필요한 상황이 있음
-
세미콜론이 붙어 있지 않은 문장에 개행 문자를 삽입하면 세미콜론이 상황에 따라 자동 추가되거나 안되기에 오류의 원인이 될 수 있음
var x; //변수 선언
message = "sdfsds" + name; // 표현식 대입
counter++; // 변수 값 증가
prompt("take your note"); // 함수 호출
5. 주석
-
소스코드에 삽입하는 설명문으로 나와 다른 사람이 프로그램을 쉽게 이해하는 것을 도움
-
/* 주석 */은 코드의 토큰을 분할하지 않는 임의의 위치에 작성하며 여러줄 가능. 줄 중간에 삽입 가능
-
// 주석 은 각 줄 끝에 작성하며 토큰분리자로 작동.
-
코멘트 아웃 : 주석은 코드 일부를 일시적으로 실행하지 않을 때에도 활용한다 >> 개발하면서 많이 쓸 내용
'Javascript' 카테고리의 다른 글
| 모던 자바스크립트 입문 : 4. 객체와 배열, 함수의 기초 (0) | 2020.04.06 |
|---|---|
| 모던 자바스크립트 입문 : 3. 변수와 값 (0) | 2020.04.04 |
| 모던 자바스크립트 입문 : 1. 자바스크립트 개요 (0) | 2020.04.04 |
| 모던 자바스크립트 입문 : 0. 서론 및 예제 활용 방법 (0) | 2020.04.04 |
| 액티브X 위에 div 를 올리기 위한 시도 - 캡쳐 라이브러리 html2canvas (0) | 2020.04.02 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
