CORS 란? Cross-Origin-Resource-Sharing ( 교차출처 리소스 공유 정책 )

1. Origin - Protocol , Host , Port를 묶어 놓은것

   

2. SOP (Same-Origin-Policy) - 동일 출처 정책

• 동일한 출처에만 리소스를 공유할 수 있다.
• 동일 출처 정책이 없을시 해커한테 CSRF나 XSS등의 방법으로 개인정보를 탈취 당할 수 있다.
• 같은 출처의 기준
  • 두 URL의 구성요소중 Origin만 같은면 된다.
• 출처비교와 차단은 브라우저에서 한다. (server x) ```
• Origin 이 달라 전부다 차단하면 다른 출처의 리소스는 어떻게 사용 가능한가?
  • 그래서 몇가지 예외 조항을 두고 다른 출처의 리소스 요청이라도 이 조항에 해당하면 허용하기로 했는데, 그중 하나가 'CORS' 정책을 지킨 리소스 요청이다. 'CORS'는 error가 아닌 해결책이다.

3. CORS 기본 동작

   1. client에서 HTTP요청의 헤더에 Origin을 담는다.
   2. server는 응답헤더에 Access-Control-Allow-Origin을 담아 client에 보낸다.
   3. client에서 자신이 보냈던 요청의 Origin과 서버에서 보낸 Access-Control-Allow-Origin을 비교

   ** 즉 server에서 Access-Control-Allow-Origin에 허용할 출처를 기재하여 client에 응답하면 해결된다.(Test용으로 Proxy를 사용하기도 한다.)

- https 에서 프로토콜은 SSL/TLS 로 암호화 된다.
- https 프로토콜을 사용하기 위해서는 인증기관(CA)으로부터 SSL을 발급받아야한다.
*TLS- 넷스케이프는 IEFT 에 SSL 프로토콜 제어권을 넘겼고 이후에 TLS버전이 출시됨

- SSL 인증서 -

• 인증서 발급 과정 및 원리
  1. 서버의 public key 와 private key 를 생성한다.
  2. 1에서 발급받은 public key와 각종 정보를 CA에 넘긴다.
  3. 2에서 받은 정보로 SSL인증서를 발급한다.
  4. 3에서 만든 인증서를 암호화 하기위해 CA의 public key 와 private key를 생성하고 CA의 private key 로 암호화 한다.
  5. 4에서 암호화된 SSL인증서를 서버에 전달한다.

- SSL handshake -

- handshake란 서버와 클라이언트가 통신을 연결할때 서로 악수(협상)를 통한 정보를 주고받고, 신뢰 할 수 있는 서버인지, 통신할때 암호화는 어떻게 할지 등등 정하는 과정이다.
- 서버와 클라이언트가 주고받을 데이터의 암호화 알고리즘 결정 및 암호화를 위한 동일한 대칭키 얻기가 주 목적이다.

• SSL handshake 동작 원리 및 과정
  1. client에서 server로 연결시도 (Client hello)
     • client에서 통신하고 싶은 서버로 연결을 시도하는 Packet을 보낸다.
     • Packet - pack + bucket 합성어로 내부에는 Data, Version, Protocol, Header Checksum, Session id 등이 있다.

   2. server에서 client로 응답 (server hello)
    - client에서 받은 packet에 대해 서버가 응답한다. 
    - certificate packet(server의 SSL인증서 내용이 포함되어있다)도 보낸다.    

3. client에서 server의 SSL인증서 검증
    ```
    SSL인증서 검증 방법
     - client는 인증서를 발급한 인증기관의 public key를 구하고 CA의 public key를 사용하여 SSL 인증서를 복호화 한다. 복호화가 성공하면 인증서 검증완료.
    구하는 방법
     - client는 browser 또는 android에 CA의 리스트와 public key를 가지고 있다. 그래서 매번 CA에 요청이 아닌 list에서 확인해본다. 하지만 없으면 외부 인터넷을 통해 인증기관의 정보와 public key를 확보한다.
    ```

4. client에서 server로 대칭키(private key)전달
    - 이제 client에서는 server와 안전하게 데이터를 주고받기위해 데이터를 암호화 해야한다.
    - client는 암호화하기위한 대칭키를 생성하고 보안없이 서버로 옮기면 위험하기 때문에 server의 public key로 암호화 하여 넘긴다.

5. server/client SSL hand shake 끝
    - server는 client에서 전달받은 암호화된 대칭키를 server의 private key로 복호화 한다.
    - 이제 server와 client에 동일한 대칭를 가지고 있으니 통신준비가 완료된다.

과거에는 class component가 더많은 기능을 제공하여 많이 사용 했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 hook을 지원해 주어 현재는 공식 문서에서 함수형 컴포넌트와 hook을 함께 사용할 것을 권장하고 있다. 오늘은 무엇이 더 좋다 혹은 어떻게 사용한다가 아닌 사용하면서 몰랐었던 부분에 대해서 정리 할 것이다.

렌더링 된 후 props 의 불변성

class component 와 Functional component 두가지 코드를 준비해 보았다.

// functional component
function ProfilePageFunc(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

// class component
class ProfilePageClass extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

같은 기능을 두가지 방법으로 표현한 코드입니다. 하지만 두 코드를 실행시키면 미묘한 차이를 발견할 수 있다.

function Test() {
  const [userName , setUserName] = useState('Soon')

  return(
    <div>
      <label>
        <select value={userName} onChange={e => setUserName(e.target.value)}
              <option value='Soon'>Soon</option>
          <option value='Harry'>Harry</option>
          <option value='Hwang'>Hwang</option>
      </label>
        <p>
           <ProfilePageFunction user={userName} />
           <b> (function)</b>
        </p>
        <p>
           <ProfilePageClass user={userName} />
           <b> (class)</b>
        </p>
     </div>
    )
}

한번 순서에 맞게 따라해보자.

1. Follow 버튼을 누른다.
2. 3초가 지나기전에 선택한 profile 이름을 변경한다.

functional component 는 Follow 버튼을 누른 시점에 선택되어있는 userName을 알림창에 띄어준다. 하지만 class component 는 알림창을 띄우기 전에 변경한 값으로 변경이 된다. React 에서 props는 불변값인데 왜 이렇게 작동을 하는 것일까? 이것은 this는 변경가능하며 조작이 가능하기때문이다.

"this가 변경가능하고 조작이 가능하다." 라는 특징은 this 가 클래스에 존재하는 목적이기도 하다. 리액트는 시간이 지남에 따라 변경하기 때문에 render나 라이프 사이클 메소드를 호출할때 업데이트 된 값을 가져올 수 있다. 따라서 요청이 진행되고 있는 상황에서 Class component가 다시 렌더링 된다면 this.props도 바뀌게 되는 것이다.

위와같은 경우는 이벤트 헨들러와 props, state를 가진 render의 종속성을 timeout을 사용하며 그 종속관계를 끊어버려 올바른 props를 잃게 만든 것이다.

api 요청에 대한 상태관리

• Redux

  • redux는 상태관리 라이브러리다. 비동기처리목적이 아니기 때문에 redux-saga ,redux-thunk 등 미들웨어를 사용해야한다.
  • 비동기 처리시 상태관리(isLoading, error, success)상황을 관리해야한다.

• React-query

  • 상태관리를 기본옵션으로 제공한다.(https://react-query-v3.tanstack.com/reference/useQuery)

구조

• Redux
  • api 추가시 마다 Action , reducer , saga 를 구현해야한다.
  • saga에서 다른 saga에 dependency가 있고 이 구조가 복잡해지면 error를 찾기위해 연관되어 있는 saga를 찾아봐야한다.
• React-query
  • 각 api가 Query로 구성이되고 서로의 dependency는 사용하는 component 내에서 혹은 custom hooks에서 전달받고 갱신된다.
  • query key를 통해 직관적인 관리가 가능하다.

CSR , SSR 관리

• Redux + Redux-saga
  • CSR , SSR 을 전부 Redux로 관리하여 직관적이지 않다.
• Recoil + React-query
  • CSR은 Recoil로 SSR은 React-query로 관리하여 직관적이다.

Error 핸들링

• Redux
  • error 발생시 상태관리(isLoading, error, success)하는곳에서 error를 저장하고 갱신으로 인한 re-render가 되고 onError 실행
• React-query
  • error 발생시 바로 onError실행

web Architecture

크게 보면 이런 구조이다.

서버 조작을 위한 용어

• Browser
• Server
• API
• HTTP
• Ajax
• CORS
• XSS

1. Browser & Server

• Browser - 사용자가 선택한 자원(html, js, css)을 서버에 요청하고 브라우저에 표시한다.
• Server - 자원을 제공하는 주체

2. API & HTTP

• API - client 에게 Data Base의 리소스를 보여주는 interface(사물과 인간간의 의사소통이 가능하도록 만들어진 매개체) ex) 메뉴판

• HPPT - 클라이언트와 서버가 통신하기위해 HTTP라는 규약, 규칙을 지켜서 통신을 하는것.

  • HTTP 작동방식 - 요청(request)과 응답(response)의 형태로 이루어져 있다.

  • 구성 - Header 와 Body 로 구성되어 있다.

    • Header - 어디에 보내는 요청인가(origin) , 컨텐츠 타입은 무엇인가(content-type) , 어떤 클라이언트를 보냈는가 (user-agent)... 참고

  • 속성 - stateless , connectionless

    • stateless
    • HTTP의 각 요청은 독립적이다 .
    • HTTP 매 요청은 독립적이기 때문에 state라는 것이 없다.
    • connectionless
    • 한번에 요청에는 한번의 응답을 한다. -응답이후에는 연결이 끊기기 때문에, 더이상 응답을 할 수 없다.

  • Method

    • GET - 서버에 자원을 요청.
    • POST - 서버에 자원을 생성.
    • PUT - 서버의 자원을 수정.
    • DELETE - 서버의 자원을 제거.

3. Ajax

• form 태그로 정보를 서버에 전송하면 페이지가 전체가 Reloading 된다. 즉, 페이지 전환시 불필요한 모든 부분까지 전부 로딩하는 것이다.

• 그래서 원하는 부분만 로딩할수 있게 서버와 자유롭게 통신할 수 있는 XRH(XMLHttpReqeust) 과 페이지 깜빡 없이 seamless 하게 작동하는 JavaScript와 DOM을 이용하는 Ajax가 탄생한다.

서버에서 데이터를 가져오는 방법

• XMLHttpRequest
• jQuery Ajax
• fetch

XMLHttpRequest

function reqListener () {
  console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

jQuery Ajax

$.ajax({
  url: 'http://example.com',
  method: 'GET',
  dataType: 'json'
})
  .done(function(json) {
    console.log(json)
  })
  .fail(function(xhr, status, errorThrown) {
  })
  .always(function(xhr, status) {
    console.log('요청완료')
  });

fetch

  fetch('http://example.com')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err=>{
    console.error(err)    
  });

4.CORS

• cors는 브라우저가 리소스로드를 허용해야하는 원본이 아닌 다른 원본을 서버가 나타낼 수 있도록 하는 HTTP 헤더기반 메커니즘으로 API를 사용하는 웹 어플리케이션은 자신의 출처와 동일한 리소스만 불러올수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

• 서버의 위치를 찾아가기 위해서는 기본으로 Protocol , Host , :80 , : 443(위에 보이진 않지만 Host 뒤에 붙어 있음.) 가 필요하다.

5.XSS

• xss란 보안이 약한 웹 어플리케이션에 대한 웹기반 공격으로 클라이언트(사용자)를 대상으로 한다.

xss 공격에 취약한 웹사이트를 탐색 후 xss공격을 위한 스크립트를 포함한 url 을 사용자에게 노출시킨다. 사용자가 해당 url을 클릭할 경우 취약한 웹사이트의 서버에 스크립트가 포함된 url을 통해 request를 전송하고 웹서버에서는 해당 스크립트를 포함한 response를 전송한다.

XSS 위험성

• 쿠키정보 및 센션 ID 획득
• 시스템 관리자 권한 획득
• 악성코드 다운로드
• 거짓페이지 노출

fetch API

- 비동기 요청의 가장 대표적인 사례의 예는 네트워크 요청이 있다. 다양한 네트워크 요청중 URL을 요청하는 경우가 가장 흔한다. 이를 가능하게 해주는 API가 바로 fetch API 이다. 주로 포털 사이트에 실시간으로 변하는 정보, 날씨 , 주식 등의 정보를 URL로 받아오는 역할을 한다.

✓ fetch 를 사용하여 URL 가져오기

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

fetch는 네트워크 에서 JSON 으로 가져와 사용할수 있게해준다. fetch()는 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정해야한다. 또한 fetch는 Promise 로 리턴한다.

✓실질적인 예시

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';
function getNewsAndWeather() {
  let obj = {};
  return fetch(newsURL)
  .then(response => response.json())
  .then(data => {
      obj['news'] = data.data;
      return fetch(weatherURL);
    })
    .then((response)=> response.json())
    .then(data => {
      obj['weather'] = data;
      return obj;
    })  
}

URL을 통해서 가져온 결과값은 아래와 같다.

const obj = {
            news: [
              {
                row_id: 2,
                title: '2021년 경제 성장률 전망 밝아',
                source: 'A신문',
                timestamp: '2020/12/30',
              },
              {
                row_id: 3,
                title: '코로나19 증가추세 대폭 하락해',
                source: 'BBC',
                timestamp: '2020/12/29',
              },
              {
                row_id: 4,
                title: '코드스테이츠 취업연계 파트너사 xxx건 돌파',
                source: '스타트업 뉴스',
                timestamp: '2020/12/31',
              },
            ],
            weather: { status: 'sunny', tempature: '28', finedust: 'good' },
          };

또한 promise로 리턴을 받기때문에 Promise.all 과 async/await 으로 표현할수 있다.

✓ Promise

function getNewsAndWeatherAll() {
  return Promise.all([
    fetch(newsURL).then(response => response.json()), 
    fetch(weatherURL).then(response => response.json())
  ])
    .then((data) =>{ 
    return {news: data[0].data, weather : data[1]};
  })
}

✓ async/await

async function getNewsAndWeatherAsync() {![](https://images.velog.io/images/-hsw9724/post/9aa63714-e102-4ec0-9f86-1d395f4a1372/js.png)
  let news = await fetch(newsURL).then(response => response.json())
  let weather = await fetch(weatherURL).then(response => response.json())
  return {news: news.data, weather : weather};
}

동기: client 가 server에 요청하면 server가 요청을 처리할때 까지 client가 기다린다. 이후 처리가 되면 일을 마자한다.

비동기: client 가 server에 요청하면 server가 요청을 처리한다.그리고client는 처리가 끝나지 않아도 다른일을 계속한다.

1.callback - 어떤 함수에 인자로 쓰이는 함수

const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath,'utf8',(err, data)=>{
    if(err){
      callback(err,null);
    }else{
      callback(err,data);
    }
  }) 
};

✓ fs.readFile(filename[,option],callback) 이 메소드는 파일을 읽는 메소드로 node.js의 내장모듈이다. 참고 ✓ 콜백함수를 사용하다보면 callback hell 이 오는데 이를 방지하고자 promise를 사용한다.

2.promise - promise 는 3가지 기능이 있다.

- 대기(pending) : 이행하거나 거부되지 않는 상태

- 이행(fulfilled) : 연산이 성공적으로 완료됨

- 거부(rejected) : 연산이 실패됨

✓ promise Method

1. Promise.all(iterable) - .all 메소드는 여러 프로미스의 결과를 모을때 유용합니다.
2. Promise.reject() - 주어진 이유로 거부하는 Promise 객체를 반환됩니다.
3. Promise.resolve() - 주언진 값으로 이행하는 Promise 객체를 반환합니다.

✓ prototype

1. promise.prototype.catch() - 에러를 잡아 반환한다.
2. promise.prototype.then() - 성공적으로 값을 받아 반환한다.
3. promise.prototype.finally() - 마지막으로 실행할 값을 받아 반환한다.

const getDataFromFilePromise = filePath => {
  return new Promise((resolve,reject) =>{//resolve,reject를 매개변수로 사용한다. 
    fs.readFile(filePath, 'utf8',(err, data)=>{
      if(err){
        reject(err);// 에러시 reject함수의 에러값 반환
      }else{
        resolve(data);// 성공시 resolve함수의 데이터값 반환
      }
  })
  }) 
};

✓ .then 사용하기

const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');
const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
  .then(user1=>{//.then으로 연결되어 정상적인 값이 user1에 user1path값이 들어 있다.
    return getDataFromFilePromise(user2Path)
    .then(user2=>{//.then으로 연결되어 정상적인 값이 user2에 user2path값이 들어 있다.
      return JSON.parse(`[${user1},${user2}]`)//문자열을 객체화 시켜준다.
    })
  })
}

✓ .all 사용하기

const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');
const readAllUsers = () => {
  return Promise.all([getDataFromFilePromise(user1Path),getDataFromFilePromise(user2Path)])
  .then(([user1,user2])=>{
    return JSON.parse(`[${user1},${user2}]`)
  })
}

3. async & await - callback 함수와 promise 의 단점을 보완하고 개발자가 읽기 좋은 코드로 작성하게 도와준다.(암시적으로 promise를 사용하여 결과를 반환한다.

const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');
const readAllUsersAsyncAwait = async() => { //함수 앞에 async 를 붙여줘야한다.
  let user1 = await getDataFromFilePromise(user1Path)//await 을 붙여주어 promise의 값을 가져온다.
  let user2 = await getDataFromFilePromise(user2Path)
  returnJSON.parse(`[${user1},${user2}]`)
}

Inheritance(상속)

var Human = function(name){
    this.name = name;//프로퍼티
}
Human.prototype.sleep = function(){//메소드 생성
    console.log('졸려');
}
var harry = new Human('harry');//인스턴스 생성
harry.sleep()//졸려

harry.__proto__ === Human.prototype //true;

✓harry 에 Human을 상속한 것이다. 그래서 harry 는 Human의 method 를 사용할수 있다.

좀더 자세한 코드로 상속의 예를 보자.

Class 가 생기기 이전

var Human = function(name){
    this.name = name;//프로퍼티
}
Human.prototype.sleep = function(){//메소드
  console.log('졸려');
}
var harry = new Human('harry');//인스턴스
//자식클래스생성
function Student(name){
  Human.call(this,name);
}
Student.prototype = new Human();
Student.prototype.constructor = Student;
Student.prototype.wake = function(){
  alert('일어나');
}
var banini = new Student('banini');
banini.sleep(); //졸려
banini.wake();// 일어나

✓ 3가지를 꼭!!!! 해줘야한다!!!!

• 상속해주기
• 자식 클래스의 this 값 맞춰주기
• 부모 클래스의 this 값 맞춰주기

- 상속 해주기

 Student.prototype = Object.create(Human.prototype);

- 자식 클래스의 객체 방향 맞춰주기

 Student.prototype.constructor = Student;

- 부모 클래스의 객체 방향 맞춰주기

 Human.call(this,name);//call 대신 apply도 가능 

Class 사용

class Human{
    constructor(name){
      this.name = name;
    }
  sleep(){
   console.log('졸려');
  }
}
var harry = new Human('harry');
class Student extends Human {
  constructor(name){
    super(name);
  }
  wake(){
  alert('일어나');
  }
}
var banini = new Student('banini');
banini.sleep();
banini.wake();

✓ 2가지를 꼭!!!! 해줘야한다!!!!

• 상속해주기

• 부모 클래스의 this 값 맞춰주기

  - 상속 해주기

  class Student extends Human 

  - 부모 클래스의 객체 방향 맞춰주기

  ```js super(name)

