본문 바로가기

Web29

[React] 페이지 이동하기 기록용..! router에서 페이지 이동하는 방법 App.js 에서 Route를 Switch로 묶어준다. history를 props로 넣어주고 history.push를 사용해준다. =>history.push([가고자하는 주소 넣어주기]) 2021. 10. 19.
리액트 음성인식 사용해보기 https://www.npmjs.com/package/react-speech-recognition react-speech-recognition 💬Speech recognition for your React app www.npmjs.com 사용한 api는 react-speech-recongition 아래의 명령어를 통해 프로젝트에 설치해준다. npm install --save react-speech-recognition 사이트 밑에 보시면 기본적인 코드가 제공되어 있습니다. 더보기 import React from 'react'; import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'; const Dictaphone.. 2021. 8. 12.
[React] 카카오 로그인 연결해보기 - 2 이렇게 넘어오는게 토큰인줄 알았는데,,, 얘네는 인가 코드였다,,,! 내가 하고싶었던 거는 토큰 받아서? 사용자 정보를 console에 띄우고 싶었는데 뒤지도록 안되더라 한 10시간 동안 한거 같다. 그래서 결국 다른 분 블로그 보고 해결해따. https://velog.io/@sayi/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EB%B3%B4-%EC%88%98%EC%A7%91 [React] 카카오 로그인(로그인, 사용자 정보 가져오기) App.js velog.io 감사합니당 감사합니당 아래는 전체코드,,, const log.. 2021. 8. 6.
[React] 리액트에서 아이콘 써보기 (React Icons) https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 먼저 React Icons를 설치하여 줍니다. npm install react-icons --save yarn ad.. 2021. 7. 26.
[React] 리엑트에서 부트스트랩 사용하기 먼저 react-bootstrap을 설치해주어야한다. npm install react-bootstrap@next bootstrap@5.0.2 yarn add react-bootstrap@next bootstrap@5.0.2 npm 혹은 yarn으로 설치하면 됩니다. 설치 후 사용하고자 하는 Components를 찾아서 import 해주어야합니다. 사용하고자 하는 Components를 검색한 후 아래에 있는 예시코드를 테스트로 하나 복사해옵니다. 사용하고자 할 떄는 위에 import를 시켜주어야하는데 사용하고자 하는 컴포넌트를 치면 뒤에 자동완성으로 완성시킬 수 있습니다. 2021. 7. 26.
[React] 카카오 로그인 연결해보기-1 먼저 시작하기 전에 여러 블로그를 참고해보았으나 여러 블로그 글을 이해하지도 못한 채 복붙하니까 왜 안되는지도 모르고 이상하게 떠서 developers 참고하여 처음부터 찬찬히 따라해보았습니다. 일단 카카오 로그인을 사용하기 위해 index.html에 사전작업을 해주어야합니다. 이렇게 script를 두개 추가해주어야합니다. 저는 로그인 화면에서 KakaoLogin.jsx 컴포넌트를 만들어서 해보았습니다. 이 페이지를 참고하여 카카오 로그인을 한번 테스트 해보았습니다. https://developers.kakao.com/tool/demo/login/login Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 A.. 2021. 7. 23.
리액트에서 아이콘 쓰기 먼저 npm 혹은 yarn으로 설치를 해주어야 합니다. yarn add react-icons npm install react-icons --save 위의 명령어를 사용하여 설치를 해준 후 사용하고자하는 icon을 추가해주어야합니다. https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern .. 2021. 7. 18.
Vue 에서 FontAwesome 사용하기(npm 설치) https://www.npmjs.com/package/@fortawesome/vue-fontawesome @fortawesome/vue-fontawesome Official Vue component for Font Awesome 5 www.npmjs.com 참고한 사이트 1. FontAwsome 설치 vscode 하위 터미널에서 아래의 명령어를 사용하여 설치를 진행해준다. $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons 나는 2.x 버전의 Vue를 사용하여 아래의 명령어를 사용하여 추가로 설치를 진행해 주었다. $ npm i --save @fortawesome/vue-fontaw.. 2021. 5. 21.
Vue filter Vue filter filter를 이용하여 표현식에 새로운 결과 형식을 적용한다. 중괄호 보간법 또는 v-bind 속성에서 사용이 가능하다. {{ msg | count2('문자를 넣어보세요') }} 값이 바뀔 때 마다 val.length 값이 갱신되는 것을 확인할 수 있다. 2021. 5. 16.

티스토리툴바