REACT 21

[React.js] html2canvas cors 에러

html2canvas cors html2canvas라이브러리는 쉽게말해서 div를 이미지로 변환해주는 라이브러리다. 변환 방향은 (1)div-> (2)canvas-> canvas.dataUrl->image cors 에러 원인 : div에서 canvas로 변환하는 과정에서 canvas는 로컬이미지가 아닌 다른 도메인의 이미지가 있을 경우 이를 오염된 캔버스로 판정하여 cors 오류를 만들어냈다. 그리하여 변환된 결과물에서도 div는 잘 보이지만, 이미지만 안보이게 되는 이슈가 있었다. 해결 : 코드는 s3를 aws의 cloudFront를 통해 가져오고 있었다. 이곳에서 가져올때 cors오류를 없애기 위해서는 응답헤더에 Access-control-header를 받아와야만 가능했다. cloudFront의 동작..

REACT 2022.03.24

Error#2 RTK-updateQueryData 삭제 안됨

RTK updateQueryData를 이용해 state를 미리 삭제한 값으로 업데이트할 때 삭제가 안되는 점 이유 : 삭제된 값을 넣을때 filter을 사용하여 수정하면 안되고, splice를 통해 넣어주니 됐다. dispatch( api.util.updateQueryData("list",{deleteId},draft)=>{ //안됨 (ㅌ) draft = draft.filter(obj=> obj.id!=== deleteId); //됨 const index = draft.findIndex((obj)=>obj.id===deleteId); draft.splice(index,1); })

REACT 2022.03.24

AWS- appspec.yml root

우리 서비스는 Code pipeline을 통해 배포를 한다 pipeline의 단계는 총 소스-빌드-배포 3가지 구성으로 되어있다. 소스트리는 깃허브와 연결하여 커밋할시에 바로 변경 릴리즈를 감지하여 소스로 간다음 그다음 빌드로 넘어가게 된다. 이때 우린 build중에 환경을 구축하기 위해 프로젝트에 buildspec.yml 파일을 작성해야한다. version: 0.2 phases: install: runtime-versions: java: openjdk8 build: commands: - echo [PHASE] Entered the build phase... - gradle bootjar post_build: commands: - echo [PHASE] Entered the post_build phase..

REACT 2020.09.24

gapi oauth2 - google Calendar

GAPI is Google's client library for browser-side JavaScript. It's used in Google Sign-in, Google Drive, and thousands of internal and external web pages for easily connecting with Google APIs. gapi 란 브라우저 쪽 자바스크립트를 위한 구글에서 제공해주는 클라이언트 라이브러리다. gapi는 구글 로그인, 드라이브 등 api를 쉽게 연결할 수 있도록 도와준다. 나는 리액트를 이용하여 gapi Google Calendar와 FullCalendar을 연동 시켰다. 1. index.html index.html에 gapi를 로드하기 위해 를 넣어준다. 이 외의 ..

REACT 2020.09.15

React / 환경변수 설정 DefinePlugin

React에서 개발환경에 따라 API를 다르게 호출할 수 있는 경우가 있다 예로들면 local : axios.get("http://gateway:9010/test/api") dev : axios.get("http://devway:9010/test/api") prd : axios.get("http://prdway:9010/test/api") Webpack by default does not provide any process to load ‘.env’ files. but there many plugins and libraries that can do the same task. 출처 : https://medium.com/@bhautikbharadava/environment-variables-webpack-c..

REACT 2020.08.11

[리액트,React] Props 부모-자식 전달

구조는 Template - 자식1 - 자식2 설계 되어있다. 1. 먼저 최하위 자식인 MyModal에서 onDeleteLeave 함수를 실행할 경우 props로 넘어온 handleSubmit에다가 startDate값과 cnt를 넘겨준다. 2. 그럴경우 부모의 바로 밑인 하위자식이 CalendarForm은 handleSubmit으로 받아온 값을 this.props.handleApplyTemps로 값을 넘겨준다. 3. 그러면 상위부모인 Template은 CalendarForm의 handleApplyTemps 값을 가진 handleSubmit의 값을 받아온다. function MyModal(props) { const onDeleteLeave = param => { props.handleSubmit(startD..

REACT 2020.08.10

React // Object.map is not a function

React에서 .map 을 써서 데이터를 뿌려줄 경우 생각보다 나한테 .map is not a function 에러가 번번히 떴다. 원인은 .map()은 배열에만 가능하단 것이다. 그리하여 주로 map에서 원치 않는 포맷들로 이뤄진 데이터를 뿌려주려 할때 생기는 에러다. 예로들면 중괄호, 대괄호도 에러의 원인이 될 수도 있다. 아니면 state나 props의 형태가 Object가 아닌걸로 되어있을 수도 있다. 일단, 이 에러를 숨기는 방법 -> 이 방법은 에러를 완전히 해결한다고 볼 수 없다. 1. JSX안에는 중괄효를 이용해서 표현식을 이용할 수 있다. {tmId.map((tm,index) => { return( {index+1} {tm.hmName} {tm.leaveCategory} {tm.stDat..

REACT 2020.08.10
728x90
반응형