[비트캠프] 21일차(5주차1일) - Javascript(변수, 배열)

 

git 명령어 시험 헷갈리는 것

 

3. Git에서 현재 디렉토리 상의 모든 파일과 변경 사항을 스테이징(staging) 하기 위한 명령어는?
  git add --all
8. 다음 중 git commit 명령에 대해 사용 가능한 옵션들을 확인하기 위한 명령어는?
  git commit --help
9. 다음 중 "new-email"이라는 이름의 새로운 브랜치를 생성하기 위한 명령어는?
  git branch new-email
13. "hello-you" 브랜치를 먼저 생성한 다음 이동하고자 할 때, 빈 칸 (가),(나)에 들어갈 내용으로 옳게 짝지어진 것은?
  git branch -b 브랜치명
15. 다음 중 가장 최근에 커밋한 변경사항을 되돌리기 위한 Git 명령어는?
  git revert

 

 

 

MIME type 작성

script의 type 속성이 "text/javascript"로 설정되어 있지 않으면 웹브라우저는 이 태그의 값을 무시한다.
=> 화면에 출력하지는 않으면서 특정 목적으로 이용할 때 종종 이런 방식을 사용한다.

<script type="text/plain">

 

웹브라우저는 HTML을 로딩한 후 위에서 아래로 태그가 나온 순서대로 실행한다. 실행하다가 script라는 태그를 만나면 "자바스트립트 엔진"을 이용하여 코드를 실행한다. script 태그 실행이 완료되면 계속 이어서 다음 태그를 처리한다.

 

 

 

객체와 함수

 

객체를 바라보는 2가지 관점 : 작업 데이터를 갖고 있는 객체 관점, 기능을 수행하는 도구함 관점

 

1. 작업 데이터 갖고 있는 객체 관점

객체 : 함수가 작업할 때 사용할 기본 데이터

함수 : 작업을 수행 (operator = function = method)

파라미터 : 작업을 제어하는 데이터 (parameter = argument)

 

2. 기능을 수행하는 도구함 관점

window.alert("Hello, world") 에서 window 도구함에서 alert 도구를 꺼내서 Hello, world를 수행한다.

window : 도구함

alert : 도구

Hello, world : 기능 수행에 필요한 데이터

 

 

console 창 모두 실행된 후 <h1> 실행된다.

// exam03-1.html
<script>
  console.log("33333");
  window.alert("잠깐!");
</script>
<h1>자바스크립트 코드 실행 순서</h1>
<script>
  console.log("44444");
  window.alert("잠깐!");
</script>

 

 

실행 순서

태그 읽기 전에 실행한 script는 null로 나온다.

// exam03-2.html
<script>
  console.log("h1 태그 읽기 전")
  console.log(document.getElementById("t1"))
</script>
<h1 id="t1">자바스크립트 코드 실행 순서</h1>
<script>
  console.log("h1 태그 읽은 후")
  console.log(document.getElementById("t1"))
</script>

 

 

 

인터프리트 방식과 컴파일 방식

 

인터프리트

소스를 한 줄씩 인터프리터가 번역해서 실행한다.

명령문이 잘못 작성됐다 하더라도 실행하기 전까지는 알 수 없다.

script 태그에서 오류 발생하면 태그 실행을 멈추고 다음 태그로 간다.

script 류의 단점 : 소스 코드에 오류가 있다하더라도 실행하기 전까지는 모른다!

 

컴파일러

소스의 전체 코드를 컴파일러가 컴파일하면 문법 오류가 없는 상태로 기계어로 만든다.

명령문이 잘못 됐으면 컴파일 과정에서 모두 걸러진다.

 

 

Express를 설치하려면 Node.js가 설치되어 있어야 한다.

npm install express

이후에는 npm install만 해도 node_modules 폴더가 생성된다.

라이브러리는 공유하지 않고 정보만 공유한다.

 

 

 

ex05_1.html 설명 그림

 

script 태그를 body 맨 하단에 두라!

자바스크립트(JavaScript)는 위에서 아래로 순서대로 실행하기 때문에 다음 script 태그는 body 태그를 실행하기 전에 먼저 실행한다. 따라서 다음 script 태그를 실행하는데 시간이 오래 걸릴수록 body의 내용 출력도 지연된다. 그래서 body 전에 script를 실행할 때는 가능한 시간이 적게 걸리는 작업을 수행하라!

예전에는 script 태그를 head 태그 안에 두었다. 그 시절에는 실행할 자바스크립트 코드의 양이 많지 않았기 때문에 HTML 본문을 출력하기 전에 자바스크립트를 두어도 괜찮았다. 그러나 최근에는 사용자의 다양한 행위와 동적인 화면을 지원하기 위해 자바스크립트 코드의 양이 굉장히 많아 졌다. 그래서 head 태그에 있는 자바스크립트를 실행하는 동안 body 태그의 내용은 화면에 출력할 수 없기 때문에 화면 출력이 느려지게 되었다. 이런 이유로 사용자가 지루해 하지 않도록 하기 위해 일단 화면의 일부를 출력한 후 자바스크립트를 실행하도록 script 태그를 body의 맨 끝에 두는 게 요즘 경향이다.

 

 

