서론 원티드 프론트엔드 세션에서 Redux 라이브러리를 파헤쳐보라는 조언에 하나씩 살펴보고 검색하면서 Flux 패턴에 대해 알게 되었다. Redux 뿐 아니라 사용해봤거나 알고 있는 라이브러리에서도 쓰이고 있음을 확인하고 “이건 꼭 알아야해 !” 라는 생각으로 정리를 시작하게 되었다. FLUX 패턴 2014 FaceBook F8 에서 발표된, Facebook의 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용되는 어플리케이션 아키텍쳐이다. React, Redux 등 관련 라이브러리에서 사용중인 일종의 디자인 패턴이다. 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 패턴과 같은 모습으로 새로운 코드 작성 없이 바로 사용할 수 있다. 탄생 배경 F8에서 밝힌 바에 따르면 Flux 패턴은 MVC 패턴의 예기치 못한 에러를 핸들링하기 위해 탄생했다고 한다. 위 그림에서 보듯 어플리케이션의 규모가 커지면 필연적으로 Model 과 View 의 종속관계가 증가되고, 의존성 또한 증가…

서론 Redux 작동 원리를 확인하면서 알게된 Flux 패턴. React와 다른 라이브러리 등에도 쓰이면서 반드시 알아야하는 개념이다는 생각이 들었다. 그런데 Flux 패턴의 시발점이 된 녀석이 있었다?! 반드시 알아야 해! 그래서 Flux 패턴을 정리하기 전 MVC 와 친구들을 정리한다. MVC, MVP, MVVM…? 그게 뭔디? 소프트웨어 디자인 패턴이다. UI와 비즈니스 로직를 분리해 코드를 관리하여, 상호 영향 없이 유지보수와 개발의 효율성을 높일 수 있는 설계 패턴이다. MVC Model-View-Controller 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 1979년 최초로 소개되어, 지금까지도 널리 사용되고 있다. 후술할 MVP, MVVM 패턴의 기반이 되는 개념이다. Controller Input을 받아 모델에 Action을 전달해 상태를 변경한다. 데이터와 비즈니스 로직 사이의 상호동작을 관리한다. Model…

달팽이 배열? snail array.. 달팽이 집 같이 숫자를 배치하고 구분한 배열 어디에 사용하는지는 모르겠지만 귀엽게 생긴 배열이다. 개념은 상하좌우 로 움직이면서 숫자를 넣는 게임기와 같다. 좌상단(시작점) => 우상단 => 우하단 => 좌하단 => 좌상단의 반복 을 구현하면 된다. 구현 달팽이 배열? 구현

소수? 소수는 1과 자기 자신만을 약수로 가지는 수 ex) 3의 약수는 1 & 3 알고리즘을 풀다보니 소수 구하는 문제가 종종 나온다. 소수를 판별하는 다양한 방법을 정리해보자 ! 소수 찾는 방법 1. 모든 수 확인하기 2부터 주어진 수 - 1 까지의 모든 수를 확인한다. 가장 쉽고, 단순하지만 시간이 오래 걸리는 방법이다. 2. 절반만 확인하기 2-1. 짝수 제외 2를 제외한 짝수는 모두 소수가 아니다. 절반을 제외하는 첫번째 방법… 2-2. 1/2 제외 num 의 약수는 num 의 절반을 넘을 수 없다. 2-1 과 2-2 를 결합하면 탐색의 1/4 을 줄일 수 있다. 하지만, 더 확실하고 좋은 성능의 코드가 있다. 3. 제곱근 활용 제곱근을 사용한 소수 판별. num의 제곱근보다 작은 수에서 약수가 안나온다면 num의 제곱근보다 큰 수에서도 약수가 나올 수 없다. 4. 에라토스테네스의 체 하나의 수를 판별하는 방법이 아닌, 구간 내 소수를 확인하는 방법이다. 3번의 제곱근을 활…

탄생 배경 웹 브라우저는 HTML + CSS + JS -추가 예정- 탄생 배경

