noillu_01.log https://velog.io/ Wed, 05 Jan 2022 16:39:27 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed noillu_01.log https://images.velog.io/images/noillu_01/profile/af666334-cc6b-4f79-85de-16e55d7ac5f7/social.png https://velog.io/ Copyright (C) 2019. noillu_01.log. All rights reserved. <![CDATA[Property와 State]]> https://velog.io/@noillu_01/Property%EC%99%80-State https://velog.io/@noillu_01/Property%EC%99%80-State Wed, 05 Jan 2022 16:39:27 GMT 객체 프로퍼티이므로 바로 화면상에 텍스트로 표시할 수 없다. 그러므로 문자열 형태로 변환시켜 주어야 하며 String과 Object.entries가 사용된다. Component에 Property로 입력된 것이 Object인 경우 String(Object.entries(objValue))로 사용할 수도 있다.

propTypes에 정의할 때는 objValue: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number, }), } 와 같이 사용할 수 있으며 이를 이용하면 객체 목록을 한 눈에 확인할 수 있어 편리하다.

필수 프로퍼티 사용하기

필수 프로퍼티는 propTypes를 지정해줄 때, isRequired 옵션을 지정해 주면 된다.

requiredStringValue: PropTypes.string.isRequired;

코드

import logo from './logo.svg'; import './App.css'; import TodaysPlan from './03/TodaysPlan'; import PropsComponent from './03/PropsComponent'; import ChildComponent from './03/ChildComponent'; import BooleanComponent from './03/BooleanComponent' import ChildComponent2 from './03/ChildComponent2'; function App() { return ( // /*

지루할 때:
즐거울 때: 

</div>

*/

/*

<ChildComponent
boolValue={true}
numValue={1}
arrayValue={[1,2,3]}
objValue={{name: '제목', age: 30}}
nodeValue={<h1>노드</h1>}
funcValue={() => {console.log('메시지');}}

/> / /

안녕하세요

    </div>   
</div>

*/ ); }

export default App;

App.js

import React from 'react'; import PropTypes from 'prop-types';

class ChildComponent2 extends React.Component { render() { const { objValue, requiredStringValue, } = this.props;

    return (
      <div>
          <div>객체값: {String(Object.entries(objValue))}</div>
          <div>필수값: {requiredStringValue}</div>
      </div>  


    );
}

}

ChildComponent2.propTypes = { objValue: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number,

}),
requiredStringValue: PropTypes.string.isRequired,

}

export default ChildComponent2;

ChildComponent2.jsx

class의 defaultProps 옵션을 사용하여 기본값을 지정할 수 있다. ? 조건문에서는 false와 undefined가 같은 것으로 취급되지만 ===비교문에서는 다른 것이다.

그러므로 혼동이 생기지 않게 미리 기본값을 지정해 주는 것이 좋다

defaultProps를 지정하는 예시 DefaultPropsComponent.defaultProps = { boolValue: false, };

자식 프로퍼티 사용하기

JSX는 마크업 표현식을 사용할 수 있으므로 컴포넌트 하위에 배치한 노드로 child property를 줄 수 있다.

  • 컴포넌트 하위의 태그들을 노드라 하는가?
  1. 컴포넌트 상태 관리하기(state)

state: 컴포넌트의 상태 관리가 필요한 경우에 주로 사용한다. 컴포넌트에서 값의 변경이 필요할 때(예: 쇼핑몰에 물건 수량 입력, 댓글 입력 등) 사용할 수 있다.

보통 이벤트와 함께 사용한다(예: 버튼을 누르면 색 변경, 글씨 모양 변경 등)

*super를 할 때 props는 this.props를 안해도 되는가?

state함수에서의 주의점: 생성자를 사용하여 반드시 초기화해야만 한다. state값을 변경할 때는, setState()함수를 반드시 사용해야 한다. setState()함수는 비동기로 처리되며, setState()코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.

state값은 직접 변경하면 안된다. render()함수로 화면을 그려주는 시점은 react엔진이 정하기 때문

*setState()함수의 인자를 function으로 전달하면 이전 state를 읽는 과정을 생략할 수 있다.

-> 어떻게 어떤 과정으로 이전 state가 전달되는지 이해가 안됨.

this.forceUpdate()(this는 해당class를 의미함.)

  1. 컴포넌트의 생명주기: 컴포넌트의 생성부터 소멸까지의 과정.

생명주기 함수: 생명주기 함수는 리엑트 엔진에서 자동으로 호출되므로 개발자 마음대로 호출할 수 없다.

constructor함수: 맨 처음에 생성될 때 한 번만 호출, 항상 super()함수를 포함하여야 한다. 프로퍼티와 생명 주기 상태를 초기화하는 중요한 과정을 포함하고 있다.

render함수: 데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수이다.

static getDerivedStateFromProps(props, state) 함수

정적 함수이므로 함수 내에서 this.props 등으로 property나 state값에 접근할 수 없다.

