뉴디닐기 | Feed

[React] Hook 규칙 & Custom Hook

Wed, 04 Nov 2020 00:00:00 GMT

전체내용 : Hook의 규칙

1. Hook의 규칙

Hook은 JavaScript함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 한다.
React에서는 규칙을 자동으로 강제하기 위해 linter 플러그인 을 제공한다.

1) 규칙

(1) 최상위(at the Top Level)에서만 Hook을 호출해야 한다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안 된다. 항상 React함수의 최상위에서 Hook을 호출해야 한다.
→ 컴포넌트가 렌더링 될 때마다 동일한 순서로 Hook이 호출되는 것이 보장된다.
→ React가 useState와 useEffect가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 있게 해준다.

(2) 오직 React 함수 내에서 Hook을 호출해야 한다.

일반적인 JavaScript 함수에서 Hook을 호출하면 안 된다.
가능한 호출 방법은 React함수 컴포넌트에서 호출, Custom Hook에서 호출 두 가지이다.
→ 이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.

2) ESLint 플러그인

위의 두 규칙을 강제하는 eslint-plugin-react-hooks 라는 ESLint 플러그인이 있다.

Create React App에 기본적으로 포함되어 있다.

> npm install eslint-plugin-react-hooks --save-dev

// ESLint 설정 파일
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

3) 규칙 설명

React가 특정 state가 어떤 useState호출에 해당하는지 알 수 있는 이유는 React가 Hook이 호출되는 순서에 의존하기 때문이다. 모든 렌더링에서 Hook의 호출 순서는 같기 때문에 올바르게 동작할 수 있다.

하지만, Hook을 조건문 안에서 호출한다면 (첫 번째 규칙을 깸) Hook을 건너뛰는 경우가 생길 수 있고 Hook을 호출하는 순서가 달라지게 된다. 이에 따라 건너뛴 Hook 다음에 호출되는 Hook이 순서가 하나씩 밀리면서 버그를 발생시킨다.
⇒ 컴포넌트 최상위에서만 Hook을 호출하는 이유

만약 조건부로 effect를 실행하길 원한다면, 조건문을 Hook 내부에 넣으면 된다.

useEffect(function persistForm() {
    // 👍 더 이상 첫 번째 규칙을 어기지 않습니다
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

2. 자신만의 Hook 만들기

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용 할 수 있다.

1) 상태 관련 로직을 컴포넌트에서 공유하는 방법

여기서 예시의 목표는 FriendSatus와 FriendListItem 컴포넌트에 중복되어있는 로직을 제거하는 것

(1) 사용자 정의 Hook 추출하기

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리한다. Hook또한 함수이므로 보통의 함수와 같은 방법으로 사용한다.

사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수다. 사용자 Hook은 다른 Hook을 호출할 수 있다. (이름은 반드시 use로 시작해야한다. Hook규칙이 적용되는지 파악하기 위함)

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  return isOnline; // 온라인 상태 여부 반환
}

(2) 사용자 정의 Hook 이용하기

function FriendStatus(props) {
	const isOnline = useFriendStatus(props.friend.id);
	...
}

function FriendListItem(props) {
	const isOnline = useFriendStatus(props.friend.id);
	...
}

사용자 정의 Hook은 React의 특별한 기능이라기 보다는 기본적으로 Hook의 디자인을 따르는 관습이다.
사용자 정의 Hook의 이름은 use로 시작되어야 한다. 이를 따르지 않으면 특정한 함수가 그 안에서 Hook을 호출하는지 알 수 없기 때문에 Hook 규칙 위반 여부를 자동으로 체크할 수 없다.
같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하지 않는다. 사용자 정의 Hook은 상태 관련 로직을 재사용하는 매커니즘일 뿐, Hook을 사용할 때마다 그 안의 state와 effect는 완전히 독립적이다.
각각의 Hook에 대한 호출은 서로 독립된 state를 받는다. useFriendStatus를 직접적으로 호출하기 때문에 React의 관점에서 컴포넌트에서 useState와 useEffect를 호출한 것과 다름없다. 또한, 하나의 컴포넌트 안에서 useState와 useEffect를 여러 번 호출할 수 있고 이들은 모두 완전히 독립적이다.

2) 기타

(1) Hook에서 Hook으로 정보 전달하기

Hook은 함수이기 때문에 Hook사이에서도 정보를 전달할 수 있다.

// 현재 선택된 친구의 ID를 recipientID state 변수에 저장하고
// 사용자가 <select> 선택기에 있는 다른 친구를 선택하면 이를 업데이트하는 코드
// -> 지금 선택되어있는 친구의 온라인 상태여부를 알 수 있다.
const [recipientID, setRecipientID] = useState(1);
const isRecipientOnline = useFriendStatus(recipientID);

return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
		...

useState Hook호출은 recipientID state 변수의 최신값을 돌려주기 때문에 이를 useFriendStatus Hook에 인수로 보낼 수 있다.

주석_사용법_모음.zip

Tue, 03 Nov 2020 00:00:00 GMT

주석 사용법 MOA MOA DAMOA

주석 사용 방법

C, C++, JavaScript, JAVA

// 한줄주석

/* 여
	러
	줄 주석 */

/** 이
	* 렇
	* 게도 사용한다 */

Python

# 한줄주석

"""
여러줄
큰 따옴표
"""

'''
여러줄
작은 따옴표
'''

파이썬 IDLE
주석생성 : alt + 3
주석제거 : alt + 4

JSX

표준 자바스크립트의 주석을 {}로 감사서 작성한다.

{/* 내용 */}

xml, html

<!-- 내용 -->

주석단축키

JetBrains, VScode 등 IDLE

IntelliJ, PyCharm, AndroidStudio, CLion, 등

Windows : Ctrl + /
MAC OS : Cmd + /

이클립스

한줄(or 커서가 있는 줄) : Ctrl + /
여러줄 : Ctrl + Shift + /

Visual Studio

주석생성 : Ctrl + K + C
주석해제 : Ctrl + K + U

[React] state & effect Hook 사용하기

Tue, 03 Nov 2020 00:00:00 GMT

전체내용 : state Hook사용하기
Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있다.

1. State Hook 사용하기

1) Hook 과 함수 컴포넌트

React의 함수 컴포넌트는 다음 두 가지 모양으로 생겼다.

const Example = (props) => {
	// 여기서 Hook 사용가능
	return <div />;
}

function Example(props) {
	//여기서 Hook
	return <div />;
}

Hook은 React state를 함수 안에서 사용할 수 있게 해준다. (클래스 안에서는 동작 X)

기존에는 함수 컴포넌트 사용 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꿨다면, 이제는 함수 안에서 Hook을 이용하여 state를 사용할 수 있다. (단, 규칙준수)

2) state 변수 선언하기

함수 컴포넌트는 (클래스처럼) this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 었다. 대신, useState Hook을 직접 컴포넌트에 호출한다.

import React, { useState } from 'react';

function Example() {
	// count라는 새로운 state 변수 선언함
	const [count, setCount] = useState(0);

useState를 호출하는 것의 의미
"state 변수"를 선언할 수 있다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 같다. state변수는 React에 의해 함수가 끝나도 사라지지 않는다.
useState의 인자로 넘겨주는 것
state의 초기 값! 객체일 필요는 없고, 숫자 타입, 문자타입을 가질 수 있다. (2개의 다른 변수를 저장하길 원한다면 useState()를 두 번 호출해야 한다.)

useState가 반환하는 것
[state 변수, 해당 변수를 갱신할 수 있는 함수] ← 이 두 가지 쌍(배열)을 반환한다.
const [count, setCount] = useState()라고 쓰는 이유. 클래스 컴포넌트의 this.state.count와 this.setState와 유사하다.

/* 참고사항
이러한 문법은 "배열 구조 분해'라고 한다. 
이는 다음과 같이 배열에 접근하는 방식으로도 이용할 수 있지만, 
배열 구조 분해라는 특별한 방법으로 변수를 선언했기 때문에 
[0]이나 [1]로 배열에 접근하는 것은 좋지 않을 수 있다.
*/
var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
var fruit = fruitStateVariable[0]; // 첫 번째 아이템
var setFruit = fruitStateVariable[1]; // 두 번째 아이템

3) state 사용하기

state변수의 이름이 count일 때

(1) state 가져오기

클래스 컴포넌트 : count를 보여주기 위해 this.state.count를 사용한다.
```
<p>You clicked {this.state.count} times</p>
```
함수 컴포넌트 : count를 직접 사용할 수 있다.
```
<p>You clicked {count} times</p>
```