언어의 3가지 Type

• Machine Languages

  • 0과 1로 이루어진 언어
  • 사람이 읽기 힘들다

• Assembly Languages

  • 기계어와 일대일 대응이 되는 저급언어
  • cpu에 따라 지원하는 operation(조작)이 다르다.
  • cpu 특성에 따르다 보니 여러가지 환경에서 사용할 수 없다.

• High-level Languages

  • 사람이 이해하기 쉽게 작성한 프로그래밍 언어이다
  • 컴파일러나 인터프리터(둘다 번역기의 일종)에 의해 저급 프로그래밍 언어로 번역되어 실행된다.
  • 여러가지 환경에서 사용이 가능하다.
  • 절차 지향적 언어와 객체 지향적 언어가 존재한다.
    • 절차 지향적 언어 - 모든것을 순차적으로 진행하는 것
    • 객체 지향적 언어 - 모든것을 객체로 사용하는 것

Object Oriented Programming(OOP) 즉, 객체지향프로그램의 4가지 특성

- 우선 4가지의 특성을 말하기전 Class 와 Object 에 대해서 알아보자

• class : 같은 특성을 지닌 여러 객체를 총칭하는 집합의 개념이다. 쉽게 붕어빵 틀이라고 생각해보자.(추상적이다)

• object : class가 구체적인 실체인 instance가 되었을때 객체라고 한다.

