react4 React+Webpack Boilerplate에서 SVG를 사용하기 React Boilerplate를 제작하고, svg를 사용하는 과정에서 1. 모듈을 찾을 수 없습니다. - Cannot find module 2. SVG Component의 width,height을 css로 설정해 주었더니 컴포넌트가 화면상에 보이지 않습니다. 와 같은 에러를 발견했을 때 문제를 해결하는 경험에 대해서 이야기한다. 사실 Create React App 을 사용했을 때 이런 문제를 겪어본 적은 없다. CRA에서는 import {ReactComponent as Icon} from "../icons"와 같은 형태로 svg를 컴포넌트 형태로 사용할 수 있다. 하지만, Webpack 설정을 통해 SVG를 사용할 수 있도록 설정하게 되면 webpack config file을 설정해야만 하고, 이 과정.. 2020. 6. 29. React Application을 Heroku에 Deploy하며 겪은 오류(Error H10) 헤로쿠(Heroku)는 다양한 프로그래밍 언어를 지원하는 PaaS(Platform as a Service)이다. 2007년 처음 개발되었을 때는 루비 언어만 지원했지만 현재는 Java, Node, Scala, Python, Go 등의 다양한 언어를 지원하고 있다. 헤로쿠는 어플리케이션 배포를 무료로 진행할 수 있고, 빠르게 배포를 진행할 수 있다는 점에서 MVP테스트, 발표용, 포트폴리오용 등의 간단한 작업을 진행할 때 있어 유용하게 사용할 수 있다. 해당 블로그에서는 React와 Server를 동시에 올리는 것이 아닌, React Application만 배포하는 방법과 경험에 대해 다루기 때문에 참고 바란다. 또한, Heroku Blog에서는 Deploying React with Zero Configu.. 2020. 5. 15. React & Styled-Component - 재사용성 높히는 방법 고찰 코드만 보고 싶다면? 가장 아래에 있는 코드샌드박스 확인하기 한 화면에 세로로 나열되는 버튼의 개수에 따라, 버튼의 사이즈를 조절해 보고 싶었다. SASS를 사용할 때를 기억하여 "how to use variables in styled components?" 로 검색해 보았으나 최신 자료가 잘 안 나와서, 공식 문서를 참고하여 props를 이용해서 구현해 보았다. 버튼이 두개일 때는 height: 60px를, 버튼이 네개일 때는 height: 40px를 주고 싶다. 현재 이 프로젝트에서는 React, Styled Components를 사용하고 있다. 1.재사용 할 법한 css 속성들을 js 파일로 분리한다. 여기까지는 쉽다. 그냥 객체를 export 하는 코드이다. variable.js const var.. 2019. 12. 22. Axios Response header의 값이 없는 경우에 대해 어떤 상황의 어디에 영향을 미치는 문제인가요? - WHO AND WHAT React에서 axios 라이브러리를 사용했다. POST의 Response를 받기 위해 다음과 같은 코드를 사용했다. API 서버에서 Header에 standard header가 아닌 우리가 정의한 information을 추가로 정의해서 보낸다. "Authorization" 필드를 추가해서 보내는데, 분명히 postman에서는 잘 표시되고 있고, 크롬 개발자 도구의 네트워크 탭에서도 헤더 값의 필드를 확인할 수 있는데 React 클라이언트에서는 안 보였다. 클라이언트는 baseURL 등 공통적으로 정의한 세팅을 편하게 하기 위함이다. client.js import axios from 'axios'; const client = axi.. 2019. 11. 12. 이전 1 다음
