[JavaScript] 개발자 지망생 스터디 - 6일차

5일차에 이어서,

• 이름
  • Javascript에서는 값이나 함수나 클래스나 객체 모두 동일한 데이터로 취급
  • 하나의 이름에 한 가지만 저장이 가능
    • 중복 정의(Overloading)가 안됨.

setName(){this.name="a"}

setName = function(){this.name="a";}

 

setName(name){this.name=name}

setName = function(name){this.name="name";}

 

• Constructor (생성자)
  • 인스턴스를 생성하고 그 참조를 리턴하는 특별한 목적의 메서드
  • 메서드에서 this. 속성이름을 이용해서 인스턴스의 속성을 생성할 수 있음
    • 일반 메서드에서 속성을 생성하는 경우 메서드 호출을 하지 않으면 속성을 사용할 수 가 없음.
  • 생성자는 인스턴스를 생성하기 위해 호출하는 메서드기 때문에 인스턴스를 만들려면 반드시 한 번은 호출해야 함.
    • 생성자에서 필요한 속성을 만들면 속성을 만들기 위해서 다른 메서드를 호출하는 번거로움을 없앨수 있음.
  • javascript 에서는 constructor 라는 속성에 생성자를 만들어서 대입할 수 있음.
  • 생성자는 1개만 만들 수 있는 기본적으로 매개변수가 없고 아무일도 하지 않는 생성자가 1개 제공됨.
    • 생성자를 직접 만들면 제공되는 생성자는 소멸
  • 생성자를 호출하는 방법은 new 생성자이름(매개변수 나열)
    • 실제로는 클래스이름.prototype.constructor 가 호출됨

    <script>
        // class : 동일한 모양의 객체를 만들기 위해서 사용하는 모형
        // 사용자 정의 자료형
        const Member = class{
            // 생성자
            constructor(){
                // name 속성을 { } 안에 감싸서 만들면 속성이 생성됨
                return{name:"noname"};
            }

            // name 이라는 속성을 생성하면서 대입
            setName(name){
                this.name = name;
            }
            // name 속성의 값을 리턴하는 메서드
            getName(){
                return this.name;
            }
        }
        // 인스턴스 생성
        const member = new Member();
        // member.setName("shine");
        // setName 을 먼저 호출하지 않으면 name이 만들어지지 않음
        // console.log(member.getName());
        
        //생성자에서 name 속성을 생성했으므로 name 속성을 사용하는 것이 가능
        console.log(member.name);
    </script>

• getter & setter - 접근자 메서드
  • 인스턴스 안에 존재하는 속성의 데이터를 변경하고 리턴하는 메서드
  • getter는 속성의 데이터를 리턴하는 메서드
    • 일반적으로 매개변수는 없으며 속성의 데이터만 리턴함
    • 이름은 get속성이름 으로 만드는데 속성 이름의 첫 글자는 대문자 로 표기함 - camel 표기법
    • Boolean의 경우, get 대신 is를 사용하기도 함.
  • setter 는 속성의 데이터를 설정하는 메서드
    • 매개변수는 1개(데이터 전체) 또는 2개(배열이나 객체의 일부 속성을 변경하는 경우 인덱스나 속성이름을 매개변수로 추가하는 경우가 있음.)로 하는 것이 일반적이면 리턴을 하지 않음
    • 이름은 set속성이름 으로 만듬 (camel 표기법 적용)
  • Javascript에서는 getter 앞에 get을 setter 앞에 set을 추가하면 데이터를 저장하는 속성처럼 사용하는 것이 가능
    • 이 문법을 사용하는 것은 드문 경우가 많음.

    <script>
        const Person = class{
            // 생성자
            constructor(num=1, name="", tel=''){
                this.num = num;
                this.name = name;
                this.tel = tel;
            }
            // 접근자 메서드 - 속성의 값을 설정하고 리턴하는 메서드
            // get과 set을 붙이면 속성처럼 메서드를 호출할 수 있음
            setNum(num){
                this.num = num;
            }
            getNum(){
                return this.num;
            }
        }

        // 인스턴스 생성
        let person1 = new Person(1, "프리스", "010");
        let person2 = new Person(2, "파이터", "011");
        let person3 = new Person(3, "나이트", "019");

        person1.setNum = 103;
        console.log(person1.num);
    </script>

