JavaScript 기초 3

2023-07-04

JavaScript 2 글을 보시고 싶으신 분은 아래 링크를 클릭해주세요!

2023.07.03 - [LG 헬로비전 DX DATA SCHOOL/Frontend] - JavaScript 기초 2

JavaScript 기초 2

 

정말 무더운 여름날입니다..

오늘 부터 일주일간은 장마라고 하는데, 끝나면 또 찾아올 폭염이 두렵습니다..

 

오늘도 더위와 졸림을 이겨내고 교육장으로 쑝~

항상 힘들지만, 미래의 나에게 미안하지 않게 오늘도 열심히 살아보려 하는것 같습니다

모두들 화이팅~!~!

---

 

지금까지 객체지향까지의 이야기를 진행해 보았습니다.

 

함수와 메서드의 차이는?? 리시버의 유무이다. 이 이야기는 오늘 진행해 보겠습니다.

 

load balance, ingress, log stash(pod의 메인)-> 데이터 이동의 큰 문. -> 여기만 수집하면 데이터 다 모음  

 

JavaScript

 

1. 사용자 정의 객체

 

1.1 객체생성 방법

• 사용자 정의 객체 생성 - var(let, const) 객체명 = {속성이름:데이터, 속성이름:데이터….}
• Built-in Object 나 직접 생성자를 만든 경우의 객체 생성 - var 객체명 = 생성자메서드(매개변수)
• var 대신에 let 이나 const 사용 가능
• 똑같은 모양의 객체를 만들시에는 배열을 만들어서 생성. -> [ {     },{      } ]
• 똑같은 모양이 아니여도 객체는 묶을 수 있다.

 

1.2 객체의 요소 접근

 

• 객체명[속성이름] 또는 객체명.속성이름
• 값 수정(upsert : 속성이 없으면 생성(insert), 이미 있으면 업데이트(update)) -> 객체명.속성이름 = (바꿀)데이터
• delete 객체이름.속성이름 -> 삭제

 

1.2.1 객체 생성 및 접근 출력 코드

 

        let ar = [{name : "adam", job : "singer"}, {name : "jessica", job : "actress"},  {name : "svng", job : "actor"}]

       

        for(i in ar){ // 순차적으로 배열 ar 속 name, job 객체를 출력해보기

 

            document.write(ar[i].name + " "+ ar[i].job +"<br />")

 

           //시작점은 BOF(Begin OF File) 끝점은 EOF(End Of File)

        }

        i = parseInt(i) + 1 //i는 현재 문자열로 취급되어있어서 정수로 변환

 

        document.write("객체의 개수는 : "+ i)

 

출력 : 

 

adam, singer
jessica, actress
svng, actor
객체의 개수는 : 3

 

• [ ] :  배열/ 리스트,  { } : 객체

 

 

1.3 function - method

 

• 속성 안에 메서드를 작성하거나 대입하는 것이 가능
• Function : 전역 / Method : 리시버를 통해서만 접근이 가능, 객체 자신을 가리키는 포인터가 존재함. -> this
• Function, Method 둘다 하나의 동적인 데이터임.
• 리시버 : Class(Static) / Instance
• 객체를 통한 내부 메서드 호출 -> 객체.메서드(매개변수)

 

1.3.1 function - method 호출 코드 예시

 

       

        let obj = {name : "adam", disp : function(this가 숨어있음){

 

            document.write(this.name);

 

            //함수에서 나를 의미하는 것 = this => self와 같은 의미, this 대신 obj를 쓸수 없음

 

            //상위 클래스 = super

        }}

        obj.disp() //메서드 호출

 

1.4 동일한 모양의 instance를 편리하게 생성하는 방법

 

• Class의 일부로 Constructor(생성자)가 있다.

 

 

1.4.1 생성자 호출

 

• new 생성자 이름 (매개변수) => new는 Heap에 동적으로 할당시키는 역할 / 이름 = null => 해제시키는 역할
• stack은 실행을 위해 임시적으로 기억하는 영역, static 영역 -> 지워지지 않는 영역, heap은 동적으로 할당 및 해제 가능 영역

-> let obj = new 생성자()  ----------  파이썬은 reference 카운트로 메모리 할당을 결정, js는 이름으로 메모리 할당.

 

 

