[신세계I&C KDT][Javascript] #27 Javascript (0502)

1. (Vanilla) Javascript 개요

• 웹브라우저에서 실행됨 (JS 엔진)
  크롬의 JS 엔진 : v8
  html 랜더링 기능 : 랜더링 엔진
  v8 엔진을 크롬 브라우저뿐만 아니라 일반 서버에서도 실행될 수 있도록 만듦 ==> node.js

클라이언트						서버
(크롬 브라우저:V8)			(node.js:V8)

==> JS가 서버에서도 동작할 수 있게 되었다
(우리는 서버 스프링부트로 할 예정)

1) JS 라이브러리

: jQuery

• JS 프레임워크 (프론트엔드 기술)
  : React.js (페이스북)
  Vue.js (개인이)
  Angular (구글)

2) React 종류 3가지

: React.js
CSR (Client Side Rendering)
: Next.js
SSR (Server Side Rendering)
: React Native
모바일용 React 문법

3) JS 표준화

=> ES6 (ECMAScript 6 : 2015년)
일반적인 JS는 ES5 의미

4) TypeScript

JS + 타입 지정 -> 개발 향상 기대

2. JS 특징

• 인터프리터 언어 (컴파일 없이 한 줄씩 실행)
• 대소문자 구별
• JS 엔진에서 실행
• html 태그에 포함되어 정의함
  head 태그 안의 script 태그 이용
  body 태그 안의 script 태그 이용
• 주석문의 자바와 동일 (//, /* */)

3. 식별자 (identifier)

• JS 문법에서 지정하는 영단어
• 대소문자 구별
• 첫 글자는 반드시 영문자, _, $만 가능. 이후에 숫자 지정 가능
• 자바와 비슷하게 시스템 정의 식별자 (예약어, 키워드)와 사용자 정의 식별자 (변수, 함수/메서드, 클래스명)가 있다

4. 데이터 종류 ★

1) 기본 데이터형

• 수치 데이터 : 정수, 실수
• 문자 데이터 : 문자, 문자열 ("홍길동", '홍길동')
• 논리 데이터 : true / false (일반 데이터도 boolean 값으로 처리 가능)
• undefined : 변수 초기화가 안된 상태
• null : 초기화는 됐는데 값 (객체) 없음을 의미
• NaN : Not a Number
  예> 자바에서 Integer.parseInt("123"); ==> 123
  Integer.parseInt("홍길동"); ==> 에러
  JS에서 Number.parseInt("홍길동"); ==> NaN 발생

2) 참조 데이터형 (객체 데이터 의미)

• 배열 : [값, 값2, ...]
• JSON : {key:value, key:value}
• 함수 (function) : 기능 처리 ★
  ex) function fun(){}
  ==> 함수가 데이터란 의미는 함수를 변수에 저장할 수 있음을 의미한다
• 클래스 (class) :

class Cat{
	생성자
	메서드 (함수 문법)
	function fun(){}
}

5. typeof 연산자

• 데이터 타입을 알 수 있음
• 반환값은 문자열
• 문법 : typeof 값

6. 변수

1) 변수 용도

데이터 저장

2) 변수 특징

• 데이터형을 지정하지 않는다
  변수에 저장되는 데이터 타입을 제한 X. 즉 하나의 변수에 모든 데이터를 저장할 수 있다

3) 문법

(1) var 키워드 이용 (old 방법)

• var 변수명; // 변수 선언, undefined 값이 저장됨
  변수명 = 값; // 변수 초기화
• var 변수명 = 값;
• 특징
  변수명 중복 가능
  함수 스코프를 따른다
  ex)

if(true){
	var n = 10;
}
console.log(n); // 사용 가능
function fun() {
	var n2 = 10;
}
console.log(n2); // 사용 불가능

(2) let 키워드 이용 (ES6)

• let 변수명; // 변수 선언, undefined 값이 저장됨
  변수명 = 값; // 변수 초기화
• let 변수명 = 값;
• 특징
  변수명 중복 불가능
  블럭 스코프를 따른다
  ex)

if(true){
	let n = 10;
}
console.log(n); // 사용 불가능
function fun() {
	let n2 = 10;
}
console.log(n2); // 사용 불가능

4) 데이터 형변환

(1) +를 제외한 나머지 산술 연산자 (-, *, /, %)는 문자열이 자동으로 수치로 형변환되어 연산됨. +는 연결 처리

(2) 일반 데이터가 boolean으로 처리 ★

• false로 처리되는 일반 데이터
  0
  ""
  undefined
  null
  NaN

ex) JS에서 가능한 표현식

if(10){
console.log("10은 true");
}

5) 기본형 변수 vs 참조형 변수

