Percel : 간단한 서버

개발자도구 네트워크 탭 : API 데이터, JS 파일 등 확인 가능

hash : URL에 북마크 지정해 주는것

hashchange 이벤트 리스너 : hash 뒤의 url 변경감지

이벤트리스너, location객체는 브라우저가 제공해주는것

location 객체 : URL 과 관련된 정보들을 제공해줍니다.

location.hash : hash URL 문자열로 반환 // #login, #join, 등

string.substring(), string.replace()

• string.substring() : 문자열을 시작점, 종료점 지정하여 잘라서 반환해줍니다.
• string.replace() : 첫 번째 인자로 타겟 문자열, 두 번째 인자로 바꾸고싶은 결과 문자열을 줘서 사용합니다.

AJAX (Asynchronous JavaScript And XML)

• 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것입니다.
• JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다.
• AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다.
• 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.
  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고 작업을 수행

ajax.open(method: string, url: string, async: boolean)

• 첫번째 파라미터
  • HTTP 요구 방식 : GET, POST, HEAD 등 중에 하나
• 두번째 파라미터
  • 요구하고자하는 URL
  • 다른 도메인으로 요청시에 CORS로 인해 오류가 발생할 수 있음
• 세번째 파라미터 (생략 가능)
  • 요구가 비동기식으로 수행될 지를 결정합니다.
  • true(기본값)
  • false 로 설정된 경우 동기적으로 작동합니다. (send() 함수에서 서버로부터 응답이 올 때까지 기다림)

ajax.send()

• ajax.open() 에서 GET 방식으로 API 불러올때 동기식일 경우 ajax.open() 코드 아래에 입력해줘야 합니다.

JSON.parse(ajax.response)

• JS파일 상단에 const ajax = new XMLHttpRequest() 와 같이 정의하고 ajax.open(method: string, url: string, async: boolean), ajax.send() 를 사용합니다.
• 위와 같이 사용하면 ajax.response 에는 해당 url의 데이터를 JSON 형태로 가져오게 됩니다.
• JSON 형태를 JS에서 사용할 수 있는 데이터(객체)로 변환(parse) 해주기 위해서 JSON.parse(ajax.response) 를 사용합니다.
• 변환(parse) 한 데이터는 대부분 변수에 보관하여 사용합니다.

JS 객체의 다형성

• 부모 클래스를 상속받는 각 자식 클래스마다 메서드, 속성을 다양하게 만들수 있는 속성

• 예시

  // 부모 클래스
  
  class Grub {
    constructor(age, color, food) {
    this.age = 0;
    this.color = "pink";
    this.food = "jelly";
    }
  
    eat() {
      return `Mmmmmmmmm ${this.food}`;
    }
  }
  
   // 자식 클래스
  
  class Bee extends Grub {
    constructor(age, color, food, job) {
      super(age, color, food);
      this.age = 5;
      this.color = "yellow";
  
      this.job = "Keep on growing";
    }
    
    eat() {
      return 'Mmmmmmmmm great';
    }
  }
  
  const grub = new Grub();
  const bee = new Bee();
  
  console.log(grub.eat());  // 'Mmmmmmmmm jelly'
  console.log(bee.eat());   // 'Mmmmmmmmm great'

  위와 같이 class Bee 는 class Grub 을 상속 받지만 메서드 eat() 은 부모 클래스와 다르게 만들어 줄 수 있습니다.
  이와 같은 속성을 이용해서 모든 자식 클래스의 메서드는 다형성을 가질 수 있습니다.

JS의 프로토타입 : 클래스들의 연결을 위해서 나옴, 인스턴스의 __proto__ 속성 사용하여 가장 가까운 부모 클래스부터 최상위 부모 클래스까지 확인할 수 있습니다.

배열의 메서드 등의 공식문서 표기가 Array.prototype.push() 등으로 되어 있는 것은 상속 때문에 있는 것입니다. (꼭 표기할 필요가 있기 때문에)

• 매개변수의 갯수 파악하는 함수
• 예시

  function test(a, b){
     console.log(arguments.length);
   }
   
   test(1); // 1
   test(1, 2); // 2
   test(1, 2, 3, 4, 5) // 5
   ...