• static
  • 메서드 앞에 static을 붙이면 인스턴스가 아니라 클래스가 호출할 수 있는 속성이 됨
  • static이 붙으면 인스턴스가 호출할 수 없음
  • 인스턴스의 메서드 안에서 static 메서드 호출하는 것은 가능(반대로는 되지 않음)
    • 클래스가 만들어지고 인스턴스가 생성되기 때문에 인스턴스 메서드를 호출하는 시점에는 클래스의 내용이 완성이 된 상태
    • 클래스가 매서드를 호출하는 시점에는 인스턴스가 만들어져 있을 수도 있고 없을 수도 있기 때문에 클래스의 메서드에서 인스턴스의 메서드를 호출하는 것은 불가능함.

■ 상속

• 개념
  • 상위 클래스의 모든 것을 하위 클래스가 물려받는 것
  • 기본적으로는 클래스들을 만들다가 중복되는 내용이 나오면 중복되는 내용을 가지고 상위 클래스를 만들고 다른 클래스들에서 상속을 하는 형태를 취하게 됨
    • 화살표의 방향은 위에서 아래가 아닌 아래에서 위 로 그림.
  • 객체 지향에서는 상속이라 하지 않고 is a 라고 함.
  • 하나의 클래스에서 다른 클래스의 인스턴스가 포함되는 경우는 has a 라고 함.
• 상속 받는 방법

클래스 선언뒤에 extends 상위클래스 이름 {

}

• super
  • 하위 클래스에서 상위 클래스의 속성을 호출할 때 상위 클래스 인스턴스를 super 라고 함.
  • 하위 클래스의 일반 메서드에서 상위 클래스에 만들어진 메서드를 호출하고자 할 때는 super.메서드이름() 의 형태로 호출함.
  • constructor 안에서 상위 클래스의 constructor를 호출하고자 하는 경우는 super( ) 로 호출 가능

    <script>
        class Star{
            attack(){
                console.log("공격");
            }
        }

        class Protoss extends Star{

        }

        const p = new Protoss();
        p.attack();
    </script>

• method overriding(재정의)
  • 상위 클래스의 메서드 와 동일한 모양의 메서드를 하위 클래스에서 다시 정의하는 것
  • 목적은 기능 확장
    
    • 상위 클래스의 메서드를 가지고 그대로 사용하는 것이 부족해서 추가하기 위해서임
  • 새로운 기능을 만들거라면 overriding을 하면 X
  • 메서드의 기능이 생성하는 것이라면 상위 클래스의 것을 먼저 호출해야하고, 정리하는 것이라면 상위 클래스의 것을 나중에 호출해야함. (※ 만드는 것 : 상위 먼저 / 정리하는 것 : 하위 먼저  (계란 : 노른자 - 상위, 흰자 - 하위))
  • 최근의 언어에서는 내용이 없는 메서드에 내용을 채우는 것을 overriding 이라고 하지 않음.

    <script>
        class Star{
            //생성자 생성
            constructor(name=""){
                this.name = name;
            }
            attack(){
                console.log("공격");
            }
        }

        class Protoss extends Star{
            constructor(name = "", demage = 1){
                //상위 클래스의 생성자 호출
                super(name);
                this.demage = demage;
            }
            // 상위 클래스에 있는 메서드를 다시 정의하는 것 - Method Overriding
            attack(){
                // 상위 클래스의 메서드 호출
                super.attack();
                console.log("프로토스의 공격");
            }
        }

        const p = new Protoss("질럿", 10);
        p.attack();

        p = new Star("스타크래프트");
        // 위에 있는 p.attack( ) 과 동일한 코드인데 어떤 클래스의 인스턴스를 대입했느냐에 따라
        // 다른 메서드를 호출함 이를 Polyorphism(다형성)이라고 함
        p.attack();
    </script>

■ Iteration

