j_jhwww.log

[React] < a >태그 , Link 컴포넌트 차이점

Sat, 22 Jan 2022 04:59:17 GMT

첫 프로젝트에 투입되어 개발하는 도중, 사소한 궁금증이 생겼다. 페이지를 이동시켜 줄 때 사용되는, 굉장히 기본적이지만 태그와 Link 컴포넌트의 차이점에 대해서 알아보자.

< a >

< a href= 'url' />

기존 html을 사용할 때 쓰이던 방법으로 페이지를 새롭게 불러오면서 리액트 앱의 상태들도 초기화되고, 새로 렌더링을 하게 된다. 즉, 브라우저 주소를 이동하고 페이지 자체를 새로고침한다. 따라서 상태 값이 유지되지 못하고 속도도 저하된다.

Link

import { Link } from 'react-router-dom';

< Link to= 'url' />

HTML5 History API를 사용해서 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 필요한 부분만 재렌더링 되고 나머지 데이터는 그대로 유지된 채 재사용되기에 데이터를 필요한 부분만 불러들일 수 있어 속도향상에 도움이 된다.

SPA(Single Page Application) 방식으로 화면을 렌더링하는 프레임워크인 리액트에서는 새롭게 페이지를 불러오는 방식보다는 필요한 부분만 업데이트하는 방식인 Link컴포넌트를 사용하는 것을 권장한다.

Chatterbox Client 만들어보기

Sun, 21 Mar 2021 09:01:14 GMT

여러 사용자들과 같이 채팅을 할 수 있는 chat application의 클라이언트 부분을 만들어보자.

서버를 이용하여 간단한 클라이언트를 구현해보자

fetchAPI를 활용하여 서버에 메서지를 요청하고(GET), 메세지를 보내게(POST)하는 기능을 만들어보자. 서버는 이미 AWS에 구축/배포되어 있는 서버를 사용하였다. Chatterbox Client Repository

HTML 구성 및 작동



  
    
    chatterbox
    
  
  
    
      chatterbox

매우 심플한 구성이다. 상단의 inputbox와 textarea에 각각 이름과 작성하고 싶은 내용을 적고 POST버튼을 클릭하면 다음과 같이 하단의 목록에 추가되면서 json타입으로 서버로 전송된다. 그리고 Clear버튼을 누르면 해당 알림창과 함께 모든 채팅 목록과 서버에 저장되어 있는 데이터들까지 한꺼번에 삭제한다.

JavaScript Code

사용하기 편하게 Singleton패턴으로 작성하였다.

const githubID = 'Jeong-HW'

