๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • Tried. Failed. Logged.
728x90

๐Ÿ–ฅ๏ธํ”„๋ก ํŠธ์—”๋“œ/React.js8

๋ฆฌ์•กํŠธ - ์šฐํด๋ฆญ ๋ฉ”๋‰ด ๊ตฌํ˜„ํ•˜๊ธฐ(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.
๋ฆฌ์•กํŠธ - 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 [![Financial Contributors on Open Collective](https://opencollective.com/react-toastify/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-toastify) ![Travis (.org)](https://img.shields.io/travis/fkhadra/react-toastify.svg?label= fkhadra.github.io 2022. 10. 15.
๋ฆฌ์•กํŠธ - ํ”„๋กœ์ ํŠธ 21 - 3์ฃผ ๋™์•ˆ์˜ ์ฑŒ๋ฆฐ์ง€ https://pr0ject21.web.app/ 21: Challenge 3 weeks pr0ject21.web.app ๊นƒํ—ˆ๋ธŒ: https://github.com/Logic-01001010/21 GitHub - Logic-01001010/21: ํ”„๋กœ์ ํŠธ 21 - 3์ฃผ ๋™์•ˆ์˜ ์ฑŒ๋ฆฐ์ง€ ํ”„๋กœ์ ํŠธ 21 - 3์ฃผ ๋™์•ˆ์˜ ์ฑŒ๋ฆฐ์ง€. Contribute to Logic-01001010/21 development by creating an account on GitHub. github.com 2022. 2. 19.
๋ฆฌ์•กํŠธ - ์„ค์น˜ ์„ค์น˜ ๋ช…๋ น์–ด) 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.
728x90

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”