1. Encapsulation(캡슐화)(정보은닉)(재사용)

• 특정 객체가 독립적으로 역할을 수행하기 위해 필요한 데이터와 기능을 하나로 묶은 것이다.
• 변수와 함수같이 분산되어 있는 애들을 재활용 하기 힘들다. 하지만 캡슐화를 하면 재활용하기 쉬워진다.

2. Inheritance(상속)(재사용 + 확장)

• 라이브러리를 통해서 남이 짜놓은 소스코드를 가져와 사용할수 있다. 하지만 의도에 맞게 수정하게 되면 다른 라이브러리가 되어 작동하지 않거나 불필요한 코드의 수정작업이 필요하다. 그렇기에 Inheritance 를 사용한다. ✓ 부모클래스의 속성과 기능을 그대로 가져와 사용할수 있고 필요에 따라 기능을 변경할경우 자식클래스의 해당 기능만 수정해주면 된다.

3. Abstrction(추상화)(모델링)

• 추상화란 필요로 하는 정보만 표현해줌으로써 공통의 속성이나 기능을 묶어서 이름을 붙이는 것이다. ex) 전화기 - 우리는 번호를 누르고 말을하면되지만 그 안에서는 다양한 기능들이 실행되고있다.

4.Polymorphism(다형성)(사용편의)