(2) state 갱신하기

클래스 컴포넌트 : count를 갱신하기 위해 this.setState()를 호출한다.

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Click me
</button>

함수 컴포넌트 : setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 된다.
클래스 컴포넌트와 달리 state를 갱신하는 것은 병합하는 것이 아니라 대체하는 것이다.
```
<button onClick={() => setCount(count + 1)}>
	Click me
</button>
```

4) 전체코드

// useState Hook을 React에서 가져온다.
import React, { useState } from 'react';

function Example() {
	// useState Hook을 이용, 'state 변수 & 해당 state를 갱신할 수 있는 함수'가 만들어진다.
	// useState의 인자로 0을 넘겨줘서 count값을 0으로 초기화했다.
	// state의 변수명, 인자로 넘겨줄 값은 자유롭게 ~
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>You clicked {count} times</p>
			{/* 사용자가 버튼을 클릭하ㅏ면 setcount함수를 호출하여 state변수를 갱신한다. 
			React는 새로운 count변수를 Example 컴포넌트에 넘기며 
            해당 컴포넌트를 리렌더링한다.*/}
			<button onClick={() => setCount(count + 1)}>
				Click me
			</button>
		</div>
	);
}

2. Effect Hook 사용하기

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
side effect : 데이터 가져오기, 구독설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하기, ...

effect에 정리가 필요없는 경우에는 어떤 것도 반환하지 않는다.
effect에 정리가 필요한 경우에는 함수를 반환한다.

→ effect Hook은 두 가지 경우를 한 개의 API로 통합한다.

1) 정리(clean-up)를 이용하지 않는 Effects

리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다.
네트워크 리퀘스트, DOM 수동조작, 로깅 등은 실행 이후 신경 쓸 것이 없기 때문에 정리가 필요가 없다.

(1) Class 를 사용하는 경우

render 메서드 그 자체는 side effect를 발생시키지 않는다. effect를 수행하는 것은 리액트가 DOM을 업데이트 한 이후다. (componentDidMount와 componentDidUpdate에 두는 이유)

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

개념적으로 렌더링 이후에는 항상 같은 코드가 수행되는 코드를 작성했을 때, Class 안의 두 개의 생명주기 메서드에 같은 코드가 중복된다.

(2) Hook을 이용하는 예시

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

useEffect가 하는 일?
리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는지 알려준다. 리액트는 우리가 넘긴 함수(effect라고 부른다)를 기억했다가 DOM 업데이트를 수행한 이후에 불러낸다.
useEffect를 컴포넌트 안에서 불러내는 이유?
컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 된다.
useEffect는 렌더링 이후에 매번 수행되는지?
그러하다. 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. 리액트는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다.

useEffect에 전달된 함수가 모든 렌더링에서 다르다. 리렌더링 하는 때마다 이전과 다른 effect로 교체하여 전달해서 렌더링의 결과의 한 부분이 되게 만든다. 각각의 effect는 특정한 렌더링에 속한다.

2) 정리(clean-up)를 이용하는 Effects

정리가 필요한 예 : 외부 데이터에 구독(subscription)을 설정해야 하는 경우. 메모리 누수가 발생하지 않도록 정리하는 것은 매우 중요하다.

(1) Class 사용하는 예시

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

	// 구독설정
  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

	// 정리 ~~~~ clean up
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }
...

componentDidMount와 componentWillUnmount 내에 개념상 똑같은 effect에 대한 코드가 있음에도, 생명주기 메서드는 이를 분리하게 만든다.

(2) Hook을 이용하는 예시

구독의 추가와 제거를 위한 코드는 결합도가 높기 때문에 useEffect는 이를 함께 다루도록 고안되었다. effect가 함수를 반환하면 리액트는 그 함수를 정리가 필요한 때에 실행시킬 것이다.

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

effect에서 함수를 반환하는 이유 ? effect를 위한 추가적인 정리 매커니즘이다. 구독의 추가와 제거가 모두 하나의 effect를 구성한다.
리액트가 effect를 정리하는 시점은 정확히 언제죠 ? 리액트는 컴포넌트가 마운트 해제되는 때에 정리를 실행한다. 하지만 위의 예시에서 effect는 한 번이 아니라 렌더링이 실행되는 때마다 실행된다. 이 것이 리액트가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect또한 정리하는 이유다.

effect에서 반드시 유명함수(named function)를 반환하지 않아도 된다.

3) effect를 사용하는 팁

(1) 관심사를 구분하려면 Multiple Effect를 사용한다

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

Hook을 이용하면 생명주기 메서드에 따라서가 아니라 코드가 무엇을 하는지에 따라 나눌 수 있다.
리액트는 컴포넌트에 사용된 모든 effect를 지정된 순서에 맞춰 적용한다.

(2) effect가 업데이트 시마다 실행되는 이유

effect 정리가 왜 마운트 해제되는 때에 한 번만이 아니라 모든 리렌더링 시에 실행될까? 이러한 디자인이 버그가 적은 컴포넌트를 만드는 데에 도움이 된다.

class 컴포넌트를 사용할 때 문제가 발생하는 경우

componentDidMount() {
	// 마운트된 이후 친구의 id를 통해 상태를 구독하며 온라인 표시
}
componentWillUnmount() {
	// 마운트 해제할 때 구독 해지

이 경우, 컴포넌트가 화면에 표시되어있는 동안 friend prop이 변하면(ex. 현재 친구 구독해지) 다른 친구(친구의 이전 id를 갖고 있는)의 온라인 상태를 계속 표시하는 버그가 발생한다. 또한 마운트 해제가 일어날 동안에는 구독 해지 호출이 다른 친구 id를 사용하여 메모리 누수나 충돌이 발생할 수도 있다.

이런 경우를 다루기 위해 클래스 컴포넌트에서는 componentDidUpdate를 사용한다.

componentDidUpdate(prevProps) {
	// 이전 friend.id에서 구독 해지
	// 다음 friend.id 구독
}

리액트 앱의 흔한 버그 중의 하나가 componentDidUpdate를 제대로 다루지 않는 것이다.

Hook 을 사용하는 컴포넌트

function FriendStatus(props) {
  // ...
  useEffect(() => {
    // ...
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

useEffect가 기본적으로 업데이트를 다루기 때문에 업데이트를 위한 특별한 코드가 따로 필요하지 않다.(버그 미리 방지) 다음의 effect를 적용하기 전에 이전의 effect는 정리된다.

(3) Effect를 건너뛰어 성능최적화하기

모든 렌더링 이후에 effect를 정리하거나 적용하는 것이 때때로 성능 저하를 발생시키는 경우가 있다. 클래스 컴포넌트의 경우 componentdidUpdate에서 prevProps나 prevState와의 비교를 통해 이러한 문제를 해결한다.

Hook의 경우, useEffect Hook API에 이미 내재되어 있다. useEffect의 두 번째 인수(선택적)로 배열을 넘기면 특정 값들이 리렌더링 시에 변경될 때만 effect를 재실행한다.

useEffect(() => {
	document..title = 'You clicked ${count} times';
}, [count]); // count가 바뀔 때만 effect를 재실행

두 번째 인자는 필드 시 변환에 의해 자동으로 추가될 수도 있다.

주의
이 최적화 방법을 사용하면, 배열이 컴포넌트 범위 내에서 바뀌는 값들과 effect에 의해 사용되는 값들을 모두 포함한다는 것을 기억해야 한다. 그렇지 않으면 현재 값이 아닌 이전의 렌더링 때의 값을 참고하게 된다.

effect를 실행하고 이를 정리하는 과정을 (마운트와 마운트 해제 시에)딱 한번씩만 실행하고 싶다면, 빈 배열[]을 두 번째 인수로 넘기면 된다. 이렇게 하면 effect가 그 어떤 값에도 의존하지 않으며 재실행될 필요가 없음을 알게 된다. 따라서, 빈 배열[]을 넘기면, effect안의 prop와 state는 초기값을 유지하게 된다.

effect의 잦은 재실행을 피하기 위해서는 exhaustive-deps 규칙을 eslint-plugin-react-hooks 패키지에 포함하는 것을 추천한다. 이 패키지는 의존성이 바르지 않게 지정되었을 때 경고하고 수정하도록 알려준다~~고 합니다...~~

[React] Hook 소개 및 개요 정리

Tue, 03 Nov 2020 00:00:00 GMT

전체내용 : Hook의 개요

1. 개요

Hook을 이용하면 Class를 작성할 필요 없이 상태 값(state)과 여러 React의 기능을 사용할 수 있다.

지원버전
React 16.8.0 이상
React Native 0.59 이상

1) 특징

선택적 사용
선택적으로 일부 컴포넌트에서 Hook사용 가능.
100% 이전 버전과의 호환성
Hook은 호환성을 깨뜨리는 변화가 없다.
React 컨셉을 대체하지 않는다.
대신, React개념(props, state, context, refs, lifecycle, etc)에 좀 더 직관적인 API제공하고, 이 개념들을 엮기 위해 새로운 강력한 방법 제공

2) 동기

기존 React는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않았다. 이를 해결하기 위해 Render props, 고차 컴포넌트와 같은 패턴을 이용했다. 하지만 이런 패턴은 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게 만들었다. 따라서 React는 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요했다.

Hook을 사용하면,
컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 이는 독립적인 테스트와 재사용이 가능하다. Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
→ Hook을 공유하기 쉬워진다.

3) Hook 이전의 문제점

(1) 복잡한 컴포넌트들은 이해하기 어렵다

각 생명주기 메서드는 자주 관련 없는 로직이 섞여 있다. 예를들어, componentDidMount 메서드에서 이벤트 리스너를 설정하는 것과 관계없는 일부 로직이 포함되거나, componentWillUnmount에서 cleanup을 수행하기도 한다. 이런 점으로 인해 버그가 쉽게 발생하고 무결성을 쉽게 해친다.

위와 같은 사례 안에서 상태 관련 로직이 모든 공간에 있기 때문에 이러한 컴포넌트들을 작게 만드는 것은 불가능하고 테스트하기 어렵다.
(← 많은 사람이 React를 별도의 상태 관리 라이브러리와 함께 결합해서 사용하는 이유 중 하나)

그러나, 종종 상태 관리 라이브러리는 너무 많은 추상화를 하고, 다른 파일들 사이에서 건너뛰기를 요구하며 컴포넌트 재사용을 더욱더 어렵게 만든다.

이를 해결하기 위해, 생명주기 메서드를 기반으로 쪼개는 데 초점을 맞추는 대신, Hook을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다.

(2) Class는 사람과 기계를 혼동시킨다

Class는 코드의 재사용성과 코드 구성을 더 어렵게 만든다. 또한, 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다. 이에 React개발자들은 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶었다.

따라서, Hook은 Class없이 React기능들을 사용하는 방법을 알려준다. Hook은 명령형 코드로 해결책을 찾을 수 있게 해준다. 개념적으로 React컴포넌트는 항상 함수에 더 가깝다. Hook은 React의 정신을 희생하지 않고 함수를 받아들인다.

2. Hook 이 뭔가요 ?

1) Hook 개념

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수이다. class안에서는 동작하지 않는 대신, class없이 react를 사용할 수 있게 해준다.