실행 컨텍스트, Excute Context 실행 컨텍스트는 JS 의 동작 원리를 담고 있는 핵심 개념으로, 독특한 JS의 특징들을(호이스팅, 스코프, 클로저 등) 설명할 때 기본이 되는 개념이다. 따라서 JS를 사용한다면 반드시 개념을 이해하고 있어야 된다. 실행 컨텍스트는 JS 의 모든 소스코드를 실행하고 관리하는 주체가 된다. 소스코드 ? 그렇다면 소스코드는 무엇일까? 소스코드는 컴퓨터 프로그램을 사람이 읽을 수 있는 프로그램이 언어로 기술한 텍스트 파일로 개발자가 작성하는 모든 코드를 일컫는다. 소스코드의 처리 과정 JS 엔진은 모든 코드를 평가 와 실행 이라는 2단계로 구분해 처리한다. 평가 과정에서는 실행 컨텍스트가 생성되고, 선언문을 실행해 생성된 식별자를 실행 컨텍스트가 관리하는 스코프에 등록하는 과정이다. 함수의 경우, 객체 환경 레코드(Object Environment Record)에 저장이 된다. const 로 선언한 변수의 경우, 선언적 환경 레코드(Declar…

Hash Table 자료 구조 해시 테이블이란 무엇인가? 알아보자 Hash 먼저, 해시(Hash) 다. 해시(해시 함수)는 임이의 길이를 갖는 데이터를 고정된 길이의 데이터로 매핑하는 단방향 함수를 의미한다. 아무리 큰 숫자, 작은 숫자를 넣더라도 정해진 크기의 숫자가 나온다. 은행 금고 (은행에 어떤 것을 보관하더라도 동일한 모양의 열쇠를 받는것처럼) 이러한 해시 함수를 적용해 나온 고정 길이의 값을 해시값, 해시 코드, 해시섬 등으로 부른다. 해시 함수는 입력값의 범위가 출력값의 범위보다 넓기에 서로 다른 입력값에도 동일한 값이 출력되는 경우가 존재한다. 이러한 경우 충돌되었다고 하며 연결 리스트로 연결하는 방식으로 해결한다. Hash Table 해시 테이블이란 해시 함수의 특징을 이용해 변환값을 색인으로 삼아 KEY-VALUE를 저장하는 자료구조를 의미한다. KEY를 알고 있다면 빠르게 VALUE를 저장/삭제/조회할 수 있다. 하지만 KEY는 순서가 없다. 매우 빠른 속도…

트리 Tree 특징 트리는 노드와 간선으로 이루어진 데이터 구조를 의미한다. 그림과 같이 하나의 뿌리(루트)부터 시작해 간선으로 연결된 여러 갈래의 노드 가지가 뻗어있는 구조이다. 두 노드가 상하 관계를 갖고 있을때, 서로 부모-자식 관계라 하며, 루트에서 가까운 노드를 부모 노드, 먼 쪽을 자식 노드라고 한다. 이진 탐색 트리 Binary Search Tree 특징 이진 탐색 트리는 부모 노드가 특정 기준에 의해 최대 2개의 자식 노드를 갖는 특징을 보이는 트리다. 노드의 정렬이 특정 순서로 되어있어 탐색하기 쉽다. 그림은 왼쪽 자식 노드가 부모보다 작고 오른쪽 자식 노드가 부모보다 큰 기준에 의해 분류되어있다. 부모 노드를 확인하고 조건에 맞는 한쪽 노드를 확인하기에 탐색을 절반으로 줄일 수 있다. 한쪽으로 쏠려있는 트리가 될 수 있기에 기준점이 되는 루트를 잘 정하는게 중요하다. 트리 순회 트리를 순회하는 여러가지 방법이 있지만, BFS와 DFS가 가장 유명하고 널리 쓰인다.…

스택 Stack 특징 스택은 LIFO (Last In First Out / 후입선출) 의 특징을 가진 자료 구조다. 위 그림과 같이 순서대로 쌓아 올려진 형태이다. 데이터 입력은 push, 데이터 출력은 pop 이라 한다. 예시 최근 추가된 데이터부터 순차적으로 사용되기에 ctrl Z 나 브라우저 방문 기록과 같이 최근 동작을 기억하고, 사용하는 경우에 주로 사용한다. 큐 Queue 특징 큐은 FIFO (Fist In First Out / 선입선출) 의 특징을 가진 자료 구조다. 데이터 입력은 Enqueue, 데이터 출력은 Dequeue 라 한다. 예시 어떤 작업을 순서대로 실행하기 위해 대기시킬 때 (like 프린트 대기열) 사용한다. 스택 Stack 특징 예시 큐 Queue 특징 예시

이중 연결 리스트 특징 이중 연결 리스트는 단일 연결 리스트에 반대 방향으로 연결이 하나 추가된 개념이다. 단일 연결 리스트는 다음 노드만 연결했다면, 이중 연결 리스트는 이전 노드까지 연결한다. 그렇기에 양방향에서 탐색이 가능하다. [ 20 ➡ 10 ➡ 1 ➡ 5 ➡ 9 ] [ 20 ⬅ 10 ⬅ 1 ⬅ 5 ⬅ 9 ] 양방향 탐색은 특정 인덱스의 데이터를 가져오거나 노드를 탐색할 때 큰 장점이 된다. 단점 하지만 연결을 한 번 더 해야하기에 단일 연결 리스트보다 메모리 소모가 크다. 그리고 구현이 조금 더 복잡해진다. 그렇다해도 장점이 더 크기에 단일 연결 리스트보다는 이중 연결 리스트를 사용한다. 추가 단일 연결 리스트와 비슷하다. 이전 노드와의 연결만 추가하면 된다. 삭제 단일 연결 리스트와 비슷하다. 이전 노드와의 연결만 해제하면 된다. 구현 이중 연결 리스트 특징 단점 추가 삭제 구현

연결 리스트 Linked List 배열 연결 리스트 장점 인덱스를 통한 빠른 접근 삽입과 삭제가 용이 단점 삽입과 삭제 중간 데이터 삭제시 공간 낭비 발생 임의 접근이 불가능해 느린 탐색 용도 빠른 접근이 요구되고, 데이터의 삽입과 삭제가 적을 때 삽입과 삭제 연산이 요구되고, 검색이 적을 때 단일 연결 리스트 단일 연결 리스트는 각 노드가 다음 노드를 가리키며 한 방향으로 연결되어 있는 자료 구조이다. 연결 관계를 지속하는 것에 주의하면 데이터 추가와 삭제가 어렵지 않다. 추가 새로운 노드를 생성하고, 새 노드가 그 다음 노드를 가리키게 한다. 새 노드의 이전 노드가 새 노드를 가리키게 한다. 삭제 삭제할 타겟 노드를 찾는다. 타겟 노드의 이전 노드가 타겟 노드가 가리키던 노드를 가리키게 한다. 타겟 노드의 포인터가 아무것도 가리키지 않게 한다. 구현 연결 리스트 Linked List 단일 연결 리스트 추가 삭제 구현

프로그래머스 LV1 햄버거 만들기 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을 때, 세 번째 재료부터 여섯 번째 재료를 이용하여 햄버거를 포장하고, 아홉 번째 재료가 쌓였을 때, 두 번째 재료와 일곱 번째 재료부터 아홉 번째 재료…