프론트엔드Explorer

JSON

브라우저 위에서 동작하는 웹사이트나 웹어플리케이션과 같은 Client가 어떻게 Server와 통신할 수 있는지를 정의한 것이 바로 HTTP이다. HTTP는 Hypertext Transfer Protocal의 약자로, 어떻게 Hypertext를 서로 주고받을지를 규약한 프로토콜의 하나이다. Client는 Server에 data를 요청할 수 있고, Server는 Client에 응답하는 방식으로 진행된다. 그리고 여기서, Hypertext는 hyperlink, 문서, image 등 전반적인 resource를 일컫는다. 이렇게 Client가 Server와 데이터를 주고 받는 방식 중, 요즘 가장 많이 사용되는 것이 JSON이다. 아래가 그 예시이다. 

{
  "users": [
    {
      "Name": "gildong",
      "Nickname": "hong",
      "joined": {
        "month": "December",
        "day": 24
      }
    },
    {
      "Name": "sejong",
      "Nickname": "king",
      "joined": {
        "month": "November",
        "day": 13
      }
    }
  ]
}

JSON은 아래와 같은 특징을 가지고 있다. 

- Simplest data interchange format 

- Lightweight text-based structure 

- Easy to read

- Key-Value pairs

- Used for serialization(직렬화) and transmission of data between the network and network connection

- Independent programming language and platform (모든 언어, 플랫폼에서 사용가능하다는 점이 가장 좋은 점)

예를 들어, Client에서 토끼라는 object를 Server에 전송한다고 하면, {key: value}형태로 전송하면 된다. Server에서 다시 토끼를 받아올 때도, {key: value}의 string type으로 받아와서 다시 토끼라는 object로 변환해서 브라우저에 표기하게 된다. 

JSON 공부 Point

*serialization(직렬화) : 어떠한 데이터 구조를 송수신하거나 저장하기 위해 전송에 적합한 포맷으로 변환하는 과정.

Object를 어떻게 serialize(직렬화)해서 JSON으로 변환할지! 직렬화된 JSON을 어떻게 deserialize해서 Object로 변환할지!

Object to JSON

이때, 사용하는 것이 stringify()!

let json = JSON.stringify(true);
console.log(json); // object -> json: true

json = JSON.stringify(['apple', 'banana']);
console.log(json); // object -> json: ["apple", "banana"]

JSON to Object 

이때, 사용하는 것은 parse()!

json = JSON.stringify(rabbit); // json으로 만들었던 object를 
const obj = JSON.parse(json); // 다시 object로 만들고자 하면 parse를 쓰면 된다! 
console.log(obj); 

www.youtube.com/watch?v=FN_D4Ihs3LE

TypeScript는 왜 만들어졌나?

JavaScript는 C나 Java와 같은 C-family 언어와는 구별되는 특성이 있다. 

- Prototype-based Object Oriented Language 

- Scope와 this 

- 동적 타입(dynamic typed) 언어 or 느슨한 타입(loosely typed) 언어 

이와 같은 특성은 클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며, 코드가 복잡해질 수 있고, 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다. 특히 규모가 큰 프로젝트에서는 주의하여야 한다. 

이런 Javascript의 태생적 문제를 극복하고자 AltJS(JavaScript의 대체 언어)가 등장하였다. 

TypeScript 또한 JavaScript의 대체 언어의 하나로, JavaScript(ES5)의 Superset(상위확장)이다.

TypeScript는 ES5의 Superset이므로 기존의 Javascript(ES5) 문법을 그대로 사용할 수 있다. 또, ES6의 새로운 기능을 사용하기 위해 Babel 같은 별도의 transpiler를 사용하지 않아도, ES6의 새로운 기능을 기존의 JavaScript 엔진(현재 브라우저 or Node.js)에서 실행할 수 있다.   

TypeScript 기초 of 기초

TypeScript와 JavaScript의 차이 

- TypeScript는 JavaScript와 달리 Type을 적는다. 

- JavaScript는 약타입 언어, TypeScript는 강타입 언어 

타입은 왜 적을까? 

- 코드가 조금 길어지더라도 명시적인 코드가 더 좋아서  

- 타입이 있으면, 코드를 읽을 때 이해하기가 더 쉬워서 

- TypeScript는 transpile 때 오류를 찾을 수 있어서 

암묵적 타입 vs 명시적 타입 

타입을 지정해주지 않으면, 알아서 타입을 추론해 타입을 대입한다. 하지만, JavaScript와는 달리 다른 타입을 같은 변수에 대입하려고 하면 오류가 발생한다. 이것은 명시적으로 작성한 변수에서도 마찬가지다. 

명시적으로 작성하기 

