본문 바로가기
Programming/HTML & CSS & JavaScript

js 6일차 - 클래스, 모듈

by yoon9i 2024. 5. 16.

###########################################################################
###########################################################################
9장. 클래스
###########################################################################

1. 문법
- JS 에서는 접근지정자가 없다. (public, private, ...)
- JS 에서는 class 키워드가 됨.
  html 에서는 <p class="x"></p> 태그 속성이 있음.
  React.js 에서는 충돌남.
  따라서 class 대신에 className 을 사용한다.
        ex> <p className="x"></p>

  class 클래스명 { // JS
     변수(메서드 및 생성자내에서만 선언이 가능. `this.변수` 문법을 따름)
     메서드
     생성자
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스1_기본</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        // JS 문법 - 클래스 기본
        class Person {
            setName(name) { // name: 로컬변수(자바로치면)
                this.name = name; // this.name: 인스턴스변수(자바로치면)
            }
            setAge(age) {
                this.age = age;
            }

            getName() {
                return this.name;
            }
            getAge() {
                return this.age;
            }
        }

        var p = new Person();
        p.setName("홍길동");
        p.setAge(20);

        console.log(p.name, p.age); // 홍길동 20
        console.log(p.getName(), p.getAge()); // 홍길동 20

        var p2 = new Person();
        p2.setName("홍길동2");
        p2.setAge(20);

        console.log(p2.name, p2.age); // 홍길동2 20
        console.log(p2.getName(), p2.getAge()); // 홍길동2 20

    </script>
</head>

<body>

</body>

</html>



- 클래스를 작성후에는 반드시 객체생성해야 된다.

    var 변수 = new 클래스명();

- 메서드명을 변수로 설정 가능
ex>
    let xxx = "setName";

    class Person {

        [xxx](name) {

        }
    } // xxx -> setName() 으로 치환됨.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스2_메서드명을변수로사용</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        let xxx = "setName";

        class Person {
            [xxx](name) { // name: 로컬변수(자바로치면)
                this.name = name; // this.name: 인스턴스변수(자바로치면)
            }
            setAge(age) {
                this.age = age;
            }

            getName() {
                return this.name;
            }
            getAge() {
                return this.age;
            }
        }

        var p = new Person();
        p.setName("홍길동");
        p.setAge(20);

        console.log(p.name, p.age); // 홍길동 20
        console.log(p.getName(), p.getAge()); // 홍길동 20

        var p2 = new Person();
        p2.setName("홍길동2");
        p2.setAge(20);

        console.log(p2.name, p2.age); // 홍길동2 20
        console.log(p2.getName(), p2.getAge()); // 홍길동2 20

    </script>
</head>

<body>

</body>

</html>



- 메서드명 앞에 set/get 키워드를 지정하면 메서드가 아닌 변수처럼 동작됨.
ex>
       
    get getName(){
        return this.name;
    }

p.getName; // 변수처럼 사용.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스3_메서드명앞에set_get지정</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        var xxx = "setName"; // set / get 을 붙였더라도 메서드명을 변수로 사용가능.

        class Person {
            set [xxx](name) {
                this.name = name;
            }
            setAge(age) {
                this.age = age;
            }

            get getName() {
                return this.name;
            }
            getAge() {
                return this.age;
            }
        }

        var p = new Person();
        // p.setName("홍길동");
        p.setName = "홍길동";
        p.setAge(20);

        console.log(p.name, p.age); // 홍길동 20
        // console.log(p.getName(), p.getAge()); // 홍길동 20
        console.log(p.getName, p.getAge()); // 홍길동 20

        // 메서드처럼이 아닌 변수처럼 사용해야한다.

    </script>
</head>

<body>

</body>

</html>


- 생성자(constructor)
자바: 클래스명으로 생성자를 작성
      오버로딩이 지정 가능

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스4_생성자</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        class Person {

            // 생성자 - 오버로딩x, 한번만 가능
            constructor(name, age) {
                console.log("constructor 호출");
                this.name = name;
                this.age = age;
            }

            setName(name) {
                this.name = name;
            }
            setAge(age) {
                this.age = age;
            }

            getName() {
                return this.name;
            }
            getAge() {
                return this.age;
            }
        }

        // 생성자 호출
        var p = new Person("홍길동", 20);
        console.log(p.getName(), p.getAge()); // 홍길동 20
        console.log(p.name, p.age); // 홍길동 20

    </script>
</head>

<body>

</body>

</html>



JS: constructor 명으로 생성자를 작성
    단 한번만 지정 가능


- 상속(inheritance)
extends 키워드 이용.
부모요소를 자식이 상속받음. (생성자 상속안됨.)
부모에서 선언된 변수는 반드시 부모에서 초기화해야된다.
ex>
        class Cat extends Pet {
            constructor(name, age, gender) {
                super(name, age); // 부모에서 초기화필수
                // this.name = name; // 에러발생
                this.gender = gender;
            }

            setGender(gender) { this.gender = gender; }
            geetGender() { return this.gender; }
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스5_상속</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        class Pet {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            setName(name) { this.name = name; }
            getName() { return this.name; }

            setAge(age) { this.age = age; }
            getAge() { return this.age; }

            getPet() { return this.name + "\t" + this.age; }
        }

        // cat is a Pet. 상속관계
        class Cat extends Pet {
            constructor(name, age, gender) {
                // this.name = name;
                // this.age = age;

                // 부모에서 초기화필수
                super(name, age); // 무조건 super() 해야한다.
                this.gender = gender;

            }

            setGender(gender) { this.gender = gender; }
            geetGender() { return this.gender; }

            // 재정의
            getPet() { return this.name + "\t" + this.age + "\t" + this.gender; }
        }

        var cat1 = new Cat("야옹이", 2, "암컷");
        cat1.setName("야옹이2");

        // console.log(cat1.getName(), cat1.getAge(), cat1.geetGender());

        // 오버라이딩 - gender 가 안나오는데 부모에서만 gender 가 정의되어있으므로
        //             자식에서 재정의하면 gender 까지 나온다.
        console.log(cat1.getPet());

    </script>
</head>

<body>

</body>

</html>



메서드 재정의 가능. (overriding)
static 메서드 지원(`클래스명.메서드` 사용, 객체생성과 무관)

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스6_static</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        class Test {

            // 인스턴스 메서드
            getMesg() {
                return "getMesg";
            }

            // static 메서드 (정적메서드)
            static getStaticMesg() {
                return "getStaticMesg";
            }
        }

        // 인스턴스 메서드
        var t = new Test();
        console.log(t.getMesg());

        // static 메서드
        console.log(Test.getStaticMesg());

        console.log(typeof Test); // function
    </script>
</head>

<body>

</body>

</html>


generator 함수사용 가능.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js14_클래스7_generator</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        class Test {
            //generator 메서드
            * info() {
                console.log("1");
                yield
                console.log("2");
            }
        }

        var t = new Test();
        var gen = t.info();
        console.log(gen);
        gen.next(); // 1
        gen.next(); // 2



    </script>
</head>

<body>

</body>

</html>

 

 

###########################################################################
###########################################################################
10장. 모듈
###########################################################################

1. 개념
- .js 파일 하나하나를 모듈이라고 부른다.
- 여러 js 간에 접근해서 사용하려는 방법이고
  만약에 main.js 에서 header.js 를 접근하고자 한다면

  main.js 에서는 import 를 사용하고 header.js 에서는 export 해야된다.
  ex>
        // header.js
        export function fun2() {
            console.log("fun2");
        }

        // main.js
        import { fun2 } from './header.js'

    하나의 js 에서는 export 를 여러번 할 수 있다.
    단, export default 는 한번만 사용할 수 있다.

    export 된 요소를 import 하는 문법은 다음과 같다.
    ex>
        // main.js
        import { 요소, 요소2 } from '경로'

    export default 된 요소를 import 하는 문법은 다음과 같다.
    ex>
        import 요소 from '경로';

    export 와 export default 가 혼합된 요소를 import 하는 문법은 다음과 같다.
     ex>
        import 요소, {요소, 요소2} from '경로';

    // 변형된 import 로서 별칭지정가능
    // export 별칭지정
    import { yyy as y } from './body.js';

    // export default 별칭지정
    import { default as x } from './body.js';

 

< module 사용전 >

<!DOCTYPE html>
<html lang="en">

<head>
    <title>standard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
</head>

<body>

</body>

</html>
// main.js
// module 전

// 1. 정의
let num = 10;
const SIZE = 20;

function fun() {
    console.log("fun");
}

function fun2() {
    console.log("fun2");
}

class Person {
    getMesg() {
        return "getMessage";
    }
}

// 2. 사용
console.log("num: ", num);
console.log("SIZE: ", SIZE);
console.log("fun(): ");
fun();
console.log("fun2(): ");
fun2();

var p = new Person();
console.log("getMesg(): ", p.getMesg());

 

< module 사용후 >

<!DOCTYPE html>
<html lang="en">

<head>
    <title>module</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="main.js"></script>
</head>

<body>
    <h1>module.html</h1>
</body>

</html>
// main.js

import { fun } from './content.js';
import { fun2, Person } from './header.js';
import xxx, { yyy, zzz } from './body.js';

// 변형된 import 로서 별칭지정 가능.
// 변형된 import (export)
import { yyy as y } from './body.js';

// 변형된 import(export default)
import { default as x } from './body.js';


// 1. 정의
let num = 10;
const SIZE = 20;

// 2. 사용
console.log("num: ", num);
console.log("SIZE: ", SIZE);
console.log("fun(): ");
fun();
console.log("fun2(): ");
fun2();

var p = new Person();
console.log("getMesg(): ", p.getMesg());

console.log("default & export: ");
xxx(); // xxx
yyy(); // yyy
zzz(); // zzz

console.log("변형된 import(export): ");
y();
console.log("변형된 import(default): ");
x();
// header.js

export function fun2() {
    console.log("fun2");
}

export class Person {
    getMesg() {
        return "getMessage";
    }
}
// content.js

export function fun() {
    console.log("fun");
}
// body.js

export default function xxx() {
    console.log("xxx");
}

// export default function yyy() {
//     console.log("yyy");
// }
// export default 는 js 안에서 한번만 가능.

export function yyy() {
    console.log("yyy");
}

export function zzz() {
    console.log("zzz");
}

 

 

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

js 이론정리  (0) 2024.05.16
js 6일차 - 비동기, Ajax  (0) 2024.05.16
js 5일차 - DOM(DOM, 객체분해할당)  (0) 2024.05.09
js 5일차 - event(2) preventDefault  (0) 2024.05.09
js 4일차 - event(1)  (0) 2024.05.08

관련글

티스토리툴바