본문 바로가기

전체 글

 (108)
[Redux] ⛓ 리덕스 미들웨어란 무엇인가? (1) 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. ⛓ 리덕스 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다. 액션과 리듀서 사이의 중간자라고 볼 수 있습니다. 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가하는 등 다양한 역할을 담당할 수 있습니다. 미들웨어의 구조는 아래와 같습니다. const loggerMiddleware = store => next => action => { //기본 구조 } export default loggerMiddleware; const loggerMiddleware = function loggerM..
[JavaScript] 비동기 처리 (1) 리액트 프로젝트를 진행하면서 API 서버를 연동할 때 API 요청에 대한 상태를 잘 관리해주어야 하는데, 예를 들어 요청이 시작되었다면 로딩 중, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 알려주어야 합니다. 또한, 요청이 성공했다면 서버에서 받아 온 Response에 대한 상태를 관리하고, 요청이 실패했다면 서버에서 받아 온 Error에 대한 상태를 관리해야 합니다. 리덕스를 사용하면서 위와 같은 비동기 작업을 관리해야 한다면, 리덕스 미들웨어를 사용하면 효율적이라고 하는데, 과연 효율적이라는 것을 느낄 수 있을 정도로 비동기 처리에 대한 이해가 충분한가에 대한 의심이 들어 다시 기초로 돌아와 비동기 처리에 대한 글을 정리해보려고 합니다. 비동기 처리 자바스크립트의 싱글 스레드, 콜스택 과 같은 ..
[프로그래머스] k번째 수 https://programmers.co.kr/learn/courses/30/lessons/42748?language=javascript 코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr function solution(array, commands) { const answer = commands.map((c) => { const [start, end, idx] = c; return array.slice(start - 1, end).sort((a, b) => a - b)[idx - 1]; }); return answer; } sort()만 사용하게 되면 ascii 코드 순서대로 ..
[프로그래머스] 가운데 문자열 가져오기 https://programmers.co.kr/learn/courses/30/lessons/12903?language=javascript 코딩테스트 연습 - 가운데 글자 가져오기 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 재한사항 s는 길이가 1 이상, 100이하인 스트링입니다. 입출력 예 s ret programmers.co.kr function solution(s) { const len = s.length; if (len % 2 === 0) { return s.substr(len / 2 - 1, 2); } else { return s.substr(len / 2, 1); } }
[React] 클래스형, 함수형 컴포넌트를 통한 Counter 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. 1. 클래스형 컴포넌트를 통한 Counter 클래스형 컴포넌트를 만들기 전에, 기본적으로 알아야 할 state와 props에 대한 간단한 설명을 하자면, state는 클래스형 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 또한, props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, props를 사용하는 컴포넌트는 읽기 전용으로만 사용할 수 있습니다. props의 변화를 주기 위해선, 부모 컴포넌트에서 바꾸어 주어야 합니다. 1.1) 클래스형 App.js 생성 import React, { Component } from 'react'; class App extends Component { render() { retu..
[React] props 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. 1. props props는 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 아래와 같이 컴포넌트에 properties로 전달되는 name값을 자식 컴포넌트인 Mycomponent가 props.name을 전달받습니다. -app.js import React from "react"; import "./App.css"; import MyComponent from "./components/myComponent"; function App() { return ( ); } export default App; -components/myComponent.js import..
[백준 10026] 적록색약 문제] 적록색약은 빨간색과 초록색의 차이를 거의 느끼지 못한다. 따라서, 적록색약인 사람이 보는 그림은 아닌 사람이 보는 그림과는 좀 다를 수 있다. 크기가 N×N인 그리드의 각 칸에 R(빨강), G(초록), B(파랑) 중 하나를 색칠한 그림이 있다. 그림은 몇 개의 구역으로 나뉘어져 있는데, 구역은 같은 색으로 이루어져 있다. 또, 같은 색상이 상하좌우로 인접해 있는 경우에 두 글자는 같은 구역에 속한다. (색상의 차이를 거의 느끼지 못하는 경우도 같은 색상이라 한다) 예를 들어, 그림이 아래와 같은 경우에 RRRBB GGBBB BBBRR BBRRR RRRRR 적록색약이 아닌 사람이 봤을 때 구역의 수는 총 4개이다. (빨강 2, 파랑 1, 초록 1) 하지만, 적록색약인 사람은 구역을 3개 볼 수 있다..
[React Interview] 컴포넌트 라이프 사이클 아래 링크를 참고하여 작성된 글입니다. 누구든지 하는 리액트 5편: LifeCycle API | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 자 이번에는 리액트의 LifeCycle API 에 대해서 알아보겠습니다. 이 API 는 컴포넌트가 여러분의 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 입니다. 정말 중요한 역할을 하는데요! 한번 세세히 파헤쳐봅시다. 컴포넌트 초기 생성 일단, 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들이 있습니다. constr velopert.com 1. 컴포넌트 라이프 사이클 라이프 사이클은 총 10가지로 구성되어 있으며, 접두사를 통해 메서드의 실행 시기..

티스토리툴바