본 글은 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에 해당 코드를 입력하면 ..
JavaScript 웹 사이트 제작 시 필수적인 프로그래밍 언어 최근에 여러 툴들이 개발됨으로 핸드폰 어플리케이션도 해당 언어로 제작됩니다. React Native 등이 크로스 플랫폼으로 안드로이드, IOS 둘 다 개발되죠. 또한 Node.js 라는 플랫폼은 서버용 플랫폼으로, 자바 도상국인 한국에서 점점 자리를 잡으며 위상을 떨치고 있습니다. Java Spring VS Node.js 두 플랫폼은 각자만의 장단점이 존재하여 어떤 플랫폼이 더 좋다! 라고 말할 수는 없을 것입니다. 다만 최근 스타트업, 중소기업 등에서는 Node.js를 서버 언어로 많이 채용하고 있다는 것을 알면 취업을 준비하는 사람에겐 좋은 서버 언어로 자리매김할 수 있을 것으로 보입니다. JavaScript? Java? 자바스크립트는 ..
