25일차 2024 - 4 - 1

JavaScript function(함수) 부분 복습

 

● 함수의 다양한 선언 방법.

function() { ... },  function = () => { ... } 등 자유도가 높다. (return이 있는 함수, 없는 함수 등..)

※ const로 선언하면 재정의를 할 수 없는 함수가 된다.

※ 자바스크립트는 작은 따옴표도 문자열, 큰 따옴표도 문자열로 인식

※ 실행문이 하나일 때 중괄호 생략 가능

※ 매개변수가 하나일 때 소괄호도 생략 가능

 

● 객체 선언 방법과 메소드 정의

// 객체 표기법 { }
var var1 = 3;			// 정수
let var2 = "abc";		// 문자열
const var3 = () => {};	// function
var var4 = {};			// object
var var5 = [];			// object(배열)
console.log("var1의 타입: ", typeof(var1));
console.log("var2의 타입: ", typeof(var2));
console.log("var3의 타입: ", typeof(var3));
console.log("var4의 타입: ", typeof(var4));
console.log("var5의 타입: ", typeof(var5));

 

 

■ JavaScript (4월 1일)

★ 오늘 배운 것

동적 필드와 메소드 / Getter와 Setter / 생성자 함수 / 클래스 선언하기 / 정적 필드와 메소드 사용 / 자바스크립트에서의 상속 / 구조분해할당 / String / Date / Math / 전역 메소드와 속성 / JSON / 정규표현식

 

 

● 동적 필드와 메소드

<script>
    // 객체 생성
    const car = {};	// const는 상수.. car라는 객체에 번지를 저장. 
    // 객체를 저장하는 것이기 때문에 밑의 속성과 메소드 추가로 번지가 바뀌는 것이 아니기 때문에 가능한 것
    
    // 동적 속성 추가
    car.name = "그랜저";
    console.log(car);
    // 동적 메소드 추가
    car.start = function() {
        console.log("시동을 겁니다~");
    };
    console.log(car);
    car.start();
    car["start"]();	// (): 호출코드
</script>

→ 속성과 메소드를 객체 생성 후에 선언과 초기화가 가능하다.

 

 

● Getter와 Setter

<script>
    // 객체 생성
    const car = {
            name: "그랜저",
            price: 5000,
            speed: 100,	// 단위 mile
            start: function(){
                console.log("시동을 겁니다.");
            },
            // Setter 선언
            set kmSpeed(meter) {	// meter는 km 단위로 받은 매개값
                // km -> mile
                this.speed = meter / 0.621371;	
            },
            // Getter 선언
            get kmSpeed() {
                // km -> mile
                return this.speed * 0.621371;
            },
            
            // 기존에 우리가 사용했던 방법도 가능하다
            /* setKmSpeed(meter) {	// meter는 km 단위로 받은 매개값
                // km -> mile
                this.speed = meter / 0.621371;	
            },
            // Getter 선언
            getKmSpeed() {
                // km -> mile
                return this.speed * 0.621371;
            }, */
            
    };
    // Setter 호출
    car.kmSpeed = 60;	// 마치 car 객체의 속성에 값을 대입하는 것처럼 보인다. 하지만 60은 set kmSpeed 메소드의 매개값으로 전달된다.
    // Getter 호출
    console.log("현재 속도(km/h): ", car.kmSpeed);

    /*car.setKmSpeed(80);
    console.log("현재 속도(km/h): ", car.getKmSpeed());*/
</script>

 

→ 자바에서 배웠던 문법과 조금 차이점이 있다. (사용 방법이 헷갈린다..) 기존에 썼던 방법도 가능하긴 하지만 위 코드에서 사용한 방식으로도 가능하다.

 

 

● 생성자 함수

객체를 만드는 방법 2가지

<script>
    // 객체를 초기화하는 생성자 정의
    function Car() {	// 생성자 함수 --> this를 이용. 일반적인 함수라면 var,let,const를 사용
        this.name = "그랜저";		// 이번 중괄호는 실행문... 콤마가 아니라 세미클론을 사용
        this.price = 50000000;
        this.start = function() {
            console.log("시동을 겁니다.");
        };
    }
    // 객체 생성
    const myCar = new Car();
    console.log(myCar.name);
    console.log(myCar.price);
    myCar.start();

    // 새로운 생성자 함수 생성 (매개값을 받아 필드의 초기화)
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    const my = new Person("홍길동", 30);
    const you = new Person("감자바", 27);
    console.log(my);
    console.log(you);