React는 useState와 같은 내장 Hook을 몇 가지 제공한다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능하다.

2) Hook 사용 규칙

Hook은 JavaScript함수이지만, 두 가지 규칙을 준수해야 한다. 이 규칙들을 강제하기 위해 linter plugin을 제공한다.

(1) 최상위(at the top level)에서만 Hook을 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서 Hook 실행 금지

(2) React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

일반 JavaScript함수에서는 Hook을 호출하면 안 된다. (단, 직접 작성한 custom Hook 내부에서는 Hook 호출 가능)

3. 기본 내장 Hook

1) State Hook (=useState)

(1) state 변수 선언

import React, { useState } from 'react';

function Example() {
	// "count"라는 새 상태 변수 선언
	const [count, setCount] = useState(0);
	...

useState가 Hook이다!
Hook을 호출해 함수 컴포넌트 안에 state를 추가한 모습이다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지된다. (class의 this.setState와 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이가 있다.)
useState는 인자로 초기 state값을 하나 받는다. 초기값은 첫 번째 렌더링에만 딱 한 번 사용된다.
Hook의 state는 객체일 필요가 없다. (원한다면 객체로도 가능)

(2) 여러 state 변수 선언

function ExampleWithManyStates() {
	// 상태 변수 여러개 선언!
	const [age, setAge] = useState(42);
	const [fruit, setFruit] = useState('banana');
	const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
	...
}

배열 구조 분해(destructuring) 문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다. React는 매번 렌더링할 때 useState가 사용된 순서대로 실행한다. (이유는 나중에 ~)

2) Effect Hook (=userEffect)

side effects(또는 effects) : React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업 (다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업)

useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다. (React class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만 하나의 API로 통합된 것)

(1) effect 선언

import React, { useState, useEffect } from 'react';

function Example() {
	const [count, setCount] = useState(0);

	// componentDidMount, componentDidUpdate와 비슷
	useEffect(() => {
		// 브라우저 API를 이용해 문서의 타이틀을 업데이트함
		document.title = 'You clicked ${count} times';
	});
	...

useEffect를 사용하면, React는 DOM을 바꾼 뒤에 effect 함수를 실행한다.
Effects는 컴포넌트 안에 선언되어있으므로 props와 state에 접근 가능하다. 기본적으로 React는 매 렌더링 이후에 effects를 실행한다. 첫 번째 렌더링도 포함해서

useState와 마찬가지로 컴포넌트 내에서 여러 개의 effect 사용 가능

Hook을 사용하면 구독을 추가하고 제거하는 로직과 같이 관련 있는 코드들을 모아서 작성할 수 있다.
(반면 class 컴포넌트에서는 생명주기 메서드에 각각 쪼개서 넣어야만 했다.)

function Example() {
	useEffect(() => { <내용> });
	useEffect(() => { <내용> });
	...

(2) effect 해제 (Optional)

만약, Effect를 해제할 필요가 있다면, 해체하는 함수를 반환해주면 됨.

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

위 예시에서 컴포넌트가 unmount될 때 React는 ChatAPI에서 구독을 해지하거나, 재 렌더링이 일어나 effect를 재실행하기 전에 구독을 해지한다.

3) 다른 내장 Hook

보편적이진 않지만 유용한 내장 Hook Hooks API Reference참고

(1) useContext

컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해준다.

function Example() {
	const locale = useContext(LocaleContext);
	const theme = useContext(ThemeContext);
	...
}

(2) useReducer

복잡한 컴포넌트들의 state를 reducer로 관리할 수 있게 해준다.

function Todos() {
	const [todos, dispatch] = useReducer(todosReducer);
	...
}

4. 나만의 Hook 만들기

개발을 할 때 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우, Hook은 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 가능하다.

Custom Hook은 컨벤션(convention)에 가깝다.
이름이 'use'로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook 이라고 부를 수 있다.
linter플러그인이 Hook을 인식하고 버그를 찾으려면
useSomething이라는 네이밍 컨벤션 사용

custom Hook 사용 예시

//friendID를 인자로 받아서 친구의 접속 상태를 반환하는 custom Hook
function useFriendStatus(friendID) {
	...
	return isOnline;
}

// custom Hook을 사용하는 컴포넌트
function FriendStatus(props) {
	const isOnline = useFriendStatus(props.friend.id);
	if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

각 컴포넌트의 state는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다. 실제로 각각의 Hook 호출은 완전히 독립된 state를 가진다. 그래서 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있다.

[React] Hello World 안내서 정리 (1/2)

Sat, 31 Oct 2020 00:00:00 GMT

전체내용 : Hello World - React

1. JSX

const element = <h1>Hello, world!</h1>;

위의 태그문법은 문자열, HTML이 아니다. Javascript를 확장한 문법인 **JSX**이다.
<> ~ </> 부분

1) 특징

JavaScript의 모든 기능 포함
UI생김새를 설명하기 위해 React와 함께 사용 권장
React element를 생성함
컴파일 후, JSX 표션식이 정규 JS함수 호출이 되고, JS객체로 인식됨
camelCase 프로퍼티 명명 규칙 사용
JSX의 중괄호{} 안에는 모든 유효한 JavaScript 표현식을 넣을 수 있음
ex) name, 2+2, getName(user) , ...

cf) React

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하느 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결된다는 사실을 받아들인다.

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 한다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. (→ XSS(cross-site-scripting) 공격 방지 가능)

2) 객체표현

const element = (
	<h1 className="greeting">
		Hello
	</h1>
);

const element = React.createElement(
	'h1',
	{className: 'greeting'},
	'Hello, world!'
);

위 두 코드는 같은 결과 (객체생성 → React 엘리먼트)

2. 엘리먼트 (Element) 렌더링

1) 엘리먼트

const element = <h1>이것이 엘리먼트다.</h1>;

