본 글은 TIL(Today I Learned) 로 공부 내역에 대한 포스팅입니다. 상황서버로부터 Binary Data를 받아야 하는 상황에서 React 프론트 엔드는 이에 대한 처리 방식에 대한 정리 아래는 예시 백엔드 소스 코드이다.# Flask 서버로 예시를 들자면 아래와 같은 상황이다.import io@app.route('/GetDataFromServer', methods=['GET'])def GetDataFromServer(): return Response(io.BytesIO()) 그에 대한 리액트 프론트 엔드 서버 소스 코드이다.setLoading(true); // 로딩을 실행한다.axios.get('/GetDataFromServer', {responseType: 'blob'}).then(..
안녕하세요 펭귄 교수입니다. 이번 시간에는 React 에서 Clipboard API 사용하는 것에 대하여 이야기해보려고 합니다.Clipboard API는 React 기술이 아닌 자바스크립트 기술이기 때문에 리액트 뿐만 아니라 바닐라 웹, 자바스크립트를 사용하는 다른 프레임워크에서도 사용이 가능합니다.Copynavigator.clipboard.writeText("Copy Data"); Pastenavigator.clipboard.readText().then( (clipText) => ( document.querySelector(".editor").innerText += clipText )) React에 적용간단하게 두 개의 버튼 (Copy, Paste) 가 있고, 두 개의 Te..
안녕하세요 펭귄 교수입니다. React 프로젝트 진행 중 메모 할 것이 생겨 포스팅합니다.React State리액트에서 데이터 관리 방식에는 여러 가지가 있습니다.컴포넌트 출력에 필요한 데이터들은 대개 State 혹은 Redux 등의 방식으로 관리됩니다. 그 중 State와 HTML Tag 인 Select의 Binding 방식에 관해 작성해보고자 합니다. // 기본적인 State 사용법import React, { useState } from 'react';const App = () => { const [data, setData] = useState(""); return ( { setData(e.target.value); }} /> {da..
안녕하세요 펭귄 교수입니다. 이번에 알아 볼 것은 React 프레임 워크에서 Title, Favicon을 설정하는 법에 대해 알아보겠습니다. 이번 글은 Favicon을 만드는 법에 대해서는 따로 설명하지 않습니다. 1. Title 설정React에서 Title을 설정하는 방법은 여러 가지가 있습니다.이에 대해서 3가지 방법을 소개하고자 합니다. 1-1. index.html 하드 코딩 변경리액트 프로젝트 내 public/index.html 파일을 하드 코딩으로 변경하는 것입니다. 1-2. 리액트 src 파일에서 innerHTML() 함수 사용이는 리액트 훅인 useEffect를 사용해 HTML DOM에 접근하여 변경하는 방법입니다. 각 Component에 해당 코드를 입력하면 ..