예전 JavaScript 개발자들은 암묵적인 코드를 많이 작성했다. 하지만 그런 방식은 코드를 이해하기 힘들게 만든다. 그래서 요즘에는 아래와 같이 arguments를 사용해서 함수를 작성한다고 한다. (*spread operator를 사용하는 이유는 arguments가 몇 개인지 딱 정해지지 않기 때문이다.) 

function bar(...args){
  console.log(args[0], args[1]);
  return 0; 
}
bar(10, 20); 

기본적인 타입

- 변수 뒤에 선언된 number는 숫자 전체를 나타내는 타입

- 조금 더 범위를 좁히고 명확하게 타입을 나타내는 방법은 line 6처럼 'type Age'와 같이 타입을 선언하는 것 

- Age는 나이라는 타입을 나타낸다. 나이는 숫자여야 하기 때문에 'type Age = number'로 선언함 

TS compile

- TypeScript는 컴파일해서 JavaScript 파일이 된다. 프로그램은 컴파일된 JavaScript 파일이 실행되어 돌아간다. 

- 타입은 TypeScript에서 JavaScript로 컴파일될 때 사용된다. 컴파일 된 JavaScript는 우리가 아는 JavaScript와 똑같다. 즉, 그곳에는 타입이 없다. 

- TypeScript에서 컴파일 된 JavaScript가 실행될 때 작동되는 것도 있다. 

객체 타입

객체의 타입을 선언할 때는 아래 코드처럼 표현하고자 하는 객체와 동일 구조를 가진 타입을 선언하면 된다. 이러한 방식을 type Alias라고 한다. 

객체의 타입을 선언하는 방법은 하나가 더 있다. interface는 아래 코드처럼 type 대신 interface를 사용해 선언할 수 있다.

poiemaweb.com/typescript-introduction

velog.io/@wooder2050/%EC%9A%B0%EC%95%84%ED%95%9C-%ED%85%8C%ED%81%AC%EB%9F%AC%EB%8B%9D-ReactTypescript-1%ED%9A%8C%EC%B0%A8

css에서 nth-child는 다음과 같이 쓰인다.

/* 첫번째 item에 styling할 때 */ 
.item:first-child{
	color: #FFFFFF; 
}

/* 두번째 item에 styling할 때 */  
.item:nth-child(2){
	color: #0066FF; 
}

/* 마지막 item에 styling할 때 */
.item:last-child{
	color: #000000; 
}

nth-child의 child라는 말 때문에, item 클래스의 자식요소에 styling하라는 뜻인가? 싶을 수 있지만, 여기서 child의 의미는 item 부모 요소의 child를 의미한다. 

부모 요소의 child~ 이런 식으로 기억하는 것이 더 헷갈릴 수 있으므로, nth-child가 나오면 선택자와 같은 level에 있는 것 중 몇 번째인지를 확인해보는 게 가장 좋다. 

.curriculum .row:nth-child(2){
    margin-bottom: 48px;
} 

위의 코드는, curriculum 클래스의 자식인 row 클래스와 같은 level에 있는 요소 중에서 2번째의 margin-bottom을 48px로 해달라는 뜻이다.

한 가지 예시를 더 보자. 아래와 같은 html 코드가 있을 때, 짝수 번 list item에는 color를 red로, 홀수 번 list item에는 color를 yellow로 주고 싶을 때는 어떻게 할 수 있을까?

<ol>
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
	<li>F</li>
</ol>

같은 level에 있는 li 요소 중, 짝수 번은 color를 #FF4949로, 

같은 level에 있는 li 요소 중, 홀수 번은 color를 #FFC82C로 준다는 뜻이 되는 것이다.

li:nth-child(2n){
	color: #FF4949;
}

li:nth-child(2n-1){
	color: #FFC82C;
}

React component에서 다루는 data는 props와 state, 이 두 가지로 나뉩니다.

props는 부모 component가 자식 component에게 주는 값입니다. 자식 component에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수 없습니다.

반면에 state는 component 내부에서 선언하며, 내부에서 값을 변경할 수 있습니다. 

+) props("properties"의 줄임말)와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에 차이가 있는 것입니다. props는 함수 매개변수처럼 component에 전달이 되는 반면, state는 함수 내에 선언된 변수처럼 component 안에서 관리됩니다. 

새 Component 만들기 

먼저, src 디렉토리에 MyName이라는 component를 만들어보겠습니다. 

import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

export default MyName;

자신이 받아온 props 값은 this. 키워드를 통해 조회할 수 있습니다. 지금은 name이라는 props를 보여주도록 설정해두었습니다. 

이제 component를 사용해보겠습니다. 

import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

import를 통해 component를 불러오고, 렌더링 해보겠습니다. 이렇게 component를 만들고 나면, 일반 태그를 작성하듯이 작성해주면 됩니다. props 값은 name="리액트" 처럼 태그의 속성 설정하듯이 작성해주시면 됩니다. 

