![[React] 텍스트 크립보드에 복사하기(react-copy-to-clipboard)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbL4kcE%2FbtsH6MEKd5e%2FKk1w06YTlt3EkqrrTaHmyK%2Fimg.png)
react-copy-to-clipboard 사용하기아래와 같이 react-copy-to-clipboard 라이브러리를 설치합니다 !npm install --save react-copy-to-clipboard CopyToClipboard 컴포넌트를 이용해 작성해줍니다 !import {CopyToClipboard} from "react-copy-to-clipboard/src"; alert("클립보드에 복사되었습니다.")}> {wallet}CopyToClipboard를 import한 뒤 CopyToClipboard 컴포넌트의 'text'에 복사할 텍스트를 입력하면 클릭 시 자동으로 클립보드에 복사됩니다 !
![[Linux] nginx와 React 빌드 및 연동하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVWe7t%2FbtsH6PhbqHp%2FgMyngo8r6pIp17LkEaomZk%2Fimg.png)
노드 설치하기React.js를 작동시키리면 런타임인 node가 필수로 있어야됩니다 ! 아래 명령어를 통해 node를 먼저 다운받겠습니다 !// apt 최신화 작업하기$ sudo apt-get update$ sudo apt-get upgrade// node 설치하기$ sudo apt install nodejs// node 버전확인하기$ node -vnode를 정상적으로 설치했을 경우 npm도 포함되어있다 npm을 별도로 설치하지 않으셔도 됩니다 ! React 빌드하기Ubuntu 환경에서 React를 실행시키기 위해서는 빌드된 파일이 있어야합니다 ! 배포를 하기 위해 먼저 local의 프로젝트를 root 폴더에서 아래 명령어를 통해 빌드해줍니다.$ npm run build진행하였을 경우 root폴더에 bui..
![[React] .js vs .jsx의 차이점](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWlMCu%2FbtsH4W3noyc%2Feua51D9FHERrIPXBrvHyX0%2Fimg.png)
JSX란 ?jsx는 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법입니다. 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는점입니다.주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능합니다 ! .js와 .jsx의 차이점리액트에서 .js보다 .jsx를 쓰는 이유는 자바스크립트 내에서 HTML을 사용할 수 있다는 점 이외에는 기능적으로 별다른 차이점이 존재하지 않습니다.리액트 공식 홈페이지에서 jsx 관련해서 자바스크립트 내에서 직관적으로 UI 관련 작업이 관련 작업이 가능하고, 개발에 도움을 주는 에러 및 경고 메시지를 표시할 수 있게 해준다고합니다 !js와 jsx는 큰 차이점이 없고 프로젝트 시 팀 내에서 js를 쓸 것인지, jsx를 쓸 것인지 협의를 하..
![[React] npm start, Proxy관련 오류](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKgvli%2FbtsH43BrCNM%2FikT2K5RtNF7NF3kgonstI0%2Fimg.png)
오류여느날과 같이 npm start를 입력하는 중....갑자기 아래와 같은 에러가 발생했습니다.....Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.options.allowedHosts[0] should be a non-empty string검색해보니 등록해놓은 Proxy 설정에 문제가 있다는 것을 알게되었습니다 !packge.js에 "proxy" : "http://localhost:8889"를 지우면 다시 작동된다는 것을 알게되었고, 삭제한 이후 다시 실행했더니 정상적으로 작동하였습니다 !그럼 Proxy 설정은 어디에서 해야되는지 찾아봤다 ! 해..