'더 알아보기' 카테고리의 글 목록 (14 Page)
본문 바로가기
728x90

더 알아보기166

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.
[Error] npm install 설치 시 npm ERR! code ERESOLVE 오류 npm install react-wordcloud 를 설치해서 워드 클라우드가 되는 지 실험 해보려고 했는 데 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.13.0" from react-wordcloud@1.2.7 npm ERR! node_modules/react-wordcloud npm ERR! react-wordcloud@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry n.. 2021. 12. 24.
Grid, Chart, Olap, Input 등등 다양한 코드를 제공 해주는 사이트 http://demo.grapecity.co.kr/wijmo/learn-wijmo/ 데모 | GrapeCity 모든 컴포넌트 Wijmo의 interop 모듈에서 모든 컴포넌트를 시작하는 방법을 보여줍니다. Vue3 Zip 파일 다운로드 Vue3 demo.grapecity.co.kr 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.
Git Commit Convention 설정하기 메시지 구조 커밋 메세지는 크게 제목, 본문, 꼬리말 세가지 파트로 나눠지고, 각 파트는 빈줄을 두어서 구분합니다. 더보기 type(옵션): [#issueNumber - ]Subject // -> 제목 (한 줄을 띄워 분리합니다.) body(옵션) // -> 본문 (한 줄을 띄워 분리합니다.) footer(옵션) // -> 꼬리말 type : 어떤 의도로 커밋했는지를 type에 명시합니다. 자세한 사항은 아래서 설명하겠습니다. subject : 최대 50글자가 넘지 않도록 하고 마침표는 찍지 않습니다. 영문으로 표기하는 경우 동사(원형)를 가장 앞에 두고 첫 글자는 대문자로 표기합니다. body : 긴 설명이 필요한 경우에 작성합니다. 어떻게 했는지가 아니라, 무엇을 왜 했는지를 작성합니다. 최대 75자.. 2021. 12. 21.
PWA create-react-app 및 PWA 템플릿을 사용하여 프로그래시브 웹 애플리케이션을 만드는 것으로 시작하겠습니다. PWA란? : Progressive Web Apps의 줄임말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 제품입니다. 설치할 필요는 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있습니다. 그것뿐만 아니라 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 얻을 수 있습니다. 더보기 더보기 https://perfectmoment.tistory.com/1632 PWA(Progressive Web Apps)란 무엇인가? 장점과 구현 사례 모바일 사이트의 개선을 고려할 때, 지금 .. 2021. 12. 21.
728x90