const app = {
  server: `http://3.36.72.17:3000/${githubID}/messages`,//서버 주소값
  init: () => {                        //서버의 데이터값들을 불러와서 화면에 뿌려준다
    // TODO
    app.fetch().then(data => {
      for (let message of data) {
        app.renderMessage(message);
      }
    })
  },
  fetch: () => {                    //서버에서 받은 응답의 body속 JSON을 리턴한다
    // TODO
    return window.fetch(app.server)
      .then((response) => response.json());
  },
  send: (message) => {                    //서버로 데이터를 전송해준다
    window.fetch(app.server, {
      method: 'POST',
      body: JSON.stringify(message),
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(response => response.json())
  },
  clearMessages: () => {                //화면 내 채팅목록에 있는 메시지들를 지워준다
    document.querySelector("#chats").innerHTML = "";
  },
  renderMessage: (message) => {                //서버에 저장되어 있는 데이터들을 DOM을 이용하여 화면 상에 나타내준다
    const chatsArea = document.querySelector("#chats");

    const chat = document.createElement('div');
    chat.classList.add('chat');

    chat.innerHTML = 
    `${message.username}
    ${message.text}
    ${message.date}`;

    chatsArea.prepend(chat);  //prepend를 사용하면 상단에서부터 추가된다
  },
  reset: () => {                    //서버로 메시지를 초기화 요청을 보낸다.
    return window.fetch(`http://3.36.72.17:3000/${githubID}/clear`,{
      method: 'POST'
    })
    .then(res => res.json())
    .then(data => app.clearMessages())    //html 화면 상 채팅 목록들도 모두 삭제
  }
};

app.init();

POST버튼과 Clear버튼에 이벤트 생성

const postbutton = document.querySelector('.postbtn')

//POST버튼
if(postbutton){
  postbutton.addEventListener('click',function(event){
    event.preventDefault();

    let message = {};
    let username = document.querySelector('.inputUser').value;
    let text = document.querySelector('.inputChat').value;

    message.username = username;
    message.text = text;
    message.roomname = 'main room'
    message.date = new Date().toLocaleString();

    app.send(message);                //이름과 text내용을 받아와서 서버로 전송한다
    app.renderMessage(message)            //이후, 해당 데이터만 추가적으로 채팅목록에 추가해준다
    document.querySelector('.inputUser').value = "";
    document.querySelector('.inputChat').value = "";
  })
}

const clearbutton = document.querySelector('.clearbtn')

//Clear버튼
if(clearbutton){
  clearbutton.addEventListener('click',function(event){
    event.preventDefault();
    if(confirm('정말 삭제하시겠습니까?')===true){    //confirm메소드를 이용하여 삭제 시 알림창이 뜨도록 해준다.
      app.reset();
    }
    else{
      return;
    }
  })
}

fetchAPI사용법은 어느 정도 익었으나, 확실하게 http 요청/응답 관련 공부를 좀 더 심도있게 해야겠다. 다음엔 서버 구현까지 해보면서 클라이언트-서버 간 통신을 확실하게 익혀야겠다.

자료구조(Data Structure) : 스택/큐/그래프/트리

Sun, 07 Mar 2021 10:05:51 GMT

자료구조

여러 데이터들의 묶음을 어떻게 저장하고 사용할지 정의하며, 특정한 상황에 문제를 해결하는데 사용된다.
자료(Data) : 문자,숫자,그림 등의 형태로 된 의미 단위

자료를 더 효율적으로 저장하고, 관리하기 위해 사용하며, 잘 선택된 자료구조는 실행시간을 단축시켜주거나 메모리 용량의 절약을 이끌어 낼 수 있다.

자료구조의 선택 기준

자료의 처리 시간
자료의 크기
자료의 활용 빈도
자료의 갱신 정도
프로그램의 용이성

자료구조의 전체 분류

1. 스택(Stack)

Stack은 쌓다, 쌓이다, 포개지다 와 같은 뜻을 가지고 있다. 마치 접시를 쌓아 놓은 형태와 비슷한 이 자료구조는 직역 그대로, 자료(data)를 쌓는 자료구조다. 이처럼 Stack의 특성은 입출이 하나인 제한적 접근에 있다.

후입선출 (LIFO : last in, first out)
👉 맨 위에 있는 데이터 즉, 제일 마지막에 저장한 데이터를 제일 먼저 꺼낸다.

[ 일상생활 예시 ] 브라우저에서 뒤로 가기, 앞으로 가기 기능을 구현

새로운 페이지로 접속할 때 현재 페이지를 Prev Stack에 보관한다.
뒤로 가기 버튼을 눌러 이전 페이지로 돌아갈 때는 현재 페이지를 Next Stack에 보관하고 Prev Stack에 가장 나중에 보관된 페이지를 현재 페이지로 가져온다.
앞으로 가기 버튼을 눌러 앞서 방문한 페이지로 이동을 원할 때는 Next Stack의 가장 마지막으로 보관된 페이지를 가져온다.
마지막으로 현재 페이지를 Prev Stack에 보관한다.

2. 큐(Queue)

Queue는 줄을 서서 기다리다, 대기 행렬 이라는 뜻을 가지고 있다. Stack과 반대되는 개념으로, 먼저 들어간 자료(data)가 먼저 나오는 FIFO(First In First Out) 의 특성을 가지고 있는 자료구조다.

선입선출 (FIFO : first in, first out)
👉 맨 앞에 있는 데이터 즉, 제일 처음에 저장한 데이터를 제일 먼저 꺼낸다.

[ 일상생활 예시 ] 명절에는 고향으로 가기 위해 많은 자동차들이 고속도로를 지나간다. 고속도로에는 톨게이트가 있고, 자동차는 톨게이트에 진입한 순서대로 통행료를 내고 빠져나온다.

톨게이트를 Queue 자료구조, 자동차는 자료(data)로 비유할 수 있다.

이처럼 Queue는 자료(data)가 입력된 순서대로 처리해야 할 필요가 있는 상황에서 사용된다.

3. 그래프(Graph)

노드(정점=vertex)와 간선(edge)으로 구성된 자료구조. 쉽게 말해, 여러 개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조다.

방향성에 따라 무방향 그래프(undirected graph/대칭 관계)와 방향 그래프(directed graph/비대칭 관계)로 나뉘며 간선에 비용이나 가중치를 할당하는 가중치 그래프(weighted graph)가 있다. 그 외에 완전 그래프, 부분 그래프, 연결 그래프, 단절 그래프 등이 존재한다.

그래프 용어

정점(Vertex) : 연결한 객체들을 의미
인접 정점(Adjacent vertex) : 간선에 의해 직접 연결된 정점
간선(Edge) : 정점들을 연결하는 선
차수(Degree) : 정점에 연결되어 있는 간선의 수, 방향 그래프에서 진입/진출 차수의 합
진입차수(In-Degree) : 방향 그래프에서 정점을 머리로 하는 간선의 수, 정점으로 들어오는 간선
진출차수(Out-Degree) : 방향 그래프에서 정점을 꼬리로 하는 건선의 수, 정점에서 나가는 간선
경로(Path) : 정점A에서 정점B까지 간선에 따라 갈 수 있는 길을 순서대로 나열한 것
- 단순 경로(Simple-path): 경로 중 반복되는 정점이 없는것, 같은 간선을 자나가지 않는 경로
- 사이클(Cycle) : 경로의 시작 정점과 마지막 정점이 같은 경로를 의미

3.1 그래프 표현방식

1) 인접행렬 방식 (Adjacency matrix) 그래프의 연결관계를 이차원 배열 로 나타내는 방식

정점 A에서 정점 B로 가는 간선이 있으면 1, 아니면 0

하나의 정점에서 자기 자신으로의 자체 간선은 있을 수 없으므로 인접 행렬의 대각선의 값은 항상 0이다. 무방향 그래프에서는 간선[a, b]와 [b, a]가 같기 때문에, 대각선을 기준으로 윗부분과 아랫부분이 대칭을 이룬다. 그와 반대로, 방향 그래프에서는 간선[a, b]와 [b, a]가 서로 다른 간선이기 때문에 대칭을 이루지 않는다.

장점

2차원 배열 안에 모든 정점들의 간선 정보를 담기 때문에 배열의 위치를 확인하면 두 점에 대한 연결 정보를 조회할 때 O(1) 의 시간 복잡도면 가능하다.
구현이 비교적 간편하다.

단점

모든 정점에 대해 간선 정보를 대입해야 하므로 O(n²) 의 시간복잡도가 소요됩니다.
무조건 2차원 배열이 필요하기에 필요 이상의 공간이 낭비됩니다.

2) 인접리스트 방식 (Adjacency list) 인접 리스트는 각 정점이 어떤 정점과 인접한지 리스트의 형태로 볼 수 있는 표현 방식이다. 각 정점마다 하나의 리스트를 가지고 있으며, 이 리스트에는 자신과 인접한 다른 정점들이 담겨 있다.

