WEEK #2 프론트엔드 수업

json

https://www.json.org/json-en.html

Json validator

https://jsonformatter.curiousconcept.com/

객체지향 프로그래밍이란?

객체 : 자신의 속성을 가지고 있고 다른것과 식별 가능한 것. 바라보는 대상. ex) 손님
객체지향 프로그래밍(OOP) : 손님이 뭔갈 가지고 행동하는 것? 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것. 객체가 기본 단위가 됨.

java는 클래스가 없으면 코드를 짤 수 없음.
javascript는 클래스가 없어도 코드를 짤 수 있으므로 객체지향언어는 아님.

객체가 너무 복잡하면 하위 객체로 나눠도 됨.

renderview -> public method(화면에 노출함)

객체

속성과 메소드를 가짐.
속성이 메소드를 바꿔줌.

scope는 선언할 때 결정
this는 실행할 때 결정

이벤트 위임 <- 버블링, 이벤트 전파

싱글 파일
싱글 페이지 어플리케이션 ex. 지도

nodejs는 commonJS
vanilla javascript ES Module(ESM)

TODO store model

{
  "columns": [
    {
      "title": "aa",
      "cards": [
        {
          "title": "github 공부하기",
          "details": ["input tag 연습"],
          "footer": "author by web"
        }
      ]
    }
  ],
  "history": [{
    "name" : "sam",
    "profile" : "img",
    "action" : "do sth",
    "time"  : "1 min ago"
  }]
}

class Todo{
    constructor(initialTodo){
        this.todos = [];
    }
    addTodo(item){
        this.todos = [...this.todos, item];
        this._log('ADD_TODO ${item}')
    }

    _log(msg){
        console.log('{event} :', msg);
    }
}

const todo = new Todo();
todo.addTodo("sd");

const healthObj = {
    name : "runnign",
    lastTime : "PM 10 : 12",
    showHealth(){
        console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
    }
}

healthObj.showHealth();

layout

• grid : 잘 사용하진 않지만 사용하긴 함.

cache

• 서버에서 데이터 가져오지 않고 로컬에 저장해놨다가 보여줌. 빠름.

맨앞에 대문자 쓰는 건 클래스에서만 사용하고 함수에서는 사용하지 않음.

표현식과 선언식
this, 호이스팅 관련 -> 면접용 학습 키워드

prototype의 장점 알기!! -> 메모리관련

가급적 코드를 함수 안에 넣기 -> 즉시 실행되지 않도록
즉시실행함수 : 정의되자마자 즉시 실행되는 함수

entry point 기준으로 script src 정리
script src 하나만 쓸 수 있으면 좋음.

css merge할 수 있는 도구가 있음.

vanilla js : template literal

alert는 현업에서 잘 안씀.