뚝딱뚝딱 코딩 기록_

[React_input[type='file']] 같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자 input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅 👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 👉 [리액트] input 이미지 미리보기_🎨 ⚡ input file 업로드 코드 같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다. 즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데 바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다. ❓ 해결방법 💡 onClick 이벤트 발생시 value 초기화하기 e.target.value = null}> -..

[Material UI_ Grid] ❔ window size 구하기 const [windowSize, setWindowSize] = useState(window.innerWidth); const handleWindowResize = useCallback(() => { setWindowSize(window.innerWidth); }, []); window.addEventListener("resize", handleWindowResize); ❔ 컴포넌트 만들기 const ComponentGrid = () => { let colNum = 4; if (windowSize < 1200) colNum = 3; if (windowSize < 900) colNum = 2; if (windowSize < 600) col..

[Project_Flooming] 🌸 프로젝트 소개 🌼 소개 : 딥러닝 모델을 활용한 꽃 사진 분류, 꽃 그림 생성 모바일 앱 🌼 컨셉 : 꽃에 대한 정보 (이름, 꽃말 등)을 알려주고 그림으로 변환해 주는 애플리케이션 🌼 기능 사용자가 꽃 사진을 촬영 or 갤러리에서 불러오는 경우에 어떤 꽃인지 분류하여 이름과 꽃말을 알려줌 사용자의 꽃 사진을 그림으로 변환 변환된 그림을 개인 디바이스에 저장 '전시관'이라는 커뮤니티에 comment와 함께 업로드 다른 사용자의 꽃 사진 및 그림 관람 가능 전시관 신고 기능 🌼 개발 기간 : 약 7주 🌸 사용 기술 🌼 front Android : JavaScript, React-Native, expo-cli, Axios iOS : Swift, Alamofire, Man..

[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] 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 이벤트를 이용..

리액트로 게시판을 구현하던 중 내용을 작성하는 부분에 CKEditor를 적용해 보았다. 1. CKEditor 설치 npm install --save @ckeditor/ckeditor5-react npm install --save @ckeditor/ckeditor5-build-classic or npm install --save @ckeditor/ckeditor5-build-inline or npm install --save @ckeditor/ckeditor5-build-balloon or npm install --save @ckeditor/ckeditor5-build-balloon-block or npm install --save @ckeditor/ckeditor5-build-decoupled-docum..