• 오버라이딩과 오버로딩이 여기에 해당된다. 오버라이딩은 부모클래스의 메소드와 같은 시그니처(이름,인자)로 메소드를 재정의 하는 것을 말하고 오버로딩은 메소드의 이름만 같고 시그니처가 다른 것을 말한다.

• 클래스 중에 부모 자식 관계로 엮이지 않았다면 각각의 클래스 안에서 변수 명이나 메소드 명이 다른 클래스에 선언된 이름과 같아도 된다.

• 이방법은 노드의 값이 정렬방법에 따라 순서가 존재하는데, 노드 왼쪽 서브트리에는 노드값보다 작은 값이, 오른쪽에는 노드값 보다 큰 값이 온다.

순회

그래프의 경우 비선형 구조이기 때문에 모든 노드를 탐색하기 위해 특별한 방법을 사용한다. 탐색 순서를 정하는 방법에 따라 DFS(Depth First Search), BFS(Breadth Firts Search)의 두 가지 방법이 있다. 트리또한 그래프의 일종이기 때문에 두가지 방법을 사용할수 있다.

탐색 방법

• 전위 순회(Preorder Traversal) : 부모 -> 좌 -> 우
• 중위 순회(Inorder Traversal): 좌 -> 부모 -> 우
• 후위 순회(Postorder Traversal): 좌 -> 우 -> 부모