• 개념
  • 순차적 처리를 위한 것
  • 모든 데이터가 순차적 처리를 할 수 있는 것은 아니고 Javascript에서는 Iterable 프로토콜 과 Iterator 프로토콜을 준수해야만 순차적 처리가 가능함.
  • 순차적 처리가 가능한 대표적인 데이터가 Array(배열)
  • 순차적 처리가 가능한 데이터에는 Symbol.iterator 가 존재해야 함
  • Symbol.iterator 속성을 추출해서 next 메서드를 호출하면 순차적으로 처리가 가능
  • 직접 만들고자 할 때는 Generator 와 Symbol 내장 객체를 이용해야 함.

    <script>
        // 일반 객체 생성
        let obj = {"name" : "adam", "job" : "singer"}
        // Iterator 가능 여부
        let result = obj[Symbol.iterator];
        if(result === undefined){
            console.log("순차적 반복처리 불가능")
        }else{
            console.log("순차적 반복처리 가능")
        }

        // 배열 생성
        var ar =["XHTML","CSS","JavaScript","HTML5","Node.js","react.js"];
        result = ar[Symbol.iterator];
        if(result === undefined){
            console.log("순차적 반복처리 불가능")
        }else{
            console.log("순차적 반복처리 가능")
            // 반복자 가져오기
            let iter = ar[Symbol.iterator]();
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
            console.log(iter.next());
        }
    </script>

• for - of
  • for - in 은 객체 나 배열의 모든 속성 을 순차적으로 접근하기 위한 명령문
  • for - of 는 순차적 처리가 가능한 데이터 를 순회하는 명령문

    <script>
            // 배열 생성
            var ar =["XHTML","CSS","JavaScript","HTML5","Node.js","react.js"];

            // in 은 속성을 추출 - 배열의 경우 인덱스
            for(attr in ar){
                console.log(attr);
            }
            
            // of 는 데이터를 순회
            for(attr of ar){
                console.log(attr);
            }

            // 문자열도 순회 가능
            var str = "Javascript";
            for(ch of str){
                console.log(ch);
            }
    </script>

■ Destructuring

- 구조 분해 할당 또는 비구조화 할당

• 개념
  • 데이터를 나누어서 저장
  • 다른 언어에서는 Tuple 이라고 함
• 배열
  • 순서대로 할당되고 마지막 변수에는 이전에 할당한 것들을 제외한 모든 것들이 할당됨.
• 인스턴스
  • 변수의 이름과 속성의 이름을 맞추어서 할당됨.
• 파라미터 설정에도 가능
• spread 연산 & rest param
  • 구조 분해 할당을 할 때 나머지를 전부 할당하는 연산을 spread 연산이라고 하고 파라미터에 적용하면 rest param 이라고 함.
  • 할당할 변수 앞에 ... 을 붙여 주면 됨
• 기본값을 설정해서 구조 분해 할당 가능

    <script>
        // 배열은 순차적으로 대입이 됨
        var ar = [100, 200, 300, 400, 500];
        let [one, two, three, four, five] = ar;
        console.log(one);

        // Iterator 가 없기 때문에 순차적으로 대입되는 것이 아니고 이름을 보고 대입
        var obj = {"name" : "카리나", "job" : "가수",
        "company" : "SM엔터테이먼트", "group" : "aespa"};
        let {job, name, company, group} = obj;
        console.log(name);

        let display = ({msg,n}) => {
            // let {msg,n} = ob;
            for(let i = 0; i<n; i++){
                console.log(msg);
            }
        }

        display({n:3, msg: "Hello"});

        // spread 연산
        let [first, ...etc] = ar;
        console.log(first);
        console.log(etc);

        let {name1, job1,...attr} = obj;
        console.log(attr);
        
        // 함수에 사용되면 rest param
        function rest({name1, job1,...attr}){
            console.log(attr);
        }
        rest(obj);

        // 기본값 설정 가능
        let [a, b, c, d, e, f=600] = ar;
        console.log(f);
    </script>

 

■ Exception Handling (예외 처리)

• 용어
  • ERROR
    • 물리적 에러 : 잘못된 문법으로 프로그램이 실행 되지 않는 경우
    • 논리적 에러 : 문법은 맞게 작성했는데 알고리즘을 틀리게 설계해서 잘못된 결과가 나오는 경우
  • exception (예외)
    • 문법에는 맞아서 번역은 되는데 특수한 상황이 발생해서 프로그램이 중단 되는 경우
  • assertion (단언)
    • 에러가 없고 예외가 발생하는 상황이 아니지만 개발자가 강제로 예외를 발생시켜 프로그램을 중단하는 것
  • Debugging
    • 코드를 작게 쪼개 실행시키면서 논리적 에러나 예외 발생 지점을 찾아내는 것
  • Test
    
    • TDD (테스트 주도 개발) : 개발 과정에 테스트를 진행.