함수형 Component

위와 같이 단순히 props만 받아와서 보여주는 component의 경우에는 더 간편한 문법으로 작성할 수 있습니다. 바로 함수 형태로 작성하는 것인데요. 위에서 만들었던 MyName component를 다시 작성해보겠습니다. 

import React from 'react';

const MyName = ({ name }) => {
  return (
    <div>
      안녕하세요! 제 이름은 {name} 입니다.
    </div>
  );
};

export default MyName;

훨씬 간단하게 작성이 가능한 것을 알 수 있는데요! 함수형 component와 클래스형 component의 주요 차이점은 state와 LifeCycle이 빠져있다는 점입니다. 그래서 component 초기 마운트가 아주 미세하게 빠르고, 메모리 자원을 덜 사용합니다. 미세한 차이라서 component를 무수히 많이 렌더링 하는 것이 아니라면 성능적으로 큰 차이는 없습니다. 

state

state는 동적인 data를 다룰 때 사용합니다. 이번에는 Counter라는 새로운 component를 만들어보겠습니다.

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }

  handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

메소드가 작성된 부분을 자세히 살펴보겠습니다. 

handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

component에 메소드를 작성해주었는데, 메소드는 아래의 형식으로도 작성할 수 있습니다. 

handleIncrease() {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease() {
    this.setState({
      number: this.state.number - 1
    });
  }

이렇게 하면 나중에 버튼에서 클릭 이벤트가 발생했을 때, this가 undefined로 나타나서 제대로 처리되지 않게 됩니다. 함수가 버튼의 클릭 이벤트로 전달되는 과정에서 'this'와의 연결이 끊겨버리기 때문인데요. 이를 고쳐주려면 constructor에서 아래처럼 해주면 됩니다. 

constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }

이렇게 이중으로 작성하는 것보다는, 제일 위에 작성된 코드처럼 아예 화살표 함수 형태로 작성하면, this가 풀리는 것에 대해 걱정하실 필요가 없습니다. 

이제 각 메소드에 들어있는 this.setState에 대해 알아봅시다. state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야 합니다. React에서는 이 함수가 호출되면 component가 re-rendering 되도록 설계되어 있습니다. 

setState는 객체로 전달되는 값만 업데이트 해줍니다. 

아래의 코드를 보면,  state에 number와 foo라는 값이 있습니다. 

state = {
    number: 0,
    foo: 'bar'
  }

this.setState({ number: 1 }); 을 하게 되면 foo는 그대로 남고, number 값만 업데이트됩니다.

setState는 객체의 깊숙한 곳까지 확인하지 못합니다. 예를 들어 state가 아래와 같이 설정되어 있다고 해봅시다. 

state = {
    number: 0,
    foo: {
      bar: 0,
      foobar: 1
    }
  }

아래와 같이 한다고 해서 foobar 값이 업데이트 되지 않습니다. 

this.setState({
  foo: {
    foobar: 2
  }
})

그냥 기존의 foo 객체가 아래와 같이 바뀌어버립니다.

{
  number: 0,
  foo: {
    foobar: 2
  }
}

대신 위와 같은 상황에서는 아래와 같이 해주어야 합니다. 

this.setState({
  number: 0,
  foo: {
    ...this.state.foo,
    foobar: 2
  }
});

...은 JavaScript의 전개 연산자입니다. 기존의 객체 안에 있는 내용을 해당 위치에 풀어준다는 의미입니다. 

setState에 객체 대신 함수 전달하기 

setState를 사용하여 값을 업데이트할 때(기존의 값을 참고하여 업데이트할 때) 조금 더 나은 문법으로 할 수가 있는데요. 

기존에 작성했던 코드는 아래와 같죠? 

this.setState({
  number: this.state.number + 1
});

큰 문제는 아니지만 굳이 또 this.state를 조회해야 하는데요. 아래와 같이 조금 더 나은 문법으로 작성할 수 있습니다. 

this.setState(
  (state) => ({
    number: state.number
  })
);

여기서 조금 더 나아가면 아래와 같이 작성할 수도 있습니다. 

this.setState(
  ({ number }) => ({
    number: number + 1
  })
);

(state)가 ({ number })가 되었는데, 이건 비구조화 할당이라는 문법입니다. 이 문법은 아래처럼 사용할 수 있는데요. 

const { number } = this.state;

결국 코드를 조금 덜 작성하고 싶다면 아래처럼 하면 된답니다. 

const { number } = this.state;
this.setState({
  number: number + 1
})

자료 출처

- velopert.com/3629

- ko.reactjs.org/docs/faq-state.html