윤민상 블로그

svg를 string으로 불러오기 ~~.d.ts에 아래와 같이 string으로 불러오고 이미지 태그안에 src로 넣으면 svg를 사용할 수 있다. declare module '*.svg' { const value: string; export = value; // } 그런데 svg태그 자체가 필요한 경우가 있다. 예를 들어 fill을 한다던가... 그럴때는 조금 설정이 필요하다. svg 자체 태그를 불러오기 먼저 웹팩 간단한 웹팩 설정이 필요하다. yarn add -D @svgr/webpack { test: /\.svg$/, use: ['@svgr/webpack'], }, 그리고 d.ts를 아래와 같이 변경해야 한다. ~~.d.ts declare module '*.svg'; 마지막으로 불러올 때 다음과 같..

보통 react에서 서버에 axios로 요청을 한다. 그때 react와 서버에 각각 작업을 해줘야 한다. 이 글은 같은 컴퓨터의 다른포트로 사용하는 법을 적었다. 먼저 react에서 서버에 연결하기 위해서는(CRA사용 기준) package.json에 "proxy": "http://localhost:3001", 이렇게만 입력해주면 된다. proxy에 대해서는 다른 글에서 올리겠다. express에는 const corsOptions = { origin: "http://localhost:3000", }; app.use(cors(corsOptions)); 이렇게만 입력하면 된다.

이 글은 리액트와 리덕스를 모르면 이해하기 힘듭니다. 리덕스를 모른다면 아래글을 읽고 와주세요 https://ms3864.tistory.com/60 리덕스(redux) 사용법1 먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다. (이고잉님의 강의를 참고하였습니다.) https://redux.js.org/ Redux - A predictable state container for J.. ms3864.tistory.com 기본 틀을 먼저 설명하겠습니다. react와 redux모두 state를 가지고 있습니다. 그래서 헷갈리면 안됩니다. react는 하위컴포넌트로 state를 props로 넘겨서 상태관리를 하는데 redux는 store에서 모든 state를 관..

먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다. (이고잉님의 강의를 참고하였습니다.) https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Get Started를 누르면 시작하는 법이 나와있습니다. 오늘은 간단히 html로 할것이기 때문에 npm install은 사용하지 않고 위에 코드만 붙여넣기 하시면 됩니다. 그리고 redux devtools를 검색하셔서 깔면(chrome에서만) 시간여행이나 변화된 상태를 보는 것을 할수 있습니다...

redux는 react와 독립적인 라이브러리입니다. redux는 상태관리 라이브러리인데 react와 함께 쓰이기도 합니다. 리액트에서 리덕스를 쓰는 이유는 간단합니다. 리액트에서는 하위컴포넌트로 props를 전달할 수 있는데 이게 A부모에서 E부모까지 전달할려면 일일히 중간과정을 거쳐야합니다. 이를 막기 위해서 리덕스를 사용하는 것입니다. 리덕스는 상태를 관리해서 바로 E로 보낼수있습니다. 아래는 이고잉님의 생활코딩 강좌중 나온 그림입니다. 이를 토대로 다음글에 리덕스 사용법을 설명하겠습니다.