• 예외 처리
  • 예외가 발생했을 때 어떻세 할 것인가를 작성하는 것
  • 목적
    • 예외가 발생하더라도 계속해서 프로그램을 실행시키기 위해서
    • 예외를 로깅(기록)하기 위해서
• 예외 처리 기본 구조

try{
	예외 발생 가능성이 있는 코드
}catch(예외처리 변수){
	예외가 발생했을 때 수행할 코드
}finally{
	예외 발생 여부에 상관 없이 수행할 코드
}

• finally는 생략이 가능
• 예외가 발생하면 예외 객체가 예외처리 변수에 자동으로 대입됨
• 언어에 따라  catch를 여러 개 만들 수 있는 것도 있고 catch를 생략하고 finally만 적어도 되는 경우가 있음.
  • 자바스크립트는 catch를 1개만 작성할 수 있고 catch 대신 finally 를 사용할 수 있음
• finally에는 대부분의 경우 정리 작업을 수행하는 코드를 작성

• 예외 객체
  • 예외가 발생했을 때 catch에 전달되는 객체
    • message : 예외 발생 이유
    • description : 예외 설명
    • name : 예외 이름

• 강제로 예외 발생
  • throw 예외 메세지
  • throw new Error(예외 메시지)

    <script>
        try{
            // 예외 발생
            // 예외 처리 구문이 없으면 프로그램 중단
            // 예외 처리 구문이 있으면 프로그램 계속 수행
            var ar = new Array(4300000);
            // 예외 강제 발생 - 클라이언트용 애플리케이션 만들 때 많이 이용
            throw new Error("예외 강제 발생");
        }catch(e){
            // 예외가 발생했을 때 호출
            console.log("예외 발생");
            console.log("예외 이름 : " + e.name)
            console.log("예외 메세지 : " + e.message);
        }finally{
            console.log("예외 발생 여부에 상관없이 무조건 수행");
        }
        console.log("메시지 출력");
    </script>

■ Module Programming

- 프로그램을 분할해서 작성하는 것

- 일반적인 언어에서는 클래스 단위로 분할하는 것이 일반적임

-->> 함수 단위로 분할하는 경우도 있음

-->> 화면 단위로 분할하기도 함

• export
  
  • 현재 모듈의 내용을 내보내서 외부에서 사용할 수 있도록 해주는 기능
  • export 데이터 형태로 내보냄
  • export default 데이터 형태로 내보낼 수 있는데 이 경우는 명시적으로 1개만 내보고자 할 때 사용
    • 이 코드는 하나의 모듈에 1번만 작성되어야 함
  • 각자 내보내기
    • export 내보내고자하는 데이터 (값, 함수, 클래스) 나열
  • 여러 개를 묶어서 내보내기
    • export {내보내고자 하는 데이터 나열..}
  • 이름을 변경해서 내보내기
    • export {원래 이름 as 다른이름..}
  • 구조 분해 할당을 이용한 내보내기
    • export {이름 나열} = 객체 나 배열
  • 1개만 내보내고자 하는 경우
    • export default 데이터;
• import(★)
  • 다른 모듈에서 export 한 내용을 가져와서 사용하기 위한 명령어
    • default로 내보낸 데이터를 가져오기
      • import 이름 from "모듈이름";
    • 내보낸 모든 데이터를 하나의 이름으로 가져오기
      • import * as 이름 from "모듈이름";
    • 내보낸 데이터 중 일부분만 가져오기
      • import {이름} from "모듈이름";
        • 모듈에서 이름에 해당하는 것만 가져와서 사용하는데 여러 개를 가져오고자 하면 ,로 구분해서 이름을 나열한다.
    • 이름을 변경해서 사용하는 경우
    • import {이름 as 다른이름} from "모듈이름";

▣ 내보낼 데이터 만들기 (export)

// File name : export.js

// 내보낼 데이터 만들기
const foo = Math.PI * Math.SQRT2;