componentDidMount() 함수 render()함수가 JSX를 화면에 그린 이후에 호출되는 함수. 컴포넌트가 화면에 포함된 이후 수행해야 하는 작업을 넣으면 된다.

shouldComponentUpdate(nextProps, nextState)

]]> <![CDATA[JSX and Component]]> https://velog.io/@noillu_01/JSX-and-Component https://velog.io/@noillu_01/JSX-and-Component Wed, 05 Jan 2022 11:47:27 GMT JSX: JavaScriptXML : JS에 XML을 추가한 확장형 문법. JSX는 하나의 파일에 JavaScript와 HTML(XML에 포함)을 동시에 작성할 수 있어 편리하다.

render() {} 함수 내에 HTML처럼 작성하는데, JSX는 HTML이 아닌 XML의 문법을 따르므로, < />를 꼭 표시해 주어야 한다.

JSX와 기존 개발 방식의 차이

index.js 파일이 React로 서버를 구동했을 때, 가장 처음 실행된다. ReactDOM.render( document.getElementById('root')); -> id가 root인 Element에 App 컴포넌트를 표시하는 코드이다,.

  • getElementById: document에서 해당 id를 가진 Element를 찾아 변수로 반환하는 코드이다.

App Component를 사용하지 않을 경우 index.js파일에 모두 변수로 작성해서 append한 다음 넣어야 한다.

(App.js Component를 사용하지 않는 경우) var img = document.createElement('img'); img.setAttribute('src', 'https://cdn.pixabay.com/photo/2021/10/07/15/12/wine-6688901_960_720.jpg') var divEl = document.createElement('div'); divEl.innerText = '안녕하세요'; var welcomeEl = document.createElement('div'); welcomeEl.append(img); welcomeEl.append(divEl);

var root = document.getElementById('root'); root.append(welcomeEl);

App.js를 사용할 경우 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; 3개의 모듈을 기본적으로 import하면 된다.

React.createElement()함수에서는 리액트 함수를 JS의 document.createElement()함수로 변환하여 실행된다.

컴포넌트와 구성 요소

기존의 웹 프레임워크는 MVC 방식으로 관리 M: model(정보) V: view(화면) C: control(구동 담당)

각 요소의 의존성이 높아 재활용 어려움

컴포넌트: 뷰를 독립적으로 구성하여 재사용도 할 수 있고, 컴포넌트를 통해 새로운 컴포넌트를 만드는 것도 가능하다.

컴포넌트의 주요 구성 요소:

Property, State, Context property: 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 state: 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터 context: 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터이다.

프로퍼티: 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때, 사용한다. property에 값을 전달할 때는, attribute형태로 전달하면 된다.

const name = this.props.name;(해당 attribute로 지정된 프로퍼티를 불러올 때 사용한다.)

단방향으로만 데이터가 흐르며, 읽기 전용이다는 것이 중요

프로퍼티에서는 js의 모든 자료형을 사용할 수 있다. 자료형을 미리 선언하면 값의 변화를 미리 감지할 수 있고, 개발자의 실수로 원하지 않는 자료형이나 지정되지 않은 자료형이 들어가는 오류를 방지할 수 있다.

'prop-types'모듈을 이용하여 프로퍼티의 자료형을 선언할 수 있다.

PropsComponent.propTypes = { name = PropTypes.string, };

프로퍼티에 값을 전달할 때는 문자열의 경우 큰따음표롤 사용하나, 문자열 이외의 값을 전달할 때에는 {}를 사용하여 전달한다.

{}의 이중 중괄호 시 혼동의 우려가 있으므로, 미리 변수에 선언하여 넣은 후 전달하는 것이 좋다.

property의 기본값을 지정할 때는 (클래스이름).defaultProps로 기본값을 지정할 수 있다.

property를 생략하면 undefined가 전달된다. ?조건문에서는 false와 undefined를 같은 것으로 인식하므로 혼동 방지를 위해 기본값 false를 확실히 지정해줄 필요가 있다.

]]> <![CDATA[Memory Hierarchy 및 Cache Memory]]> https://velog.io/@noillu_01/Memory-Hierarchy-%EB%B0%8F-Cache-Memory https://velog.io/@noillu_01/Memory-Hierarchy-%EB%B0%8F-Cache-Memory Tue, 07 Dec 2021 11:23:06 GMT Computer Architecture(컴퓨터구조)를 들으면서 Memory Hierarchy 및 Cache Memory의 작동 원리에 대해 정리해 보았다.

메모리가 Level이 있다.

  1. CPU Register(General Purpose Register등, 정확히는 Register File)

  2. Cache Memory(SRAM)

  3. Main Memory(DRAM)

  4. Second Storage(HDD, SSD)

  5. 아카이브 스토리지(Magnetic Tape 등)

Level이 상위 레벨일수록 속도는 빠르나, 가격이 비싸고, 용량이 작다.

하위 레벨일수록 속도는 느리나, 가격이 싸고, 용량이 크다.

우리가 원하는 것: 속도도 빠르고, 용량도 크고, 가격 싼 것

