본문 바로가기

Dev/reactJS18

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 뜻 해결 방법 /end value has mixed support, consider using flex-end instead / Node-sass incompatible with ^4.0.0 VSCODE업데이트 이후 갑자기 에러가 뜨기 시작했다. 하아...뭐야... 아 물론 내 소스는 아니다. 난 이미 해결을 했으므로... WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module .. 2022. 10. 20.
리액트 모달창 드래그 방법 react bootstrap modal draggable jquery에서 bootstrap 모달 창을 드래그하는 방법은 굉장히 직관적이고 쉽다. 반면에 리액트 부트스트랩 콤포넌트 라이브러리를 사용하면서 react bootstrap modal draggable 하기는 쉽지 않다. 아니, 쉽다. 쉬운데 레퍼런스가 부족하다. react bootstrap, react-draggable만을 사용해서 정통으로 리액트 부트스트랩의 모달을 드래그하는 것을 웬만하면 포기하고 antd, dragm 조합으로 넘어가는 사람들이 많은 듯하다. 구글에서 react Bootstrap modal draggable주제로 검색하면, 대부분 리액트 예제를 클래스형으로 설명해두고 있다. how to make react-bootstrap modal draggable I've tried making.. 2022. 9. 13.
리액트 api axios 엑셀 다운로드 버튼 구현 react.JS filesaver.saveAs javascript blob response.headers 값에서 filename추출하기 리액트 api 엑셀 다운로드 버튼 구현 filesaver.saveAs javascript blob response.headers 값에서 filename 추출하기 리액트를 제대로 시작한지 그리 오래되지 않은 관계로, php나 angular에서는 당연하게 되는 것들이 react에서는 제약이 많은 경우가 있다. 특히 파일다운로드를 구현하는데 좀 애를 먹긴 하는데, 그게 엑셀 다운로드라면 더... 일단 엑셀 파일은 백엔드에서 만들어준다 치고... api를 통해서 axios로 token을 통해서 인증도 있어야 한다. token axios는 별제로 다루도록 하고, 일단 axios instance를 만들어 둔 프로젝트에서 엑셀 다운로드를 구현하는 법은 filesaver컴포넌트를 사용하면 간단하다. 다만 멋들어지게 f.. 2022. 2. 4.
react-toastify new line 줄바꿈 리액트 토스트 라이브러리를 사용하다 보면, 토스트를 띄울 때 2줄을 써야 할 때가 있다. 한 줄이면 문제가 안되는데, 개행처리를 해서 이쁘게 보이고 싶을 때는 문제가 된다. 리액트는 개행처리가 까다롭다. \n을 사용하면 될 것 같지만, \\n이건, \n이건 이건 다 안 먹힌다. react-toastify가 toastMsg로 입력된 값을 자동으로 텍스트로 전환시켜버리기 때문이다. 그래서 리액트 토스트에서 멀티라인을 사용하려면 함수로 직접 쏴줘야 한다. 컴포넌트로 사용하기 때문에, 리덕스를 통해서 props를 넘기는데, 이번 프로젝트에서는 보통 이렇게 사용했다. dispatch( createToastNoti({ toastType: "SUCCESS", toastMsg: "회원가입이 저장되었습니다.이메일 인증을.. 2022. 1. 5.
리액트 데이트피커 포맷 api axios error문제 react datepicker date format axios not working 리액트에서는 jquery용 데이트 피커를 사용할 수 없다. 아니 사실 리액트용 데이트피커인 react datepicker가 훨씬 깔끔하게 사용되기 때문에 굳이 제이쿼리 데이트 피커를 붙여야 할 필요가 없다. 사실 아직 리액트가 초짜라 react datepicker를 온전히 다루지는 못하고 있기 때문에 정석으로 설정하는 방법은 사실 나도 잘 모르겠다. 일단, 신규 프로젝트에서 datepicker를 사용할 일이 있어서 설치했다. yarn add react-datepicker 혹은 npm i react-datepicker 로 설치 하면 되겠다. 그런데 문제는 이렇게 설치하고 import DatePicker from "react-datepicker"; 했을 경우 스타일 깨짐 문제가 발생했다. 이유는 모르겠지만 .. 2021. 5. 27.
ReactJS input, select disabled 제어. Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS input, select disabled 제어. index.js:1 Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? at input at td at tr at tbody at t.. 2021. 4. 14.
리액트 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. 리액트 프런트엔드 개발 중에 select를 사용할 때 jquery를 쓰던 습성대로 코딩을 하다 보면 반드시 만나게 되는 흔한 오류 중의 하나가 바로 selected를 사용하지 말라는 경고다. Warning: Use the `defaultValue` or `value` props on instead of setting `selected` on . 'selected'대신에 select에 defaultValue 또는 value props를 사용하라는 뜻이다. 잘못 쓴 리액트 셀렉트 사용법 선택안함 가맹 해지 ; 아래와 같이 쓰면 간단하다. 선택안함 가맹 해지 ref props는 필요에 따라 사용된 것이니 신경 쓰지 않아도 무방하다. 만약 select에서 멀티플 셀렉트로 선택할 경우에는 value를 배열로 주면.. 2021. 3. 26.
여러가지 리액트 멀티 레이아웃 connected-react-router multi layout 적용하기 리액트를 별로 좋아하지 않는 1인이다. 그런데 어쩔 수 없이 리액트 플젝을 해야 해서 퍼블리셔 겸 프런트 엔드로 참여 중이다. jquery라면 단박에 끝낼 문제에 고민하지 않아도 될 문제들이 리액트에는 넘쳐난다. 왜 쓰는지는 여전히 모르겠지만 까라니까 깐다. 일단 SPA 사이트에서 리액트가 편한 것은 대충 짐작은 된다. 그런데 SPA사이트라고는 해도, 한 사이트에 서로 다른 레이아웃이 여럿 사용해야 되는 경우가 많다. 단적으로 GNB, LNB가 없는 Intro페이지, Login페이지 그리고 사용자 화면과 다른 관리자 화면의 레이아웃은 서로 다를 수 있다. 아니 다를 수 있는 정도가 아니라 대체로 다르다. 그럴 때 리액트 여러 가지 레이아웃 적용하는 방법은 꽤 다양하지만 직관적이고 쉬운 리액트 멀티 레이아.. 2021. 3. 25.
React Js - Global CSS 설정 + styled reset. classNames/bind :global local css 동시 적용 react module.css :global local css 동시 적용하는 방법. classNames/bind를 사용하고 있을 때 className={cx("label","labelTst")} .labelTst는 app.module.css에 등록. React Js - Global CSS 설정 + styled reset css 초기화를 위해 styled-reset 설치 styled-components는 local로 동작하기 때문에 global 한 css를 만들기 위해 GlobalStyles.js 생성 설치 NPM설치 : npm install styled-reset styled-components 얀 살치: yarn add styled-reset styled-components 사용 Components/G.. 2021. 3. 10.

티스토리툴바