분류 전체보기

벨로퍼트 리액트 - 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 ..

문제 설명 문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return 하도록 solution 함수를 작성해보세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 my_string에는 숫자가 한 개 이상 포함되어 있습니다. my_string은 영어 소문자 또는 0부터 9까지의 숫자로 이루어져 있습니다. - - - 입출력 예 my_string result "hi12392" [1, 2, 2, 3, 9] "p2o4i8gj2" [2, 2, 4, 8] "abcde0" [0] 입출력 예 설명 입출력 예 #1 "hi12392"에 있는 숫자 1, 2, 3, 9, 2를 오름차순 정렬한 [1, 2, 2, 3, 9]를 return 합니다. 입출력 예 ..

문제 설명 가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요. 제한사항 0

문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string안의 모든 자연수들의 합을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 my_string은 소문자, 대문자 그리고 한자리 자연수로만 구성되어있습니다. 입출력 예 my_string result "aAb1B2cC34oOp" 10 "1a2b3c4d123" 16 입출력 예 설명 입출력 예 #1 "aAb1B2cC34oOp"안의 한자리 자연수는 1, 2, 3, 4 입니다. 따라서 1 + 2 + 3 + 4 = 10 을 return합니다. 입출력 예 #2 "1a2b3c4d123Z"안의 한자리 자연수는 1, 2, 3, 4, 1, 2, 3 입니다. 따라서 1 + 2 + 3 + 4 ..

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-5. redux-thunk로 프로미스 다루기 4) 포스트 목록 구현하기 포스트 목록을 보여줄 프리젠테이셔널 컴포넌트 작성. components/PostList.js import React from 'react'; function PostList({ posts }) { return ( {posts.map(post => ( {post.title} ))} ); } export default PostList; 컨테이너 컴포넌트 작성. → containers/PostListContainer.js import React, { useEffect } from "react"; import { useSelector, useDispatch } from 'react-redux'; ..

벨로퍼트 리액트 - 7. 리덕스 미들웨어 7-5. redux-thunk로 프로미스 다루기 ❗❗필요한 선행지식 : 자바스크립트의 Promise 자바스크립트의 동기적 처리와 비동기 처리 동기적 처리 : 작업이 끝날때까지 기다리는 동안 중지상태가 됨으로 다른 작업을 할 수 없음. 현재 작업이 끝나야지만 다음 작업으로 넘어간다. 비동기적 처리 : 현재 작업을 처리중이더라도 멈추지 않기 때문에 여러 작업을 처리할 수도 있고 기다리는 과정에서 다른 함수도 호출할 수 있다. 비동기 처리가 사용되는 작업들 Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 할때는 요청을 하고 서버에서 응답을 할때까지 대기해야하기 때문에 비동기로 처리한다. 파일 읽기 : 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으..