티끌모아 태산

작은 조각 모음

Handling Events

React 에서 이벤트를 처리하는 방식은 DOM 에서 이벤트를 처리하는 방식과 거의 유사하다. 몇가지 차이점이 있는데 다음과 같다.

소분자가 아닌 camelCase를 사용한다.
이벤트 헨들러를 string으로 전달하는것이 아니라 함수로 전달한다.

DOM:

1	<button onclick="activateLasers()">Activate Lasers</button>

React:

1	<button onClick={activateLasers}>Activate Lasers</button>

DOM 에서는 기본 동작을 막기 위헤서 return false를 사용할 수 있는 반면에 React 에서는 기본 동작을 막기 위해 preventDefault를 사용해야 한다.

DOM:

1
2
3

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

React:

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("You clicked submit.");
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

React 에서는 DOM 엘리먼트를 생성한 후에 이벤트 리스너를 추가 하기 위해서 addEventListenter를 호출할 필요가 없다. 렌더링 될때 리스너를 제공하는 방법을 사용한다.

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

    // 콜백에서 this 가 작동하려면 this를 바인딩 해주어야 한다. -> 호출 시점에서 this는 undefined이기 때문이다.
    this.handleClick = this.handleClick.bind(this);
  }

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

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

콜백 함수 내에서 this를 사용하고 싶다면 생성자에서 바인딩을 해주어야 한다. 이는 React 내에서의 특징이 이나리 일반적인 JavaScript에 특징이다. 만약 매번 바인딩 하기 싫다면 다음과 같은 방법을 사용해도 된다.

publick class fiedls syntax :

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log("this is:", this);
  };

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

화살표 함수 사용하기:

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

  render() {
    // This syntax ensures `this` is bound within handleClick
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}

화살표 함수를 사용할때에 문제점은 컴포넌트가 렌더링 될때마다 콜백이 새로 생성된다는 것이다. 대부분의 경우는 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수 도 있다.

Lists and Keys

javscript 에서 map을 이용하여 새로운 배열을 얻는것과 똑같이 엘리먼트를 생성할 수 있다.

Rendering Multiple Components

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

ul 테그를 감싸서 DOM에 렌더링한다.

1	ReactDOM.render(<ul>{listItems}</ul>, document.getElementById("root"));

Basic List Component

일반적으로는 컴포넌트 안에서 리스트를 렌더링 한다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => <li>{number}</li>);
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

이렇게 작성하면 엘리먼트에 key를 추가하라는 경고를 만나게 된다. React에서는 반복 되는 요소에는 특수한 문자열 어트리 뷰트를 넣어야 한다. 리스트 엘리먼트에서 key 가 필요한 이유는 다음 섹션에서 더 설명하도록 한다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    <li key={number.toString()}>{number}</li>
  ));
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

여기서는 배열 요소의 숫자를 key로 넘겨 준다. 보통은 고유한 id를 주어야 한다…

Keys

key는 React가 어떤 항목을 변경, 추가 또는 삭제할때 식별할 수 있는 정보를 준다. key 엘리 먼트를 통해서 엘리먼트의 안정적인 고유성을 확인할 수 있고 수정 삭제 작업을 수행 할 수 있다.

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

일반 적으로 key 는 배열의 고유한 값으로 넘겨 주어야 한다. 보통은 데이터의 id를 추가하는 방법을 사용한다.

1	const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

만약 id 가 없다면 최후의 방법으로 인덱스를 key로 사용한다. 실제로 React에서는 key를 넘겨주지 않는다면 인덱스를 키로 잡는다.

const todoItems = todos.map((todo, index) => (
  // Only do this if items have no stable IDs
  <li key={index}>{todo.text}</li>
));

하지만 이렇게 작성하면 데이터 갯수가 늘어나면 key도 똑같이 변하게 되고, 데이터 추가 변경시 안정성이 떨어지게 된다. 의도하지 않은 동작을 하기도 한다.