그러나, 이 조건을 모두 충족시키는 메모리는 존재하지 않습니다.

목적: 적절하게 구조화를 해서 빠르고 용량이 큰 것과 같은 illusion을 사용자에게 제공하는 것

상위 계층일수록 CPU와의 물리적 거리도 짧다,

구조화를 시킬 때, 어떤 것을 선택하여 어떻게 상위 메모리로 배치할지를 결정하는 것이 중요하다.

빼낼 때는 어떤 것을 빼낼 지 결정하는 것 중요하다.

Register Cache Main Memory Disk Memory
Size 100B KB→MB GB GB→TB
Management Compiler Hardware(특정 오류 발생 시 OS가 개입) Operating System Operating System

Memory Hierarchy의 Optimization으로 illusion을 제공할 수 있는 것은 Memory Technology와 Program Locality 때문이다.

  • Temporal Locality

어떤 항목이 메모리에서 참조가 되면 그 항목이 반복적으로 참조가 될 가능성이 높다.

예) 반복문 등

  • Spacial Locality

어떤 항목이 메모리에서 참조가 되었을 때, 주변의 영역이 참조될 수 있는 가능성이 높다.

예) 배열(array) 등

목적: 가장 높은 단계의 메모리의 속도와 가장 낲은 단계의 메모리의 가격과 용량을 사용자에게 제공하는 듯한 환상을 제공하는 것이 목적이다.

Row Major의 Locality

================================================

a[0][0]|a[0][1]|a[1][0]|a[1][1]| ......

================================================

접근 방향———————————————————————>>>>>>>

Column Major의 Locality

================================================

a[0][0]|a[0][1]|a[1][0]|a[1][1]| ......

================================================

1 3 2 4

Spacial Locality가 Row major 접근보다 낮다.

Locality를 잘 활용하는 것도 Programmer의 능력이다.

Cache Memory

캐시 메모리: 메인 메모리보다 용량이 작고, 빠른 메모리로 데이터를 임시 저장하여 속도를 향상하는 것을 목표로 한다.

k 레벨의 메모리는 그 다음 레벨 k+1레벨의 메모리의 캐시 역할을 하게 되어 있다.

이것은 메모리에서 Locality에 의해서, k레벨의 캐시 데이터를 더 많이 참조하게 되어 가능한 일이다.

용어 정리:

Block: 이동하는 데이터의 기본 단위(word: RISC 계열은 8bits, Intel 계열은 4bits이다.)

Hit: 상위 레벨에서 엑세스하려는 데이터가 발견된 경우

Hit Rate: 상위 레벨에서 엑세스가 가능한 경우의 비율

Hit Time: 상위 레벨에서 엑세스하는데 걸리는 시간

Miss: 데이터를 하위 레벨의 메모리에서만 찾을 수 있는 경우

Miss Rate: 1 - hit rate

Miss Penalty: 낮은 레벨의 메모리에서 데이터를 복사하는데 걸리는 시간

= lower lever에서 block을 얻는데 걸리는 시간 + upper level에서 replace를 하는 시간

(당연히 Hit time도 포함되며, hit time보다 긴 시간이 소요된다.)

Average Memory Access Time = hit time + miss rate * miss penalty

문제 예시 : hit time과 miss rate, miss penalty를 구하고 성능 차이를 비교하는 문제

Additional Benefits:

CPU에서 메모리 접근 시 System Bus 사용, System Bus가 사용 중일 때는 DMA 등의 다른 장치가 사용할 수 없다. Cache이용 시 System Bus를 사용하지 않아도 되므로, Memory의 대역폭 사용을 줄일 수 있고, DMA 등 타 장치가 대역폭을 전부 활용할 수 있다.

ISA를 교체하지 않아도 된다: 상위 레벨(프로그래머 및 개발자가 이용하는 레벨)에서는 Cache가 transparent하므로 프로그래밍이나 코드를 바꾸지 않아도 된다.

ex) Intel core i7 Block의 경우

=====================================

CPU core(Reg file)

→ L1 cache(i), L1 cache(d)

→ L2 Cache

===================================(코어 1개) x4

→L3 Cache(코어 공동 사용)

→ 메모리 컨트롤러, QPI

CPU는 1 word를 요구하고, 1 word가 1 block일 때,

  1. 어떻게 block을 캐시에 배치할 것인가?
  2. 어떤 데이터가 올리고 내려야 하는가?
  3. 데이터가 존재함을 어떻게 파악하는가?
  4. Consistent문제: 1개의 데이터가 여러 곳에 있을 경우 동일한 데이터인가?

Direct-Mapped Cache

Cache Block의 주소는 Memory Address에 의해 결정된다.

Cache slot = memory block address % cache block size

나머지가 동일한 경우에는 같은 cache block slot에 들어가게 된다.

Memory Address의 나머지 부분은 tag로 별도로 기록을 해 두게 된다.

v(유효성 검증) | tag bits | 0 1 2 3 4 5 6 7번째 비트

Memory Address:

tag bits+find set using unit number+offset

]]>