React 앱의 가장 작은 단위
엘리먼트는 화면에 표시할 내용 기술한다.
특정 시점의 UI (영화에서의 하나의 프레임과 비슷)
일반 객체 (Plain object). 쉽게 생성 가능
React DOM은 React엘리먼트와 일치하도록 DOM업데이트
엘리먼트는 컴포넌트의 구성요소

2) DOM에 엘리먼트 렌더링

HTML 파일 어딘가에 있는 <div>

<div id="root"></div>

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리함 ⇒ 루트DOM노드 라고 부른다.

React로 구현된 애플리케이션은 보통 하나의 루트DOM노드가 있다. (여러 개의 독립된 루트DOM노드가 있을 수도)
React 엘리먼트를 루트DOM노드에 렌더링 하려면, 둘 다 ReactDOM.render( ) 로 전달
```
const element = <h1>Hello</h1>;
ReactDOM.render(element, document.getElementByID('root'));
```

3) 렌더링 된 엘리먼트 업데이트

React 엘리먼트는 불변객체이다. (생성이후에는 자식, 속성을 변경할 수 없음) 오직 특정 시점의 UI를 보여준다. 따라서, 여기까지 기준으로 UI를 업데이트하기 위해서는 새로운 엘리먼트를 생성하고, ReactDOM.render()로 전달하는 방법 뿐!

실제로 대부분의 React앱은 ReactDOM.render()를 한 번만 호출한다.

4) 변경된 부분만 업데이트

React DOM는 DOM을 원하는 상태로 만드는데 필요한 경우에만(ex. 변화가 생긴) DOM을 업데이트한다.

3. Components and Props

1) 컴포넌트

UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
개념적으로 JavaScript의 함수와 유사함
props(속성을 나타내는 데이터) 라는 객체 인자를 받아 React 엘리먼트로 반환
컴포넌트의 이름은 항상 대문자로 시작한다.

컴포넌트를 정의하는 아래의 두 가지 방법은 동일하다.
1. JavaScript함수로 정의하는 방법

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

"함수 컴포넌트"라고 호칭함

2. ES6 class를 사용하여 정의하는 방법

class Welcome extends React.Component {
	render() {
		return <h1>Hello, {this.props.name}</h1>;
 }
}

(1) 컴포넌트 렌더링

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <Welcome name="Sara" />;
// 여기서 props -> {name: 'Sara'}

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX어트리뷰트와 자식을 해당 컴포넌트(여기서는 Welcome)에 단일 객체로 전달한다. 이 객체를 "props"라고 한다.
이때, props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장한다. (ex. name이라는 props 이름은 Welcome 컴포넌트의 관점!)

(2) 컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.
일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 갖고 있다.

(3) 컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누기
구성요소들을 모두 중첩하는 구조보다, 몇 가지 컴포넌트로 나누는 것을 추천한다.
(컴포넌트를 변경하고 구성요소들을 재사용하기 편해진다.)

2) Props는 읽기 전용

컴포넌트에서는 자체 props를 수정해서는 안 된다!!
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

순수함수 : 입력값을 바꾸지 않고, 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수

4. State와 생명주기

props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.

1) 클래스 컴포넌트로 state를 사용할 수 있다.

ES6 class로 컴포넌트를 사용한다.
render메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM노드로 해당 클래스(ex. <Clock />)를 렌더링하는 경우, 그 클래스의 단일 인스턴스만 사용된다.
이를 통해 로컬 state, 생명주기 메서드 등과 같은 부가적인 기능을 사용할 수 있다.

사용방법

클래스로 컴포넌트를 작성한다.
생성자 추가 ( props 전달 방식 집중! )
```
constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
```
클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.
this.props 대신 this.state 사용
props를 삭제한다. <Welcome name="Sara" /> → <Welcome />

2) 생명주기메서드 추가하기

생명주기 메서드를 이용해서 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있다.

componentDidMount() 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행된다.
componentWillUnmount()
this.setState() 컴포넌트 로컬 state 업데이트

사용방법 예시

다음 링크의 예시 참고 Hello World in React

<Clock /> 가 ReactDOM.render()로 전달되었을 때 React가 Clock 컴포넌트의 constructor을 호출한다.
Clock컴포넌트의 render() 메서드 호출 → React는 화면에 표시될 내용을 알게 됨 → DOM 업데이트
Clock출력값이 DOM에 삽입되면 componentDidMount() 메서드 호출 → 이 안에서 매초 tick() 메서드르를 호출하기 위한 타이머를 설정하도록 브라우저에 요청
매초 브라우저가 tick() 메서드 호출함. → 이 안에서 setState()에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트 → React는 state가 변경된 것을 인지 (setState()덕분) → 화면에 표시될 내용을 알아내기 위해 render() 다시 호출 → 이 때 render() 안의 this.state.date가 달라짐. → 렌더링 출력값은 업데이트된 시각을 포함 → React는 이것을 따라 DOM업데이트 함
Clock 컴포넌트가 DOM으로부터 삭제되면 componentWillUnmount() 메서드 호출 (타이머를 멈추기 위해)

3) State를 올바르게 사용하기

State를 직접 수정하는 대신 setState() 사용한다. this.state를 지정할 수 있는 유일한 공간은 constructor
state업데이트는 비동기적일 수 있다. 이때 발생하는 업데이트 실패 문제를 해결하기 위해 setState((state, props) ⇒ ( <내용> ); 사용
state의 독립적인 변수들은 별도의 setState() 호출로 독립적으로 업데이트 할 수 있다.

4) 기타 특징

컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

[React] Hello World 안내서 정리 (2/2)

Sat, 31 Oct 2020 00:00:00 GMT

전체내용 : Hello World - React

5. 이벤트 처리

React의 이벤트는 camelCase 사용
JSX를 사용, 함수로 이벤트 핸들러 전달

기본동작을 방지하기 위해 preventDefault를 명시적으로 호출해야 함

function ActionLink() {
	function handleClick(e) { // e: 합성이벤트
		e.preventDefault();
		consol.log('The Link was clicked.');
	}
	return (
		<a href="#" onClick={handleClick}> 
			Click me
		</a>
	);
}

엘리먼트가 처음 렌더링될 때 리스너 제공하기

1) 이벤트 핸들러

ES6 클래스를 사용할 때, 이벤트 핸들러를 클래스의 메서드로 만든다. 그리고 콜백에서 this가 작동되기 위해 constructor에서 바인딩 해준다.

class Toggle extends React.Component {
	constructor(props) {
		super(props);
		this.state = {isToggleOn: true};

		// 콜백에서 'this'가 작동하려면 아래와 같이 바인딩 해주어야 함
		this.handleclick = this.handleClick.bind(this);
	}

	handleClick() {
		this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

bind() : 새로운 바인딩한 함수를 만듦 - 원본 함수 객체를 감싸는 함수
일반적으로 onClick={this.handleClick}과 같이 메서드 뒤에 ()를 사용하지 않고 참조하는 경우, 해당 메서드를 바인딩 해야 된다. (바인딩 하지 않으면 함수가 호출될 때 this는 undefined가 됨)

(1) 다른방법1 <퍼블릭 필드 문법 (실험적인 방법)>

Create React App의에 기본 설정된 문법

class LoggingButton extends React.Component {
	// 'this'가 handleClick 내에서 바인딩되는 방법
	handleClick = () => {
		console.log('this is:', tis);
	}

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

(2) 다른방법 2 <콜백에 화살표 함수 사용>

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
		// LoggingButton이 렌더링 될 때마다 다른 콜백이 생기는 문제가 있다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

2) 이벤트 핸들러에 인자 전달

// id가 행의 ID일 경우의 예시
// 다음 두 줄은 동등하다.
<button onClick={(e) => this.deleteRow(id, e)}>delete Row</button>
<button onclick={this.deleteRow(id,e)}>Delete Row</button>

React 이벤트를 나타내는 e인자가 id 다음 두 번째 인자로 전달된다.
화살표 함수는 명시적으로 인자를 전달해야 되지만, bind를 사용할 경우 추가 인자가 자동으로 전달된다.

6. 조건부 렌더링

if 나 조건부 연산자를 이용해서 현재 상태에 맞게 UI를 업데이트 할 수 있다.

// isLoggedIn값에 따라 return이 다른 Greeting 이라는 함수가 있을 때
ReactDOM.render(
	<Greeting isLoggedIn={false} />,
	document.getElementById('root')
);

삼항연산자 가능 ~

<div> User is {isLoggedIn ? 'Online' : 'Offline'} </div>

컴포넌트가 렌더링하는 것 막기
- 렌더링 결과 출력 대신 null 반환으로 해결!

7. 리스트와 Key

1) 배열을 엘리먼트 리스트로 만들기

const numbers = [1,2,3,4,5];
const listItems = numbers.map((number) => <li>{number}</li>);

map() 함수를 이용해서 배열을 반복 실행. 각 항목에 대해 <li>엘리먼트를 반환.
엘리먼트 배열의 결과를 listItems에 저장

2) Key

엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 함
고유하게 식별할 수 있는 문자열 (String)

// example
<li key={number.toString()}> {number} </li>
<li key={todo.id}> {todo.text} </li>

JSX에 map()을 포함시킬 순 있지만, 남발하는건 좋지 않다. 가독성을 위해 변수로 추출할 지 인라인으로 넣을 지는 개발자가 직접 판단해야 한다.

8. 폼 (form)

HTML 폼 엘리먼트는 React의 다른 DOM 엘리먼트와 조금 다르게 동작한다.

1) 제어 컴포넌트(Controlled Component)

state를 신뢰 가능한 단일 출처로 만들어서 두 요소를 결합할 수 있다. 이를 통해 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어한다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트라고 한다.
제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정된다.

<form onSubmit={this.handleSubmit}>
  <label>
    Name:
    <input type="text" value={this.state.value} onChange={this.handleChange} />
  </label>
  <input type="submit" value="Submit" />
</form>

value 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 this.state.value가 되고, React state는 '신뢰 가능한 단일 출처'가 된다.

제어 컴포넌트에 value prop을 지정하면 의도하지 않은 한 사용자가 변경할 수 없다.
제어 컴포넌트의 대안으로는 비제어 컴포넌트가 있다.

2) 태그

(1) textarea 태그

form이 일부 텍스트를 가진채 시작됨!

<form onSubmit={this.handleSubmit}>
  <label>
    Essay:
    <textarea value={this.state.value} onChange={this.handleChange} />
  </label>
  <input type="submit" value="Submit" />
</form>

(2) select 태그

드롭 다운 목록을 만든다!

<form onSubmit={this.handleSubmit}>
  <label>
    Pick your favorite flavor:
    <select value={this.state.value} onChange={this.handleChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</option>
      <option value="mango">Mango</option>
    </select>
  </label>
  <input type="submit" value="Submit" />
</form>

(+) select 태그에 multiple옵션을 허용하면, value 어트리뷰트에 배열을 전달할 수 있다.

<select multiple={true} value={['B', 'C']}>

(3) file input 태그

사용자가 하나 이상의 파일을 서버로 업로드하거나 file API를 통해 JavaScrript로 조작할 수 있다.
값이 읽기 전용이기 때문에 React에서는 비제어 컴포넌트이다.

2) 다중 입력 제어하기

여러 input 엘리먼트를 제어해야할 때, 각 엘리먼트에 name어트리뷰트를 추가하고, event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택하게 한다.

constructor(props) {
	super(props);
	this.state = {
		number: 3,
		isGoing: true
	};
}

handleInputChange(event) {
	const target = event.target;
	const name = target.name;
	this.setState({
		[name]: value  // ES6 computed property name 구문
	});
}

render() {
	return (
		<form>
			<label>
			<input name="isGoing" />
			</label>
			<label>
				<input name="number" />
			</label>
		</form>
	);
}

9. State 끌어올리기

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때 가장 가까운 공통 조상으로 state를 끌어올린다.

1) 진리의 원천 (Source of Truth)

class TemperatureInput extends React.Component {
	constructor(props) {}
	handleChange(e) {
		this.props.onTemperatureChange(e.target.value);
	}
	render() {
		// 화면에 렌더링되는 내용
	}
} 

class Calculator extends React.Component {
	constructor(props) {
		// 생략 (super, bind)
		this.state = {temperature: '', scale: 'c'};  // 공유될 state
	}

	handleCelsiusChange(temperature) {
		this.setState({scale: 'c', temperature});
	}
	handleFahrenheitChange(temperature) {} // 내용생략

	render() {
		// 변수 할당

		// 아래와 같이 state와 제어메서드를 props로 전달한다.
		return (
			<div>
				<TemperatureInput
					scale="c"
					temperature={celsius}
					onTemperatureChange={this.handleCelsiusChange} />
				<TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

TemperatureInput(값을 필요로 하는 컴포넌트)이 개별적으로 가지고 있던 지역 state를 지우고, Calculator(가장 가까운 공통 조상)로 state를 끌어올린다. ⇒ state 끌어올리기

Claculator가 공유될 state를 소유하고 있으면 이 컴포넌트는 두 입력 필드(TemperatureInput)의 현재 온도에 대한 "진리의 원천"이 된다.

위 예시(코드)에서 두 입력 필드의 값이 동일한 state로부터 계산되기 때문에 이 둘은 항상 동기화된 상태를 유지한다.

props는 읽기 전용이므로, 공통 조상 컴포넌트에서 state를 제어하는 메서드(onTemperatureChange)를 props로 전달한다. ⇒ 부모 컴포넌트는 state와 state제어 메서드를 함께 제공

2) 교훈 (주의사항)

React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 진리의 원천을 하나만 두어야 한다.

10. 합성 vs 상속

1) 합성(Composition)

컴포넌트에서 다른 컴포넌트 담기
특수화 : 더 구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링하고 props를 통해 내용을 구성함
클래스로 정의된 컴포넌트에서도 동일하게 적용됨
컴포넌트는 원시 타입의 값, React 엘리먼트 혹은 함수 등 어떠한 props도 받을 수 있다.

2) 상속(Inheritance)

컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례는 아직 찾지 못한 듯 하다.
React는 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다.

UI가 아닌 기능을 여러 컴포넌트에서 재사용하려면 별도의 JavaScript 모듈로 분리하는 것이 좋다.
(상속할 필요 없이 컴포넌트에서 해당 함수, 객체 클래스 등을 import해서 사용)

11. React로 사고하기 (단계별 과정)

디자이너로부터 JSON API와 목업을 받았다고 가정
[기억] React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따른다.

(1) UI를 컴포넌트 계층 구조로 나누기

(2) React로 정적인 버전 만들기

앱을 실제로 구현하기. 데이터 모델을 가지고 UI를 렌더링은 되지만 아무 동작도 없는 버전 만들어보기! 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하기 때문이다. 이때, state는 사용하지 말기!!

(3) UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해야한다. 여기서 핵심은 중복배제원칙.
ex) TODO리스트를 만든다면, TODO아이템을 저장하는 배열만 유지하고, 아이템의 개수를 표현하는 state는 별도로 만들지 말자. 아이템의 개수를 렌더링해야 한다면 TODO아이템 배열의 길이를 가져오면 되니까

[state를 결정하기 위한 질문]

부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

(4) state가 어디에 있어야 할 지 찾기

[state를 소유할 컴포넌트를 결정하기 위한 과정]
애플리케이션이 가지는 각각의 state에 대해서

state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.
공통 소유 컴포넌트 (common owner component)를 찾으세요. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트).
공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 합니다.
state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가하세요.

(5) 역방향 데이터 흐름 추가하기

상위 클래스(변경할 state를 가진) 하위 클래스에 콜백을 넘겨서 state가 업데이트되어야 할 때마다 호출되도록 한다. 이벤트를 사용해서 알림 받기

[정보처리기사/필기] 4과목 <프로그래밍 언어 활용> 오답정리

Thu, 24 Sep 2020 00:00:00 GMT

정보처리기사 필기시험을 준비하며 전자문제집CBT의 해설을 정리한 것입니다.

1. 운영체제

1) HRN스케줄링 방식의 작업 순서 구하기

우선순위 = (작업시간 + 서비스시간) / 서비스시간
우선순위를 정한 다음 숫자가 높은 것부터 순위가 부여된다.

2) 메모리 관리 기법

Worst fit(최악 적합) : 들어갈 수 있는 영역 중 자원 낭비가 제일 심한 영역에 들어가는 방법

2. OSI-7Layer (Open Systems Interconnection)

0) OSI 7계층이란?

OSI 참조 모델이다. (1984 국제표준화기구(ISO)가 발표)
모든 컴퓨팅 장치나 네트워킹 장치를 만들 때 OSI 참조 모델을 참조해서 통신 장치를 만든다. (쉽게 말해 규칙. 호환성, 유지보수 강화)
통신이 일어나는 과정을 크게 7단계로 분류하여 정리한 것.
이때 각 계층은 독립되어 있다. → 문제가 생긴 곳만 해결 가능
네트워크에서 트래픽의 흐름을 알 수 있다.
상하구조(계층)