(1) 기본형 변수

: 기본형 데이터를 저장하는 변수
ex) let n = 10;
let n2 = n;
n2값을 변경해도 n값은 변경이 안됨

(2) 참조형 변수

: 참조형 데이터를 저장하는 변수
ex) let x = [10,20,30];
let x2 = x;
x2값을 변경하면 x값도 변경이 됨

7. 상수

• React.js에서 주로 사용된다 !!
• ES6 지원
• const 키워드 사용
• 문법
  const 상수명 = 값;
• 값 변경이 불가능
• 중복 불가
• 블록 스코프 따름

• 주의할 점
  const NUMS = [10,20,30];
  NUMS[0] = 100; // 가능 !!
  => 배열을 가리키는 주소값이 변경된 것이 아니기 때문에 에러 X
  NUMS = [20,30,40];은 불가능

8. 연산자

1) 산술연산자

+
-
*
/
%

=> + 제외한 나머지는 문자열 형태의 숫자가 ("10") 자동으로 수치로 변환되어 연산된다
cf) java : 10/3 = 3 (자바는 몫 리턴)
js : 10/3 = 3.3333333333333335

2) 대입연산자

a=b
a+=b
a-=b
a*=b
a/=b
a%=b

3) 비교연산자

a == b 같냐? (equal 연산자) - 값만 비교
a === b 같냐? (identical 연산자) - 값과 타입을 비교

a != b 같지 않냐?
a !== b 같지 않냐?

a > b 크냐
a >= b 크거나 같냐

a < b 작냐
a <= b 작거나 같냐

• null, undefined 비교 시에는 반드시 === 를 사용해야된다
  (선언 후 초기화 안 된 상태가 undefined)

4) 논리연산자

• && (and )
  || (or)
  ! (not)

(1) 기본 형식 -1

논리값 && 논리값 ==> 두 개 모두 true인 경우에 true 반환
논리값 ||논리값 ==> 두 개 중 하나만 true여도 true 반환
!논리값 ==> true값을 false, false 값을 true 반환

(2) 주의할 점

JS에서는 true/false 만 논리값으로 사용되지 않는다
일반값도 논리값으로 사용될 수 있다
false로 처리되는 값 : 0, "", undefined, null, NaN
true로 처리되는 값 : false 제외한 나머지

(3) 기본 형식 -2 (★ X 100 )

나중에 react.js 조건부 랜더링에서 사용된다

일반값1 && 일반값2 (★ 매우 중요) ==> 일반값1 이 true이면 일반값2 반환한다.
일반값1 이 false이면 일반값1 반환한다

일반값1 || 일반값2 ==> 일반값1 이 true이면 일반값1 반환한다
일반값1 이 false이면 일반값2 반환한다

5) 증감연산자

• 기본 :
  ++n;
  n++;

  --n;
  n--;

• 주의할 점 :
  다른 연산자와 같이 사용시 전치/후치에 따라서 결과값이 달라질 수 있다

예>
let result = ++n; // 먼저 1 증가하고 나중에 result에 할당
let result = n++; // 먼저 result 할당하고 나중에 증가

6) 3항 연산자

• 문법:
  (조건식)? 참: 거짓;
• 중첩 가능

9. 문장

1) 문장 종류

• 실행문
  : 순차문
  : 제어문 - 조건문 ( 단일if문, if~else문, 다중if문, switch 문(내부적으로 ===(identical)을 사용함 )

• 반복문 ( for문, while문, do~while문, foreach문)
  ==> break문
  continue문

• 비실행문 : 주석문 ( //, / ~ / )

• let 변수는 블럭scope를 갖는다. (자바와 동일한 문법)
  var 변수는 함수scope를 갖는다

10. 객체 (object)

1) 종류 3가지

: 자바처럼 상속과 비슷한 개념으로 계층구조화 되어 있음
최상위 객체는 Object 이다
: 객체의 구성 요소는 변수, 메서드 (정적 메서드, 인스턴스 메서드), 생성자를 가짐

(1) 데이터 (기본, 참조) 관련 객체

• 문자 : String 객체가 관리
• 수치 : Number 객체가 관리
• 날짜 : Date 객체가 관리
• 배열 : Array 객체가 관리
• JSON : object 객체가 관리

(2) BOM (Browser Object Model)

• 웹브라우저 관련 객체
• 종류
  Window 객체
  Screen 객체
  History 객체
  Location 객체
  Navigator 객체
• 웹브라우저를 open하면 자동으로 생성됨

(3) DOM (Document Object Model)

• html 문서 관련 객체
• Document 객체 (자동으로 생성됨. document 변수로 참조)

11. 데이터 관련 객체

1) 문자데이터 관련 객체