</script>

1. 중괄호로 바로 만드는 방법 (이전에 배웠던..)
바로 객체를 생성해낼 수 있음. 하지만 각각의 jsp파일에서 중복해서 만들어야하고 그때마다 수정해야 한다.

2. 생성자로 만드는 방법 (위 코드와 같은 방식)
생성자를 외부 자바스크립트로(중간 파일로) 만들어놓고 다른 jsp에서 편하게 스크립트를 참조하여 사용할 수 있다.

→  각각의 jsp파일에서 'new 생성자함수' 를 이용하여 객체를 생성할 수 있다.
( 중괄호만으로 만들경우 모든 jsp파일에서 각각 정의해주어야하고, 수정이 필요할 때 각각 수정해주어야 함)

 

cf) 리액트가 초창기에 클래스(객체 생성자 함수)를 이용하여 많이 사용했었다고 한다..

 

 

● 클래스 선언

<script>
    // 클래스(설계도) 선언
    class Car {
        // 필드 (자바스크립트에서 필드 선언은 따로 없다)
        // 생성자(필드 생성과 초기화)
        constructor(){	// 자바스크립트에서 생성자 선언은 키워드 'constructor'로 한다.
            // 자바스크립트에선 필드 선언과 초기화를 생성자 안에서 한다.
            this.name = "그랜저";
            this.price = 50000000;
        }
        // 메소드
        start() {
            console.log(this.name + "시동을 겁니다.");
        }

        setPrice(price) {
            this.price = price;
        }
    }

    // 객체 생성
    const myCar = new Car();
    const yourCar = new Car();

    console.log(myCar.name);
    console.log(myCar.price);
    myCar.start();
    myCar.setPrice(60000000);

    // 새로운 클래스 생성
    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    }

    const me = new Person("홍길동", 30);
    const you = new Person("감자바", 27);

    console.log(me.name, me.age);
    console.log(you.name, you.age);
    me.name = "홍길남";
    me.age = "25";
    console.log(me);
</script>

 

 

● 정적 필드와 메소드 사용

<script>
    class Car {
        // 정적 필드와 초기화
        static company = "현대 자동차";

        constructor(name="그랜저", price=50000000) {
            // 인스턴스 필드와 초기화
            this.name = name;
            this.price = price;
        }

        // 정적 메소드 선언
        static setCompany(company) {
            return Car.company = company;
        }

        static getCompany() {
            return Car.company;	// 정적 필드는 클래스 이름으로 접근!
        }

        // 인스턴스 메소드 선언
        setPrice(price) {
            this.price = price;
        }
        getPrice() {
            return this.price;
        }
    }

    // 클래스 사용
    console.log(Car.company);
    Car.setCompany("KIA 자동차");
    console.log(Car.getCompany);

    // 인스턴스 멤버 사용
    const myCar = new Car("포르쉐", 280000000);
    console.log(myCar.name, myCar.price);
    myCar.setPrice(300000000)
    console.log(myCar.name, myCar.getPrice());
</script>

→ 정적 메소드와 필드는 클래스로 바로 접근이 가능하다. (객체를 이용하지 않아도 됨)

 

 

● 자바스크립트에서의 상속

<script>
    class Car {
        constructor(name="그랜저", price=50000000) {
            this.name = name;
            this.price = price;
        }

        start() {
            console.log(this.name + " 시동을 겁니다.");
        }
        setPrice(price) {
            this.price = price;
        }
    }

    // 상속
    class SportsCar extends Car {
        constructor(name="포르쉐", price=250000000, cc=3000) {
            super(name, price);
            this.cc = cc;
        }
        fastRun() {
            console.log("빠르게 달립니다.");
        }
        // start() 메소드 재정의
        start() {
            console.log(this.name + " 덜그럭 거립니다.");
        }
    }

    // 자식 객체 생성
    const myCar = new SportsCar("람보르기니", 500000000, 6000);
    console.log(myCar.name);
    console.log(myCar.price);
    console.log(myCar.cc);

    myCar.start();
    myCar.setPrice(600000000);
    console.log(myCar.price)
    myCar.fastRun();