구분	계층	계층명	기능
상	7	응용(Message)	- 사용자에게 서비스 제공 역할. - SMTP, FTP, HTTP 등 사용자가 원하는 최종 목표에 해당
상	6	표현(Message)	- 데이터의 변환, 압축, 암호화를 담당
상	5	세션(Message)	- 통신하는 프로세스 사이의 대화 제어 및 동기화를 담당
하	4	전송(Segment)	- 네트워크계층에서 패킷을 종단(네트워크주소)까지 전달한다면, 전송층은 종단 내에서 최종 수신 프로세스(포트주소)로의 전달을 담당
하	3	네트워크(Packet)	- 송신 측에서 최종목적지(네트워크주소)까지 패킷을 전달 - 송수신 측의 논리구조 지정 및 패킷이 최종목적지에 도달하도록 경로를 배정하는 라우팅 기능 - 데이터 링크의 물리주소는 패킷이 시스템으로 이동할 때마다 변경되지만, 네트워크 주소는 목적지까지 변하지 않음
하	2	데이터 링크(Frame)	- 노드와 노드 사이의 데이터 전달 - 단순히 bit를 전송하는 물리층에 신뢰성을 더하기 위한 흐름제어 및 오류제어 기능 - LLC, MAC 두 개의 서브레이어로 구성
하	1	물리(bit)	- 물리 매체를 통해 bit 흐름을 전송 - 물리적 장치와 인터페이스가 전송을 위해 필요한 기능과 처리절차 규정

구분 → 상 : 상위층 , 하 : 하위층
물리계층(하드웨어), 데이터링크계층(HW+SW), 나머지(SW)

여긴 헷갈려서 특별히 번호랑 계층 맞춤

1) 물리 계층

전송에 필요한 장치 간 실제 접속

2) 데이터 링크 계층

링크의 설정과 유지 및 종료 담당
송수신(노드 간) 측 속도 차이 해결을 위한 흐름제어 기능 및 오류 검출과 회복을 위한 오류제어 기능
프레임 시작 및 끝을 구분하기 위한 동기화 기능
프레임 순서적 전송을 위한 순서 제어 기능

5) 세션 계층

송수신 측 간 관련성 유지 및 대화 제어, 체크점(동기점)을 두어 정보 수신상태 체크

7) 응용 계층

사용자가 OSI 환경에 접근 가능하도록 서비스 제공

3. 결합도(Coupling) 또는 의존도

어떤 모듈이 다른 모듈에 의존하는 정도
응집도(cohesion)과 대비되는 개념 (종종...)
결합도 높음 ———————————————-낮음
content > common > external > control > stamp > data

1) 내용 결합도 (Content)

하나의 모듈이 다른 모듈의 내부 동작을 수정하거나 내부 동작에 의존하는 상태
예) 다른 모듈의 로컬 데이터에 접근하는 경우

2) 공통 결합도 (Common || Global )

두 개의 모듈이 같은 글로벌 데이터를 공유하는 상태 (전역변수 등)

3) 외부 결합도 (External)

두 개의 모듈이 외부에서 도입된 데이터 포맷, 통신 프로토콜, 또는 디바이스 인터페이스를 공유할 때 발생
기본적으로 외부 툴이나 디바이스와의 통신과 관련있다.

4) 제어 결합도 (Control)

하나의 모듈이 다른 모듈로 무엇을 해야하는지에 대한 정보를 넘겨줌으로써 다른 모듈의 흐름을 제어하는 경우
권리 전도 현상 발생

5) 스탬프 결합도 (Stamp)

모듈들이 데이터 구조를 공유하고, 서로 다른 일부만을 사용하는 경우
접근할 필요가 없는 필드만 수정되는 경우에도 (데이터의 배치가 변경되므로) 레코드(필드)를 읽는 방법을 변경해야 함

6) 자료 결합도 (Data)

모듈들이 파라미터 등을 통해 데이터를 공유하는 경우
각 데이터가 기본적인 것(elementary piece)이고, 그 데이터들이 공유되는 유일한 데이터여야 한다.
자료요소로만 구성. 처리값을 다시 돌려줌

7) 기타

메시지 결합도
- 가장 낮은 결합도
결합도 없음
- 모듈이 어떠한 다른 모듈과도 통신하지 않는 경우

4. 네트워크 서브네팅

1) 네트워크 주소, 브로드캐스트 주소

subnet의 시작 주소 : 네트워크 주소
subnet의 마지막 주소 : 브로드캐스트 주소 (서브넷의 끝부분에 연속된 0으로된 비트를 모두 1비트로 변환했을 때)
(예시)
현재 pc의 아이피가 203.230.7.3 이고, 서브넷마스크가 255.255.255.0 이라면, 네트워크 주소 (203.230.7.0) 브로드캐스트 주소 (203.230.7.255)
즉, 사용 가능한 아이피 주소 : 203.230.7.1 ~ 203.230.7.254

2) FLSM방식으로 Subnet을 나누고, IP subnet-zero 적용

(예제) 200.1.1.0/24 네트워크를 FLSM방식을 이용하여 10개의 Subnet으로 나누고, ip subnet-zero를 적용했다. 이때 서브네팅된 네트워크 중 10번째 네트워크의 broadcast IP주소는?

1️⃣ 필요한 서브넷의 개수
2^3 < 10개 +2(네트워크, 브로드캐스트) < 2^4
(꼭 2^n 이어야 함! 2진수니까.. 밑에 네트워크 대역 생긴거 참고)
-> 16개씩 나누기!!
-> 네트워크대역의 뒤에 4개를 0으로! (또는 그냥 서브넷 시작하는 ip에서 2^4개씩 세어서 나눠준다..)

2️⃣ 서브넷마스크
200.1.1.1111 0000 → 255.255.255.240

3️⃣ 네트워크 대역
200.1.1.0000 0000 = 200.1.1.0~15
200.1.1.0001 0000 = 200.1.1.16~31
200.1.1.0010 0000 = 200.1.1.32~47
200.1.1.0011 0000 = 200.1.1.48~63
200.1.1.0100 0000 = 200.1.1.64~79
...
200.1.1.1001 0000 = 200.1.1.144~159 ← 10번째 네트워크
...

4️⃣브로드캐스트 IP주소 : 200.1.1.159

5. UNIX

1) 명령어

ls - 디렉토리, 파일목록 출력
cat - 파일 내용(만) 출력
fork - 새로운 프로세스 생성
chmod - 파일이나 디렉토리에 대한 접근권한 변경

6. 소프트웨어 취약점

FTP 바운스 공격 : FTP 프로토콜 구조의 허점을 이용한 공격 <네트워크 공격>
SQL 삽입 : SQL의 논리적 에러를 이용한 공격 <웹관련 공격>
버퍼 오버플로 : 메모리를 다루는 데 오류가 발생하여 잘못된 동작을 하게 하는 공격 <어플 공격>
디렉토리 접근 공격 : 웹 루트 디렉토리 외부에 저장된 파일 또는 디렉토리에 접근하는 공격 방법 <웹관련 공격>

7. 네트워크

1) IPv6

128비트 주소체계 사용. (16비트 8부분)
v4의 주소부족 문제 해결 및 자료 전송 속도 빠름
보안문제 해결 → 인증성, 기밀성, 데이터 무결성 지원
확장성, 융퉁성, 연동성 뛰어남
실시간 흐름 제어로 향상된 멀티미디어 기능 지원
세 가지 주소 체계 : Unicast, Multicast, Anycast

2) TCP 프로토콜

기본 헤더 크기는 최소 20byte 최대 60byte (헤더에 Option값 포함 시 최대 40byte 추가 가능)
신뢰성이 있는 연결 지향형 전달 서비스이다.
스크림 전송 기능을 제공한다.
순서제어, 오류제어, 흐름제어 기능을 제공한다.

(참조)

https://www.comcbt.com/ 해설
https://jhnyang.tistory.com/194 - 블로그의 다른 글들도 읽어보면 좋을 듯
https://ko.wikipedia.org/wiki/결합도

[정보처리기사/필기] 5과목 <정보시스템 구축 관리> 정리

Thu, 24 Sep 2020 00:00:00 GMT

정보처리기사 필기시험을 준비하며 전자문제집CBT의 해설을 정리한 것입니다.

1. 디지털 트윈 모델

