[React] 텍스트 크립보드에 복사하기(react-copy-to-clipboard)
프로그래밍/React2024. 6. 18. 19:41[React] 텍스트 크립보드에 복사하기(react-copy-to-clipboard)

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 빌드 및 연동하기
개발공부/Linux2024. 5. 4. 18:24[Linux] nginx와 React 빌드 및 연동하기

노드 설치하기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의 차이점
프로그래밍/React2024. 4. 11. 09:00[React] .js vs .jsx의 차이점

JSX란 ?jsx는 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법입니다. 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는점입니다.주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능합니다 ! .js와 .jsx의 차이점리액트에서 .js보다 .jsx를 쓰는 이유는 자바스크립트 내에서 HTML을 사용할 수 있다는 점 이외에는 기능적으로 별다른 차이점이 존재하지 않습니다.리액트 공식 홈페이지에서 jsx 관련해서 자바스크립트 내에서 직관적으로 UI 관련 작업이 관련 작업이 가능하고, 개발에 도움을 주는 에러 및 경고 메시지를 표시할 수 있게 해준다고합니다 !js와 jsx는 큰 차이점이 없고 프로젝트 시 팀 내에서 js를 쓸 것인지, jsx를 쓸 것인지 협의를 하..

[React] npm start, Proxy관련 오류
Error2024. 3. 21. 19:55[React] npm start, Proxy관련 오류

오류여느날과 같이 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 설정은 어디에서 해야되는지 찾아봤다 ! 해..

image