![[React] 텍스트 크립보드에 복사하기(react-copy-to-clipboard)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbL4kcE%2FbtsH6MEKd5e%2FAAAAAAAAAAAAAAAAAAAAAPnv_2hemK5hrfuhSQyY2M467YkdlWMHY_x6ngqkM9Oh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DNpUNtukNC0%252BsTz1kW0nnl4hh9QA%253D)
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%2Fdna%2FVWe7t%2FbtsH6PhbqHp%2FAAAAAAAAAAAAAAAAAAAAANoR7zS-EkoXJvSoOoqfx1XkLt3BNXMqXlQ5sM85HY8B%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Db7c9QR8vRwvjuIVDFFQcs6nXJ1A%253D)
노드 설치하기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%2Fdna%2FWlMCu%2FbtsH4W3noyc%2FAAAAAAAAAAAAAAAAAAAAAH3lGv6W5g8UMYP1S_9Y5st8VlcevBR7BZC91PgN2sgC%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DZJjLDxFycCPse3q3yOPzMWIWlQs%253D)
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%2Fdna%2FKgvli%2FbtsH43BrCNM%2FAAAAAAAAAAAAAAAAAAAAAL80Y3XOHnUmrC9twtK5RT6jWSorToHH0_E8UzO2vZYN%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Dus5mfYPjxRMBeRIaATWUKVmpHsA%253D)
오류여느날과 같이 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 설정은 어디에서 해야되는지 찾아봤다 ! 해..