본문 바로가기

전체 글

 (115)
경쟁상태(Race Condition), 교착상태(DeadLock), 기아상태(Starvation)의 정의 - 요약 경쟁상태(Race Condition) : 공유 자원에 대해 여러 개의 프로세스가 동시에 접근을 시도할 때 접근의 타이밍이나 순서 등이 결과값에 영향을 줄 수 있는 상태 교착상태(DeadLock) : 두 개 이상의 작업이 서로 상대방의 작업이 끝나기만을 기다리고 있기 때문에 아무것도 완료되지 못하는 상태 - 교착 상태의 조건 : 아래 4가지 조건을 모두 충족시켜야 함 1. 상호배재 : 프로세스들이 필요로 하는 자원에 대해 배타적인 통제권을 요구한다. 2. 점유대기 : 프로세스가 할당된 자원을 가진 상태에서 다른 자원을 기다린다. 3. 비선점 : 프로세스가 어떤 자원의 사용을 끝낼 때까지 그 자원을 뺏을 수 없다. 4. 순환대기 : 각 프로세스는 순환적으로 다음 프로세스가 요구하는 자원을 가지고 있..
PWA 직접 만들기 - 간단 소개 PWA = Progressive Web Application 웹과 앱의 장점을 결합. 쉽게 말해 웹으로 만들고나서 모바일 앱으로 변환 시킬 수 있음. PWA Builder로 만들려고 시도했다가 자꾸 이미지가 안만들어져서 직접 만들기로 하였음. (IOS 사파리 제외) - 준비물 1. 웹 어플리케이션 2. 웹 앱 매니페스트 (manifest.json) 3. 서비스 워커 (sw.js) 4. 192x192, 512x512 사이즈의 png 이미지 5. https (로컬에서는 http로 해도 문제 없음) - 만드는 방법 1. 기존 웹 프로젝트에 아래의 파일을 넣는다. manifest.json sw.js 준비물 때 언급했던 이미지가 담긴 폴더 (아래 예시에서 icons) ex) index.html 있는..
Redux - Redux란? 상태 관리 라이브러리. - 왜 사용할까? 계층에 관계없이 direct하게 state에 접근하기 위함. -> state가 특정 컴포넌트에 종속되는 것을 막을 수 있음. prop drilling 현상(props -> props -> props ...)을 막을 수 있음. store에서 state를 관리를 해줘서 유지보수 용이. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. - 주요 특징 1. 기본적으로 flux 패턴 action -> dispatch -> reducer -> store -> view redux의 데이터 흐름은 동일하게 단방향으로 view(컴포넌트)에서 dispatch(store에서 주는 state를 바꾸는 함수)라는 함수를 통해 ac..
useEffect - 요약 설정한 useState 값이 바뀌면 등록한 함수가 실행. 페이지가 렌더링되고 무조건 최초 한번은 실행 됨. # 모듈 선언 import React, { useEffect } from "react"; # useEffect 선언 useEffect(() => {}, [value]); value 값이 변경되면 함수가 실행된다. value = 변수, case 1) value를 넣지 않고 []인 상태면, 최초 한번만 실행 case 2) value를 넣으면 value 값이 업데이트 될 때만 실행 case 3) 아예 비워 놓으면 리렌더링 할 때마다 실행 () => {} = 변수가 변경되면 실행할 함수 ex) const [iu, setIu] = useState(0); -> iu를 0으로 초기화 useEffect(..
useState - 정의 value 값이 바뀌면 자동으로 리렌더링 해주는 함수. 컴포넌트에서 상태를 관리할 수 있음. # 모듈 선언 import React, { useState } from "react"; # useState 선언 let [value, setValue] = useState(init); ES6 destructuring 문법으로 useState에서 return 된 배열들이 해당 배열에 맞게 들어감. 첫번째 원소 value는 현재 상태 값 변수, 두번째 원소 setValue는 상태 값을 갱신해주는 Setter 함수이다. value = 변수 setValue = 변수를 변경해주는 함수 init = 해당 값으로 변수 초기화 ex) let [age, setAge] = useState(0); -> age의 초기값을 0..
React - React란? 페이스북에서 만든 유저 인터페이스(UI)를 만들기 위한 JavaScript 기반 라이브러리 - 왜 사용할까? 사용자와의 인터렉션을 UI로 쉽게 구현하고, 대규모의 복잡한 동적인 웹페이지를 관리하기 위해 사용 브라우저 전체를 새로고침하지 않고도 컨텐츠를 빠르게 변경 가능 - 주요 특징 1. 컴포넌트 컴포넌트는 UI를 구성하는 개별 단위이다. 페이지는 컴포넌트의 조합인 느낌 2. 단방향 데이터 흐름 (Flux 패턴) 부모로부터 자식으로만 데이터를 전달할 수 있다. 유지보수가 더 편함 3. 가상 DOM DOM은 Document Object Model의 약자이며, HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리한다. HTML 코드를 브라우저에서 열게 되면 DO..
Program, Process, Thread Program : 파일이 Disk에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태 (코드 덩어리 파일) Process : 운영체제로부터 자원을 할당 받은 작업의 단위(메모리에 올라가 프로그램을 실행한 상태 = 동적인 상태) Process는 Code, Data, Stack, Heap의 구조로 되어 있는 독립된 메모리 영역을 할당 받는다. 각 Process는 별도의 주소 공간에서 실행되며, 서로 독자적인 메모리 공간을 갖기 때문에 서로 메모리 공간을 공유할 수 없다. (= 다른 Process의 변수나 자료구조에 접근할 수 없다.) 다른 Process자원에 접근하려면 Process간의 통신(IPC)을 이용해야 한다. Process는 최소 하나 이상의 Thread를 포함한다. - Processor :..
heapq - 요약 이진 트리 기반의 최소 힙 자료 구조 최댓값과 최솟값을 찾는 연산을 빠르게 함. 기본 = 최소 힙 # 모듈 선언 import heapq # heapq 선언 ex_heap = [] -> 보통 List 선언해준 뒤, heapq 내장함수를 이용하여 사용. # heap에 원소 push heapq.heappush(ex_heap , 추가할 원소) # heap에 원소 pop heapq.heappop(ex_heap) -> 최솟값이 pop 됨. # 기존 list를 heap으로 변환 heapq.heapify(ex_heap) ex) ex_heap = [3, 2, 1, 8, 5] heapq.heapify(ex_heap) print(ex_heap) -> [1, 2, 3, 5, 8] # 최대 힙 응용 heapq.heap..
반응형

티스토리툴바