2021-12-15 수업내용

범고래·2021년 12월 15일

비트캠프 수업내용

목록 보기

13/20

(1) SpringBoot와 기본 패키지

@ComponentScan() 에너테이션을 이용하여 패키지를 설정할 경우
ComponentScan(basePackages={"com.eomcs.study2","com.eomcs.study"}) 등으로 하여 해당 패키지들을 인식하게 한다.
아니면 App.java를 최상위 폴더에 두어 이를 해결한다.

(2) script 태그에 선언된 자바스크립트의 사용 범위

<html>
<head>
<meta charset="UTF-8">
<title>ex01</title>
<script>
  // script에 선언된 변수나 함수는 그 다음 script에서 사용할 수 있다.
  var v1 = "Hello"; // 이 변수는 윈도우 객체에 등록됨.
  
    f1("테스트1") // 테스트1 정상출력
  
  function f1(str) {console.log(str);} // 이 함수는 윈도우 객체에 등록됨

  // 그러나 아래 태그를 실행하기 전에는 아래 태그에서 선언한 변수나 함수를 사용할 수 없다.
  // console.log(v2); // 실행 오류!

  // 만약 아래의 script 태그를 실행한 후라면 그 태그에서 선언한 변수나 함수를 사용할 수 있다.
  function f2() {console.log(v2);} // 이 함수는 윈도우 객체에 등록됨

f1("테스트1")

  // 아직 v2라는 변수는 존재하지 않기 때문에 f2()를 실행하면 오류 발생!
  // f2();
</script>
</head>
<body>
<h1>script 태그에 선언된 자바스크립트의 사용 범위</h1>

<script>
  // 이전 script 태그에서 정의한 모든 변수와 함수를 그대로 사용할 수 있다.
  console.log(v1); // 변수 앞에 객체 지정 안하면 윈도우 객체에서 찾음
  console.log(window.v1); // 이렇게 윈도우 객체를 명시할 수도 있음
  f1("안녕하세요!");// 함수 앞에 객체 지정 안하면 윈도우 객체에서 찾음
    window.f1("안녕하세요!"); // 이렇게 윈도우 객체를 명시할 수도 있음

  var v2 = "반가워요!";
  f2(); // 위에서 v2 변수를 만들었기 때문에 f2()를 호출하더라도 오류가 발생하지 않는다.

</script>
</body>
</html>

변수가 먼저 선언되지 않으면 호출 시 오류가 발생하지만, 함수 선언보다 호출을 먼저 할 경우엔 오류가 발생하지 않는다.

(3) 값의 타입 - typeof 연산자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex02</title>
</head>
<body>
<h1>값의 타입 - typeof 연산자</h1>
<script>
// typeof 값 
// => 값의 타입을 알아내는 연산자

//string 타입
console.log(typeof "문자열");
console.log(typeof '문자열');

//number 타입
console.log(typeof 100);
console.log(typeof 3.14);
console.log(typeof 314E-2);

//boolean 타입
console.log(typeof true);
console.log(typeof false);

// 값이 없기 때문에 타입을 알 수 없다.
console.log(typeof undefined); // 값이 없음을 의미하는 상수 값

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

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

//object 타입
console.log(typeof (new Object())); // 자바스크립트 객체

//function 타입
console.log(typeof (function f() {})); // 자바스크립트 함수
console.log(typeof ((a) => {console.log(a)})); // arrow function

var v = function() {};

// 이렇게 변수에 들어있는 값이 무슨 타입인지 검사할 때 사용한다.
if ("function" == typeof v) {
  console.log("함수입니다!");
}


</script>
</body>
</html>

(4) 변수 - strict 모드 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex02</title>
</head>
<body>
<h1>변수 - strict 모드 사용</h1>
<script>
// 자바스크립트는 변수를 선언하지 않고 바로 사용할 수 있다.
v1 = "문자열";
console.log(v1);
</script>

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

var v2;

v2 = 100; // OK!
console.log(v2);

// strict 모드에서는 변수를 선언하지 않고 사용하면 실행 오류가 발생한다!
v3 = 100; // 실행 오류!
console.log(v3);

</script>

<script>
// strict 모드는 그 모드가 선언된 script 태그에 한정한다.
v4 = true;
console.log(v4);
</script>

<script>
console.log("strict 모드는 script 태그에서 첫 번째 문장으로 와야 한다.");
"use strict"; // 이렇게 첫 번째 문장이 아닌 경우 무시된다.
v5 = 3.14;
console.log(v5);

</script>

<script>
//이렇게 첫 번째 문장으로 와야 한다. 물론 주석은 문장으로 간주하지 않는다.
"use strict";
console.log("strict 모드는 script 태그에서 첫 번째 문장으로 와야 한다.");
v6 = null; // 변수를 선언하지 않았기 때문에 실행 오류 발생!
console.log(v6);