1.4.2 생성자 활용 예시 코드

 

        // 1. 생성자 없는 배열과 disp

        let ar = [

            {name : "adam", disp : function(){console.log(this.name)}},

            {name : "jessica", disp : function(){console.log(this.name)}}

        //생성자가 없어 함수를 두번 써야하는 메모리 낭비 발생

        ]

        for(idx in ar){

            ar[idx].disp();

        }

        //2. 생성자가 있는 배열과 disp

        //생성자 - 함수 안에서 this 를 사용했기 때문에 생성자입니다.

        let person = function(name){

            this.name = name;

            this.disp = function(){console.log(this.name)}

        }

        //일반 함수는 this를 사용할 수 없다. 

        //매서드는 다시 만들지 않고 속성만 설정해서 인스턴스를 생성

        //생성자를 이용해서 인스턴스를 만들 때는 new와 함께 호출해야 한다. 

        //heap 이라는 공간에 인스턴스를 생성하게 된다.       

        ar = [new person("adam"), new person("jessica")]

        for(idx in ar){

            ar[idx].disp();

        }

        //미리 생성한 disp를 통해 메모리 낭비를 줄일수 있다.

 

위와 같이 생성자를 사용하는 이유를 알 수 있습니다.

그 이유는 함수를 사용할 때 동일한 함수라면, 메모리 사용을 줄이기 위함이라고 할 수 있습니다.

 

 

1.4.3 클래스를 만들어 생성하는 방법

 

• class : 동일한 인스턴스를 만들기 위한 모형

-> let 클래스 이름 = class {

                      constructor(매개변수){

                                 내용

                       }

                       매서드 나열

    }

 

• 클래스를 이용해서 인스턴스 생성

-> 클래스 이름(매개변수); // 클래스 이름을 적지만 실제로는 constructor가 호출됩니다.

 

 

1.4.4 클래스로 인스턴스를 생성하는 방법 예시 코드

 

        //클래스를 생성하고 인스턴스 생성

        //클래스 이름은 관습적으로 대문자를 사용

        let Member = class{

            //생성자

            constructor(name){

                this.name = name;

            }

            //클래스 안에 메서드를 만들 때는 let 이나 function 생략이 가능합니다.

            disp(){

                console.log(this.name);

            }

        }

        ar = [new Member("lg"), new Member("hyundai")];

        for(idx in ar){

            ar[idx].disp()

        }

       

• Member라는 모델하우스(아파트 사기 전에, 아파트가 어떻게 생겼는지 알 수 있는 역할인 것 처럼)를 보면, ar 배열 내에, 각 정보는 name : "lg", name : "hyundai" 로 들어가는 것을 알 수 있다.
• 결국에 class는 스키마, 테이블(릴레이션)과 같은 의미이고, 이를 설계하는 것을 모델링이라고 한다.
• 데이터 전송 시, 데이터 이름이 필요하고, 데이터를 설명할 메타데이터가 필요하다.

 

1.4.5 접근자 메서드(getter 와 setter)

 

- getter : 속성을 리턴하는 메서드

• 이름은 get속성이름 으로 하는 것이 일반적
• 속성 이름의 첫글자는 대문자로 한다.
• 매개변수는 없고, 속성을 리턴하기만 하면 된다.
• 속성의 자료형이 boolean 인 경우는 get 대신에 is를 사용하기도 합니다.

 

- setter : 속성의 값을 수정하는 메서드

• 이름은 set속성이름 으로 하는 것이 일반적
• 속성 이름의 첫글자는 대문자로 한다.
• 매개변수는 1개이고, 매개변수의 값을 속성에 대입하기만 하면 된다.
• 내용을 작성하는 경우가 있는데 대부분 이 경우는 유효성 검사를 하기 위한 것입니다.

 