순회결과

• 전위 순회 : 6 4 2 5 9 8 11 10 13
• 중위 순회 : 2 4 5 6 8 9 10 11 13
• 후위 순회 : 2 5 4 8 10 13 11 9 6

Method

• insert(value) - 이진 탐색 트리에 노드를 추가합니다.
• contains(value) - 이진 탐색 트리에 해당 노드가 존재하는지 여부를 반환합니다.
• inorder(callback) - 이진 탐색 트리를 중위순회 합니다.

  insert(value) {
    let newnode = new BinarySearchTreeNode(value);
      if(this.value > value){
        if(this.left === null){
          this.left = newnode
        }else{
          return this.left.insert(value)
        }
      }
      else if(this.value < value){
        if(this.right === null){
          this.right = newnode
        }else{
          return this.right.insert(value)
        }
    }
  }

  contains(value) {
  if(this.value === value){
    return true;
  }else if(this.value < value){
    if(this.right === null){
      return false;
    }else if(this.right.contains(value)){
      return true;
    }
  }else if(this.value > value){
    if(this.left === null){
      return false;
    }else if(this.left.contains(value)){
      return true;
    }
  }
  return false;
}

```js inorder(callback) {//중위순회 왼 루트 오른쪽 if(this.left !== null){ this.left.inorder(callback) } callback(this.value) if(this.right !== null){ this.right.inorder(callback) } }

- root : 최상위 노드

- depth : 다른 노드에 접근하기 위한 거리

- silbling : 같은 부모를 가지면서 같은 depth에 존재하는 노드들

- edge : 노드와 노드를 연결하는 선

- leaf : 자식이 없는 노드

- height : 부모노드에서 자식노드 사이의 edge개수

✓ Method

• insertNode(value) - 트리에 노드를 추가합니다.
• contains(value) - 트리에 해당 노드가 존재하는지 여부를 반환합니다.

  ✓ 사용

  insertNode(value) {
  let tree = new TreeNode(value)
  this.children.push(tree)
  }

```js contains(value) { if(this.value === value){ return true }else{ for(let el of this.children){ if(el.contains(value)){ return true; } } return false; } }

✓tip 그래프는 무방향(undirected)과 방향(directed) 일수있다. "무방향"은 연결된 노드가 대칭, 즉 서로를 가리킨다고 볼수 있고 "방향"은 노드의 비대칭, 즉 한쪽에서만 가리킨다고 볼수있다.

How to search "graph"

- DFS(Depth-First search) 깊이 우선 검색

- BFS(Breadth-First search) 넓이 우선 검색

How to use searching skill

- Stack 이나 Queue 에 들어갔다가 빼주면서 출력 그리고 연결된 노드를 넣어준다

- DFS 는 주로 Stack 으로 사용하고, BFS 는 Queue 에서 사용한다.

