728x90 리액트11 리액트 - 우클릭 메뉴 구현하기(context menu) https://blog.logrocket.com/creating-react-context-menu/ Creating a React context menu - LogRocket Blog Explore how to create a React context menu, the shortcuts to activate right-click menus, and how to create a custom context menu Hook. blog.logrocket.com // context menu const [clicked, setClicked] = useState(false); const [points, setPoints] = useState({ x: 0, y: 0 }); const [selectedTr, setSe.. 2023. 10. 13. 리액트 - 웹 소켓(ws) 통신 + useEffect에서 웹 소켓(ws) 사용 with useRef ws-server.js (웹 소켓 서버측) const WebSocketServer = require('ws').Server; const wss = new WebSocketServer({ port: 8080 }); wss.on('connection', function connection(ws) { ws.on('message', function message(data) { console.log('received: %s', data); }); ws.send('something'); }); index.js (리액트) import React, { useState ,useEffect, useRef} from 'react'; const [socketConnted, setSocketConnected] = useStat.. 2022. 11. 7. 리액트 - 음성 끝나고 나서 텍스트 새로 기록하기(react-speech-recognition) 원래처럼 transcript를 출력하면 여태껏 말했던 텍스트들을 그대로 가져오는 게 아니라, 말을 끝난 뒤에 다시 말을 하면 이전 텍스트를 지우고 다시 기록하는 방식 const [subtitle, setSubtitle] = useState(''); const { transcript, interimTranscript, resetTranscript, browserSupportsSpeechRecognition, finalTranscript, } = useSpeechRecognition(); useEffect( ()=>{ console.log('마이크 녹화 시작'); SpeechRecognition.startListening({continuous: true}); }, [] ); useEffect( ()=>{ i.. 2022. 11. 6. 리액트 - 음성을 텍스트로(react-speech-recognition) docs https://github.com/JamesBrill/react-speech-recognition/blob/master/docs/API.md GitHub - JamesBrill/react-speech-recognition: 💬Speech recognition for your React app 💬Speech recognition for your React app. Contribute to JamesBrill/react-speech-recognition development by creating an account on GitHub. github.com npm https://www.npmjs.com/package/react-speech-recognition#developing react-speech.. 2022. 11. 4. 백엔드 - Node.js(Express), React 웹 사이트 배포 사이트(Heroku) https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 2022. 10. 15. 리액트 - UI 프레임워크(MUI) https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. mui.com 2022. 10. 15. 리액트 - 토스트 팝업(React-Toastify) 모듈 https://fkhadra.github.io/react-toastify/introduction React-toastify | React-Toastify [](https://opencollective.com/react-toastify)  npx create-react-app [프로젝트 이름] * 프로젝트를 설치한 후 cd [프로젝트 이름]으로 디렉토리 이동 실행 명령어) npm start 참고: https://codingapple.com/unit/react1-install-create-react-app-npx/ 리액트 React 설치와 개발환경 셋팅 (2021 ver) - 코딩애플 온라인 강좌 0:00 Nodejs, VS Code 설치 3:34 작업폴더에서 npx create-react-app으로 리액트 프로젝트 생성하기 6:18 생성된 blog라는 폴더 에디터로 열고 코딩시작해야하는데 그 전 잡설명 8:29 내가 짠 코드 웹 미리보기 codingapple.com 2022. 1. 10. 날씨를 얼굴로 확인하는 웹 앱플리케이션 KaoWeather https://kaoweather.web.app/ Kaoweather: 날씨 알리미 kaoweather.web.app 얼굴(kao) 이모지를 통해 현재 날씨를 바로 확인하는 웹 앱플리케이션입니다. 리액트를 이용해서 만들었으며, 무료 날씨 API OpenWeather의 API를 사용했습니다. (https://openweathermap.org/api) 깃허브: https://github.com/Logic-01001010/KaoWeather GitHub - Logic-01001010/KaoWeather: 리액트 기반 이모티콘 날씨 알림 웹 애플리케이션 리액트 기반 이모티콘 날씨 알림 웹 애플리케이션. Contribute to Logic-01001010/KaoWeather development by creati.. 2021. 12. 4. 간단 웹 메모장 Netpad https://logic-01001010.github.io/netpad/ React App logic-01001010.github.io localStorage 방식으로 데이터를 저장하는 초 간단 메모장입니다. React.js로 만들어보았습니다. 깃허브: https://github.com/Logic-01001010/netpad GitHub - Logic-01001010/netpad: 리액트 간단 메모장 리액트 간단 메모장. Contribute to Logic-01001010/netpad development by creating an account on GitHub. github.com 2021. 12. 4. 이전 1 다음 728x90
HackLog