1.4.6 getter와 setter 예시코드

 

        //getter 와 setter 만들기

        let Person = class{

            constructor(name, score){

                this.name = name;

                this.score = score;

            }

            //출력하는 메서드

            disp(){

                document.write(this.name + ":" + this.score);

           

            }

            //getter

            getName(){

                return this.name;

            }

            //stter

            setName(name){

                this.name = name;

            }

            //getter

            getScore(){

                return this.score;

            }

            //stter를 통한 유효성 검사

            setScore(score){

                //올바른 데이터인지 확인해서 올바르지 않으면 대입하지 않음

                //속성

                if(score < 0 || score > 100){

                    alert("적절하지 않은 점수");

                    return;

        }

    }

}

        let obj = new Person("svng",90)

        obj.setScore(15); // 조건이 맞지 않는 경우, 입력받은 점수를 대입하지 않음.

        obj.disp();

        document.write("<br />");

        document.write(obj.getScore())

 

1.4.7 static 메서드

 

• 인스턴스가 아니라 클래스가 호출할 수 있는 메서드
• this(인스턴스를 가리키는 숨겨진 포인터)를 사용할 수 없음
• 함수 이름 앞에 static만 기재하면 됨

 

1.5 상속(inheritance)

 

• sub(하위) class 에 공통적으로 사용되는 속성을 super(상위) class에 만들어 해당 속성을 부여하는 것
• class subClass extends superclass { }
• 같은 기능을 하는 것은 같은 이름을 그대로 써야한다. (overriding)

 

1.5.1 Super, Sub 클래스

 

 class Super{

            method(){

                console.log("상위 클래스의 메서드");

            }

        //Super로 부터 상속받는 Sub 클래스

        }

        class Sub extends Super{

        }

       

        let obj = new Sub();

       

        //Sub 에는 method 가 없지만, 상속을 받아서 호출이 가능하다.

       

        obj.method();

 

1.5.2 용어

 

• 상속 관계를 객체 지향에서는 is a 관계라고 한다.
• 상위 클래스 : super 나 base 클래스라고도 하는데 상속하는 클래스
• 하위 클래스 : sub 또는 derived 클래스라고도 하는데 상속받는 클래스
• 단일 상속 : 하나의 클래스로부터 상속받는 것
• 다중 상속 : 2개 이상의 클래스로부터 상속받는 것

 

1.5.3 overriding(재정의)

 

• 상위 클래스에 존재하는 메서드를 하위 클래스에서 다시 정의하는 것
• 추상 메서드(이름만 존재하는 메서드)를 다시 만드는 것은 재정의가 아니고 구현(Implementation)
• 재정의의 목적은 기능 추가임으로, 새로운 기능을 만든다면 이름을 다르게 해야 함.

상속 해제(파괴)는 하위 메모리를 먼저 해제하고 상위의 메모리를 해제해야한다.

 

 

1.5.4 Super

 

하위 클래스의 메서드에서 상위 클래스의 메서드를 호출할 때는 super.메서드이름()

 

 

1.5.5 Super와 overriding(재정의) 코드

 

       

        class Super{

            method(){

                console.log("상위 클래스의 메서드");

            }

        //Super로 부터 상속받는 Sub 클래스

        }

        class Sub extends Super{

            method(){

                super.method() //상위 클래스의 method를 호출

                console.log("하위 클래스의 메서드를 다시 만듬") //overriding

            }

        }

       

1.5.6 Built-In Object

 

: javascript가 제공하는 객체

 

- 종류

• 일반 객체 : 프로그래밍에 필요한 객체
• BOM(Browser Object Model) : 브라우저와 관련된 객체
• DOM(Document Object Model) : body 태그와 관련된 객체

 

- 일반 객체

• Object : 최상위 객체
• 자바스크립트의 모든 객체는 이 객체를 상속받음 -> 필요없는 기능까지 상속받아야 하는 번거로움.

 

- Math 객체

: 수학과 관련된 기능을 제공하는 객체

