[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'에 복사할 텍스트를 입력하면 클릭 시 자동으로 클립보드에 복사됩니다 !

[React] Axios instance와 interceptors
프로그래밍/React2024. 5. 2. 13:03[React] Axios instance와 interceptors

Axios란 ?axios는 서버와 통신하기 위한 HTTP 비동기 통신 라이브러리 입니다 ! 보통 처음 접하는 axios 요청은 아래와 같이 작성할 것입니다.// get 요청axios.get('/test')// post 요청axios.post('/test', { testString : 'test'}) Axios instance기본 axios에서 더 나아가 instance를 설정해줄 수 있습니다.axios instance를 이용하여 API 통신에 대한 구성 기본 값 설정을 더 쉽게 할 수 있습니다 !export const axiosInstance = axios.create({ baseURL: process.env.REACT_APP_URL_JAVA, headers: {'Content-Type' : '..

[ELK] logstash와 mysql 다중 테이블 가져오기
프로그래밍/React2024. 4. 25. 13:15[ELK] logstash와 mysql 다중 테이블 가져오기

logstash를 통해 mysql에 있는 데이터를 elasticsearch로 불러오는 방법은 여기에서 보실 수 있습니다 !다중 테이블 가져오기이전 포스팅에서 logstash.conf 파일 input에 JDBC를 통해 Mysql에서 데이터를 가져올 수 있도록 코드를 작성해봤는데요.쿼리를 통해 조회된 데이터를 output에 등록해 놓은 index로 데이터를 전달해줄 수 있도록 하였습니다.그런데 ! 과연 쿼리를 1개만 작성할 수 있는지 궁금해서 multi pipeline 관련된 내용을 찾아봤습니다.conf 파일을 따로 생성하여 알맞은 port에 접속했을 때 특정 conf 파일이 실행되는 형태였습니다.하지만 저는 그냥 단순히 쿼리를 하나 더 써서 다른 index에 값을 가져오고 싶던 찰나 아래와 같은 방법을 찾..

[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를 쓸 것인지 협의를 하..

image