Front/React4 [React] 리액트 현재 페이지 캡처 후 파일로 저장하기 * 프로젝트 진행 과정에서 배운 내용을 정리한 글입니다. 1. dom-to-image, FileSaver 라이브러리 이용 dom-to-image, FileSaver 라이브러리를 이용하여 컴포넌트를 이미지(png)로 저장하는 기능을 구현할 수 있다. 버튼을 클릭했을 때, 해당 화면의 웹페이지를 캡처하여 이미지로 저장하는 기능을 구현하기 위해 찾아본 방법이다. 1. 라이브러리설치 npm install dom-to-image npm install file-saver --save 2. 기능 구현 import domtoimage from "dom-to-image"; import { saveAs } from "file-saver"; export default function DetailDiary() { // 캡처할.. 2023. 1. 6. [React] 리액트 Axios multipart/form-data 와 json 객체 동시에 전송하기 * 프로젝트를 진행하며 정리한 글입니다. 프로젝트를 진행하며 프로필 수정/등록 폼을 구현하던 중 사진과 json 객체를 한번에 보내야 하는 업무가 생겼다. 구글링 후 해결한 방법을 공유하고자 한다. FormData는 Key, Value 로 이루어져있다. 백엔드 컨트롤러에는 @RequestPart로 인자를 설정하면 된다. 동일한 Key값을 지정해주고, Value에 Data를 넣는다. formdata를 생성하여 json 객체와 사진 파일을 담아서 이 formdata를 전송하면 된다. 이 때, json 객체는 Blob 객체에 담아서 보내면 된다. 1. json 객체 설정 및 FormData 생성 json 객체 생성 및 파싱 Blob 객체 생성 // 1. FormData 생성 let formData = new .. 2022. 11. 29. [React] #2. 🍎React 리액트 기초부터 쇼핑몰 프로젝트까지 Part.1 * 코딩애플 React 강의를 듣고 정리한 글입니다. - Component 1) fragment 문법 return () 안에는 루트 태그가 1개만 존재해야 한다. 가장 상위에 감싸고 있는 (의미 없는) 태그를 로 바꿀 수 있다. return( ) 2) component function을 사용하여 컴포넌트를 만들 수 있다. ⭐규칙⭐ 1. 컴포넌트의 이름은 대문자로 시작 2. 또는 으로 컴포넌트 사용 3. function App(){} 외부에서 생성. (App도 하나의 컴포넌트. 컴포넌트 안에 컴포넌트를 만들지 않는다.) function App (){ return ( ) } function Modal(){ return ( 제목 날짜 상세내용 ) } // arrow 펑션 가능 let Modal = () =>.. 2022. 8. 30. [React] #1. 🍎React 리액트 기초부터 쇼핑몰 프로젝트까지 Part.1 * 코딩애플 React 강의를 듣고 정리한 글입니다. 1. React를 사용하는 이유 SPA를 만들 때, 사용한다. html 재사용 편리 html을 함수, array, object에 보관 및 재사용 가능 같은 문법으로 앱개발 가능(React Native) 2. 개발환경 셋팅 Node.js 설치 작업 폴더에 shift + 우클릭 → PowerShell 열기 (window) 손가락 두개 클릭 → 터미널열기 (Mac) 프로젝트 생성 npx create-react-app “프로젝트명” src 폴더 안에 있는 App.js 가 메인페이지 브라우저 열어서 미리 보기 npm start 3. 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 - JSX : js 안에서 html 대신 쓰는 것 1) class 넣을 땐 “.. 2022. 8. 30. 이전 1 다음