개발64 [Javascript] 웹 화면 캡쳐하기 (Javascript, Html2Canvas) 웹 화면 캡처하기 (Javascript, Html2Canvas) HTML의 특정 태그(div, canvas) 영역의 차트를 이미지로 다운로드하는 요구사항이 있어서, 그 방법을 찾고 정리해보려 한다. 방법은 두 가지가 있다. 1. javascript 코드로 이미지 다운 받기 2. html2canvas 라이브러리를 이용해 특정 영역 이미지로 다운받기 현재 내가 개발중인 프로젝트는 toast-ui chart와 chart.js 라이브러리를 사용하는데 chart.js 는 canvas 위에 그리고 toast-ui chart는 이전버전을 사용하고 있어서 div 태그 영역을 캡쳐 해야하는 상황이 생겼다. 그래서 두 가지 방법 모두 사용하였다. 첫 번째 방법 자바스크립트와 a태그를 이용한 다운로드 방법이다. 예시 ima.. 2022. 12. 28. 15:25 [Next.js] Vercel로 배포한 환경에 .env 환경 변수 등록하기 React + Next.js 기반의 프로젝트를 Vercel로 배포하려 하는데 개발 환경에서는. env가 잘 동작하지만 배포 시에는 Vercel이 이를 알지 못하고 github의. env파일도 읽지 못하기 때문에 따로 환경 변수의 Key와 값을 설정해 주어야 한다. - .env : 특정 API의 키 값 및 환경을 설정할 세팅값을 KEY와 VALUE로 저장하게 되는 파일이다. 기본 React를 사용할 때 env의 key값을 설정할 때는 "REACT_APP_ " 이라는 네이밍 규칙이 존재하고 Next.js 환경일 때는 "NEXT_PUBLIC_" 이라는 네이밍 규칙이 존재한다. 등록 방법 현재 배포되어있는 Vercel의 프로젝트로 들어간다. 그 다음 Settings를 클릭한다. 아래로 조금 내리다보면 왼쪽에 E.. 2022. 12. 22. 15:00 객체 지향 프로그래밍(OOP) 객체 지향 프로그래밍에 대해 정리해보려한다. 학원이나 객체 지향 프로그래밍에 대해 접할때는 이론적으로 추상화, 캡슐화, 다형성, 상속등의 특징들을 가지고 공부를 하였다. 이러한 특징들은 머리속에 둥글게 존재하고 있지만, 막 나에게 와닿지는 않았다. 그래서 다시 정리해 보려한다. 객체 지향 프로그래밍(Object-Oriented Programming) 객체 지향 프로그래밍은 현실 세계에 존재하는 모든 사물이나 객체(Object)를 코드로 표현하기 위해 객체의 기능이나 개념을 추출해 추상화하여 모델링하는 프로그래밍을 말한다. 우리가 현실 세계에서 보는 사물들을 인지하는 방식을 프로그래밍에 접목하려는 사상을 의미한다. 예를 들면 주변에 존재하는 사물 자동차, 옷, 건물 등 모든 것을 객체라고 할 수 있다. 이.. 2022. 12. 15. 00:37 [React] React 반응형 레이아웃 사용하기 + Typescript React에서 미디어쿼리나 화면 사이즈에서 대해 바뀌는 화면을 구현하기 위해 react-responsive 라이브러리를 사용했다. https://www.npmjs.com/package/react-responsive react-responsive Media queries in react for responsive design. Latest version: 9.0.2, last published: 10 days ago. Start using react-responsive in your project by running `npm i react-responsive`. There are 1036 other projects in the npm registry using react-responsive. www.npm.. 2022. 12. 9. 16:57 React-activate 사용 중 'decorators-legacy' 오류 문제 상황 개발 도중 캐시를 구현하기 위해 React-activate 라이브러리를 사용하던 도중 @withActivation 어노테이션을 추가하니 Support for the experimental syntax 'decorators-legacy' isn't currently enabled (33:1): 와 같은 에러가 발생하였다. 해결 방법 해결 한 방법은 다음과 같다. 1. package-json의 babel ["@babel/plugin-proposal-decorators", { "legacy": true }] 을 추가해준다. "babel": { "presets": [ "react-app" ], "plugins": [ "react-hot-loader/babel", ["@babel/plugin-propo.. 2022. 12. 8. 14:58 [Next.js] CORS 오류 해결방법, Next proxy 설정 Next를 사용하여 외부 Open API를 연동하려 하였더니 CORS 오류가 났다. CRA 환경에선 package.json 에서 proxy 설정만 하면 해결되었던 문제였는데 Next 환경에서는 어떻게 해결해야하는 지 몰랐다. 그래서 찾아보고 오류를 해결해 본 방법들을 기록해보려 한다. 오류 내용 Access to XMLHttpRequest at [OPEN API URL] from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 2022.10.08 - [개발/네트워크] - [NetWork] CORS(Cr.. 2022. 11. 30. 17:30 이전 1 2 3 4 5 6 ··· 11 다음 728x90