</script>

→ 자바에서 배운 것과 같이 super() 로 부모 생성자를 상속받을 수 있고, 메소드 상속과 메소드 재정의가 가능하다.

 

Vue.js에서는 Getter와 Setter, 생성자 함수, 클래스 선언, 정적 필드와 메소드, 상속의 내용은 거의 쓰지 않는다..
우리 교육 과정에서는 위의 과정은 거의 쓰지 않는다. 
하지만, 복습할 시간이 충분하다면 해야한다!

 

● 구조분해할당 ★중요

구조분해(destructuring)할당(assignment)
변수 = 값; → 할당

<script>
    // 객체 생성
    const board = {
        bno: 1,
        title: "오늘은 월요일",
        content: "날씨가 좋네요. 자바스크립트 공부해야겠어요.",
        writer: "홍길동"
    };
    // 우리가 앞 시간에 배운 익숙한 문법
    var bno = board.bno;
    console.log(bno);
    
    // 구조분해 할당 --> 변수의 값을 몇개만 가져오고 싶을 때 
    var {bno} = board;
    console.log(bno);
    console.log({bno});
    console.log("");
    /* var title = board.title;
    var content = board.content; */
    
    // 구조분해 할당
    var {title, content} = board;
    console.log(title, content);
    console.log("");
    // ----------------------------------------------
    function fun1({title}){
        console.log(title);
    }
    fun1(board);	// var {title} = board;
    console.log("");
    // ----------------------------------------------
    // ...rest: 나머지 속성은 객체로 감싸서 만든다 
    var {writer, ...rest} = board;
    console.log(writer);
    console.log(rest);	// 나머지 board의 속성들 값이 rest에 들어가게 된다.
    console.log("");
    // ----------------------------------------------
    // ...은 나머지는 구조분해해서 그대로 넣어라
    var newBoard1 = {...board, bno:2, title:"벚꽃이 좋아요.", hitcount:1};  // 다시 초기화한 속성은 빼고, 나머지 값은 그대로 놔둔다. **(많이 쓰임)
    console.log(newBoard1);	// hitcount는 조회수?
    console.log("");
    // ----------------------------------------------
    // 리턴값이 객체일 경우에는 ()로 감싸야 한다.
    var newBoard2 = (obj) => {
        return {...obj, hitcount:1};
    };
    var newBoard3 = obj => ( {...obj, hitcount:1} );
    console.log(newBoard2(board));
    console.log(newBoard3(board));
</script>

 

 

● String

이스케이프 문자는 자바와 같다.

주요 메소드들을 알아놓자.

<script>
    var data = "123456-7890123";
    console.log("전체 문자수: ", data.length);	// 14
    console.log("성별 숫자: ", data.charAt(7));	// 1
    console.log("포함 여부: ", data.includes("456"));	// true
    console.log("포함 여부: ", data.indexOf("7890123"));	// 8
    console.log("포함 여부: ", data.indexOf("12345678"));  // 해당 문자열이 없다면 -1 리턴
    // match() --> 정규식 표현 때 나옴
    // replace(), substring(), split(), substr(), slice()
    console.log("추출하기: ", data.slice(0, 6));	// 123456
    console.log("추출하기: ", data.slice(7));	// 7890123
    console.log("토큰배열: ", data.split("-"));
    console.log("추출하기: ", data.substr(0, 6));	// 123456
    console.log("추출하기: ", data.substr(7));	// 7890123
    console.log("추출하기: ", data.substring(0, 6));	// 123456
    console.log("추출하기: ", data.substring(7));	// 7890123
</script>

 

 

● Date (시간 표현하기)

<script>
    // 브라우저가 실행하는 컴퓨터의 현재 날짜 및 시간 객체 얻기
    const now = new Date();
    // 정보 얻기
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const hour = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    console.log(year, month, date, hour, minutes, seconds);	// 2024 4 1 15 32 56
    console.log(now);	// Mon Apr 01 2024 15:32:56 GMT+0900 (한국 표준시)
    console.log(now.toLocaleDateString());	// 2024. 4. 1.
</script>