물리적인 사물과 컴퓨터에 동일하게 표현되는 가상의 모델
실제 물리적인 자산 대신 소프트웨어로 가상화함으로써 실제 자산의 특성에 대한 정확한 정보를 얻을 수 있다.
자산 최적화, 돌발사고 최소화, 생산성 증가 등 설계부터 제조, 서비스에 이르는 모든 과정의 효율성을 향상시킬 수 있다.

2. 보안

1) 블록 암호화 방식

DES, RC5, AES, SEED, IDEA

2) 공개키 암호화 알고리즘

DES : 1975년 IBM에서 개발
SEED : 국내 개발
ARIA : 국내 개발 (SEED 이후)
RSA : 1978년 MIT에 의해 제안. 큰 숫자를 소인수 분해하기 어렵다는 기반

3) 정보보안의 3대 요소

기밀성 (Confidentiality) : 허락된 사용자에 의해서만 접근 가능하도록 하는 것
무결성 (Integrity) : 허락된 사용자에 의해서만 변경, 수정이 가능하도록 하는 것
가용성 (Availability) : 허락된 사용자가 필요로 하는 시점에 접근이 가능하도록 하는 것

4) DDos 공격의 종류

Trinoo, Tribe Flood Network, Stacheldraht

5) Seven Touchpoints

실무적으로 검증된 개발보안 방법론 중 하나로써 SW보안의 모범 사례를 SDLC(Software Development Life Cycle)에 통합한 소프트웨어 개발 보안 생명주기 방법론

3. 자동화 추정 도구

Putnam : 소프트웨어 생성주기 전 과정 동안 사용될 곡선의 노력 분포를 가정해주는 모형. Rayleigh-Norden 곡선의 노력 분포도를 기초로 한다.
SLIM : Putnam 기법 모형을 기초로 개발된 자동화 추정 도구

4. COCOMO 모델

1) 유형

조직형 : organic(5만라인)
반분리형 : semi-detached(30만라인 이하)
내장형 : Embedded (30만라인 이상)

2) 종류

기본형 : basic
중간형 : intermediate
발전형 : detailed

5. RIP(Routing Information Protocol)

거리 벡터 라우팅 프로토콜이라고도 한다.
소규모 네트워크 환경에 적합하다.
최대 홉 카운트를 15홉 이하로 한정하고 있다.
최단경로탐색에는 Bellman-Ford 알고리즘을 사용한다.

6. 소프트웨어 개발 모델 (생명주기 모형)

1) 나선형 모델 4가지 활동 순서

계획 수립 - 위험 분석 - 개발 및 검증 - 고객평가 (반복)

2) 폭포수 모형 (고전적/선형, 순차적)

타당성 검토 → 계획 → 요구사항 분석 → 구현 → 테스트 → 유지보수

7. CPM 네트워크

CPM : 노드와 간선으로 이루어진 네트워크

1) 임계경로의 소요기일

임계경로 : 작업의 시작 및 종료 구간이 동시에 이루어질 때, 가장 오래 걸리는 경로

8. 기능점수(Functional Pont)

1) FP 기능별 가중치 산정요소

자료 입력 (입력 양식)
정보 출력 (출력 보고서)
명령어 (사용자 질의 수)
데이터 파일
필요한 외부 루틴과의 인터페이스

(참조)

https://www.comcbt.com/ 해설

[정보처리기사/필기] 3과목 <데이터베이스 구축> 오답정리

Wed, 23 Sep 2020 00:00:00 GMT

정보처리기사 필기시험을 준비하며 전자문제집CBT의 해설을 정리한 것입니다.

1. 정규화

0) 필요성

논리적 설계 단계에서 발생할 수 있는 종속으로 인한 삭제, 갱신, 삽입 이상(Anomaly) 현상의 문제점을 해결하기 위해 속성들 간의 종속 관계를 분석하여 여러 개의 릴레이션으로 분해하는 과정.

정규화된 결과를 정규형이라고 부른다.

중복을 최대한 제거하기 위해 테이블을 분해하는 것
테이블 many → 조인현상이 많이 발생 (정보를 얻을 때 여러 테이블의 값들을 참조해서 조합) → 퍼포먼스 저하 우려 → 데이터의 정합성과 이상현상을 해결하기 위해 적절한 정규화는 매우 중요함

1) 정규형

1NF : 도메인이 원자값(Atomic Value:더이상 쪼개지지 않는 단위)만으로 구성된 정규형
2NF : 기본 키가 아닌 모든 속성이 기본 키에 대해 완전 함수적 종속을 만족하는 정규형
3NF : 기본 키가 아닌 모든 속성이 기본 키에 대해 이행적 종속을 만족 안하는 정규형
BCNF : 모든 결정자가 후보 키인 정규형 (보이스 코드 정규형)
4NF : 다치 종속 A→B가 성립하는 경우 A에 함수적 종속 관계를 만족하는 정규형
5NF : 모든 조인 종속이 후보 키를 통해서만 성립되는 정규형

1-1) 예시

제 1규형 (서울, 부산 과 워싱턴, 뉴욕을 도메인에서의 원자값으로만 구성되게 정규화 함)

2) 데이터들의 중복으로 발생하는 곤란한 현상(Anomaly)

삽입 이상 : 삽입할 때 의도와 달리 원하지 않는 값들도 함께 삽입되는 현상
삭제 이상 : 삭제할 때 의도와 달리 원하지 않는 값들도 함께 삭제되는 현상
갱신 이상 : 릴레이션에서 튜플에 있는 속성값을 갱신할 때 일부 튜플의 정보만 갱신, 정보 모순이 생기는 현상

2. 관계 모델 (Relation Model)

1) 관계형 모델

실제 세계의 데이터를 관계라는 개념을 사용해 표현한 데이터 모델
- 데이터 모델 : '~~라는 개념을 사용해 데이터를 표현 해주세요'라고 정의하는 것.
수학적 집합론에 근거한 모델로, 릴레이션(테이블)의 연산을 술어논리로 표현할 수 있어야 함
SQL과 관계형 모델은 다른 개념이다.
관계 모델은 릴레이션의 관계를 표현하는 것

2) 관계형 데이터 모델 해석

relation : 테이블 수
- 개체를 표현하기 위한 데이터 구조로써 2차원 테이블로 ㅍ현한다.
- heading(스키마) + body(본체) 로 구성
- heading은 속성의 집합. 이름과 데이터형으로 구성.
- body는 속성값의 집합인 튜플의 집합.
attribute : 열의 수
- 개체의 속성들을 의미함
tuple : 행의 수
- 하나의 개체를 의미.
- 릴레이션 상태(Relation State)라고도 함

3) 릴레이션 특징

각 튜플은 유일함
튜플사이 순서 없음
속성간 순서 중요 X
속성의 명칭은 유일. 구성값은 동일값 가능
속성 값은 원자값

3. 트랜잭션의 특성 (ACID)

원자성 (Atomicity) :
트랜잭션 연산은 DB에 모두 반영되어 commit(완료)되든지 아니면 반영되지 않고 Rollback(복구)되어야 한다.
즉, All or Nothing. 작업 단위를 일부분만 실행하지 않는다.
일관성 (Consistency) :
트랜잭션이 그 실행을 성공적으로 완료하면 언제나 일관성있는 데이터베이스 상태로 변환한다.
여기서 일관성이란, 데이터 타입이 변하지 않는다는 뜻. (int→string X)
독립성 (Isolation) :
둘 이상 트랜잭션이 동시 병행 실행될 경우 트랜잭션 실행 중 타 트랜잭션의 연산이 끼어들 수 없다.
즉, 트랜잭션끼리는 서로를 간섭할 수 없다.
지속성 (Durability) : 성공적 완료된 트랜잭션의 결과는 시스템이 고장나더라도 영구적으로 반영되어야 한다.

4. 함수 종속의 추론 규칙

1) 분해 규칙

X→ YZ 이면 X → Y와 X → Z이다.

2) 반사 규칙

X → Y 이면 X → Y 와 Y → X 이다.

3) 결합 규칙

X → Y 이고 X → Z 이면 X → YZ 이다.

5. 데이터베이스 회복 기법

1) 회복(Recovery)이란

트랜잭션 도중에 손상된 데이터베이스를 이전 상태로 복귀하는 작업
트랜잭션의 연산을 수행할 때 데이터베이스를 변경하기 전에 log 데이터를 생성한다.
취소(Undo) 연산으로 이미 데이터베이스에 쓰여진 것도 수정할 수 있다.

2) 장애의 유형

트랜잭션 장애, 시스템 장애, 미디어 장애

3) 회복 기법

3-1) 즉각 갱신 기법 (Immediate Update)

