본문 바로가기

React2

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.