key 가 중요한 이유는 다음과 같다.
리액트는 두 트리를 동시에 순회하며 판단하고 다를 경우만 생성한다. 예를들어 자식의 끝에 엘리먼트를 추가하면, 다음 두 트리 사이의 변경은 잘 작동할 것이다.

<ul>
  <li>first</li>
  <li>second</li>
</ul>에

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

리액트는 두 가지 트리를 비교하면서 first, second가 일치하는 것을 확인하고 다른것은 third 임으로 third를 추가하는 방법을 작동한다.

만약 자식의 끝이 아니라 시작에서 추가하면 좋지 않은 성능을 낸다. 예를들어 다음코드는 작동하겠지만 매우 좋지 않은 성능을 낸다.

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

React는 Duke 다음부터는 재사용 할 수 있음에도 불구하고, 순회하면서 제일 처음 다른것이 Connecticut 임을 확인하고 전체를 다시 렌더링한다. 굉장히 비효율적이다.

Key는 이런 문제를 해결한다.

자식 요소에 key를 추가함으로서 리엑트는 key를 사용하여 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. key를 줌으로서 순서가 아닌 id 로 식별할수 있게 된 것이다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

이렇게 작성함으로서 리액트는 duke 이후를 다시 그리는 것이 아니라, 단순히 순서만 바꾸면 된다는 것을 알게 된다.

또한 이런 이유가 있기 때문에 단순히 인덱스를 key로 사용하면 안되는 것이다. key는 고유하며 데이터가 추가된다고 변하면 안된다. 인덱스를 사용하면 기존 트리와 이후 트리에 차이를 발견할 기준을 잃어버리게 되는 것이다.

Extracting Components with keys

키는 주변 배열의 context에서만 의미가 있다. 다음 코드와 같이 ListItem 컴포넌트를 추출 한 경우 컴포넌트 자체에 key를 주어야 한다.

고쳐야 함 :

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>{value}</li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  ));
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

정확한 예 :

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()} value={number} />
  ));
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

Keys Must Only Be Unique Among Siblings

키는 형제 요소 에서만 고유값이면 된다. 전체 영역에서 고유값일 필요는 없다. 예로 두개의 다른 배열을 만들때 동일한 키를 사용할수 있다.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
  const content = props.posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React from npm." },
];
ReactDOM.render(<Blog posts={posts} />, document.getElementById("root"));

키는 React 에게 힌트를 제공하지만 컴포넌트로 전달되지는 않는다. props로 사용하고 싶다면 key 가 아닌 다른 값으로 id 를 전달하면 된다.

Embedding map() in JSX

JSX 에서는 어떤 자바스크립트 표현식도 사용할 수 있기 때문에 map 도 JSX 안에서 사용할 수 있다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    <ListItem key={number.toString()} value={number} />
  ));
  return <ul>{listItems}</ul>;
}

위에 코드를 Embedding map 을 사용하여 아래처럼 고칠 수 있다.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) => (
        <ListItem key={number.toString()} value={number} />
      ))}
    </ul>
  );
}

어떤게 좋을지는 개발자가 직접 판단하면 된다. 깔끔해 지긴 하지만 중첩이 많이 생길 수 도 있으니 적절히 사용하면 된다.

Forms

forms 엘리먼트는 자체가 내부 상태를 가지기 때문에 React의 다르 DOM 엘리먼트와 들게 동작한다.

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

기본적으로 폼을 제출하면 새로운 페이지로 이동하는 동작을 수행한다. 원한다면 사용하면 되는데 일반적으로는 Javascript를 통해서 제출을 처리하고 사용자가 입력한 값에 접근하는 방법을 사용한다. 이런 방법을 사용하기 위해서는 controlled components 라고 불리는 기술을 사용해야 한다.

Controlled Components

일반적으로 html 에서 input, textarea, selct와 같은 폼 엘리먼트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다. React서는 setState를 해야 state를 변경할 수 있으므로 사용자의 입력을 철리하려면 관리하는 state를 추가해야 한다.
React에 의해 값이 제어되는 입력 폼 엘리먼트를 controlled component라고 한다.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }

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