장점

정점들의 연결 정보를 탐색할 때 O(n) 의 시간이면 가능하다. (n: 간선의 갯수)
필요한 만큼의 공간만 사용하기때문에 공간의 낭비가 적다.

단점

특정 두 점이 연결되었는지 확인하려면 인접행렬에 비해 시간이 오래 걸린다. (배열보다 탐색 속도 느림)
구현이 비교적 어렵다.

그래프 탐색 방법

하나의 정점에서 시작하여 그래프에 있는 모든 정점을 한번씩 방문하는 것을 그래프 순회 또는 그래프 탐색 이라고 한다. 그래프 탐색 방법은 깊이 우선 탐색과 너비 우선 탐색이 있다.

1) 깊이 우선 탐색 : DFS(Depth First Search) 깊이 우선 탐색은 시작 정점에서 한 방향으로 갈 수 있는 가장 먼 경로까지 깊이 탐색해가다가 더 이상 갈 곳이 없으면 가장 마지막에 만났던 갈림길 간선이 있는 정점으로 되돌아와서 다른 방향의 간선으로 탐색을 계속함으로써 모든 정점을 방문하는 순회 방법이다. Stack 사용

2) 너비 우선 탐색 : BFS(Breath Frist Search) 너비 우선 탐색은 시작 정점으로 부터 인접한 정점들을 모두 차례로 방문한 후, 방문했던 정점을 다시 시작점으로 하여 인접한 정점들을 차례로 방문하는 방법으로, 가까운 정점들을 먼저 방문하고 멀리 있는 정점들은 나중에 방문하는 순회 방법이다. Queue 사용

