개발에 도움이 되는 (78) 썸네일형 리스트형 Flux 패턴 - Flux 패턴이란? MVC 패턴의 단점을 보완하기 위해 페이스북에서 만든 단방향 데이터 흐름을 위한 패턴 - 왜 사용할까? MVC 패턴에는 Model과 View가 양방향 패턴에서 나오는 의존성을 가진다는 특성이 있다. 이는 복잡한 Application을 서비스하게 된다면 새로운 기능이 추가 될 때마다 시스템의 복잡도가 높아지고, 예측 불가능한 코드를 만들게 되며, 그렇게 된다면 예측 못할 버그들이 쏟아질 가능성이 높아진다. * 실제로 페이스북이 가졌던 문제점 중 하나가 알림 버그였다. 페이스북에 로그인 했을 때 새로운 메시지 아이콘 알림이 떠 있지만, 실제로는 아무런 메시지가 없었다. 이를 단방향 데이터 흐름인 Flux 패턴으로 해결 하였다고 한다. - 용어 정리 1. Action : 정확히 말하면 .. 레드 블랙 트리(Red-Black Tree) Red-Black Tree : 기존 이진 탐색 트리에서 탐색, 삽입, 삭제의 시간 복잡도는 O(h)이다. 즉 , 트리의 높이에 비례한 만큼의 시간이 걸린다. 원소들이 트리에 잘 분산 되어 있다면 별 문제가 없지만, 한 쪽으로 치우친 트리 (skewed tree)의 경우에는 높이가 n이 되어 시간 복잡도가 O(n)이 된다. 이러한 이진 탐색 트리에 색(Red, Black)이라는 속성을 추가하여 최악의 상황이라도 시간 복잡도 O(log n)을 유지한다. - 조건 1. 모든 node는 Red 혹은 Black의 색을 갖는다. 2. root node는 항상 Black이다. 3. NIL node(= leaf node)는 Black이다. 4. Red node의 자식 node는 항상 Black node이다. (= Re.. TCP / IP 4계층(4 Layer Internet Model) 계층 모형 : TCP / IP 모형은 현재 인터넷에서 정보를 주고 받는데 쓰이는 프로토콜의 모음으로 각 계층은 담당하는 위치마다 처리 역할을 구분하여 진행함으로써 서로의 간섭을 최소화하여 사용을 높이고, 유지 보수가 편리하다. 호환성 보장으로 비용 절감, 계층 별로 문제 확인이 가능하여 쉽게 문제 해결이 가능, 다른 계층끼리의 전달 과정을 알 필요가 없어 Data의 캡슐화와 은닉이 가능. L4 응용 계층 0. Data 단위 : Data / Message 1. 사용자와 가장 가까운 계층으로 사용자가 Application과 소통할 수 있게 해줌. 2. 응용프로그램들이 Data를 교환하기 위해 사용되는 프로토콜 3. 사용자 응용프로그램 인터페이스를 담당 Ex) FTP, HTTP, SSH, DNS, SMTP 등.. 뮤텍스(Mutex)와 세마포어(Semaphore)의 정의 - 임계 구역 (Critical Section) : 여러 Process or Thread가 공유 자원에 접근하는 부분. 그렇기 때문에 이 임계 구역에 여러 Process나 Thread가 한번에 접근할 수 없도록 관리를 해줘야 한다. - 뮤텍스 (Mutex) : 공유 자원에 대한 접근을 동기화하기 위해 사용되는 상호배제 기술. Locking 메커니즘으로 오직 하나의 Thread만이 동일한 시점에 Lock을 얻어 임계 영역에 들어올 수 있다. 그리고 오직 그 Thread만이 Lock을 반환하여 임계 영역에서 나갈 때(Unlock) 다른 Thread가 접근할 수 있다. 뮤텍스는 오직 1개의 Thread만 접근할 수 있기 때문에 이진 세마포어와 같은 개념이다. - 세마포어 (Semaphore) : 공유 자원에 .. 경쟁상태(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(.. 이전 1 ··· 6 7 8 9 10 다음