Arrow function

 

app.get('/hello', (req, res) => {
  res.send('Hello!')
});

// arrow function은 다음 두 단계를 하나로 동작시킨다.

app.get('/hello', handleHello);

var handleHello = function(req, res) {
  res.send('Hello!')
}

 

 

 

Promise

 

promise를 그림으로 나타내면 다음과 같다.

작업을 순차적으로 실행하지 않고 병행으로 실행하기 위해 promise를 사용하고 이를 Asynchronous(비동기)라 한다.

 

app.get('/hello', async (req, res) => {  // async : 이 함수 안에 비동기 작업을 수행하는 코드가 있다 선언

  await new Promise((resolve, reject) => {
    setTimeout(function () {
      console.log("5초 지났다!");
      // resolve();  // 생략시 작업 성공여부를 알리지 않으므로 무한히 기다린다.
    }, 5000);
  });

  console.log("Hello!");
  res.send('Hello!')
});

가운데 코드는 아래와 같이 바꾼다.

  await new Promise((resolve, reject) => {
    setTimeout(resolve, 5000);
  });

reject는 안써도 되며 parameter 1개면 괄호 없애고 코드 1줄로 쓸거면 중괄호 없앤다.

await new Promise(resolve => setTimeout(resolve, 5000));

 

 

 

script에 선언된 변수나 함수는 그 다음 script에서 사용할 수 있다.

// exam06.html
  var v1 = "Hello"; // 이 변수는 window 객체에 등록된다.
  function f1(str) {console.log(str);} // 이 함수는 window 객체에 등록된다.

 

 

 

변수

 

typeof 값 

값의 타입을 알아내는 연산자

console.log(typeof '문자열');
console.log(typeof 100);

//object 타입 - null도 object 타입임을 기억하라! undefined와 다르다!
console.log(typeof null); // 객체가 없음을 의미하는 상수 값

//number 타입
console.log(typeof NaN); // 숫자가 아님을 의미하는 상수 값(Not a Number의 약자)
console.log(typeof Infinity); // 양의 무한대를 의미하는 상수 값
console.log(typeof -Infinity); // 음의 무한대를 표현할 때는 앞에 -를 붙인다.

 

 

변수

자바스크립트의 변수를 선언할 때는 타입을 지정하지 않는다.
변수에 값을 넣는 순간 타입이 결정된다.

자바스크립트는 변수를 선언하지 않고 바로 사용할 수 있다.

 

자바스크립트의 변수는 "동적 타입 바인딩(dynamic type binding)"이다.
그에 반해 자바는 한 번 변수의 타입이 지정되면 다른 타입을 바뀔 수 없기 때문에 "정적 타입 바인딩(static type binding)"이라 부른다.

 

변수 사용 우선순위 : const → let → var

 

 

변수 - strict 모드 사용

그러나 유지보수를 쉽게 하기 위해서는 가능한 변수를 사용하기 전에 선언한 후에 쓰는 게 좋다.
변수를 선언하지 않고 사용할 때 오류를 띄우게 하려면 strict 모드를 사용하라고 자바스크립트 엔진에 알려줘야 한다.
어떻게? 다음 문자열을 단순히 선언하라!

"use strict";

 

strict 모드는 그 모드가 선언된 script 태그에 한정한다.

첫 번째 문장으로 와야 한다. 물론 주석은 문장으로 간주하지 않는다.

 

 

변수 - 여러 개의 변수 선언

자바스크립트는 변수를 선언하지 않고 바로 사용할 수 있다.

var v4 = "홍길동", 
    v5 = "임꺽정", 
    v6 = "유관순";

 

 

변수 - hoisting

script 태그를 실행할 때 변수나 함수가 선언된 위치에 상관없이 선언 문을 먼저 실행한다.
그래서 변수 선언이나 함수 선언을 끌어 올린다는 의미로 "hoisting"이라는 표현을 쓴다.

// 변수 선언을 하기 전에 그 변수를 사용하는 코드를 먼저 둘 수 있다.
v2 = "임꺽정";
console.log(v2);
var v2; // 변수 선언은 항상 script 태그를 실행할 때 제일 먼저 실행된다.

hoisting은 현재 태그에 선언된 변수나 함수에 대해서만 수행한다.

 

var는 hoisting 되지만 let은 되지 않는다.

console.log(v3);  // undefined
var v3 = "유관순"; // 변수 선언만 먼저 실행되는 것이지, 값을 할당하는 코드는 원래의 순서대로 실행된다.
console.log(v3);

 

 

변수 - window 객체와 변수 선언

window 객체?
=> 자바스크립트 언어의 내장(built-in) 객체는 아니다.
=> 웹브라우저에서 자바스크립트를 실행할 때 제공되는 객체이다.
=> 자바스크립트에 선언되는 모든 글로벌 변수와 글로벌 함수는 이 객체에 자동으로 소속된다. 

 

