뚝딱뚝딱 코딩 기록_

[React_ Error Boundary] 리액트에서 예외 발생 시 예외 페이지를 보여주는 방법에 대해 알아보자 리액트로 예외 페이지를 생성하는 두 가지 방법을 알아보자. ⚠ 리액트 Lifecycle method를 이용하여 구현하기 - errorBoundary.jsx class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { logErrorToMyService(err..

[React_ react-toastify] react-toastify 사용법에 대해 알아보자 웹사이트를 개발하다 보면 잠깐 경고창이 생겼다가 사라지는 toast를 띄우야 하는 경우가 있다. 직접 구현하는 방법으로는 setTimeout와 state를 사용하여 직접 커스텀하는 방법이 있다. 이번 포스팅에서는 react-toastfy 라는 라이브러리를 사용하는 방법에 대해 알아볼 것이다. 1. 라이브러리 설치 npm install react-toastify 2. 코드 삽입 import { toast, ToastContainer } from 'react-toastify'; export default function App() { const success = () => toast.success('성공!'); re..

[React_ react-pdf] 리액트로 PDF 프리뷰어 만드는 방법에 대해 알아보자 1. react-pdf 설치 npm install react-pdf 2. 필요한 컴포넌트 임포트 + pdf.worker.js 활성화 import { Document, Page, pdfjs } from 'react-pdf'; // pdf.worker.js 활성화 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; 📜 pdf.worker.js를 활성화하지 않으면 pdf 파일이 보이지 않으니 유의해 주세요! 3. 코드 추가 import React from 'react'; imp..

[React+Vite_proxy] React + Vite 에서 proxy 설정하는 방법에 대해 알아보자 🐾 proxy 설정 // vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], server: { // 추가하기 proxy: { '/api': { target: 'url', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } } }) - vite.config.ts 파일에 server 부분을 추가해 주면 된다 🐾 axios axios...

[React, Vite_ Proxy] Vite을 이용하여 React를 시작하는 방법에 대해 알아보자 RCA(react-create app)을 사용하여 개발을 하던 중 Type Script를 도입하였더니 컴파일 시간이 조금 느려졌다는 느낌을 받았다. 그래서 찾아보니 Vite 이라는 빌드툴을 사용하면 시간이 매우 많이 단축된다는 정보를 알게되었다. ❓ Vite 원래 Vite은 Vue.js를 위한 빌드 툴이었으나 현재는 Vue 뿐만 아니라 React, Svelte, VanilaJS 등 여러 프레임워크들과 사용 가능하다. Vite을 이용하면 얼마나 속도가 빨라지는지 궁금하기도 했고, 무엇보다 rca를 이용하여 개발하는 과정에서, 특히 첫 빌드 시간이 오래걸려 답답했던 시기에 시도해 보게 되었다. Vite은 es..

[React_file download] 지난 포스팅에서 HTML의 a태그를 이용하여 파일을 다운로드 하는 방법에 대해 알아보았다. 👉 [HTML] 파일 다운로드_📂 / a 태그, download, HTML [HTML] 파일 다운로드_📂 / a 태그, download, HTML [HTML_a tag] 파일 다운로드 하는 방법에 대해 알아보자 📂 a tag 사용하기 다운로드 - href : 다운받을 파일의 url 📂 파일명을 다르게 하고싶은 경우 다운로드 - download='파일명' 으로 넣어주면 된 ttugttag-coding.tistory.com 오늘은 리액트로 서버에서 받은 파일을 다운로드 할 수 있게 구현하는 방법에 대해 알아보자 `````` import React from 'react'; ````..

[React] input 으로 첨부한 이미지 파일을 서버로 전송하는 방법에 대해 알아보자 1. 이미지 첨부하기 (input 태그 사용) import React from 'react'; export default function App() { return( ) } 2. 첨부한 파일 state에 저장하기 import React, {useState} from 'react'; export default function App() { const [image, setImage] = useState(); const addImageFile = event => { setImage(event.target.files[0]); }; return( addImageFile(event)} /> ) } onChange 이벤트를 이용..

input으로 첨부한 이미지 미리보기에 대해 알아보자 1. 파일 첨부 지난 포스팅에서 input 파일을 첨부하고 버튼 꾸미는 방법에 대해 소개했다. 궁금하다면 포스팅 참고하기 👉[리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 2. 이미지 경로 추가할 state 생성 `````` import React, { useState } from 'react'; // 생략 `````` const [imgPath, setImgPath] = useState(); // 단일 이미지 const [imgPath, setImgPath] = useState([]); // 여러 이미지 💡 이미지를 여러장 보여줄 경우 배열로 state를 생성한다. 3. label 태그에 onChange 이벤트 추..

input 파일 첨부 폼 꾸미는 법에 대해 알아보자    파일을 첨부하고 싶은 경우에 input 태그에 있는 type='file'을 사용한다. 그러면 아래 사진처럼 기본 폼이 나타난다.하지만 이렇게 나타나는 것은 예쁘지 않으니 label을 사용하여 꾸며보자  1. label로 감싸고 htmlFor를 이용하여 input과 연결하기 업로드 // 버튼에 들어갈 원하는 글자     💡 input : 반드시 label 안에 들어갈 필요는 없음 - 원하는 위치에 놓으면 됨    ❗ 주의할 점 : label의 htmlFor과 input의 id를 동일하게 입력해야 함  2. CSS로 label을 버튼처럼 꾸미기    - 예시.inputFile { display: none;}.inputFileLabel { co..

[React_ useEffect 활용하기] useState 업데이트가 한 박자씩 느린 경우를 해결하는 방법을 알아보자 리액트 useState를 사용하여 state를 업데이트 하다보면 한 박자 씩 느리게 나오는 되는 경우가 있다. useEffect를 사용하면 된다고 해서 사용을 해 보았는데 똑같은 결과가 출력되었다. - App.jsx import React, { useState } from 'react'; imoprt DataPage from './dataPage'; export default function App () { const [data, setData] = useState( { name: null, age: null, job: null, } ); // state 업데이트 함수 const upda..