트랜잭션의 연산을 수행하여 데이터를 갱신할 때 실제 데이터 베이스에 반영하는 기법
갱신한 모든 내용을 로그(Log)에 보관한다.
회복 작업을 위해 취소(Undo)와 재시도(Redo) 모두 사용할 수 있다.

3-2) 연산 갱신 기법 (Deffered Update)

트랜잭션을 완료할 때까지 데이터베이스에 갱신을 연기하는 기법
트랜잭션 수행으로 갱신할 내용은 로그(Log)에 보관한다.
트랜잭션이 부분 완료 시점에 로그의 기록을 실제 데이터 베이스에 반영한다.
트랜잭션 수행 중에 장애가 발생하여 Rollback해도 취소할 필요가 없다.
재시도(Redo) 작업을 통해 최근의 정상적인 데이터베이스로 회복한 후에 트랜잭션을 재실행 할 수 있다.

3-3) 검사점 기법 (Check Point)

트랜잭션 중간에 검사점을 로그에 보관하여 트랜잭션 전체를 취소하지 않고 검사점까지 취소할 수 있는 기법)

3-4) 그림자 페이지 대체 기법 (Shadow Paging) - 로그가 필요 없음

트랜잭션의 연산으로 갱신할 필요가 있을 때 복사본인 그림자 페이지를 보관하는 기법
트랜잭션을 취소할 때 그림자 페이지를 이용하여 회복
Log, Undo, Redo할 필요가 없다.

6. SQL문

1) DSTINCT

중복 튜플 발견 시 그 중 첫번째 하나만 검색
ex) SELECT DISTINCT 학년 FROM R1;

7. 데이터 ㅇㅇ어

1) DCL(Data Control Language) 데이터 제어어

GRANT : 데이터베이스 사용자에게 사용권한을 부여함
REVOKE : 데이터베이스 사용자의 사용권환을 취소
COMMIT : 데이터베이스 조작 작업이 정상적으로 완료 되었음을 알려줌
ROLLBACK : 데이터베이스 조작 작업이 비정상적으로 작동하여 원래 상태로 복구

2) DDL(데이터 정의어)

CREATE / ALTER / DROP

3) DML(데이터 조작어)

SELECT / INSERT / DELETE / UPDATE *

8. 병행제어 기법

1) 로킹

로킹 단위가 크면 나머지가 다 작아짐 (단위가 작으면 나머지가 다 커짐)
- ex) 로킹 단위가 작아지면 오버헤드가 적어지지만, 병행성 수준이 낮아지고, 공유도 저하됨
로킹의 대상이 되는 객체의 크기를 '로킹 단위'라고 한다.
데이터베이스, 파일, 레코드 등은 로킹 단위가 될 수 없다.
로킹의 단위가 작아지면 로킹 오버헤드가 증가한다.

9. 뷰(View)

하나이상의 테이블로부터 유도되는 가상테이블이며 논리적 독립성이 제공된다.
실제 테이블처럼 권한을 나눌 수 있다.
특정 사용자가 볼 필요가 없는 다른 열들을 배제하고 뷰를 만든 후, 해당 사용자에게 뷰에 대한 권한을 할당하면 테이블 전체에 대한 권한을 부여하지 않아도 된다. (보안 up)
하지만, 자체 인덱스를 가지지 않는다. 따라서 삽입, 삭제, 수정이 제한적이다.

10. 분산 데이터베이스

1) 정의

여러 곳으로 분산되어있는 데이터베이스를 하나의 가상 시스템으로 사용할 수 있도록 한 데이터베이스
논리적으로 동일한 시스템에 속하지만, 네트워크를 통해 물리적으로 분산되어 있는 데이터들의 모임
분산DB가 되기 위해선 6가지 투명성을 만족해야 한다.

2) 6가지 투명성

분할 투명성(단편화) : 하나의 논리적 Relation이 여러 단편으로 분할되어 각 단편의 사본이 여러 사이트에 저장
위치 투명성 : 어떠한 데이터의 물리적인 위치도 알 필요가 없다. (즉, 사용자는 데이터나 입력 시스템의 위치와 무관하게 접근가능). 위치정보는 System Caltalog에 유지
지역사상 투명성 : 지역DBMS와 물리적 DB사이의 Mapping 보장.
중복 투명성 : DB객체가 여러 사이트에 중복되어 있는지 알 필요가 없음 (Replication)
장애 투명성 : 구성요소(DBMS, Computer)의 장애에 무관한 트랜잭션의 원자성유지
병행 투명성 : 다수 트랜잭션 동시수행시 결과의 일관성 유지, Timm stamp, 분산 2단계 Locking을 이용하여 구현

(참조)

[정보처리기사/필기] 2과목 <소프트웨어 개발> 오답정리

Tue, 22 Sep 2020 00:00:00 GMT

정보처리기사 필기시험을 준비하며 전자문제집CBT의 해설을 정리한 것입니다.

1. 네트워크 영역

1) 인터페이스 보안 솔루션

IPSec : 네트워크 계층에서 IP 패킷 단위의 데이터 변조 방지 및 은닉 기능 제공
SSL : TCP/IP 계층과 애플리케이션 계층 사이에서 인증, 암호화, 무결성을 보장하는 프로토콜
S-HTTP : 클라이언트와 서버 간 전송되는 모든 메시지를 암호화하는 프로토콜

2) 기타

SMTP(Simple Mail Transfer Protocol) : 전자우편을 교환하는 서비스를 제공하는 프로토콜

2. 패키지 소프트웨어 평가 표준

ISO/IEC 9126 : 소프트웨어 품질 특성 및 척도에 대한 표준화
ISO/IEC 14598 : 소프트웨어 제품 평가
ISO/IEC 2119 : 패키지 소프트웨어 평가

3. McCabe의 Cyclomatic Complexity

1) 제어흐름 그래프에서 cyclomatic 구하기

→ 선형 독립 경로의 개수 : 직접 세보면 4개..인데 규칙을 기억하자

V(G) = Edge - Node + 2

Edge = 6 (화살표)
Node = 4 (동그라미)
V(G) = 6 - 4 + 2 = 4

4. 정렬 알고리즘

1) 선택(Selection) 정렬

가장 작은 값을 찾아 첫번째 값과 교환한다.
이후 정렬된 값을 제외한 나머지 인덱스 중 가장 작은 값을 찾아 정렬되지 않은 인덱스 중 가장 처음 값과 자리를 교환해 나아간다.

5. 제품 소프트웨어 패키징의 형상 관리

1) 제품 소프트웨어의 형상 관리 파악

제품 소프트웨어에서 형상 관리 목적은 기본적으로 작성된 패키지의 변경 내용을 관리하기 위함
이는 SW의 변화를 시간에 따라 기록하고 특정 시점의 버전을 다시 꺼내올 수 있도록 관리하는 체계를 의미함
S/W에서 Baseline(변경 통제 시점)을 정하고 변경을 철저히 관리 통제하는 것이 중요하며, 이에 따라 전체적인 버전 체계가 관리된다.

2) 제품 소프트웨어의 형상 관리 중요성

제품 소프트웨어는 지속적으로 변경되는데 이에 대한 개발 통제가 중요하다.
제품 소프트웨어의 형상 관리가 잘 되지 않으면 배포판의 버그 및 수정에 대한 추적의 결여 및 무절제한 변경이 난무할 수 있다.
형상 관리가 잘 되지 않으면, 제품 소프트웨어의 가시성(Visibility)의 결핍이 일어난다. 전체적인 조망이나 insight가 결여되어 장기적인 관리 체계에 문제를 야기할 수 있다.

3) 제품 소프트웨어의 형상 관리 역할

형상 관리를 통해 이전 리버전이나 버전에 대한 정보에 접근 가능하여 배포본 관리에 유용
불필요한 사용자의 소스 수정 제한
동일한 프로젝트에 대해 여러 개발자 동시 개발 가능
에러가 발생했을 경우 빠른 시간 내에 복구 가능
사용자의 요구에 따라 적시에 최상의 소프트웨어 공급

6. 물리데이터 저장소의 파티션 설계

1) 파티션 유형

범위분할(Range) : 지정한 열의 값을 기준으로 분할
해시분할(Hash) : 해시 함수를 적용한 결과 값에 따라 데이터 분할
조합분할(Composite) : 범위 분할 후 해시 함수를 적용하여 다시 분할

7. 인수 테스트(Acceptance) 종류

사용자 인수 테스트
운영상의 인수 테스트
계약 인수 테스트
규정 인수 테스트
알파 테스트
베타 테스트