함수 바깥에 선언되는 모든 변수는 window 객체에 소속된다.
보통 "글로벌 변수(global variables)"라고 한다.

 

 

변수 - 자바스크립트 변수에 접근하는 다양한 방법

객체에 저장된 값을 꺼낼 때는 다음의 문법을 사용할 수 있다.
=> 객체.변수명
=> 객체["변수명"]
=> 객체['변수명']

var v1;

v1 = "홍길동";
console.log(v1);
console.log(window.v1);
console.log(window["v1"]);
console.log(window['v1']);

 

대괄호를 사용하면 공백이나 특수문자를 포함하는 변수를 만들 수 있다.

// window.오호라 ^^ = 100; // <--- 문법오류! 변수명 중간에 공백이 들어갈 수 없다. 특수 문자 불가!
window["오호라 ^^"] = 100;

 

 

변수 - 자바스크립트 변수와 자바의 Map 프로퍼티

결국 내부적으로 변수를 다룰 때는 자바의 맵 객체의 프로퍼티 방식으로 다룬다.

window.v1 = 100; // java => map.put("v1", 100);

 

같은 이름의 변수를 중복 선언하더라도 오류가 아니다.
왜? 어차피 객체에 맵 방식으로 값을 저장하기 때문에 같은 이름을 가진 변수를 또 선언하더라도 기존의 변수 값을 덮어 쓸 뿐이다. 

var v1 = "우헤헤"; // java => map.put("v1", "우헤헤");
console.log(v1);

var v1 = 100; // 기존 변수의 값을 바꾼다. 문법 오류가 아니다.
console.log(v1);

 

 

변수 - var 변수와 블럭

var 변수는 2가지 종류 밖에 없다.

① global 변수

    window 객체에 소속됨

② 함수 변수

    함수를 실행하는 동안 생성되고 호출이 끝나면 삭제됨

var v1 = "홍길동";

{
    // 자바스크립트는 일반 블록에 선언된 var 변수도 글로벌 변수로 간주한다. 
    var v1 = "임꺽정"; // 이전에 선언된 v1 변수를 덮어 쓴다.
    var v2 = 100; // 자바스크립트는 일반 블록을 무시한다. 따라서 v2는 글로벌 변수이다.
}

 

 

변수 - let 변수와 블록

let 변수는 블록 영역에 종속된다.

let v1 = "홍길동"; // 로컬 변수
let v2 = 100; // 로컬 변수

{
    // 자바스크립트에서 let 변수는 블록 변수로 간주한다.
    let v1 = "임꺽정"; // 로컬 변수
    let v3 = true; // 로컬 변수
    var v4 = 3.14; // 글로벌 변수  ==> window.v4

    console.log(v1); // 임꺽정
    console.log(v2); // 100 => 현재 블록에서 못찾으면 바깥 블록에서 찾는다.
    console.log(v3); // true
    console.log(v4); // 3.14
}

console.log(v1); // 홍길동
console.log(v2); // 100
//console.log(v3); // let 변수는 그 변수를 선언한 블록에서 나가면 제거된다.
console.log(v4);
console.log("------------------");

// let 변수는 로컬 변수이기 때문에 window에 소속되지 않는다.
console.log(window.v1); // undefined
console.log(window.v2); // undefined
console.log(window.v4); // 3.14

 

 

변수 - const 변수와 블록

상수 변수는 선언할 때 값을 할당해야 한다.
상수 변수는 값을 변경할 수 없다.

const v1 = "hello";  // 변수 선언과 동시에 초기화 하는 것을 initializer라고 한다.

 

 

배열

new Array();

① new : 빈 객체 생성

② Array() : 배열 관리에 필요한 변수, 함수 추가

var arr = new Array(); // 빈 객체 생성
//=> Object()로 기본 변수와 함수를 준비 => Array()를 실행하여 배열에 필요한 변수나 함수를 추가

arr.push("홍길동");  // 배열에 값 추가하기
console.log(arr.length);  // 배열 크기 반환
console.log(arr[0]);  // 0번째 객체 반환

중간에 인덱스를 건너 뛰고 값을 넣을 수 있다.

 

 

인덱스 0과 메모리 주소

 

메모리 시작 주소를 가지고 배열의 항목을 가리키기 때문에 인덱스는 0부터 시작한다.

 

 

변수 - 배열을 만드는 단축 문법

다른 타입의 값을 섞어 넣을 수 있다.

var arr = ["aaa", "bbb", true, 100, new Object(), function() {}];

 

 

 

---

 

조언

 

*버그 내는 것에 대해 화내지 말고 담담히 받아들여라. 그게 우리 일이다.

*기술을 완벽히 이해하고 사용하려 하지 말라. 학습을 빨리 하는 능력이 더 중요하다.

 

 

---

 

과제

 

tictactoe 게임 구현 설명

 

발표 시간: 5분
발표 내용:
- 게임 구현 내용 발표 및 질문, 답변

제출:
- 발표 PPT 파일