4. 트리(Tree)

노드로 구성된 계층적 자료구조로 최상위 노드(루트)를 만들고, 그 아래 자식 노드를 추가하는 방식. 그래프의 여러 구조 중 사이클이 없는 그래프이며 일방향 그래프의 한 구조로, 최소연결트리로 불린다. 그러므로, 루트에서 어떤 노드로 가는 경로는 유일하다.

트리 용어

노드(node) : 트리의 구성요소
간선(edge) : 노드와 노드를 잇는 선
- 노드가 N개인 트리는 항상 N-1개의 간선(링크)를 가진다
루트 노드(root node) : 트리의 최상위 존재하는 노드
단말 노드(leaf node) : 차수가 0인 노드, 즉 자식 노드가 없는 노드
내부 노드(internal node) : 차수가 1 이상인 노드, 단말 노드가 아닌 노드
부모(parent) : 부속트리(subtree)를 가진 노드
자식(child) : 부모에 속하는 노드
형제(sibling) : 같은 부모를 가지는 노드
크기(size) : 자신을 포함한 모든 자식 노드의 개수
차수(degree): 하위 트리 개수 / 간선 수 (degree) = 각 노드가 지닌 가지의 수
깊이(depth) : 루트 노드에서 어떤 노드에 도달하기 위해 거쳐야 하는 간선의 수
- 루트 노드의 깊이는 0이다
높이(height) : 루트 노드에서 가장 깊숙히 있는 노드의 깊이
레벨(level) : 트리의 깊이와 정의가 비슷하지만 그 기준이 간선이 아닌 노드의 개수이다. 따라서 depth + 1 = level이 성립한다

4-1. 이진탐색트리(BST: Binary Search Tree)

모든 왼쪽 자식들은 루트나 부모보다 작은 값이고, 모든 오른쪽 자식들은 루트나 부모보다 큰 값인 특징을 가지고 있는 이진 트리를 이진 탐색 트리라고 정의한다.

이진트리(Binary Tree) 란?

자식 노드가 최대 두 개인 노드들로 구성된 트리를 이진 트리라고 정의한다. 이 두 개의 노드는 왼쪽 자식과 오른쪽 자식으로 분류한다. 이진 트리는 자료의 삽입, 삭제 방법에 따라 정 이진 트리(Full binary tree), 완전 이진 트리(Complete binary tree), 포화 이진 트리(Perfect binary tree)로 나뉜다.

이진트리의 종류

