My Boundary As Much As I Experienced

클래스형 컴포넌트 import { Component } from 'react'; export default class MyComponent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.state = { count: 0, }; } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { const { count } = this.state; return ( {count} 클릭해보세요! ); } } react 라이브러리에서 제공하는 Component를 import 받아와서 상속 관계를..

- 클래스형 컴포넌트(Class Component)의 단점을 보안하여, 함수형 컴포넌트(Functional Component)를 사용 할 수 있도록 등장한 것이 React Hook(리액트 훅) 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Component)의기능을 사용 할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다. 내장 Hooks - useState - useEffect - useContext 추가 Hooks useReducer (복잡한 컴포넌트들의 state를 관리 -분리..

페이지 부재 (Page Fault) CPU가 접근하려는 페이지가 메모리에 없는 상황이다. 페이지 부재 발생 시 페이지를 디스크에서 읽어봐야 하는데 이 과정에서 막대한 오버헤드가 발생한다. 필요한 페이지가 메모리에 없을 때 page-falut가 발생하고 Backing Store(보조 메모리)에서 해당 페이지를 찾아 빈 프레임에 로딩해야 하는데, 이때 빈 프레임이 없을 경우 희생 당할 프레임(victim frame)을 고르는 알고리즘이 페이지 교체 알고리즘이다. 페이지 교체 알고리즘은 page-fault 발생 비율을 줄이는 것을 목표로 한다. 페이지 교체 (Page Replacement) 페이지 부재가 발생하면 요청된 페이지를 디스크에서 메모리로 읽어와야하는데, 물리적 메모리에 빈 프레임이 존재하지 않을 수..

가상 메모리 (Virtual Mememory) 실제 메모리 크기와 관계 없이 메모리를 사용할 수 있도록 가상 메모리 주소를 사용하는 것 프로세스의 일부분만 메모리에 로드하고 나머지는 보조 기억 장치 (가상 메모리 공간) 에 둔다 Memory Fragmentation 어떠한 프로그램을 실행할 때, 컴퓨터에서는 프로그램들을 메모리 공간에 연속적으로 할당하게 됩니다. 만약 여러 프로그램들이 메모리에 할당되고 해제되는 것이 반복되다 보면 메모리 공간이 조각조각 나뉘게 되어 총메모리가 충분함에도 불구하고 프로그램에 메모리를 할당하는 것이 불가능한 상태가 발생하게 됩니다. 이러한 현상을 바로 메모리 단편화라고 하며, 이번 포스팅은 메모리 단편화 해결방법인 페이징과 세그멘테이션에 대해 알아보도록 하겠습니다. Memo..

리액트의 소스코드 import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class Basic extends Component { static propTypes = { name: PropTypes.string.isRequired, birth: PropTypes.number.isRequired, lang: PropTypes.string, }; static defaultProps = { lang: 'Javascript', }; static contextTypes = { router: PropTypes.object.isRequired, }; state = { hidden: false, }; compo..

세마포어 : 멀티프로그래밍 환경에서 공유 자원에 대한 접근을 제한하는 방법 공유된 자원에 여러 프로세스가 동시에 접근하면서 문제가 발생할 수 있다. 이때 공유된 자원의 데이터는 한 번에 하나의 프로세스만 접근할 수 있도록 제한을 둬야 한다. 이를 위해 나온 것이 바로 '세마포어' 임계 구역 여러 프로세스가 데이터를 공유하며 수행될 때, 각 프로세스에서 공유 데이터를 접근하는 프로그램 코드 부분 세마포어 P, V 연산 P : 임계 구역 들어가기 전에 수행 ( 프로세스 진입 여부를 자원의 개수(S)를 통해 결정) V : 임계 구역에서 나올 때 수행 ( 자원 반납 알림, 대기 중인 프로세스를 깨우는 신호 ) // P(S); procedure P(S) --> 최초 S값은 1임 while S=0 do wait -..

여러 프로세스가 하나의 공유 자원에 접근하려 할 때 발생하는 문제이다. 데이터의 최종 상태는 마지막에 접근한 프로세스에 따라 달라진다고 한다. 이런 문제 때문에 상호 배제(Mutual Exclusion)이 필요하다. 컴퓨터 시스템에서 데이터 연산의 순서는 이렇다. 연산할 데이터를 저장 공간에서 가져온다. -> 연산한다. -> 연산한 결과를 저장 공간에 반영한다. 그런데 여러 실행 주체가 1개의 공통 데이터를 수정할 때 예상치 못한 경쟁 상태가 발생하는 것이다. count++와 count--가 서로 참조해서 예상치 못한 값을 나오게 하는 예시. 경쟁 상태가 일어나는 경우 커널 작업을 수행하는 중에 인터럽트 발생 문제점 : 커널모드에서 데이터를 로드하여 작업을 수행하다가 인터럽트가 발생하여 같은 데이터를 조..

1. 스코프 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 따라 접근 가능한 범위가 결정되는 것을 말함. var, 함수 스코프 var는 함수를 기준으로 유효 범위가 결정된다. 다른 함수 안의 변수는 접근 불가. function displayNum() { var num = 100 console.log(num) // 100 } displayNum() // 100 console.log(num) // num is not defined 그런데 조건문은 함수가 아니라 문(statement)이기 때문에 안으로 접근 가능하다. if (true) { var age = 10 } else { var age = 20 } console.log(age) //20 let, const 직관적으로 중괄..

동기식 (Synchronous) 먼저 시작된 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다. 직렬로 배치. 작업 실행의 순서가 확실히 정해져 있다. 비동기식 (Asynchronous) 동기식 방식과는 다르게 먼저 시작된 작업이 끝나든 안 끝나든 새로운 작업을 시작하는 방식이다. 위 그림 Asynchronous와 같이 작업이 병렬로 배치되어 실행되며 작업 완료 순서가 확실하지 않다. 나중에 시작된 작업이 먼저 끝나는 경우도 발생. DOM Element 의 이벤트 이벤트 핸들러 마우스, 키보드 입력 (click, keydown 등), 페이지 로딩 (DOMContentLoaded 등) 타이머 타이머 API (setTimeout 등), 애니메이션 API (r..

교착 상태(膠着狀態) 또는 데드락(deadlock)은 두 개 이상의 작업이 서로 상대방의 작업이 끝나기 만을 기다리고 있기 때문에 결과적으로 아무것도 완료되지 못하는 상태이다. 주로 멀티 프로그래밍 환경에서 한정된 자원을 얻기 위해 서로 경쟁하는 상황 발생 한 프로세스가 자원을 요청했을 때, 동시에 그 자원을 사용할 수 없는 상황이 발생할 수 있음. 이때 프로세스는 대기 상태로 들어감 대기 상태로 들어간 프로세스들이 실행 상태로 변경될 수 없을 때 '교착 상태' 발생 데드락(DeadLock) 발생 조건 상호 배제(Mutual exclusion)자원은 한번에 한 프로세스만 사용할 수 있음 점유 대기(Hold and wait)최소한 하나의 자원을 점유하고 있으면서 다른 프로세스에 할당되어 사용하고 있는 자원..