• String 객체 관리

(1) 생성 방법 3가지

가. 리터럴값만 이용 (권장)
let s = "hello";
나. new 생성자 이용
let s2 = new String("hello");
다. 생성자 이용
let s3 = String("hello");

(2) 문자열 표현 방법 3가지

가. 'hello' 이용
나. "hello" 이용
다. `hello` 이용 (백틱, template literal) ★

(3) 백틱 장점 2가지

1- 변수 삽입 가능: ${변수}이용
2- 들여쓰기, 엔터 같은 동작이 그대로 적용되어 출력포맷의 가독성이 높아진다
ex)

let result = `이름:${name} 나이:${age}`;

• 메서드 조회
  http://developer.mozilla.com

2) 수치 데이터 관련 객체

• 정수와 실수를 모두 관리한다
• Number 객체가 관리한다

(1) 생성 방법 3가지

가. 리터럴값만 이용 (권장)
let n = 100;

나. new 생성자 이용
let n2 = new Number(100);

다. 생성자 이용
let n3 = Number(100);

(2) Number 객체 메서드 정리

    <script>
        let s  = "HeLlo";

        console.log("1. 문자열 길이", s.length);
        console.log("2. 특정문자 얻기", s.charAt(0));
        console.log("3. 문자열 연결", s.concat("!!!!!", "bonjour"));
        console.log("4, 문자 위치 얻기", s.indexOf("H"));
        console.log("5. 부분열", s.substring(0,4)); // start, end
        console.log("5. 부분열", s.substr(0,4)); // start, length
        console.log("6. 대문자", s.toUpperCase()); 
        console.log("6. 소문자", s.toLowerCase()); 
        console.log("7. 치환", s.replace('H','X')); 
        console.log("8. 값 포함 여부", s.includes("He")); 
        console.log("8. 값 포함 여부", s.includes("xe")); 
        console.log("9. 시작값 여부", s.startsWith("He")); 
        console.log("9. 끝값 여부", s.endsWith("o")); 

        let s2 = "    world     ";
        console.log("12. 공백 제거", s2.trim());
        console.log("13. 공백 제거 후 길이", s2.trim().length);

        let s3 = "홍길동/유관순/이순신";
        let result = s3.split("/");
        console.log("13. 구분자", result, result[0]);

        let s4 = "홍길동";
        console.log("문자열 반복", s4.repeat(4));
    </script>

3) 날짜 데이터 관련 객체

• Date 객체가 관리

(1) 생성 방법 2가지

let d = new Date();
let d2 = Date();

(2) 날짜 관련 메서드

4) 배열 데이터 관련 객체

• Array 객체가 관리

(1) 특징

• 자바의 List 처럼 동작한다
• 크기 변경이 가능함
• 삽입, 제거, 수정 가능

(2) 생성 방법

var n = [10,20,30];
var n = [];

var n = new Array();
var n = new Array(10,20,30);

var n = Array();
var n = Array(10,20,30);