→ 잘 활용해보자. 주로 쓰이는 메소드들을 써보았다.

 

 

● Math

<script>
    // Math에 있는 정적 메소드
    console.log(Math.ceil(2.4));	// 3
    console.log(Math.floor(2.7));	// 2
    console.log(Math.round(2.7));	// 3
    console.log(Math.pow(2, 3));	// 8
    console.log("");
    // 주사위 눈 나타내기
    var num = Math.ceil(Math.random() * 6);
    console.log("뽑은 눈: ", num);
</script>

→ 자바에서의 메소드와 개념이 같고, pow() 메소드 기억하기!

 

 

● 전역 메소드와 속성

parseFloat(), parseInt() 메소드 기억하자. String 형식을 실수, 정수로 바꿔주는 메소드.

<script>
    var data1 = "10";
    var num1 = parseInt(data1);	// 문자열 타입 --> 정수 타입 변환
    console.log("num1 :", num1, typeof(num1));
    console.log("");
    var data2 = "10.5";
    var num2 = parseFloat(data2);	// 문자열 타입 --> 실수 타입 변환
    console.log("num2: ", num2, typeof(num2));
</script>

 

 

● JSON

JavaScript Object Nostation (자바스크립트 객체 표기) : 데이터 문자열 포멧

 

ex)

{ "속성명":값, "속성명":값, ... } ☞ 반드시 속성명은 큰 따옴표(" ")로 감싸주어야 한다.

 

값의 타입 → 규칙이 있다.

숫자일 경우: {"price":3000}, {"tall":170.5}

문자열일 경우: {"name":"홍길동"} → 문자열일 경우 반드시 큰 따옴표로 감싸야됨.

객체일 경우: {"data": {"bno":1, "title":"제목"} }

배열일 경우: {"hobby": ["음악", "게임", "여행"] } → 배열은 대괄호를 이용

 

★ 용도

: 프론트엔드와 백엔드 사이의 데이터 전달을 위해서 사용 (서버와 클라이언트가 데이터를 주고 받을 때)

cf) 자바스크립트 객체와 JSON(문자열)은 다른 것이다.

<script>
    // 자바스크립트를 JSON 문자열로 변환시키기 ------------------------------------
    const person = {
            name: "홍길동",
            nation: '한국',
            age: 25,
            family: {father:"홍삼원", mather:'정관순'},
            hobby: ["영화", '게임']
    };
    console.log(person);

    const strJson = JSON.stringify(person);	// person 객체를 JSON형식으로 바꿈
    console.log(strJson);
    console.log("");

    // JSON 문자열을 자바스크립트로 변환시키기 ------------------------------------
    const person2 = JSON.parse(strJson);
    console.log(person2);
</script>

→ stringify() 메소드로 JSON 형식으로 바꾸어주고, JSON 형식을 parse() 메소드로 자바스크립트 형식으로 변환

 

cf) https://kwaktaem.tistory.com/134

 

 

● 정규표현식

어떠한 문자열이 우리가 원하는 포멧형식으로 되어있느냐를 확인할 수 있다.

 

휴대폰 번호와 이메일 유효성 검사 코드의 예시

<script>
    // 정규 표현식 작성 방법
    //  시작:/^ 끝:$/ 
    var tel = "010-1234-1234-123";
    const pattern = /(010|011)-\d{3,4}-\d{4}/;	// tel = "010-1234-1234-123"인 경우에도 true가 나온다. 연달아서 적용되기 때문..
    const pattern2 = /^(010|011)-\d{3,4}-\d{4}$/;  // 꺽쇠(^)와 달러($)로 시작과 끝을 정해준다. 
    var result = pattern.test(tel);	// true 또는 false를 반환  // 절대 큰 따옴표("")로 묶어주면 안된다. 문자열이 되어버린다.
    var result2 = pattern2.test(tel);
    console.log(result);
    console.log(result2);

    // 이메일 유효성 검사
    var email = "fall@naver.com";
    const emailPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    console.log(emailPattern.test(email));
</script>

 

 

※ 정리

여태 공부했었던 자바문법과 흡사하나 다른 부분도 있다. 따라서 매우 헷갈린다...

프로젝트를 진행하며 금방 익숙해질 것이라 생각한다.