전체 글

[React] 리덕스 미들웨어를 통한 비동기 작업 관리

리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다. 1. 작업 환경 준비 $ yarn create react-app learn-redux-middleware $ yarn add redux react-redux redux-actions [modules/counter.js] import {createAction, handleActions} from 'redux-actions'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; export const increase = createAction(INCREASE); export..

[React] 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기

리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수 하는데 도움이 된다. 여러 컴포넌트에서 동일한 상태를 공유해야할 때 매우 유용 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있다. 리액트 애플리케이션에서 리덕스를 사용할 때는 store인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리 1. 작업 환경 설정 프로젝트 생성 미치 라이브러리 설치 $ yarn create react-app react-redux-tutorial $ cd react-redux-tut..

[python] 백준 > 괄호

[문제] 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 부른다. 한 쌍의 괄호 기호로 된 “( )” 문자열은 기본 VPS 이라고 부른다. 만일 x 가 VPS 라면 이것을 하나의 괄호에 넣은 새로운 문자열 “(x)”도 VPS 가 된다. 그리고 두 VPS x 와 y를 접합(concatenation)시킨 새로운 문자열 xy도 VPS 가 된다. 예를 들어 “(())()”와 “((()))” 는 VPS 이지만 “(()(”, “(())()))” , 그리고 “(()” 는 모두 VPS 가 아닌 문자열이다. 여러분은 입력으로 주어진 괄호 문..

[python] 백준 > DFS > ABCDE

[문제] BOJ 알고리즘 캠프에는 총 N명이 참가하고 있다. 사람들은 0번부터 N-1번으로 번호가 매겨져 있고, 일부 사람들은 친구이다. 오늘은 다음과 같은 친구 관계를 가진 사람 A, B, C, D, E가 존재하는지 구해보려고 한다. A는 B와 친구다. B는 C와 친구다. C는 D와 친구다. D는 E와 친구다. 위와 같은 친구 관계가 존재하는지 안하는지 구하는 프로그램을 작성하시오. www.acmicpc.net/problem/13023 13023번: ABCDE 문제의 조건에 맞는 A, B, C, D, E가 존재하면 1을 없으면 0을 출력한다. www.acmicpc.net [나의 풀이] import sys N, M = map(int, input().split()) arr = [[] for _ in ran..

[React] 리덕스 라이브러리

가장 많이 사용하는 리액트 관련 상태 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 전역 상태를 관리할 때 효과적 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있다. 1. 개념 1.1. 액션 상태에 어떠한 변화가 필요하면 액션이란 것이 발생 다음과 같은 형식으로 이루어져 있다. { type: 'TOGGLE_VALUE' } 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 ..

[python] 백준 > dfs > 단지번호 붙히기

[문제] 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. 는 을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오. www.acmicpc.net/problem/2667 2667번: 단지번호붙이기 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지..

[React] Context API

전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 리액트 관련 라이브러리에서도 많이 사용 ex) 리덕스, 리액트 라우터, styled-components등 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 컴포넌트 간에 데이터를 props로 전달하기 때문에 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어 관리 기존엔 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아 와서 사용할 수 있다. 2. Context API 사용법 익히기 2.1. 새 Context 만들기 [co..

[python] 프로그래머스 > 시저암호

[문제] 1. 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 AB는 1만큼 밀면 BC가 되고, 3만큼 밀면 DE가 됩니다. z는 1만큼 밀면 a가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 2. 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. 3. 입출력 예 s n result AB 1 BC z 1 a a B z 4 e F d [나의 풀이(틀림)] import copy def solution(s, n): alphabet =..