객체지향 / prototype /JSON / font

2022 / 8 / 10 수

 

• 객체지향
• prototype
• JSON
• font

---

✔ 객체지향

new 연산자 : heap에 object를 할당하고 object의 ref값을 리턴하는 연산자

 

const a = new date();

생성자 : object를 초기화하는 function

1. 기본 생성자 ( default constructor )

- parameter X, js에서 기본 제공, 자동호출

2. 비기본 생성자 ( overloaded construstor)

- parameter O, 기본제공이 아닐 수도 있다! 

 

(function(){

           

    const today = new Date(); // date (초기화할 값 넣어줘야해)

 

    console.log(today.getMonth()); // 7 : 8월을 의미 / 0이 1월

    console.log(today.getDay()); // 3 : 수요일을 의미 / 일요일부터 0

 

 })();

 

    ** Date 라는 타입의 객체를 힙에 생성하고 그 생성된 객체의 레퍼런스 값을 리턴해주는구나

        생성된 객체는 기본생성자로 초기화 되는구나를 알 수 있다.

        기본 생성자 : 객체를 초기화하는 매소드 / 개발자가 별도로 파라미터를 주지 않음.

        개발자가 별도로 파라미터를 줬을때는 기본생성자가 실행되지 않음 즉 다른 별도의 생성자가 실행됨

---

✔prototype

prototype은 객체를 이루고 있는 또 하나의 객체라고 할 수 있다.

- 특정 데이터타입의 공통적으로 사용하거나 설계상의 데이터 , function 이런 것들을 모아둔 공용 객체라고 생각하면 됨.

- 모든 오브젝트에 존재하며, 객체의 DNA 라 할수있다

 

    (function(){

 

            Number.prototype.zegop = function(){

 

                let val = this.valueOf();

 

                return val * val;

            }

 

            const a = 30;

            console.log(a.zegop()); // 결과는 900

 

            let b = 20;

            console.log(b.zegop()); // 결과는 400

 

            const c = new Number(5);

            console.log(c.zegop());  // 결과는 25

        })();

⚙️ prototype 예제

(function(){

 

            let a = [11, 22, 33, 44, 55];

 

            //console.log(a.hasData(11)); // 이렇게 넣으면 오류남

             왜? hasdata가 없으니깐! 이걸 이제 function에 넣어보자

 

            Array.prototype.hasData = function(value)

            {

               

                if ( -1 === this.indexOf(value))

                {

                    return false;

                }

                return true;

            }

 

            console.log(a.hasData(33));

 

            let b =[ ];

 

            console.log(b.hasData(77));

 

            //console.log(a.indexOf(11));

            //console.log(a.indexOf(22));

            //console.log(a.indexOf(66)); // 배열안에 없으면 -1로 나타낸다.

           

        })();

---

✔JSON

JS는 두 가지로 나뉜다.

- Primitive type

- 오브젝트 타입 - 프로토타입 모든 오브젝트에 붙어있음 function에도  array에도 

 

JSON?  -> key : value 형식

1. value 값이 3가지다. ( string / number / boolean )

2. key에는 큰따옴표 사용

 

        (function(){

 

            {

                name : "happy", // 제이슨에서 사용하는 문자열은 " " 이걸 사용.

                age : 200,

                married : false,

            }

 

        })();

---

오브젝트도 키 밸류 형식으로 되어있어서 둘이 짝짝꿍 하기 좋음

 

오브젝트 데이터를 제이슨으로 바꾸기 좋고, 제이슨 데이터를 오브젝트로 바꾸기 좋다 

 

오브젝트를 제이슨으로 바꾸는 함수

JSON.stringfy()

 

제이슨을 오브젝트로 바꾸는 함수

JSON.parse()

---

parse는 문자열을 분해(token 토큰)해서 필요한 정보로 재가공하는 처리

이러한 기능을 하는 것을 parser라고 한다.

 

check ~ ed를 token이라하며 ,

check / ed 각각 형태소라고 할 수 있음.  

도가니탕을 먹었다. 

도가니 + 탕 + 을

이런 식으로 분해하는걸 토큰이라 함. 

---

✔font

font 사용 : 웹 폰트를 이용

 

폰트를 사용하기 위해서는? 

1 서버의 신뢰성

2 라이센스 확인

3 과도한 사용은 자제하자 ( 하나하나 다 가져다 쓰면  용량 늘어남 적당하게 쓰자 , 쓰지 않는 건 과감하게 버리자 )

 

CSS 파일

@charset 'utf-8';

 

html

{

    font-family: 'Noto Sans KR', sans-serif;

}

html 파일

    <!-- 웹 폰트 데이터를 불러오자! -->

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">

   

    <!-- css를 불러와서 폰트를 적용하자! -->

    <link rel = "stylesheet" href="./0810style.css">