'🧠 지식창고/기능' 카테고리의 글 목록 (9 Page)
본문 바로가기
728x90

🧠 지식창고/기능84

Modal 팝업창 만들기 - 패키지 설치 $ npm install react-modal $ yarn add react-modal - 기본 설정 // App.js import React from "react"; import Modal from "react-modal"; const ModalPage = (props) => { const [modal, setModal] = React.useState(true); // 모달창 const modalOff = () => { setModal(false); }; return ( ); }; export default ModalPage; - 실행 화면 - 출처 https://velog.io/@seungsang00/React-React-Modal [React] React Modal react-mod.. 2021. 12. 27.
녹음/녹음 파일 재생 + 서버에 녹음 파일 보내는 방법 import React, { useState, useCallback } from "react"; const AudioRecord = () => { const [stream, setStream] = useState(); const [media, setMedia] = useState(); const [onRec, setOnRec] = useState(true); const [source, setSource] = useState(); const [analyser, setAnalyser] = useState(); const [audioUrl, setAudioUrl] = useState(); const onRecAudio = () => { // 음원정보를 담은 노드를 생성하거나 음원을 실행또는 디코딩 시키는 일을.. 2021. 12. 27.
버블 차트 만들기 (라이브러리 X) 1. 처음 시도 : 실전 프로젝트에서 버블 차트를 만들어야 해서 찾아보다가 2시간이 넘어서도 자바스크립트로 된 코드를 응용해서 리액트에 접목 시키지 못해서 하드 코딩으로 한번 만들어 보는 건 어떨까 라는 생각이 들었고, 여러 블로그를 참고해서 만들어 봤다. 예쁜 버블 차트라고는 못하지만... 나름 열심히 만들어 보았다. import React from "react"; const Bubble = () => { const style = {area : [], gap : [], rgb : []}; const makeColor = () => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b =.. 2021. 12. 24.
리액트에서 워드 클라우드 만들기 import React from 'react'; import ReactWordcloud from 'react-wordcloud'; const words = [ { text: 'told', value: 64, }, { text: 'mistake', value: 400, }, { text: 'thought', value: 100, }, { text: 'bad', value: 30, }, ] const SimpleWordcloud = () => { return } export default SimpleWordcloud; 출처에 있는 코드를 리액트에서 함수형 컴포넌트로 응용하여 워드 클라우드를 만들었다. 이를 버블 형태로 만들어 볼 예정이다. https://www.npmjs.com/package/react-wo.. 2021. 12. 24.
Audio 기능 첫번째 시도 : public 폴더에 .mp3 파일을 넣었더니 "Uncaught (in promise) DOMException: The element has no supported sources." 오류가 발생했다. https://pythonq.com/so/javascript/678149 javascript - Chrome에서 Icecast 서버의 오디오가 재생되지 않음 - IT 툴 넷 javascript - Chrome에서 Icecast 서버의 오디오가 재생되지 않음 기사 출처 javascript html google-chrome jplayer icecast pythonq.com 두번째 시도 : 민영 튜터님이 src 폴더에 .mp3 파일만 담을 수 있는 폴더를 만들어서 넣고, import 해서 써야 한다.. 2021. 12. 22.
PWA create-react-app 및 PWA 템플릿을 사용하여 프로그래시브 웹 애플리케이션을 만드는 것으로 시작하겠습니다. PWA란? : Progressive Web Apps의 줄임말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 제품입니다. 설치할 필요는 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있습니다. 그것뿐만 아니라 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 얻을 수 있습니다. 더보기 더보기 https://perfectmoment.tistory.com/1632 PWA(Progressive Web Apps)란 무엇인가? 장점과 구현 사례 모바일 사이트의 개선을 고려할 때, 지금 .. 2021. 12. 21.
Timer 기능 import React, { useCallback, useEffect, useRef, useState } from "react"; // 사용자 정의 hook const useCounter = (initialValue, ms) => { const [count, setCount] = useState(initialValue); const intervalRef = useRef(null); const start = useCallback(() => { if (intervalRef.current != null) { return; } intervalRef.current = setInterval(() => { setCount(c => c + 1); }, ms); }, []); const stop = useCallback.. 2021. 12. 20.
Proxy Proxy란? : 유저가 인터넷에 요청을 보낼 때 직접 보내는 것이 아니라 Proxy 서버를 거쳐 최종 목적지에 전달하게 한다. 이때 Proxy 서버를 거치면서 유저의 IP를 바꿀 수 있다. 즉, 유저의 실제 IP와 포트를 알 수 없도록 하는 것이 Proxy 서버의 역할이다. React 프로젝트에서 Proxy로 CORS 해결하기 (Local) : CORS는 위에서 설명한 것처럼 처음 리소스를 요청한 주소와 다를 때 발생한다. 그렇다면 Proxy 서버를 거쳐서 처음 리소르를 요청한 주소와 동일하게 한다면 오류는 사라지지 않을까?? 터미널에 Proxy 미들웨어 패키지를 설치한다. npm install http-proxy-middleware 클라이언트와 서버에 포트를 같게 하기 위하여 위처럼 코드를 작성한다... 2021. 12. 15.
Prettier 세팅하기 Prettier란? Code Formatter로써, 개발자들에게 일관적인 코등 스타일을 유지 할 수 있게 도와주는 툴이다. Prettier 공식 문서 https://prettier.io/ Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io Prettier 세팅하는 방법 https://bigstar-vlog.tistory.com/65 Visual Studio Code Prettier 간편 설정 안녕하세요! 황대성입니다😀 이번 포스팅에서는 Visual Studio Code에서 Prettier 설정 방법을 다루려고 합니다. 글을 시작하기 이 전 Prettier가 무엇이고? 사용했을 때 장점을 말씀드리려고 합니다. Pret b.. 2021. 12. 13.
728x90

티스토리툴바