정 이진 트리: 각 노드가 0 개 혹은 2 개의 자식 노드를 갖는다.
포화 이진 트리: 정 이진 트리이면서 완전 이진 트리인 경우다. 모든 단말노드의 레벨이 동일하고, 모든 레벨이 가득 채워져 있는 트리다.
완전 이진 트리: 마지막 레벨을 제외한 모든 노드가 가득 차 있어야 하고, 마지막 레벨의 노드는 전부 차 있지 않아도 되지만 왼쪽이 채워져야 한다.

이진탐색트리 순회 종류

1) 전위 순회 (Preorder) : 현재 노드 → 왼쪽 서브트리 → 오른쪽 서브트리

** 결과값 : A → B → D → E → C → F → G**

2) 중위 순회 (Inorder) : 왼쪽 서브트리 → 현재 노드 → 오른쪽 서브트리

** 결과값 : D → B → E → A → F → C → G**

3) 후위 순회 (Postorder) : 왼쪽 서브트리 → 오른쪽 서브트리 → 현재 노드

** 결과값 : D → E → B → F → G → C → A**

참고 사이트

https://andrew0409.tistory.com/148

https://coding-factory.tistory.com/610

https://velog.io/@leobit/%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0Data-Structure#1-%EA%B7%B8%EB%9E%98%ED%94%84graph

https://kosaf04pyh.tistory.com/131

[JavaScript] Prototype Chain

Fri, 26 Feb 2021 07:47:23 GMT

Prototype

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 property 또는 method를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 property를 제공하기 위해 사용한다. 결론적으로 쉽게 설명하면, 모델의 청사진을 만들 때 쓰는 원형 객체(Original form)이다.

constructor (생성자 함수)

Prototype 객체는 constructor property를 갖는다. 이 constructor property는 객체의 입장에서 자신을 생성한 객체를 가리킨다.

예를 들어 Person() 생성자 함수에 의해 생성된 객체를 foo이라고 하자. 이 foo 객체를 생성한 객체는 Person() 생성자 함수이다. 이때 foo 객체 입장에서 자신을 생성한 객체는 Person() 생성자 함수이며, foo 객체의 Prototype 객체는 Person.prototype이다. 따라서 Prototype 객체 Person.prototype의 constructor property는 Person() 생성자 함수를 가리킨다.

function Person(name) {
  this.name = name;
}
>
var foo = new Person('Lee');
>
// Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Person.prototype.constructor === Person);
👉 true
>
// foo 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(foo.constructor === Person);
👉 true
>
// Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
console.log(Person.constructor === Function);
👉 true

Prototype Chain

자바스크립트는 특정 객체의 property나 method에 접근시 객체 자신의 것뿐 아니라 __proto__ 가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다. 즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.
Example

💻 Code

const car = {
    wheels: 4,
    drive(){
        console.log("drive...");
    },
};
>
const bmw = {
    color: "red",
    navigation: 1,
};
>
bmw.__proto__=car;
>
const x5 = {
    color: "white",
    name: "x5",
};
>
x5.__proto__=bmw;

✔ Result

x5.name
👉 "x5"
>
x5.color
👉 "white"
>
x5.navigation
👉 1
>
x5.drive();
👉 drive...

주의해야할 점

x5
👉 {color: "white", name: "x5"}
>
> 
for(let p in x5){
    console.log(p);
}
👉 color
👉 name
👉 navigation
👉 wheels
👉 drive
>
>
// color와 name을 제외한 나머지들은 Prototpye에서 정의한 property이다.  
for(p in x5){
    if(x5.hasOwnProperty(p)){
        console.log('o', p);
    } else{
        console.log('x', p);
    }
}
👉 o color
👉 o name
👉 x navigation
👉 x wheels
👉 x drive
>  
>
Object.keys(x5);
(2) ["color", "name"]
Object.values(x5);
(2) ["white", "x5"]

💻 constructor를 이용해보자