(3) 배열 관련 메서드 정리

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <script>

     // Array 메서드

     var n = [10,20,30];
    
     //1. 값 얻기

     console.log("1. 개별적인 인덱스 이용: ", n[0],n[1]);

     console.log("2. 일반for 문: ");
     for(var i=0; i < n.length; i++ ){
       console.log(n[i]);
      }
      
      console.log("3. foreac문 역할: ");
      /*
      자바
      for(int x: arr){}
      
      JS
      for(var x of arr){} ==> 값 반환
      for(var x in arr){} ==> index값 반환
      */
     for(var x of n){
      console.log(x);
     }

     for(var x in n){
      console.log(x, n[x]);
     }
      

     //2. 값추가/값삽입/값삭제/값변경
     var n2 = [10,20,30];

     console.log("4. 배열 마지막에 값 추가")
     //n2[3]=40;
     n2.push(40);
     n2.push(50,60,70);
     console.log(n2);
     
     console.log("5. 배열 마지막에 값 삭제");
     n2.pop();
     console.log(n2);
     console.log(n2.pop());  // 삭제된 값이 반환됨.
     
     console.log("6. 배열 중간에 값 삽입 및 삭제");
     /*
     array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
     
     array.splice(0,3) ==> 0부터시작해서 3개 삭제
     array.splice(0,3,10,20) ==> 0부터시작해서 3개 삭제하고 10과 20 삽입
     array.splice(0,0,10,20) =>  0부터 10과 20 삽입
     
     */
    var n3 = [10,20,30];
    // n3.splice(0,0,40,50,60); // 0부터 0개삭제하고 40,50,60 삽입
    // n3.splice(1,2,40,50,60); // 1부터 2개삭제하고 40,50,60 삽입
    n3.splice(1,2); // 1부터 2개삭제
    console.log(n3);
    

    var n4 = [10,20,30,40,50,60];
    console.log("7. 특정위치값  반환:", n4.indexOf(20));
    console.log("8. 부분열:", n4.slice(0, 4));
    console.log("9. 거꾸로:", n4.reverse());
    
    var n5 = [10,20,30,40,50,60];
    console.log("10. 특정값으로 채우기:");
    // fill(value),fill(value, start),fill(value, start, end)
    // n5.fill(100);
    // n5.fill(100, 3);
    n5.fill(100, 0, 3);
    console.log(n5);


    var n6 = [10,20,30,40,50,60];
    console.log("11. 배열안의 값으로 배열의 다른 위치에 복사:");
    //copyWithin(target, start), copyWithin(target, start, end)
    // let new_array = n6.copyWithin(0, 3); // target 0위치에 3부터시작해서 끝까지의 값을 복사
    // let new_array = n6.copyWithin(1, 2, 5); // target 1 위치에 2부터시작해서 4까지의 값을 복사
    let new_array = n6.copyWithin(1,3); // target 1 위치에 2부터시작해서 4까지의 값을 복사
    // [10,20,30,40,50,60] === > [10,40,50,60,50,60];
    console.log(new_array); 


    console.log("12. 배열의 문자열을 하나의 문자열로 join:");
    const elements = ['Fire', 'Air', 'Water'];
    console.log(elements.join());  // "Fire,Air,Water"
    console.log(elements.join(' '));  // "Fire Air Water"
    console.log(elements.join('-'));  // "Fire-Air-Water"


    var n7 = [4, 2, 5, 1, 3];
    n7.sort();
    console.log("13. 오름차순 정렬:", n7);

    var n7 = [14, 22, 65, 1, 34];
    n7.sort();
    console.log("13. 오름차순 정렬:", n7);

    // 내림차순 정렬은 함수이용해서 명시적으로 구현해야  됨.
    var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function (a, b) {
      // return a - b;   // 오름차순
      return b-a;        // 내림차순
    });
    console.log(numbers);
    // sort(함수); <== 가능한 이유가 함수는 데이터이기 때문이다.


    // 기본반복(forEach), 가공(map (******)),  필터링(filter)
    var n8 = [14, 22, 65, 1, 34];
    console.log("14. 기본 반복처리 ");
    n8.forEach(function(v,i,arr){
      console.log(v, i, arr);
    });

    console.log("15. 가공처리(******************************* 매우 중요) ");
    let new_array2 = n8.map(function(v,i,arr){
        console.log(v,i,arr, this,  this.mesg);
        return v*2;
    },{mesg:"hello"});
    console.log(new_array2);
    
    console.log("16. 필터링 ");
    let new_array3 = n8.filter(function(v,i,arr){
      return v%2==0;  // 조건이 true인 경우에만 반환됨.
    });
    console.log(new_array3);
    
    // 정적 메서드
    console.log("17. 배열 생성1: Array.of(값,값2,값3) ");
    var new_array4 = Array.of(10);
    var new_array4 = Array.of(10,20,30);
    console.log(new_array4);
    
    console.log("17. 배열 생성2: Array.from(유사배열[, map함수]) ");
    var new_array5 = Array.from("Hello");
    console.log(new_array5);  // ['H', 'e', 'l', 'l', 'o']
    
    var new_array6 = Array.from("Hello", function(v){
        return v.toUpperCase();
    });
    console.log(new_array6);  // ['H', 'E', 'L', 'L', 'O']


    </script>
  </head>
  <body>
   

  </body>
</html>

(4) spread 연산자 (전개구문)

• 기능 : 배열, JSON 요소를 펼치는 기능
• 문법 : [...배열]
• 예>

     var n = [10,20,30];
     var x = n;  // 얕은 복사(주소값  복사, x 변경하면 n도 영향 받음)

     // 1. 배열 복사 
     var n2 = [...n];   // 깊은 복사 ( 실제값 복사, n2 변경해도 n은 영향 없음 )
     console.log(n2);
    

     // 2. 기존 배열에 새로운 값을 추가
     var n = [10,20,30];
     var n2 = [...n, 40, 50]
     var n2 = [40, 50, ...n]
     console.log(n2);
    
     // 3. 배열 연결
     var n = [10,20,30];
     var n2 = [100,200,300];
    
     var n3 = [...n, ...n2];
     console.log(n3);
    

     // 4. 문자열 전개
     var x = [...'hello'];
     console.log(x);  // ['h', 'e', 'l', 'l', 'o']