본문 바로가기

분류 전체보기

 (894)
[알고리즘] ch 8. 정렬(2) - 퀵 정렬 8.4 퀵 정렬 - 분할 정복(Divide and Conquer)에 바탕을 둔 알고리즘 1) 기준 요소 선정 및 정렬 대상 분류 - 자료구조에서 기준이 될 요소를 임의로 선정하고 기준 요소(Pivot)의 값보다 작은 값을 가진 요소는 기준 요소의 왼쪽으로, 큰 값을 가진 요소는 오른쪽으로 옮김 2) 정렬대상 분할 - 기준 요소 왼쪽에는 기준 요소보다 작은 요소의 그룹, 오른쪽에는 큰 요소의 그룹이 생김 여기에서 왼쪽 그룹과 오른쪽 그룹을 분할하여 각 그룹에 대해 1)의 과정 수행 3) 반복 - 그룹의 크기가 1 이하여서 더 이상 분할할 수 없을 때까지 1), 2)의 과정을 반복하면 정렬이 완료 ex) - 5를 기준으로 5보다 작은 요소를 왼쪽에, 큰 요소들은 오른쪽에 모음 - 5보다 작은 1,4,3,2는..
[알고리즘] ch 8. 정렬(1) - 버블 정렬, 삽입 정렬 8.1 정렬 알고리즘의 개요 정렬(Sorting) - 정해진 기준에 따라 데이터를 순서대로, 그리고 체계적으로 정리하는 알고리즘 - 정렬의 목적은 '탐색' 8.2 버블 정렬 - 자료 구조를 순회하면서 이웃한 요소들끼리 데이터를 교환하며 정렬 수행 - 버블 정렬은 이웃 요소끼리 데이터를 교환하므로 교환 전에 먼저 이웃끼리 비교하여 바른 순서로 위치해 있는지 확인해야 함 - 왼쪽에 있는 요소가 오른쪽에 있는 요소보다 작아야 함 ex) - 제일 왼쪽에 있는 요소부터 오른쪽에 이웃한 요소와 데이터를 비교해나감 - 왼쪽이 5, 오른쪽이 1이므로 두 이웃 요소 간 데이터를 교환 - 5, 6은 정렬되어 있으니까 넘어감 - 왼쪽이 4, 오른쪽이 6이므로 교환 - 제일 큰 수인 6을 제외한 나머지 요소들은 여전히 정려되..
[리액트를 다루는 기술] 16장 리덕스 라이브러리 이해하기 16.1 개념 미리 정의하기 리덕스(redux) - 리액트 상태 관리 라이브러리 - 리액트에 종속되는 라이브러리는 아님 - 리덕스 사용시 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음 - 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능 - 전역 상태를 관리할 때 효과적 16.1.1 액션 - 상태에 어떠한 변화가 필요하면 액션(action)이 발생 - 액션은 하나의 객체로 표현 - 액션 객체는 type 필드를 반드시 가지고 있어야 함 { type:'ADD_TODO', data: { id:1, text: "리덕스 배우기" } } { type:'CHANGE_INPUT', text: '안녕하세요' ..
[리액트를 다루는 기술] 15장 Context API 15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기 - Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 로그인 정보, 애플리케이션 환경 설정, 테마 etc - 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용 할 수 있음 15.2 Context API 사용법 익히기 15.2.1 새 Context 만들기 - 새 Context를 만들 때는 createContext 함수를 사용 - 파라미터에는 해당 Context의 기본 상태를 지정 Context/color.js import { createContext }..
[리액트를 다루는 기술] 14장 외부 API를 연동하여 뉴스 뷰어 만들기 14.1 비동기 작업의 이해 - 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리. 이 과정에서 해당 작업을 비동기적으로 처리 14.1.1 콜백 함수 ex) 파라미터 값이 주어지면 1초 뒤에 10을 더해서 반환하는 함수 function increase(number, callback) { setTimeout(() => { const result = number + 10; if(callback) { callback(result); } },1000) } increase(0, result => { console.log(result); }); - 1초에 걸쳐서 10,20,30,40과 같은 ..
[리액트를 다루는 기술] 13장 리액트 라우터로 SPA 개발하기 13.1 라우팅이란? - 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 - 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 두가지 1) 리액트 라우터 (React Router) - 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있음 npm install react-router-dom 2) Next.js - 리액트 프로젝트의 프레임워크 - 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화 , 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공 - 라우팅 시스템은 파일 경로 기반으로 작동 13.2 싱글 페이지 애플리케이션이란? 멀티 페이지 애플리케이션 - 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS,JS,이..
[리액트를 다루는 기술] 12장 immer를 사용하여 더 쉽게 불변성 유지하기 12.1 immer를 설치하고 사용법 알아보기 - 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있음 - 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듬 - immer 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있음 - 컴포넌트의 상태 업데이트가 조금 까다로울 때 사용하면 좋음 npm install immer immer - npm (npmjs.com) immer Create your next immutable state by mutating the current one. Latest version: 10.0.3, last publis..
[리액트를 다루는 기술] 11장 컴포넌트 성능 최적화 11.1 많은 데이터 렌더링하기 - createBulkTodos 라는 함수를 만들어서 데이터 2,500개를 자동으로 생성 - useStaet(createBulkTodos)처럼 파라미터를 함수 형태로 넣어주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos 함수가 실행됨 App.js import {useState, useRef, useCallback} from 'react'; import TodoTemplate from "./Components/TodoTemplate"; import TodoInsert from "./Components/TodoInsert"; import TodoList from "./Components/TodoList"; function createBulkTodos() { co..

티스토리툴바