• 이 객체는 인스턴스를 생성하지 않고 사용한다. (Math.속성 또는 메서드이름()의 형태로 사용, java의 Math 클래스와 동일하게 동작
• Math.rand()를 호출하면 0.0 ~ 1.0 사이의 숫자 중 랜덤한 값을 리턴

 

- string 객체

• string은 변경할 수 없는 문자열을 저장하기 때문에 모든 메서드가 작업 후에 리턴한다.
• String.toUpperCase("Hello") -> 원본은 수정이 안되고, 수정한 복사본을 return 해준다.
• substring : 위치를 기반으로 쪼개기. (몇 번째?)

(문자열 변수 이름은 str을 안쓰는 것을 추천)

 

- Array 객체

: 배열 관련된 함수를 가진 객체.

 

배열을 가지고 해봐야 하는 일

• 배열의 데이터 개수 파악(length)
• 배열의 순회(for ~ in)
• 배열의 데이터 변환(map)
• 배열에서 조건에 맞는 데이터를 추출(filter)
• 배열의 데이터를 정렬(sort) 

정렬 :

오름차순(ascending - 기본) : 작은 것에서 큰 것 순으로 나열/ 내림차순 (descending) : 큰 것에서 작은 것 순으로 나열

quick sort 나 merge sort 정도는 알고 있으면 면접에 도움이 됨.

 

1.5.7 배열 관련 함수를 가진 객체 코드

        let ar2 = [23, 39, 164, 24, 44]

        //데이터 개수 파악

        console.log(ar2.length);

        //데이터 순회

        for(idx in ar2){

            console.log(ar2[idx])

        }

        //데이터를 순회하면서 작업하기 - forEach

        //배열을 순회하면 데이터를 하나씩 접근하는 함수

        //첫번째는 데이터 두번째는 인데스 세번재는 배열

        ar2.forEach((element, index, array) => {

            console.log(element)

        })

       

        //map은 사용하는 형태는 forEach와 동일한데 함수가 데이터를 리턴해야 한다.

        //리턴한 데이터를 모아서 다시 배열로 만들어서 리턴합니다.

        let r = ar2.map((element, index, array) => {

            return element + 1

        });

        console.log(r)

        //filter는 map과 비슷한데, 결과값이 true / false 만 나와야 함.

        let r1 = ar2.filter((element, index, array) => {

            return element % 2 == 1 //filter할 조건

        });

        console.log(r1)

        //gender가 남인 데이터 추출

        let list = [

            {name : "kim", gender : "남", age : 23},

            {name : "lee", gender : "여", age : 19},

            {name : "park", gender : "남", age : 22}

        ]

        let r2 = list.filter((element, index, array) => {

            return element.gender == "남";

        })

        console.log(r2)

        //map 과 filter가 무엇인지는 잊지 말자!

        //sort 데이터를 순서대로 나열

        //정렬은 sort 함수를 호출하면 됩니다. 기본적으로 오름차순 정렬을 합니다.

        //단 크기 비교가 가능한 데이터만 정렬을 수행할 수 있다.

        //sort는 호출한 배열의 데이터를 직접 호출한다.

        //자리수가 다르면 정렬이 제대로 되지 않음..

        //정렬할 때 크기비교 함수를 대입 받아서 사용자 정의 정렬을 지원

        //함수의 모양은 매개변수가 2개이고, 정수를 return 해야 한다.

        ar2.sort((left, right) => {

            return left - right;

        })//내림차순은 right - left 하면 됨!

        console.log(ar2)

 

 

sort 시 앞자리 부터 크기 비교를 하기 때문에 23, 44, 167 에서 167이 가장 먼저 나오게 된다.

따라서 이를 해결하기 위해서는 다음의 함수가 필요하다

• 앞이 뒤보다 크면 : 1
• 앞이 뒤와같으면 : 0
• 앞이 뒤보다 작으면 : -1

이는 left - right 를 통해 바로 해결

 

1.5.8 BOM(Browser Object Model)

브라우저와 관련된 객체

• window나 navigator 객체를 많이 이용
• window 객체 안에는 내장 함수와 timer 등이 존재
• navigator 객체의 userAgent 속성에는 접속한 운영체제와 브라우저를 확인할 수 있는 문자열이 포함되어 있다.
• 접속한 기기를 알고자 할 때 navigator.userAgent를 확인

 

1.5.9 DOM(Document Object Model)

• <body>에 만든 요소를 찾아서 사용
• DOM을 가져올 때는 document.getElementById(아이디)로 찾아온다.

---

 

2. 비동기 처리

• 동기 : 순서대로 하나씩 처리
• 비동기 : 작업 수행 중에 다른 작업을 수행할 수 있도록 하는 것
• ajax(Asynchronous Javascript XML) : 비동기적으로 XML을 처리하는 JavaScript => 비동기적으로 서버의 데이터를 받아서 처리하는 기술