function cube(x){
    return x * x * x;
}

var graph = {
    options:{
        color : "blue",
        thickness : "2px"
    },
    draw:function(){
        console.log("Draw Function");
    }
}

export {foo, cube, graph};

▣ 가져올 데이터 만들기 (import)

// File name : import.js

import { foo, cube, graph} from "./export.js";

graph.options = {
    color : 'white',
    thickness : '3px'
}

graph.draw();

console.log(cube(3));

console.log(foo);

▣ HTML 파일로 실행 해보기

<script src="./import.js" type="module"></script>

 

Built-In(제공하는) Object

■ 종류

• 일반 객체
  • javascript 에서 제공하는 일반적인 객체
    • 브라우저와 상관없이 동작
  • BOM(Browser Object Model)
    • 브라우저 차원에서 제공하는 객체
  • DOM(Document Object Model)
    • HTML 의 body 부분에 만드는 태그들을 사용하기 위한 객체

■ Document

• https://www.w3schools.com/jsref/default.asp
• https://devdocs.io/javascript

■ 일반 내장 객체

• Object
  • Javascript의 최상위 객체
  • Javascriptdpt는 모든 객체가 이 객체를 상속 받음
  • 주요 속성이나 메서드
    • prototype 속성 : 이 속성에 데이터를 추가하면 모든 객체 데이터를 사용할 수 있음
    • toString 메서드 : 객체를 문자열로 변환하는 메서드로 출력하는 메서드에 객체 이름을 대입하면 자동으로 호출되는 메서드
  • 객체 생성 방법

>>>>>>{ }

>>>>>>new Object( )

 

   <script>
        var obj = {"name":"adam", "job":"가수", "toString":function(){
            return this.name + ":" + this.job
        }}
        // 일반적으로 toString은 직접 호출하지 않고 출력하는 메서드에 객체 이름만 대입하면 자동으로 호출
        // 클래스를 만들 때 toString을 오버라이딩 하면 출력할 때 객체 이름만으로 메서드를 호출할 수 있음.
        console.log(obj);
    </script>

• Number 객체
  • 숫자와 관련된 객체
  • 객체를 생성할 때는 숫자를 직접 대입해도 되고 new Number(숫자로 구성된 문자열)
• Math 객체
  • Java의 Math 클래스를 그대로 가져옴
  • 인스턴스 생성을 하지 않음 (new를 하지 않음) - 모든 멤버가 static

▣ Math.random

    <script>
        // 랜덤한 숫자를 출력 - Math.random()
        // 범위는 0.0 ~ 1.0
        // alert(Math.random());

        // 숫자를 정수로 만들기 : 반올림(round), 버림, 올림
        /* let su = Math.random();
        alert(Math.round(su)); // 0 or 1 출력 */

        // 0 부터 4 까지의 정수가 나오도록 하기
        /*
        let dice = Math.random() * 1000;
        alert(Math.round(dice) % 5); */

        // 0 : 한식, 1 : 중식, 2 : 일식, 3: 분식, 4: 양식 
        let num = Math.random() * 1000;
        let menu = Math.round(num) % 5;
        let foods = ["한식", "중식", "일식", "분식", "양식"];
        alert(foods[menu]);
    </script>

• String
  • 문자열 클래스
  • 생성
    • 큰 따옴표나 작은 따옴표 안에 문자열 리터럴을 대입해서 생성할 수 있고, new String(문자열)을 이용해서 생성하는 것이 가능함.
  • length 속성 : 문자열의 길이
  • charAt(인덱스) : 인덱스 번째 문자를 리턴
  • 문자열 관련 작업 중 중요한 것
    • 좌, 우 공백 제거 고려 (구글 검색 공백시 구글은 공백을 제거하고 표시)
    • 대,소 문자 구별 고려 (구글 검색 공백시 구글은 대, 소문자 구별 하지 않음, ID는 대,소문자 구분 X)
    • 특정한 패턴의 문자나 문자열의 존재 여부 고려
    • 불용어 사용 고려
      • id = ? and pw = ?
        • ex) ID : shineIT  PW : 1234
        • ID = shineIT and PW = 1235 or 1 = 1 // PW 1=1 true
    • 한글을 사용할 때는 인코딩 문제 고려