코드를 조금 더 생성해야 하긴 하지만, 다른 이벤트에 의해서 값을 초기화 할 수 도 있고 전달 할 수 있어서 편리하다.

textarea 태그

1
2
3

<textarea>
  Hello there, this is some text in a text area
</textarea>

html 에서는 textarea 테그는 자식 요소로 text를 받아서 자신의 value로 사용한다. react 에서는 value에 어트리뷰트로 추가해여 똑같이 동작 시킬 수 있다.

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "Please write an essay about your favorite DOM element.",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("An essay was submitted: " + this.state.value);
    event.preventDefault();
  }

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

The select Tag

html 에서 select는 드롭다운 메뉴를 만든다.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

selected 옵션을 사용하여 초기에 선택되는 값을 정하는데 리엑트에서는 select 태그에 value 옵션을 줌으로써 똑같이 동작시킬 수 있다.

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "coconut" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("Your favorite flavor is: " + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <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 어트리뷰트에 배열을 전달할 수 잇다.

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

file input 태그

HTML 에서 input 태그에 type 을 file 로 설정하여 파일을 입력 받을 수 있다.
값은 읽기 전용 이기때문에 React 에서는 이를 비제어 컴포넌트라고 부른다.

1	<input type="file" />

다중 입력 제어하기

다중 입력을 제어할때 입력 태그에 name 을 주어서 구분 할 수 있다.

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2,
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value,
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange}
          />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange}
          />
        </label>
      </form>
    );
  }
}

Controlled Input Null Value

value props 를 주면은 사용자가 값을 변경할 수 없다. React에서 state로 관리해야 그때부터 변경할 수 있게 된다. 그런데 value prop으로 null 이나 undifiend를 주면 state를 관리하지 않아도 사용자가 변경할 수 있게 된다.

ReactDOM.render(<input value="hi" />, mountNode);