</script>

</body>
</html>

(5) 여러 개의 변수 선언

<script>
// 자바스크립트는 변수를 선언하지 않고 바로 사용할 수 있다. use strict 쓰면 못씀
var v1 = "홍길동";
var v2 = "임꺽정";
var v3 = "유관순";
console.log(v1, v2, v3);

var v4 = "홍길동",
    v5 = "임꺽정",
    v6 = "유관순";
console.log(v4, v5, v6);

// 오해하지 말길! 같은 타입의 값만 넣는 것은 아니다.
// 자바스크립트는 변수의 타입이 없기 때문에 이것이 가능하다!
var v7 = "윤봉길",
    v8 = 100,
    v9 = true;
console.log(v7, v8, v9);

// 비교 - java
// 자바에서는 다음과 같이 하면 컴파일 오류이다.
// int a = 100, b = true, c = "문자열";

</script>

(6) 변수 - hoisting

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

// 일반 방식 - 변수를 선언한 후 사용한다.
var v1;
v1 = "홍길동";
console.log(v1); //홍길동

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

console.log(v3); // hoisting은 현재 태그에 선언된 변수나 함수에 대해서만 수행한다.
  // Uncaught ReferenceError: v3 is not defined
</script>

<script>
"use strict"

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

(7) 변수 - window 객체와 변수 선언

<script>
"use strict"

// window 객체?
// => 자바스크립트 언어의 내장(built-in) 객체는 아니다.
// => 웹브라우저에서 제공하는 기본 객체이다.
// => 자바스크립트에 선언되는 모든 글로벌 변수와 글로벌 함수는 이 객체에 자동으로 소속된다. 
// 
// 함수 바깥에 선언되는 모든 변수는 window 객체에 소속된다.
// 보통 "글로벌 변수(global variables)"라고 한다.
var v1; // 함수 밖에 선언했기 때문에 글로벌 변수이다.

v1 = "홍길동";

// 글로벌 변수는 모두 window 객체에 자동 소속된다.
// => 다른 말로 window 객체에 소속된 변수나 함수를 글로벌 변수, 글로벌 함수라 한다.
console.log(window.v1); // 홍길동

// window 객체에 소속된 변수나 함수를 사용할 때 window.을 생략할 수 있다.
console.log(v1); // 홍길동


window.v1 = window.v1 + " 입니다.";
console.log(v1); // 홍길동 입니다.
 
window.v2 = "오호라!"; // ==> var v2 = "오호라!"; 
console.log(v2); // 오호라!

// 자바스크립트의 객체는 마치 자바의 맵 객체 같다.
// 맵 객체에 마음껏 값을 저장할 수 있듯이,
// 자바스크립트 객체에도 마음껏 변수나 함수를 추가할 수 있다.

</script>

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

<script>
"use strict"

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

var v1;

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

window.v2 = "임꺽정";
console.log(v2); //임꺽정
console.log(window.v2); //임꺽정
console.log(window["v2"]); //임꺽정
console.log(window['v2']); //임꺽정

// 대괄호를 사용하면 공백이나 특수문자를 포함하는 변수를 만들 수 있다.
//window.오호라 ^^ = 100; // <--- 문법오류! 변수명 중간에 공백이 들어갈 수 없다. 특수 문자 불가!
window["오호라 ^^"] = 100;
console.log(window["오호라 ^^"]); //100
console.log(window['오호라 ^^']); //100

// 변수 이름에 공백이나 특수문자가 들어갔을 경우,
// 점(.)을 이용한 일반적인 방법으로는 변수를 사용할 수 없다.
//console.log(window.오호라 ^^); // 실행 오류!
</script>

(9) 자바스크립트의 변수

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

<script>
"use strict"

// 자바스크립트에서는 글로벌 변수가 모두 window 객체에 소속된다고 했다.
// 결국 내부적으로 변수를 다룰 때는 자바의 맵 객체의 프로퍼티 방식으로 다룬다.
window.v1 = 100; // java => map.put("v1", 100);

// 이렇게 맵 객체의 프로퍼티를 추가하는 방식으로 변수를 관리하다 보니 
// 변수의 값을 다른 타입으로 쉽게 바꿀 수 있는 것이다.
window.v1 = "문자열"; // java => map.put("v1", new String("문자열"));

// 그래서 변수의 이름에 공백이나 특수문자가 가능한 것이다.
window["오호라 ^^"] = true; // java => map.put("오호라 ^^", true);

// 같은 이름의 변수를 중복 선언하더라도 오류가 아니다.
// 왜? 어차피 객체에 맵 방식으로 값을 저장하기 때문에 
// 같은 이름을 가진 변수를 또 선언하더라도 
// 기존의 변수 값을 덮어 쓸 뿐이다. 
var v1 = "우헤헤"; // java => map.put("v1", "우헤헤");
console.log(v1); // 우헤헤

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

