0817 TIL

객체의 활용

이번시간에는 열어놨던 문을 닫아놓는 시간입니다. 객체의 소비자가 아니라 생성자가 되어봅시다.
객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 , 를 찍습니다.

let Links = {
  setColor: function (color) {
    let alist = document.querySelectorAll('a');
    let i = 0;
    while (i < alist.length) {
      alist[i].style.color = color;
      i += 1;
    }
  }
}

let Body = {
  setColor: function (color) {
    document.querySelector('body').style.color = color;
  },
  setBackgroundColor: function (color) {
    document.querySelector('body').style.backgroundColor = color;
  }
}

• 우리가 지금까지 사용해왔던 document.querySeletor('body')에서 document는 알고보니 객체였고, querySeletor('body') 는 함수이면서 객체에 소속되어있었기때문에 메소드입니다.

  궁금한 것 알기! 👀

1. 데이터를 넣는 상자인 배열을 넣는 상자인 함수를 넣는 상자인 객체. 배열<함수<객체 이 순서.

2. 앞 강의에서 객체 안에 변수(prorerty)를 정의할 때는 " " 로 묶어서 정의("programmer")하고 함수(method)를 정의할 때는 " " 없이 정의(setColor)했는데 그 이유가 무엇인지?
   - 프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정한다. 프로퍼티 키에 문자열이나 symbol값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다. 프로퍼티 키는 문자열이므로 따옴표 ( ' ' 또는 " " )를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다.
   예) 프로퍼티 키 first-name 에는 반드시 따옴표를 사용해야 하지만 first_name에는 생략 가능하다. first-name은 자바스크립트에서 사용가능한 유요한 이름이 아니라 '-' 연산자가 있는 표현식이기 때문이다.

3. 왜 객체를 Links 와 Body 두개로 나누었는가?
   - 강의에서는 Links에 하나의 링크 관련 메소드가 하나만 들어가있지만 나중에 링크 관련 메소드를 더 추가할 수도 있기때문에 미리 묶어서 정리해 둔 것이라고 생각하면 된다.

4. 기존 코드는 객체를 따로 만들지 않은 단순함수(function)를 만들어 쓰는 방식이고
   수정하는 부분은 Body라는 객체를 만들어주고 객체 안의 functiondmf 포함시켜 Method로 사용한다는 개념이다.

5. 이렇게 하는 이유가 무엇인지?
   - 코드를 직관적으로 만들기 위함입니다.
   Body tag의[body], 배경색깔[.setbackgroundcolor]을 흰색[white]으로 설정해야지!
   -> Body.setBackgroundColor('white') 이런식으로.

파일로 쪼개서 정리 정돈하기

파일이 많아지면 그만큼 브라우저의 접속량이 늘어서 좋지않다.
하지만 일단 한 번 접속한 파일은 컴퓨터에 브라우저가 미리 저장해놓는다. (cache캐시)
다음 접속에선 네트워크를 통하지 않고 다운로드 받은 파일을 불러온다.
네트워크 트래픽도 사용자 입장에선 줄고, 서버 입장에선 비용도 절감할 수 있다.
그래서 실질적으로 파일로 쪼개서 저장하는 게, 코딩을 정리정돈하면서 작성할 수도 있고
웹페이지에서 자신이 만든 무언가를 빠르게 로딩할 수 있다.

js 파일을 만들어서 html 파일에 붙여넣는 것이 좋다.
그래야지 나중에 수정해도 일괄 수정이 된다.

html에서 javascript 불러오는 법: <script src= "sample.js"></script>
html에서 css 불러오는 법: link

라이브러리와 프레임워크

처음부터 끝까지 만드는 경우는 없다. 누군가 만들어놓은 것을 소비해가면서 동시에 생산한다.
라이브러리와 프레임워크 둘 다 우리가 소비하는 무언가이지만 뉘앙스가 조금 다르다.

라이브러리 - 정리정돈이 잘 된 '것'이다. 내가 필요한 걸 찾아서 잘 가져오도록 도와준다. 내가 필요한 걸 골라담는 경우
프레임워크 - 만들고자하는 테마나 의도에 따라 공통적으로, 반본적으로 필요해지는 무언가를 미리 만들어놓은 '곳'이다. 반제품과 같다고 생각하면 된다. 우리가 들어가는 장소라고 생각하면 편하다.

둘 다 다른 사람과 협력하는 모델이다.

예를 들어, 집을 만든다고 하면
라이브러리는 자재랑 가구등 집에 필요한 재료이고
프레임워크는 이미 집의 수도나 뼈대같은 기본적인 구조들이 있어서, 입맛대로 꾸미기만 하면 되는 것이다.

jQuery는 코드를 간단하게 정리해주는 라이브러리