study

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-11. redux-saga로 프로미스 다루기 redux-thunk : 함수를 만들어서 해당 함수에서 비동기 작업을 하고 필요한 시점에 특정 액션을 디스패치 redux-saga : 특정 액션을 모니터링하고 해당 액션이 주어지면 이에따라 제너레이터 함수를 실행, 비동기 작업을 처리 후 액션을 디스패치. 예제) posts 모듈을 redux-saga로 구현 modules/posts.js import * as postsAPI from '../api/posts'; // api/posts 안의 함수 모두 불러오기 import { reducerUtils, handleAsyncActions, handleAsyncActionsById } from '../lib/asyncUtil..

04장 변수 4.1 변수란 무엇인가? 왜 필요한가? 변수란? 변수(Variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체. 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘이며 값의 위치를 가리키는 상징적인 이름이다. 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 변수 값 : 변수에 저장된 값 할당(대입, 저장) : 변수에 값을 저장하는 것 참조 : 변수에 저장된 값을 읽어들이는 것 변수는 왜 필요한가? 사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 명확히 할 수 있다. 따라서 가독성을 높일 수 있으며 개발자의 의도를 정확하게 나타내고 이해하기 쉬운 코드를 작성할 수 ..

문제 설명 우주여행을 하던 머쓱이는 엔진 고장으로 PROGRAMMERS-962 행성에 불시착하게 됐습니다. 입국심사에서 나이를 말해야 하는데, PROGRAMMERS-962 행성에서는 나이를 알파벳으로 말하고 있습니다. a는 0, b는 1, c는 2, ..., j는 9입니다. 예를 들어 23살은 cd, 51살은 fb로 표현합니다. 나이 age가 매개변수로 주어질 때 PROGRAMMER-962식 나이를 return하도록 solution 함수를 완성해주세요. 제한사항 age는 자연수입니다. age ≤ 1,000 PROGRAMMERS-962 행성은 알파벳 소문자만 사용합니다. 입출력 예 age result 23 "cd" 51 "fb" 100 "baa" 입출력 예 설명 입출력 예 #1 age가 23이므로 "cd"..

문제 설명 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. 제한사항 box의 길이는 3입니다. box[0] = 상자의 가로 길이 box[1] = 상자의 세로 길이 box[2] = 상자의 높이 길이 1 ≤ box의 원소 ≤ 100 1 ≤ n ≤ 50 n ≤ box의 원소 주사위는 상자와 평행하게 넣습니다. 입출력 예 box n result [1, 1, 1] 1 1 [10, 8, 6] 3 12 입출력 예 설명 입출력 예 #1 상..

문제 설명 정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10,000 입출력 예 n result 24 [1, 2, 3, 4, 6, 8, 12, 24] 29 [1, 29] 입출력 예 설명 입출력 예 #1 24의 약수를 오름차순으로 담은 배열 [1, 2, 3, 4, 6, 8, 12, 24]를 return합니다. 입출력 예 #2 29의 약수를 오름차순으로 담은 배열 [1, 29]를 return합니다. function solution(n) { var answer = []; for (i=1; i

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-9. CORS와 Webpack DevServer Proxy 브라우저에서 API를 요청할때 → 브라우저의 현재 주소 = API의 주소 도메인 이어야만 데이터에 접근 가능. 다른 도메인에서 API를 요청해서 사용할수있게 해줘야할때 ⇒ CORS 설정이 필요함 json-server의 경우 모든 도메인을 허용해주는 CORS 규칙이 적용되어있으나 Open API를 만드는게 아니라면 모든 도메인을 허용하면 안됨! 해야 할 경우에는 특정 도메인만 허용해야함. 실제 서비스를 개발할때 - 서버 API 요청할때 기본적으로는 차단되기때문에 서버쪽에 도메인을 허용하도록 구현해야하나 웹팩 개발서버에서 제공하는 Proxy가 있으면 상관없음! 1) proxy 설정하기 웹팩 개발서버의 프록..

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-7. thunk에서 라우터 연동하기 1) customHistory 만들어서 적용하기 thunk에서 라우터의 history 객체를 사용하려면 BrowserHistory 인스턴스를 직접 만들어야 한다. index.js 수정 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'..

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-6. API 재로딩 문제 해결하기 1) 포스트 목록 재로딩 문제 해결하기 해결방법 1. 데이터가 이미 존재할 경우 요청을 하지 않게 한다 containers/PostListContainer.js 수정 import React, { useEffect } from "react"; import { useSelector, useDispatch } from 'react-redux'; import PostList from "../components/PostList"; import { getPosts } from "../modules/posts"; function PostListContainer() { const { data, loading, error } = useSele..

문제 설명 문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 my_string은 영어 대문자와 소문자로만 구성되어 있습니다. 입출력 예 my_string result "cccCCC" "CCCccc" "abCdEfghIJ" "ABcDeFGHij" 입출력 예 설명 입출력 예 #1 소문자는 대문자로 대문자는 소문자로 바꾼 "CCCccc"를 return합니다. 입출력 예 #2 소문자는 대문자로 대문자는 소문자로 바꾼 "ABcDeFGHij"를 return합니다. function solution(my_string) { return my_string.spl..

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-5. redux-thunk로 프로미스 다루기 5) 리액트 라우터 적용하기 라우터 설치 $ npm add react-router-dom src/index.js 수정 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { applyMiddleware, createStore } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from ..