var v1 = true;
console.log(v1); // true

</script>

2) var 변수와 블록

<script>
"use strict"

var v1 = "홍길동";

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

console.log(window.v1); // 임꺽정
console.log(window.v2); // 100

</script>

3) let 변수와 블록

<script>
"use strict"

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

</script>

4) const 변수와 블록

```html
<script>
"use strict"
  
var v1;
let v2;
//const v3; // 오류! 상수 변수는 선언할 때 값을 할당해야 한다.
const v3 = "안중근";

v1 = "홍길동";
v2 = "임꺽정";
//v3 = "유관순"; // 오류! 상수 변수는 값을 변경할 수 없다.

console.log(v1); // 홍길동
console.log(v2); // 임꺽정
console.log(v3); // 안중근
</script>

5) 함수 로컬 변수

<script>
"use strict"

var v1 = "홍길동"; // ==> window.v1 = "홍길동"

function f1() {
    // 자바스크립트에서 로컬 변수는 함수 안에 선언된 변수를 말한다. 
    var v1 = "임꺽정"; // f1() 함수에서만 사용되는 로컬 변수이다.
    var v2 = 100; // f1() 함수에서만 사용되는 로컬 변수이다. 
    console.log("f1():", v1, v2);
    // 로컬 변수는 함수 호출이 끝나면 제거된다.
    // 왜? 스택 메모리에서 관리하기 때문이다.
}

f1(); // f1(): 임꺽정 100
console.log("=> :", v1); // => : 홍길동
console.log("=> :", v2); // v2는 함수 호출이 끝나면 제거되는 변수이다. 
// Uncaught ReferenceError: v2 is not defined

</script>

6) 함수 로컬 변수와 블록

<script>
"use strict"

var v1 = "홍길동"; // window.v1

function f1() {
   var v1 = "임꺽정"; // f1() 함수에서만 사용되는 로컬 변수이다.
    {
      var v1 = "유관순"; // 위에 선언된 로컬 변수를 가리킨다.
      var v2 = 100; // 로컬 변수이다. 블록은 무시된다.
      //let v3 = true; // 현재의 블록에서만 사용할 수 있는 로컬 변수이다.
    }
    console.log("f1():", v1, v2);
    //console.log(v3); // 오류!
}

f1(); // f1(): 유관순 100
console.log(v1); // 유관순
console.log(v2); // Uncaught ReferenceError: v2 is not defined
</script>

7) 함수 로컬 변수와 조건문, 반복문 블록

<script>
"use strict"

var v1 = "홍길동"; // window.v1

function f1() {
    var v1 = "임꺽정"; // f1() 함수에서만 사용되는 로컬 변수이다.

    if (v1 == "임꺽정") { // 조건문 블록도 일반 블록과 같다.
    	// 즉 조건문 안에 선언되는 모든 변수는 로컬 변수이다.
    	console.log("임꺽정입니다.");
    	var v1 = "유관순"; // 기존의 로컬 변수인 v1을 덮어쓴다.
    	var v2 = 200; // 새 로컬 변수 v2를 선언한다.
    	//let v3 = true; // 현재 if 블록에서만 사용할 수 있다.
    }
    console.log("f1():", v1, v2);
    //console.log(v3); // 오류!
}

f1();
// 임꺽정입니다.
// f1(): 유관순 200

function f2() {
    var v1 = "임꺽정"; // f2() 함수에서만 사용되는 로컬 변수이다.

    for (var i = 0; i < 10; i++) { // 반복문 블록도 일반 블록으로 간주한다.
    	console.log("f2():", i);
    	var x = i; // 따라서 반복문 안에 선언된 변수(i와 x)도 f2() 함수에 소속되는 로컬 변수이다.
    }

    // 반복문, 조건문 블록 안에 선언되는 변수도 결국 함수에 소속된 변수이기 때문에
    // 다음과 같이 반복문, 조건문이 끝난 다음에도 사용할 수 있다.
    console.log("f2():", v1, i, x);
}

f2();
// f2(): 0
// f2(): 1
// f2(): 2
// f2(): 3
// f2(): 4
// f2(): 5
// f2(): 6
// f2(): 7
// f2(): 8
// f2(): 9
// f2(): 임꺽정 10 9                           
                           
</script>

8) 글로벌 변수와 로컬 변수 구분

<script>
"use strict"

var v1 = "홍길동"; // window.v1

function f1() {
    var v1 = 100; // f1() 함수에서만 사용되는 로컬 변수이다.
    
    // 함수 안에 글로벌 변수와 같은 이름의 변수가 있을 경우,
    // 항상 가까이에 있는 변수가 우선이다.
    v1 = true;
    
    // 그런데 로컬 변수와 이름이 같은 글로벌 변수를 사용하고 싶다면? 
    // window를 생략하지 말라!
    console.log(window.v1); // 글로벌 변수의 값 변경 전
    window.v1 = "임꺽정";
    console.log("f1():", v1, window.v1); // 변경 후
}

f1(); 
// 홍길동
// f1(): true 임꺽정
console.log(v1); // 임꺽정

</script>

9) 배열

<script>
"use strict"

// 배열 만들기
// 1) new => 빈 객체를 만든다.
// 2) Array() 호출
//    => Object() 호출
//        => 객체에 필요한 최소한의 변수나 함수를 추가한다.
//        Array()를 호출했는데 Object()가 호출되는 이유:
//        => 자바의 상속처럼 Array() 생성자는 Object() 생성자를 상속받기 때문이다.
//        => 그래서 Array()를 호출할 때 상위 생성자인 Object()가 먼저 호출되는 것이다.
//    => 배열 관리에 필요한 변수나 함수를 기본 객체에 추가한다.
//
var arr = new Array(); // 빈 객체 생성 => Object()로 기본 변수와 함수를 준비 => Array()를 실행하여 배열에 필요한 변수나 함수를 추가

// 도대체 arr 객체에 들어있는 프로퍼티(변수와 함수)가 무엇인지 알아보자!
console.log(arr); 
// [] -> 실제로 브라우저 콘솔창에서 상세를 열어보면 빈 배열임에도 불구하고 값이 들어있다.
// 저 상세는 실행 당시의 값이 아니라 실행이 다 끝난 후 현재의 값이 들어있는것이다.

// 배열에 값 추가하기
arr.push("홍길동");
arr.push("임꺽정");
arr.push("유관순");
arr.push("안중근");
console.log(arr); // (4) ['홍길동', '임꺽정', '유관순', '안중근']

console.log(arr.length); //4
console.log(arr[0]); // map.get("0") 자바스크립트의 배열은 자바의 맵 객체를 다루는 것과 유사하다. // 홍길동
console.log(arr[1]); // map.get("1") // 임꺽정
console.log(arr[2]); // map.get("2") // 유관순
console.log(arr[3]); // map.get("3") // 안중근

// 자바와 달리 배열 인덱스의 유효 범위를 넘어가도 예외는 발생하지 않는다.
// 다만 해당 항목이 없기 때문에 값이 없다는 뜻으로 undefined 가 된다.
console.log(arr[4]); // map.get("4") // undefined
console.log(arr[-1]); // map.get("-1") // undefined

</script>

10) 배열의 크기와 length

<script>
"use strict"

// 배열을 만들 때 크기를 결정하지 않는다.
// 배열에 추가된 값에 따라 배열 크기(length)가 결정된다.
// => 자바스크립트의 배열은 자바의 ArrayList와 비슷하게 동작한다.
var arr = new Array();

// 단 자바의 ArrayList와 다른 점은 대괄호 []를 이용하여 배열 값을 넣을 수 있다.
arr[0] = "aaa";
arr[1] = "bbb";
arr[2] = "ccc";
arr[3] = "ddd";

console.log(arr.length); // 4
console.log(arr); // (4) ['aaa', 'bbb', 'ccc', 'ddd']
console.log("----------------------");

// 중간에 인덱스를 건너 뛰고 값을 넣을 수 있다.
arr[7] = "eee";
console.log(arr.length); // 8
console.log(arr); // (8) ['aaa', 'bbb', 'ccc', 'ddd', empty × 3, 'eee']
  
// 변수에 값이 없으면 undefined
// 변수 자체가 없으면 is not defined
  
// 규칙 1 : script 태그에 변수가 선언되어 있지 않으면, is not defidned
// 규칙 2 : script 태그에 변수는 있지만 값을 설정하지 않았으면, undefined
// 규칙 3 : 객체에 변수가 없으면, undefined

var obj = new Object();
console.log(obj); // {}
console.log(obj.v1); // undefined

console.log(window.v1); // undefined

console.log(v1); // Uncaught ReferenceError: v1 is not defined

</script>

11) 배열을 만드는 단축문법

<script>
"use strict"

// 대괄호를 사용하여 배열을 만들 수 있다.
// => 다른 타입의 값을 섞어 넣을 수 있다.
var arr = ["aaa", "bbb", true, 100, new Object(), function() {}];


console.log(arr.length); // 6
console.log(arr); // (6) ['aaa', 'bbb', true, 100, {…}, ƒ]
console.log("-------------------");

// 마찬가지로 언제든 임의의 위치에 값을 추가할 수 있다.
arr[8] = false;
console.log(arr.length); // 9
console.log(arr); // (9) ['aaa', 'bbb', true, 100, {…}, ƒ, empty × 2, false]

</script>