const Bmw = function (color){
  this.color = color;
};
>
Bmw.prototype = {
  constructor: Bmw,
  // 명시하지 않을 경우 z4.constructor === Bmw; 는 false값이 나온다
  // 이런 현상을 방지하기 위해 Prototype으로 덮어씌우지 않고 하나씩 property를 추가하는 것이 좋다
  wheels: 4,
  drive() {
    console.log("drive...");
  },
  navigation: 1,
  stop() {
    console.log("STOP!");
  },
};
>
  >
const z4 = new Bmw("blue");
>
>
z4.stop();
👉 STOP!
>
z4 instanceof Bmw
👉 true
>
z4.constructor === Bmw;
👉 true

OOP (Object Oriented Programming)

Fri, 26 Feb 2021 02:52:14 GMT

OOP 란?

OOP. 즉, 객체지향 프로그래밍은 프로그래밍 설계 철학이다. OOP의 모든 것은 객체로 그룹화되며 이 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. OOP가 등장하기 전에 절차지향 프로그래밍이 먼저 존재하였다. 절차지향 프로그래밍을 아주 간단하게 이야기하면, 특정 작업을 수행하기 위한 프로그램을 작성할 때, 정해진 절차에 순차적으로 맞춰 수행하는 것이다. 그러나 OOP가 등장함에 따라, 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안한 것이다. 그러므로 데이터와 기능이 별개로 취급되지 않고, 한번에 묶어서 처리할 수 있게 된 것이다. 이러한 객체 지향의 특징은 빠르게 현대 언어에 적용이 되었으며, Javascript는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있다.

OOP의 4가지 주요 개념

1. 캡슐화 (Encapsulation)

데이터와 기능을 하나의 단위로 묶는 것
은닉 Hiding : 구현은 숨기고, 동작은 노출시킴
느슨한 결합 Loose Coupling에 유리: 언제든 구현을 수정할 수 있음