✓Reference - https://www.youtube.com/watch?v=_hxFgg7TLZQ

인접 행렬과 인접 리스트

- 인접 리스트: 정점을 노드의 키로 사용하며 해당 노드의 이웃들을 리스트에 저장한다.

- 인접 행렬 : 행렬의 각 항목이 두 정점 간에 연결을 나타내는 V*V 행렬이다.

진입 차수와 진출 차수

-한 정점에 도착하는 edge수

-한 정점에서 출발하는 edge 수

둘을 더하면 차수 가 된다.

✓ Method

• addNode(node) - 그래프에 노드를 추가합니다.
• addEdge(fromNode, toNode) - fromNode와 toNode 사이의 간선을 추가합니다.
• removeNode(node) - 그래프에서 노드를 삭제합니다.
• removeEdge(fromNode, toNode) - fromNode와 toNode 사이의 간선을 삭제합니다.
• hasEdge(fromNode, toNode) - fromNode와 toNode 사이의 간선 존재 여부를 반환합니다.
• contains(node) - 그래프에 해당 노드가 존재하는지 여부를 반환합니다.

✓ 사용

addNode(node) {
    this.nodes[node] = this.nodes[node] || [];
  }

contains(node) {
    return this.nodes.hasOwnProperty(node);
}

removeNode(node) {
  for (let key of this.nodes[node]) {
    this.removeEdge(node, key)
  }
  delete this.nodes[node]
}

hasEdge(fromNode, toNode) {
  for (let key of this.nodes[fromNode]) {
    if (key === toNode) {
      return true;
    }
  }
  return false;
}

addEdge(fromNode, toNode) {
  this.nodes[fromNode].push(toNode)
  this.nodes[toNode].push(fromNode)
}

```js removeEdge(fromNode, toNode) { let from = this.nodes[fromNode] let to = this.nodes[toNode] from.splice(from.indexOf(toNode), 1) to.splice(to.indexOf(fromNode), 1) }

• 값이 들어오면 hash function 을 거쳐 storage에 있는 bucket 에 객체와 비슷한 형태로 key 와 value(tuples) 로 저장이 된다. 그래서 key 를 입력 하게 되면 value 가 출력 되는 형태이다.
• hash table 은 미리 storage 의 사이즈를 정해서 값을 받는다. 그렇다면 많은 양이 들어오면 어떻게 해야하는가? ✓ storage 에 75% 가 차면 2배로 늘리고 25% 만 차지하면 반으로 나눠준다. 이렇게 메모리를 효율적으로 사용한다.
  • 정보를 입력하면 바로 출력되고 빠르기까지 한 hashtable 단점은? ✓해쉬 충돌 - 배열과 달리 자료구조가 정렬되어 있지 않다. 즉, 메모리 공간에서 주소에 순차적으로 값을 부여하지 않고, 렌덤하게 값을 부여하게 된다. 그래서 같은 buket 에 여러개의 tuple 이 존재 할수 있다. 이것을 해쉬 충돌이라고 한다.

✓ Method

• insert(key, value) - 주어진 키와 값을 저장합니다. 이미 해당 키가 저장되어 있다면 값을 덮어씌웁니다.

• retrieve(key) - 주어진 키에 해당하는 값을 반환합니다. 없다면 undefined를 반환합니다.

• remove(key) - 주어진 키에 해당하는 값을 삭제하고 값을 반환합니다. 없다면 undefined를 반환합니다.

• _resize(newLimit) - 해시 테이블의 스토리지 배열을 newLimit으로 리사이징하는 함수입니다. 리사이징 후 저장되어 있던 값을 전부 다시 해싱을 해주어야 합니다. 구현 후 HashTable 내부에서 사용하시면 됩니다.

✓ 사용

insert(key, value) {
    const index = hashFunction(key, this._limit);
    let buket = this._storage.get(index) 
    if(buket === undefined){
      buket = {}
    }
    buket[key]=value
    this._storage.set(index, buket)
    this._size++
    if(this._size > this._limit*0.75){
      this._resize(this._limit*2)
    }
  }

 retrieve(key) {
    const index = hashFunction(key, this._limit);
    let buket = this._storage.get(index)
    if(buket===undefined){
      return undefined
    }
    return buket[key]
  }

  remove(key) {
    const index = hashFunction(key, this._limit);
    let buket = this._storage.get(index)
    let result = buket[key]
    delete buket[key]
    this._size--
    if(this._size < this._limit*0.25){
      this._resize(this._limit/2)
    }
    return result;
  }

```js _resize(newLimit) { let old = this._storage this._size = 0 this._limit = newLimit this._storage = LimitedArray(newLimit) old.each((buket)=>{ for(let key in buket){ this.insert(key , buket[key]) } }) return this._storage }

노드에 다음번 노드의 주소를 가지고 있는 형태이다.

• linked list 는 배열과 비교했을때 특정 데이터를 검색하는 시간이 오래 소유된다. index 를 통해서 찾는 배열과 달리 하나 하나 찾아봐야 하기 때문이다. ✓ 노드 추가 ✓ 노드 삭제

• 두 자료를 보면 다음 요소의 주소를 알기 때문에 배열보다 요소를 추가하거나 삭제하기 쉽다. 하지만 다음요소의 주소만 알기 때문에 전에 있던 요소를 알수 없다.

