이경욱

import St from './style' index.tsx에서 이렇게 import 하고 St. 이름으로 붙여서 사용할 수 있다. ex) style.ts 컴포넌트에선 하단에 export default {} 로 스타일을 모두 내보내주면 된다

src => asset => images 에 넣으니 스타일 컴포넌트에 background 상에서 url 경로가 인식되지 않았다. background 에서 linear 나 background-color 를 중복으로 주고 싶은데, src로 주면 중복이 먹지 않았다. public 폴더에 넣으면 background 중복으로 사용가능하다..!

DevTools 는 리덕스를 사용하는 웹 페이지에서 State나 Reducer의 흐름을 파악하기 아주 좋은 도구이다. 아래 링크에서 크롬 확장프로그램을 다운받으면 사용할 수 있다. https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

json-server란 아주 간단히 DB와 API 서버를 생성해주는 패키지이다. (mock data) 설치 방법 yarn add json-server 서버 통신 yarn json-server --watch db.json --port 4000 port를 3000번으로 같게 해줘도 동작하겠지만 해당 json 파일도 서버의 역할을 하는 것이기 때문에 port를 바꿔서 해주는 게 좋다.

Redux Toolkit Store import { configureStore } from "@reduxjs/toolkit"; import counter from "../modules/counterSlice"; import todos from "../modules/todosSlice"; const store = configureStore({ reducer: { counter: counter, todos: todos }, }); export default store; 이전에는 const rootReducer = combineReducers({counter,}); const store = createStore(rootReducer); createStore와 combineReducers 를 사용했어야 하지만 ..

브라우저에서 fetch 나 axios를 통해 다른 웹페이지의 html 데이터를 가지고오려고 하면 CROS 오류가 난다. SOP 정책에 의해 타 브라우저에서 데이터 접근을 막는 것이다. 따라서 proxy 우회라는 것을 통해 브라우저 => 브라우저가 아닌 서버에서 온 것처럼 보이게 만들 수 있다. 방법은 너무 간단하다. 딱 2가지만 기억하면 된다. https://cors-anywhere.herokuapp.com/corsdemo 1. 여기에 접속해서 아래 버튼을 누르고 https://cors-anywhere.herokuapp.com/ 2. 이걸 url 앞에 붙여주면 된다. axios.get(`https://cors-anywhere.herokuapp.com/mysite.com`) 이렇게 붙여주게 되면 참 감사하..

axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 프론트 & 백엔드 간의 원활한 통신을 위해 사용 자바스크립트에는 fetch API가 있지만, 프레임워크에서 ajax를 구현할 땐 axios를 쓰는 편이다. 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 axios 와 fetch의 차이점 구분 axios fetch 1 써드파티 라이브러리 내부 API 2 XSRF 보호 X 3 data 속성을 사용 body 속성을 사용 4 object 포함 문자열 변환 5 JSON 자..

1. Router DOM Router DOM 설치 yarn add react-router-dom 1. 페이지 컴포넌트 작성 -> 다중 페이지 2. Router.js 파일 생성. router를 구성하는 설정 코드 작성 3. App.jsx import 4. 페이지 이동 테스트 import {BrowswerRouter, Route, Routes} from "react-router-dom" import Home from "../src/components/Home"; const Router = () => { return ( ) } export default Router; 이렇게 BrrowserRouter, Routes, Route 3가지를 import하고 위의 코드처럼 순서대로 감싸주면 된다. 마지막 Route에..

오류 리액트 환경에서 Router를 만들고 나면 가끔 컴포넌트들의 경로를 찾지 못하는 현상이 있다고 한다. 그럴 땐 node_modules와 package-lock.json을 삭제하고 재설치하면 오류가 해결된다고 한다. 하지만 node_modules를 삭제하려면 너무 오래걸리고, 게다가 드라이브를 사용한다면 동기화 작업으로 인해 액세스가 거부된다. 그래서 터미널 상에서 지우는 방법을 선택하면 쉽고 빠르게 가능하다. 해결방법 1. rimraf 패키지 설치 npm install -g rimraf 2. node_modules 삭제 rimraf node_modules 3. package-lock.json 삭제 rm -rf package-lock.json 4. npm 모듈 재설치 npm install

Redux를 사용하면 중간에 컴포넌트를 거치지 않고 중앙 저장소 (Global state) 를 활용해서 데이터를 주고받을 수 있게 된다. useState로 생성한 State는 Local State이고, Redux에서 생성한 State는 Global State이다. 1. Redux 설정 (1) Redux 설치 yarn add redux react-redux 폴더 구조 redux 폴더 -> config 폴더 -> configStore.js 파일 -> modules 폴더 redux : 리덕스 관련 코드 모두 config : 리덕스 설정 관련 파일 전부 configStore : 중앙 state 관리소 modules : state의 그룹 import { createStore } from "redux"; impor..