캡슐화는 속성과 기능(메소드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것이다.

캡슐화라는 개념에는 "은닉화"의 특징도 포함하고 있는데, 은닉화는 내부 데이터나 내부 동작이 외부로 노출되지 않도록 만드는 것이다. 따라서, 디테일한 구현이나 데이터는 숨기고, 동작만 노출시켜야 한다. 또한, 캡슐화의 장점으로는, 느슨한 결합을 할 수 있게 돕는다.

절차적 코드의 경우 데이터의 형태가 바뀔 때에 코드의 흐름에 큰 영향을 미치지만, 객체 지향의 경우 객체 내 메소드의 구현만 수정하고, 노출된 메소드를 사용하는 코드 흐름은 바뀌지 않도록 만들 수 있다.

2. 추상화 (Abstraction)

추상화는 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념이다.

예를 들어 전화라는 객체가 있다면, 그 안에는 스피커와 마이크가 존재하고, 서킷 보드 등이 존재하는 등 내부 구현이 되어 있을 것이다.

그러나 실제로 우리가 사용할 때에는, 이러한 존재에 대해서는 생각하지 않고 단순히 수화기를 들고 버튼을 눌러서 해결하는 것으로 인터페이스(interface)를 단순화할 수 있다.

이러한 추상화를 통해 인터페이스가 단순해진다. 너무 많은 기능들이 노출되지 않은 덕분에 예기치 못한 사용상의 변화가 일어나지 않도록 만들 수 있다.

추상화는 캡슐화와 비교해서 종종 헷갈려하는 개념 중 하나다.

캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 기능 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

클래스 정의 시, 메소드와 속성만 정의한 것을 인터페이스라고 부른다. 이것이 추상화의 본질이다.

3. 상속 (Inheritance)

상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것이다.

부모/자식으로 이야기하기도 하지만, 보다 그 특징을 자세하게 설명하는 용어는 "기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다"로 표현하는 것이 적합하다.

4. 다형성 (Polymorphism)

Polymorphism라는 단어의 poly는 "많은", 그리고 morph는 "형태"라는 뜻을 가지고 있다. 즉 "다양한 형태"를 가질 수 있다는 설명이 된다.

"말하다"라는 동작의 본질은 "입으로 소리를 내다"를 의미한다. 그러나, 각기 다른 동물들이 "말할 때" 제각각의 소리를 내는 것처럼, 객체 역시 똑같은 메소드라 하더라도, 다른 방식으로 구현될 수 있다.

만일 언어 자체에서 다형성을 제공하지 않는다면, 기본(부모) 클래스에 종류별로 분기를 시켜서 하나하나 다르게 만들어야 할 것이다.

정리

캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.

추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 인해 변화에 대한 영향을 최소화한다

상속 역시 불필요한 코드를 줄여 재사용성을 높인다.

다형성으로 인해 동일한 메소드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다.

[JavaScript] 화살표 함수

Wed, 24 Feb 2021 14:43:43 GMT

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해본다. 보통 함수 표현식을 축약한 형태로 표시된다.

일반함수

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

화살표 함수

일반적인 화살표 함수의 사용법

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

return을 생략할 경우, 중괄호{}는 사용해서는 안된다.

const add = (x, y) => x + y

필요에 따라 소괄호()를 붙일 수 있다.

const add = (x, y) => (x + y)

화살표 함수를 이용한 클로저 함수 예제

일반적인 함수 표현식

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

화살표 함수를 이용하여 축소화 한다.

✔ 추가적으로, 파라미터가 단 한개라면, 소괄호를 생략할 수 있다

const adder = x => y => x + y

문서 객체 모델(DOM)

Wed, 03 Feb 2021 14:23:27 GMT

DOM(Document Object Model) 이란?

DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있으며, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

이 중에서, 오늘 document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법들을 접했다.

오늘은 간단하게 대표적으로 이런 것들이 있구나라고 파악을 했고, 추가적으로 다른 명령어들도 찾아봐야겠다.

추후에 직접 실습을 해본 내용들을 따로 정리해야겠다.

CREATE: createElement , append, appendChild
READ: querySelector, querySelectorAll , getElementById
UPDATE: textContent, classList, setAttribute
DELETE: remove, removeChild, (innerHTML = "" , textContent = "")

PS. CRUD란?

C reate : 생성
R ead   : 읽기(조회)
U pdate : 갱신(수정)
D elete : 삭제

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다.

[JavaScript] map,filter,reduce

Mon, 01 Feb 2021 14:14:42 GMT

내장고차함수(Built-in higher order functions)

자바스크립트에는 기본적으로 내장(built-in)되어 있는 고차 함수들이 있다. 바로 배열 메소드들 중 일부가 고차 함수에 해당한다. 그 중에서 map,filter,reduce를 중점적으로 공부하였다. 참고로 이 메소드들은 모두 사본을 반환하며 원래의 배열은 바뀌지 않는다.

map
1. 배열의 각 요소가
  1. 특정 논리(함수)에 의해
2. 다른 요소로 지정(map) 된다.

쉽게 말해 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어낸다.

👉 arr.map(callback(currentValue[, index[, array]])[, thisArg])
callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가진다.
currentValue: 처리할 현재 요소.
index(Optional): 처리할 현재 요소의 인덱스.
array(Optional): map을 호출한 배열.

thisArg(Optional): callback을 실행할 때 this로 사용되는 값

ex.1)

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

ex.2)

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

filter
1. 배열의 각 요소가
  1. 특정 논리(함수)에 따르면, 사실(boolean)일 때
2. 따로 분류한다(filter).

배열의 filter 메소드는 배열의 요소 중 특정 조건을 만족하는 요소들만을 걸러내는(filter) 메소드이다. 예를 들어, 수(number)를 요소로 갖는 배열 중 짝수만을 걸러내거나, 18 보다 작은 수만을 걸러내는 식이다. 문자열(string)을 요소로 갖는 배열 중 길이가 10 이하인 문자열만 걸러내거나, 'student' 같은 특정한 문자열을 걸러낼 수도 있다.