• 이와 같이 단인 연결 리스트와 이중 연결 리스트로 존재한다. linked list는 다음 요소의 정보만 가지고 있기 때문에 탐색이 불가능 한데, 이러한 단점을 보완할수 있는게 이중 연결 리스트다.

✓Method

• addToTail(value) - 주어진 값을 연결 리스트의 끝에 추가합니다.
• remove(value) - 주어진 값을 찾아서 연결을 해제(삭제)합니다
• getNodeAt(index) - 주어진 인덱스의 노드를 찾아서 반환합니다. 값이 아니라 노드를 반환해야 하는 것에 주의하세요. 해당 인덱스에 노드가 없다면 undefined를 반환합니다.
• contains(value) - 연결리스트에 주어진 값을 가지는 노드의 존재 여부를 반환합니다.
• indexOf(value) - 주어진 값의 인덱스를 반환합니다. 없을 경우 -1을 반환합니다.

✓ 사용

  addToTail(value) {
    let node = new Node(value);
    if(!this.head){
      this.head = node;
      this.tail = node;
    }
    this.tail.next = node;
    this.tail = node;
    this._size ++
  } 

  remove(value) {
    let find = this.head
    while(find) {
      if(find.value === value){
        find.value = find.next.value
        find.next = find.next.next
        this._size --
      }
      find = find.next
    }
  }

  getNodeAt(index) {
    let count = 0;
    let find = this.head
    while(find){
      if(count === index){
        return find
      }
      find = find.next
      count++
    }
    return undefined
  }

 contains(value) {
    let find = this.head
    while (find){
      if(find.value === value){
        return true;
      }
      find = find.next
    }
    return false;
  }

  indexOf(value) {
    let count = 0;
    let find = this.head
    while(find){
      if(find.value === value ){
        return count 
      }
      find = find.next
      count++
    }
    return -1
  }

  size() {
    if(this._size < 1){
      return 
    }
    return this._size
  }

Stack 은 나중에 들어온 것이 먼저 나간다.

✓ Method

• push(element) : stack의 맨 뒤에 값을 추가해준다.
• pop() : stack의 맨 뒤의 값을 삭제해준다.
• peek() : stack의 맨 뒤의 값을 리턴해준다.
• size() : stack 에 들어있는 데이터의 총수를 리턴해준다.
• isEmpty() : stack 이 비었으면 '1' , 그렇지 않으면 '0' 으로 리턴해준다.

✓ 사용

class Stack {
  constructor() {
    this.storage = {};
    this.top = 0;
  }
  size() {
    return Object.keys(this.storage).length 
  }
  push(element) {
    this.storage[this.top] = element
    this.top++
    return element
  }
  pop() {
    if(this.top < 1){
      return;
    }
    this.top--
    let result = this.storage[this.top]
    delete this.storage[this.top]
    return result
  }
}
module.exports = Stack;

Queue - 계산을 기다리는 사람들 (first in first out)

Queue 는 처음 들어온 것이 먼저 나간다.

✓ Method

• enqueue(element) : queue의 맨 뒤에 값을 추가해준다.
• dequeue() : queue 맨 앞의 값을 삭제해준다.
• peek() : queue 맨 앞의 값을 리턴해준다.
• size() : queue 에 들어있는 데이터의 총수를 리턴해준다.
• isEmpty() : queue 이 비었으면 '1' , 그렇지 않으면 '0' 으로 리턴해준다.

✓ 사용

class Queue {
  constructor() {
    this.storage = {};
    this.rear = 0;
    this.first = 0;
  }
  size() { 
    return Object.keys(this.storage).length}
  enqueue(element) {
   this.rear ++
   this.storage[this.rear] = element
   return element
  }
  dequeue() {
    if(this.rear <1){
      return;
    }
    this.first++
    let result = this.storage[this.first]
    delete this.storage[this.first]
    return result
  }
}
module.exports = Queue;

컴퓨터 언어 : 컴퓨터는 '0' 과 '1' 만 이해할 수 있다. 그래서 complier(like 번역기) 가 등장한다.

- 데이터 타입 : 컴퓨터에 0과 1 로 지정되어 있는 데이터를 인간이 사용하는 데이터들의 종류로 해석한 것

• 원시 타입(primitive type)

  • 정수, 실수
  • 문자
  • 논리(참, 거짓)

• 사용자 타입(custom type)

  • 구조체, 클래스 등

- 자료구조(Data Structure)

• 데이터 타입 vs 자료구조
  • 데이터 타입 : 하나의 데이터를 어떻게 해석할 지 정의 한 것
  • 자료구조 : 여러 데이터의 묶음을 어떻게 저장하고 사용할지 정의 한 것 ex) Array, Tree, Stack

fun.bind(this 값 , 인자1,인자2,...)

bind 의 유용한 사용 예시

case1: 이벤트 핸들러

let target = document.querySelector('#target')
let users = ['김코딩' , '박해커' , '최초보']

users.forEach(function(user){ let btn = document.createElement('button') btn.textContent = user btn.onclick = handleClick });

function handleClick(){ console.log(this) }

🚫위와 같이 코드를 작성하면, 동적으로 생성되는 각각의 버튼을 클릭하면 button 엘리먼트 자체가 콘솔에 표시될 것입니다. 이 때 bind를 이용해 출력하고 싶은 값을 this로 넘기거나, 혹은 인자로 보낼 수 있습니다.

solution 1

let target = document.querySelector('#target')
let users = ['김코딩', '박해커', '최초보']