setTimeout(function () {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

Alternatives to Controlled Components

사실 제어 컴포넌트를 사용하느것이 해보면 좀 귀찮은 작업이라는 것을 알게 된다. 또한 다른 앱을 리액트 앱으로 바꾸려 할때에도 이는 정말로 귀찮은 작업으로 다가올 수 있다. 이때 대안으로 사용할 수 있는 비제어 컴포넌트가 있는데 자세한건 홈페이지에서 문서를 찾아 보길 바란다.

Fully-Fledged Solutions

Formik 이 완벽한 해결을 줄수 있다. 근데 이것도 기본적인 원칙은 위에서 설명한 것과 같기 때문에 기본적인 원칙을 모르면 어렵다. 기본적인 원칙을 공부하길 바란다.

네트워크 소개

Posted on 2021-10-09 In CS

네트워크 소개

네트워크 형태

LAN(Local Area Network) : 건거리 통신망
WAN(Wide Area Network) : 정거리 통신망 (ISP) 로 연결
VPN(Virtual Private Network) : 가상 사설망으로서 공중망을 사설망처럼 암호화해서 사용함.

네트워크 구조

규모, 업종, 통신방식과 경로, 토플로지 등등 나누는 기준이 다양하다.

토플로지

star : 중앙에 중계서버를 둔 형태

Ring: 중앙에 중계서버를 두지 않고 근처에 있는것 끼리 연결 - 뎁스가 깊어지는 문제가 있다.

Mesh : 서로 간에 연결 - 뎁스가 깊어지지는 않지만 갯수가 많아지면 경우에 수가 증가하는 문제가 있다.

Bus : 데이터 통로 Bus 를 두고 서로 통신하는 형태

Tree : 가장 많이 사용하는 형태 tree 구조를 두고 각각의 node에 다양한 형태로 구성할 수 있다.

Redundacy : 가용성, 동일한것을 하나 더 두어서 하나가 기능을 못해도 다른 하나가 동작하도록 한 형태

홈 네트워크

인터넷 - ISP(업체) - 모뎀 - 공유기 - 컴퓨터

기업용 네트워크

ISP(전용선) - 라우터 - 방화벽 - L3백본 - (L2 스위치 - 서버) or (L4B - 서버 - DMZ(외부로 노출하는 서버))

클라우드 네트워크 - AWS 기준

인터넷 - Route53(AWS에서는 DNS를 제공하는 역할) - IGW(AWS에서는 라우터와 비슷한 역할을 한다.) - VPN (L2, L3를 논리적으로 묶은것)

ELB : 각각의 서버로 분산해 준다.
Auto Scaling : 사용하는양에 자동으로 용량 산정해서 제공해 주는 서비스
SG : 일종의 방홤벽
EC2 : 각각의 서버라고 보면 됨.

OSI 7 Layer

정의

네트워크 프로토콜과 통신을 7계층으로 표현

목적

벤더(엄체)간 표준을 정해서 접근하기 쉽게 함.

OSI 7 Layer 모델

아래부터 1 -> 7 layer로 나뉨
1 계층 (Physical) - 장치와 통신 매체 사이의 비정형 데이터의 전송을 담당 (물리적 기계)
2 계층 (Data Link) - 동일 네트워크 내에서 데이터 전송, 링크를 통해서 연결을 설정하고 관리 함. 물리계층에서 발생할 수 있는 오류를 감지하고 수정
3 계층 (Network) - 다른 데트워크로 데이터 전송, IP 주소로 통신 IP, IP 통신과 라우팅 (L3 스위치, 라우터)
4 계층 (Transport) - 호스트 간의 데이터 전송, 완벽한 데이터 전송 보장, 포트 제어 TCP/UDP
5 계층 (Session) - 로컬 및 원격 애플리케이션 간의 IP / Port 연결을 관리 (Session Table로 관리 )
6 계층 (Presentation) - 사용자 프로그램과 네트워크 형신간에 데이터를 변환하여 표현고ㅓㅏ 독립성을 제공
7 계층 (Application) - 사용자와 가장 밀접한 소프트웨어 이메일 서비스, HTTP, FTP 등 …

TCP-IP suit 비교와 캡슐화

TCP/ IP?

네트 워크 프로토콜의 모음 패킷 통신 방식 (IP), 전송조절 프로토콜 (TCP)

4계층 모델

OSI 7Layer와 비교

캠슐화

인캡슐레이션 : 7계층 부터 1계층 까지 내려가면서 통신의 필요한 header 붙혀서 캡술화 하는 과정
디캡슐레이션 : 1계층 부터 7계층 까지 올라가면서 통신의 필요한 header를 확인하고 데이터에서 header를 제거하는 과정

인캡슐레이션의 예, 디캠슐레이션은 반대로 하면 된다.

물리계층

Posted on 2021-10-09 In CS

물리 계층

L1 물리 계층에 대해서 알아본다.

물리 계층의 역할과 기능

OSI 7 계층에 1계층으로 하드웨어 영역이다. 데이터 계층의 프레임을 비트로 인코 딩하고 신호로 바꾸어 통신한다. 받은 신호를 통하여 비트로 바꾸고 비트를 프레임으로 바꾸는 역활을 담당한다.

Signalilng의 종류

전기 (대표적으로 UTP 케이블이 있다.)
광 (대표적으로 Fiber 가 있다. )
전파 (wifi)

Signaling 전송 방식

물리 계층 장비와 케이블

물리 계층의 장비로는 대표적으로 허브와 리피터가 있다.

허브의 동작 방식

브로드 케스팅 방식을 사용하여 허브 내에 모든 pc 에게 송신하고 주소에 맞는 pc 만 수신 하는 형식을 사용한다.

유니 캐스트 방식은 1 : 1 통신을 의마한다.

멀티 캐스트 방식은 1 : N 통신을 의미한다.

CSMA/CD

데이터를 보내기 전에 다른 노드에서 데이터를 보내는 중인지 확인한다.
보내는 곳이 없다면 전송을 시작한다.
동시간대 보내게 되면 통신이 중단되고 일정 시간이 흐른 후에 다시 통신을 시작한다.

이런 방식을 Half Duplex 라고 한다. 흔히 무전기에서 사용하는 방식과 비슷하다.

Simplex : 는 단방향 통신을 의미한다.

Full Duplex : 동시 양방향 통신이 가능한 형태로 전화기와 비슷하다고 생각하면 된다.

성능

Bandwidth(대역폭) - 주어진 시간대에 네트워크를 통해 이동할 수 있는 정보의 양 ( 도로 넓이 )
Throughput(처리량) - 단위 시간당 디지털 데이터 전송으로 처리하는 양 (자동차 수 )
Backplane(최대 처리 량) - 네트워크 장비가 최대로 처리할 수 있는 데이터 용량
CPS : L4, 초당 커넥션 연결 수
CC : 최대 수용 가능한 커넥션
TPS : 초당 트랜잭션 연결 수 ,L&

UTP 케이블과 wifi

UTP 케이블이란?

주로 근거리 통신망 (LAN) 에 사용되는 케이블로서 자기장을 방지하기 위해 꼬여 있다.

코드 배열

8p8c
8개의 선 배열에 따라 다이렉트 또는 크로스 케이블로 구성한다. (TIA-568A, TIA-568B)

같은 기계 끼리는 크로스로 다른 디바이스 끼리는 다이렉트로 연결한다.

Auto MDI-x
노드 별로 크로스냐 다이렉트냐 구분하기 어렵기 때문에 자동으로 정해지도록 할 수 있는 기술

UTP 카테고리

UTP 케이블의 전송 가능한 대역폭을 기준으로 분류.
cat3~cat6 까지 있음

WIFI란?

비영리 기구인 WIFI Aliance의 상표로 전자기기들이 무선랜에 연결할 수 있게 하는 기술

무선랜 구성

인터넷 - ISP - 라우터 - WIPS - AP - 라우터

WIPS(Wireless IPS) : 보안과 관련된 역할을 한다.
AP(Access Point) : 무선 허브와 같은 역할을 한다. 무선 랜카드와 연결된다.

AP 에 반경과 동시 접속 가능 단말기의 개수를 고려하여 설치해야 한다.

라우터와 서브넷팅

Posted on 2021-10-09 In CS

라우터와 서브넷팅

라우터의 이해

패킷의 경로를 선택하여 전송.

인터페이스 : 라우터의 접속 가능한 포트로 통신용 관리용으로 구분

서브넷 마스크

부분망, 할당된 네트워크 영역을 좀 더 효율적으로 사용하기 위해 서브넷으로 쪼개어 구성

첫번째 네트워크 주소, 마지막 브로드 캐스트 주소로 사용.

디폴트 게이트웨이 : 다른 네트워크로 패킷 전송시 거쳐야 하는 거점.

prefix: 네트워크 영역의 비트 1의 개수를 의미한다.

계산법 : 서브넷 마스크는 2진수로 1인 부분은 네트워크, 0 인 부분은 호스트가 된다. AND 연산을 수행해서 1이 되는 부분을 서브넷 네트워크라고 보면 된다.

라우터의 동작 방식

Static 라우팅

라우팅 테이블에 목적지 IP주소, 인터페이스 정보를 설정. (수동으로 경로를 라우터에 설정하여 패킷을 처리한다.)

IP 주소 할당 : 각 서브네팅된 네트워크에 맞추어 IP 설정

각 PC의 정적 라우팅 테이블 작성 : 각 PC의 경로는 1개, 곧 자신의 대역을 제외하고 전부 인접한 라우터(게이트웨이) 로 경로 설정 보통 디폴트 게이트웨이만 설정

Hop & TTL

전세계 네트워크 호스트는 IP 라우팅을 통해서 연결됨.

Hop: 소스와 목적지 간의 경로, TTL(Time to Live) : 패킷이 폐기되기 전 hop 카운트

각 라우터는 패킷이 인입되면 TTL 값을 1씩 감소, TTL = 0이 되면 폐기, 부정확한 패킷의 루프를 방지함.

ICMP

Posted on 2021-10-09 In CS

ICMP

정의

인터넷 제어 메세지 프로토콜을 의미한다. IP 통신은 목적지에 패킷을 정상적으로 전달하는 방법은 있지만 에러 발생시 처리가 불가능하다. 이때 ICMP 는 IP 통신의 에러 상황을 출발지에 전달하고 메시지를 제어하는 역활을 수행한다.

기능

IP 패킷에 포함되어 있다.

Type: ICMP 메세지 종류
Code: 메시지 Type 별 세부 코드 정보
Checksum: ICMP 헤더 손상 여부 확인

Type

ICMP 헤더의 Type은 0~ 254의 길이로 구성되어 있다. 각각은 정보용과 오류 보고형으로 나뉘어서 사용되는데 자주 사용되는 번호는 다음과 같다.

정보용 : 8, 0, 9, 10
오류 보고용 : 3, 5, 11, 12

DHCP

Posted on 2021-10-09 In CS

DHCP

Dynamic Host Contorl Protocol 로서 동적으로 IP를 할당하는 프로토콜이다. 흔히 인터넷을 연결하면 자동으로 IP 할당옵션이 이에 해당하는데 필요한 경우 고정 IP를 설정하는등의 작업을 하기도 한다.

DHCP를 사용하는 다음과 같다.

요청에 의한 IP 할당으로 효율성 극대화
잘못된 IP 설정으로 인한 장애 예방
IP 변경이 잦은 호스트의 관리

DHCP 메세지 포맷 설명

OpCode: 1 Request, 2 Reply
Hardware Type: 1, Ethernet
Hardware address length: 6, Mac address
Hop count: 0 에서 시작, 네트워크 이동시 증가
Transaction Id: 클라이언트가 선택하는 랜덤 수, 요청과 응답 매칭
Seconds: IP 할당 후 경과한 초의 수
Flags: 서버 응답에 의해서 0 unicast 또는 1 broadcast 응답 구분 값
Client IP: 최조 0.0.0.0 , Your IP: 할당될 IP, Options: DHCP 메세지 타임 포함

DHCP 동작 과정

IP 할당

네트워크 구성이 GateWay - Switch- DHCP Server - PC 로 구성되어 있다고 본다.

DHCPDISCOVER : PC는 DHCP Server를 발견한다.
DHCPOFFER: DHCP Server는 PC에게 IP를 제안한다.
DHCPREQUEST : PC는 제안 받은 IP할당을 요청한다.
DHCPACK: DHCP Server는 요청을 수락한다.

IP 갱신

지정된 IP 갱신 타임을 토래하면 갱신을 요청한다.

DHCPREQUEST: PC 는 기존 IP 재 할당을 요청한다.
DHCPACK: DHCP Server는 IP 확인 후 요청을 수락한다.

IP 해제

사용중인 PC가 전원이 off 되는 경우

DHCPRELEASE: PC 는 더이상 IP 할당이 필요없음을 알린다.

애플리케이션 서비스

Posted on 2021-10-09 In CS

애플리케이션 서비스

Cookies_TLS

HTTP 속성

Stateless

HTTP는 통신이 끝나면 상태 정보를 유지 하지 않는다. 전 페이지에서 로그인을 했더라도 상태를 유지하지 않기 때문에 로그인 했다는 정보를 모르게 되는 것과 같다. 이를 해결 하기 위해서 cookie session 같은 기술이 사용되기 시작했다.

정의

클라이언트 로컬에 저장되에 상태 값으로서 키와 값이 들어있는 파일이다.

session

서버에서 session 을 관리하여서 클라이언트에서 요청이 들어오면 하나의 상태로 유지함.

확인

개발자도구 -> 메뉴 -> Application - Cokkie 에서 확인 가능하다.

SSL / TLS

정의

SSL(Secure Socket Layer) / TLS(Transport Layer Security) 로서 TCP/ IP 네트워크 통신간 보안을 제공하는 프로토콜이다.

기능

인증
무결성
기밀성

프로토콜 구성

상위와 하위로 나뉜다.

상위 :

HandSake
Chnage Cipher Spect - 협상 정보가 적용됨을 알림
Alert : 엽상 과정에서 제시한 암호와 방식을 지원 못하는 경우 알림

하위

Record: 데이터 교환, 메시지를 전송

TLS Stack

동작 과정

메일 서비스

Email

정의

Electronic mail : 전자 메일

SMTP(Simple Mail Transfer Protocol) : 메일 발신
POP3(Post Office Protocol Version3) : 서버에서 메일을 가져오고 서버에서 삭제
IMAP4(Internet Message Access Protocol4) : 중앙 서버에서 메일을 관리, 접속하여 확인

SMTP

전자 메일 전송을 위한 표준 포로토콜 (TCP25) - 클라이언트 서버 통신

POP3

수신서버의 메일 박스에서 메일을 가져오고 삭제하는 프로토콜 (TCP110) , 아웃룩 같은 메일 클라이언트 프로그램에서 사용

IMAP4

메일서버로 접속하여 메일을 읽거나 삭제하는 프로토콜 (TCP 143) , IMAP4는 원하는 메일 메시지만 전송, 다중 접속 가능, 메일 보관함 연동 메일 서버의 자원 상률이 높아짐.

동작 과정

메일 서버 : MTA(Mail Transfer Agent) - 메일 전송
메일 클라이언트 : MUA(Mail User Agent) - 메일 송수신 프로그램
MDA(Mail Delivery Agent) : MTA가 수신한 메일을 수신한 우편함에 기록
MRA(Mail Retrieval Agent) : 리모트 서버의 우편함에서 사용자에게 메일을 가져오는 프로그램

Heelo-world

Posted on 2021-09-20 In react

1. Hello World

React의 가장 간단한 예제는 다음과 같다.

function App() {
  return <h1>Hellow, world!</h1>;
}

export default App;

안내서를 읽는 방법

이 안내서에서는 엘리먼트와 컴포넌트라고 불리는 재사용 가능한 작은 블록을 만드는 방법을 알려줍니다. 이것을 마스터하고나면 복잡한 앱을 만들 수 있습니다.

이전 장에 내용을 토대로 다음장의 내용이 구성된다.

지식 수준 가정

리엑트는 자바스크립트 라이브러리이다. 따라서 자바스크립트에 기본적인 내용을 알고 있다고 가정한다.

Handling Events

Lists and Keys

Rendering Multiple Components

Basic List Component

Keys

Key는 이런 문제를 해결한다.

Extracting Components with keys

Keys Must Only Be Unique Among Siblings

Embedding map() in JSX

Forms

Controlled Components

textarea 태그

The select Tag

file input 태그

다중 입력 제어하기

Controlled Input Null Value

Alternatives to Controlled Components

Fully-Fledged Solutions

네트워크 소개

네트워크 형태

네트워크 구조

토플로지

홈 네트워크

기업용 네트워크

클라우드 네트워크 - AWS 기준

OSI 7 Layer

정의

목적

OSI 7 Layer 모델

TCP-IP suit 비교와 캡슐화

TCP/ IP?

4계층 모델

OSI 7Layer와 비교

캠슐화

물리 계층

물리 계층의 역할과 기능

Signalilng의 종류

Signaling 전송 방식

물리 계층 장비와 케이블

허브의 동작 방식

CSMA/CD

성능

UTP 케이블과 wifi

UTP 케이블이란?

코드 배열

UTP 카테고리

WIFI란?

무선랜 구성

라우터와 서브넷팅

라우터의 이해

서브넷 마스크

라우터의 동작 방식

Static 라우팅

Hop & TTL

ICMP

정의

기능

Type

DHCP

DHCP 메세지 포맷 설명

DHCP 동작 과정

IP 할당

IP 갱신

IP 해제

애플리케이션 서비스

Cookies_TLS

HTTP 속성

Stateless

HTTP Cookie

정의

session

확인

SSL / TLS

정의

기능

프로토콜 구성

TLS Stack

동작 과정

메일 서비스

Email