본문 바로가기

전체 글

 (154)
[Architecture ] Flux 패턴 / 아키텍처 Flux 아키텍처란?플럭스는 어플리케이션을 위한 데이터 흐름 관리 패턴입니다. 이 개념의 가장 중요한 점은 한 방향으로만 데이터가 흐른다는 것입니다. flux는 action, view ,store ,dispatcher 로 이루어집니다.현재는 폐기된 프로젝트이지만, 많은 상태관리 라이브러리가 이 아이디어를 근간으로 합니다. Flux의 구성요소Dispatcher정의 : 디스패처는 actions를 수신하여 관련 스토어에 신속히 전달(dispatch)합니다.특징 :모든 스토어는 모든 액션을 수신합니다.각 애플리케이션에는 싱글톤 디스패처가 하나만 있어야합니다.※ 싱글톤 패턴 : 객체의 인스턴스가 오직 1개만 생성되는 패턴을 의미한다. Store정의 : 스토어는 애플리케이션의 데이터를 저장합니다. 스토어는 애플리케..
이분탐색 이분탐색이란? - 정렬되어 있는 리스트에서 탐색 범위를 반씩 줄이며 특정 원소를 찾는 탐색하는 알고리즘입니다. (정렬이 되어있지 않다면, 정렬해야합니다.) - 반씩 좁혀가며 탐색하므로 O(log n)의 시간 복잡도를 가집니다. 이분 탐색 구현 function binarySearch(arr, target) { let left = 0; let right = arr.length - 1; while (left
우선순위 큐 와 힙(Heap) 우선순위 큐란? - 우선순위가 가장 높은 데이터를 꺼내는 자료구조입니다. - 일반적으로 우선순위 큐는 힙(Heap)이란 자료구조로 구현됩니다. 힙은 트리구조로 가장 높은 우선순위를 가진 것을 루트노드로 정렬합니다. (주로 최소 힙과 최대 힙으로 구현됩니다.) - 가중치가 있는 그래프에서 주로 사용합니다. 대표적으로 다잌스트라 알고리즘이 있으며, 이를 통해서 최단 거리를 구하는 알고리즘을 구할 수 있습니다. - 힙의 원소를 추가하거나 제거할 때, 트리를 탐색하므로 일반적으로 O(log n)의 시간 복잡도를 가집니다. Heap vs BST(Binary Search Tree) - 힙과 BST는 모두 트리를 기반으로 하는 자료구조입니다. 하지만, 둘은 정렬 부분에서 큰 차이가 있습니다. - 힙의 경우 우선순위를..
Redux 개요(with 생활코딩) 생활코딩 리덕스리덕스란?예측 가능한 자바스크립트 애플리케이션 상태관리 저장소 오직 하나의 상태를 가짐 (single sourece of truth), 상태라는 객체를 중앙관리하여 애플리케이션의 복잡성을 낮춤상태값을 직접 수정 하는 것이 불가능하고, 내장 함수를 통해서만 수정이 가능하게 하여 상태가 예상치 못하게 바뀌는 것을 방지함.애플리케이션의 현재 상태, 이전 상태를 기록하여 디버깅을 쉽게 해줌.모듈 리로딩 기능을 통해 안정적인 개발환경을 제공 리덕스의 구성요소state : 상태, 직접 접근은 불가능하며 reucer 함수를 통해서만 변경 가능reducer : state 값을 수정함 => 현재상태(state)와 action값을 바탕으로, 새로운 state 값을 state에 적dispatch : reduc..
BFS(Breadth-First Search) 알고리즘 BFS란? 그래프 또는 트리를 얕은 단계부터 넓게 탐색하는 알고리즘이다. 주로 큐를 이용하여 구현하며 상세한 알고리즘에 따라 다를 수 있지만, 방문한 곳을 표시하지 않으면 무한루프 등에 빠질 수 있는 위험이 있다. 완전탐색의 일종이며, 모든 인접 지점을 차례로 방문한다. 대표적 예시로 네트워크 탐색, 최단 경로 문제 등이 있다. BFS의 작동원리 1. 중복방문을 체크할 visited 배열과 시작 노드를 큐에 넣는다. - node = 1, visit = {}, queue = [1] 2. 가장 우선적으로 넣은 큐 값을 현재 노드로 사용한다. 그리고 현재 노드와 연결된 노드를 찾고, 모두 큐 안에 넣는다. node = 1, Queue = [2,3,4], visit = [1] 3. 2를 반복한다. node = ..
[WEB] Web server vs Web application server 정적 웹 정해진 js, css, html을 웹 서버에서 다운 받음 DB, 비즈니스 로직이 없는 고정된 웹 페이지를 사용자에게 제공 동적 웹 js, css, Html 뿐만 아니라 클라이언트 요청에 따라 DB에게 필요한 정보를 받아오고 수정할 수 있음. Web Server client에게 정적인 컨텐츠를 제공하는 프로그램 WAS를 거치지 않고 정적인 컨텐츠를 Client에게 제공합니다 WAS에게 동적인 정보를 요청합니다. Web Application Server DB 조회 및 다양한 로직 처리 시 동적인 컨텐츠를 제공하는 애플리케이션 서버, 미들웨어(엔진) 입니다. 웹 서버의 역할인 정적인 데이터를 전달할 수 있으며, DB와 통신하여 동적인 정보도 전달할 수 있음. 트랜잭션 관리 가능 WAS만이 아니라 We..
[ETC] Native App, Mobile App, Wep App, Hybrid App Native App Native한 언어로 만들어진 앱으로 흔히 말하는 모바일 어플리케이션을 의미합니다. ex). 안드로이드 앱, IOS 앱 네이티브 앱의 장점 웹앱, 하이브리드앱에 비해서 압도적으로 성능이 좋습니다. 네이티브 API를 사용가능하며, 플랫폼과 더욱 밀착되어있습니다. 네이티브 앱의 단점 플랫폼에 한정적이고 제약이 있습니다. Mobile App/ Wep App 모바일 앱은 기존의 PC에 최적화된 사이트를 모바일 크기에 맞게 줄여서 표현한 사이트입니다. 또한, 풀 브라우저 방식을 사용하여 페이지 리로드시 속도가 느린 단점이 있습니다. 웹 앱은 웹 기술로 모바일 크기에 최적화하여 만든 사이트입니다. SPA가 적용되어 실행속도가 모바일 앱에 비해서 빠릅니다. 웹 앱의 장점 웹 사이트를 보는 것이기 ..
[React 공식 문서] Synchronizing with Effects 이 글은 리액트 공식문서를 개인적으로 해석 및 요약한 것입니다. 번역투를 해소하기 위해 약간의 수정이 있습니다.오역이나 설명이 부족한 부분에 대한 설명은 항상 환영합니다.일부 전문 용어는 해석하지 않고 영문 단어를 그대로 적었으며, 첫 등장 시에만 ()를 이용하여 별도 표기하며 그대로 원문을 따라가기도 합니다.원문 : https://react.dev/learn/synchronizing-with-effects참고 : https://react.dev/reference/react/useEffect 들어가기에 앞서"Effect"는 리액트에서 정의한 용어로, 렌더링에 의해서 발생하는 side effect를 의미합니다. Effect가 아닌 더 넓은 프로그래밍 개념으로의 side effect를 언급 시에는 side ..

티스토리툴바