users.forEach(function(user) { let btn = document.createElement('button') btn.textContent = user btn.onclick = handleClick.bind(user) // 이렇게 바꿔볼 수 있습니다. target.appendChild(btn) });

function handleClick() { console.log(this) }

solution 2

let target = document.querySelector('#target')
let users = ['김코딩', '박해커', '최초보']

users.forEach(function(user) { let btn = document.createElement('button') btn.textContent = user btn.onclick = handleClick.bind(null, user) // 굳이 this를 이용하지 않더라도 인자로 넘길 수도 있습니다. target.appendChild(btn) });

function handleClick(user) { console.log(user) }

case2: setTimeout (이 함수는 명시적으로 항상 window객체를 this 바인딩하는 특징이 있다.)

class Rectangle {
  constructor(width, height) {
    this.width = width
    this.height = height
  }
  getArea() {
    return this.width * this.height
  }
  printArea() {
    console.log('사각형의 넓이는 ' + this.getArea() + ' 입니다')
  }
  printSync() {
    // 즉시 사각형의 넓이를 콘솔에 표시합니다
    this.printArea()
  }
  printAsync() {
    // 1초 후 사각형의 넓이를 콘솔에 표시합니다
    setTimeout(this.printArea, 2000)
  }
}

let box = new Rectangle(40, 20) box.printSync() // '사각형의 넓이는 800 입니다' box.printAsync() // 에러 발생!

solution 1

prinAsync(){
  setTimeout(this.printArea.bind(this),2000)
}

solution 2

printAsync(){
  setTimeout(() => {
    this.printArea()
  },2000)
}

function foo(){
  return 'bar'
}
foo()//'bar'
foo.call()//'bar'
foo.apply()//'bar'

✓ .call, .apply 호출은 명시적으로 this 를 지정하고 싶을때 사용! this는 인자의 첫번째 값이 된다.

예제 .apply 을 이용해 배열인자를 풀어서 넘기기

Math.max.apply (null ,[5,4,3,2,1]) //5 
//apply 는 숫자들의 집합으로 만들어 준다.

Math.max.call (null , ...[5,4,3,2,1])//5
//call 은 들어온 그대로를 사용한다. ...을 이용하여 배열을 벗겨준다.

Math.max(...[5,4,3,2,1])//5

예제 .call Prototype 을 빌려 실행하기

let allDivs = document.querySelectorAll('div');// Nodelist 라는 유사배열
  [].map.call(allDivs, function(el){ // 유사배열이라 map을 사용할수 없었지만, call을 통해 Array Prototype 으로 map 메소드를 빌려 this 를 넘겨 map을 사용.
    return el.className
  })

객체 지향에서의 call, apply 사용 예제

```js function Product(name, price){ this.name = name this.price = price } function Food(name,price){ Product.apply(this, name, price)//인자가 많을시 product.apply(this, argument) this.category = 'food' } let cheese = newFood('feta',5000) //cheese 는 Product 이면서 Food

함수실행의 5가지 방법

1. Global - 정확히는 실행은 아님. 전역에서 this를 참조 할 때를 의미

console.log(this)

2. function 호출

foo()

3. Method 호출

obj.foo()

4. new 키워드를 이용한 생산자 호출

new foo()

5. .call 또는 .apply 호출

foo.call() , foo.apply

함수실행에 따른 this binding 패턴

Method 호출 : 객체.메소드() 와 같이 객체 내에 메소드를 호출하는 방법

let counter1 ={
  value: 0,
  increase:functon(){
    this.value++//메소드 호출시 this 는 counter1을 가리킴
  },
  decrease: function(){
    this.value--
  },
  getValue: function(){
    return this.value
  }
}
counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

여러개의 카운터를 만들려면??

function makeCounter(){
  return{
    value: 0,
    increase:functon(){
      this.value++// 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체
    },
    decrease: function(){
      this.value--
    },
    getValue: function(){
      return this.value
    }
  }
}
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() //1
let counter2 = makeCounter()
counter2.increase()
counter2.increase()
counter2.increase()
counter2.increase()
counter2.getValue() //4

생산자 호출 :객체.메소드()와 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만 new 키워드를 이용하는 점이 다르다.

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}
let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

-함수 표현식-

const add = function(x, y){
  return x + y
}

-ArrowFunction-

const add = (x, y) => {
  return x + y
}

‼️ call,apply,bind 사용 불가

✓ 즉, "function" 대신 "=>"를 사용하는 것이다.

tip. 함수안에 return 만 존재할 경우 생략이 가능 하다 But! 중괄호{} 도 같이 생략해야한다.

ex)

const add = (x , y) => x + y //정상 작동

const add = (x , y) => (x + y) //정상 작동 (소괄호()사용가능)

const add = (x , y) => {x + y}//undefined

tip. 함수안에 표현식이 두줄이상일 경우 return 과 중괄호로 표현해주는 것이 좋다.

Arrow Function 사용 : closure

-함수 표현식-

const adder = function(x){
  return function(y){
    return x + y
  }
}
adder(5)(7)//12

-Arrow Function-

const adder = (x) => {
  return(y) => {
     return x + y
   }
 }
 adder(5)(7)//12

축약 return 과 {}를 같이 없애주고 파라미터가 1개일때 () 도 없애준다.

const adder = x => {
  return y => x + y 
}

남은 리턴도 생략

```js const adder = x => y => x + y