👉 arr.filter(callback(element[, index[, array]])[, thisArg])
callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세 가지 매개변수를 받는다.
element: 처리할 현재 요소.
index(Optional): 처리할 현재 요소의 인덱스.
array(Optional): filter를 호출한 배열.

thisArg(Optional): callback을 실행할 때 this로 사용되는 값

ex.1)

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

ex.2)

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};
let arr = [1, 2, 3, 4];
>
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]
>
const isLteFive = function (str) {
  // Lte = less then equal
  return str.length <= 5;
};
>
arr = ['hello', 'code', 'states', 'happy', 'hacking'];
// output = arr.filter(길이 5 이하)
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달
let output = arr.filter(isLteFive);
console.log(output); // ->> ['hello', 'code', 'happy']

reduce
1. 배열의 각 요소를
  1. 특정 응축 방법(함수)에 따라
2. 원하는 하나의 형태로
3. 응축한다(reduction).

reduce() 메소드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다.

👉 arr.reduce(callback[, initialValue])
callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.
accumulator: 누산기^accmulator는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.
currentValue: 처리할 현재 요소.
currentIndex(Optional): 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.
array(Optional): reduce를 호출한 배열

initialValue(Optional): callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce를 호출하면 오류가 발생한다.

콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있다. 만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같다. initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같다.

ex.1)

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);    --> 초기값 0으로 설정
// sum is 6

ex.2)

var sum = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10); --> 초기값 10으로 설정
// sum is 20

	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	10	0	0	[0, 1, 2, 3, 4]	10
2번째 호출	10	1	1	[0, 1, 2, 3, 4]	11
3번째 호출	11	2	2	[0, 1, 2, 3, 4]	13
4번째 호출	13	3	3	[0, 1, 2, 3, 4]	16
5번째 호출	16	4	4	[0, 1, 2, 3, 4]	20

[JavaScript] 일급객체와 고차함수

Mon, 01 Feb 2021 12:17:11 GMT

일급객체(first-class citizen)와 고차함수(higher order function)

일급객체
- 변수에 할당(assignment)할 수 있다.
- 다른 함수의 인자(argument)로 전달될 수 있다.
- 다른 함수의 결과로서 리턴될 수 있다.

이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다. 변수에 저장할 수 있기 때문에 배열의 요소나 객체의 속성값으로 저장하는 것도 가능하다.

고차함수 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.
콜백 함수를 전달받은 함수는 이 콜백 함수를 호출(invoke)할 수 있다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있고, 심지어 여러 번 실행할 수도 있다. 특히 콜백 함수는 어떤 작업이 완료되었을 때 호출되는 경우가 많아서 답신 전화를 뜻하는 콜백이라는 이름이 붙여졌다.

다른 함수를 인자로 받는 경우

function double(num) {
return num * 2;
}

function doubleNum(func, num) { return func(num); }

// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수. // 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우 // 함수 func는 함수 doubleNum의 콜백 함수. // 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수. let output = doubleNum(double, 4); console.log(output); // -> 8

***
2. 함수를 리턴하는 경우
```js
function adder(added) {
  return function (num) {
    return num + added;
  };
}

// 함수 adder는 다른 함수를 리턴하는 고차 함수입.
// adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴.
// 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴.

// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
let output = adder(5)(3); // -> 8
console.log(output); // -> 8

// adder가 리턴하는 함수를 변수에 저장할 수 있다.
// javascript에서 함수는 일급 객체이기 때문이다.
const add3 = adder(3);
output = add3(2);
console.log(output); // -> 5

함수를 인자로 받고, 함수를 리턴하는 경우
```
function double(num) {
return num * 2;
}
```

function doubleAdder(added, func) { const doubled = func(added); return function (num) { return num + doubled; }; }

// 함수 doubleAdder는 고차 함수다. // 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수다. // 함수 double은 함수 doubleAdder의 콜백으로 전달되었다.

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있다. doubleAdder(5, double)(3); // -> 13

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체) const addTwice3 = doubleAdder(3, double); addTwice3(2); // --> 8

***