뚝딱뚝딱 코딩 기록_

[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..

[React Native_ NetInfo] 네트워크 연결을 확인하는 방법에 대해 알아보자 1. 라이브러리 설치 expo install '@react-native-community/netinfo' 2. 인터넷 연결 여부 확인 (재사용 가능) `````` import NetInfo from '@react-native-community/netinfo'; `````` const unsubscribe = NetInfo.addEventListener(state => { console.log(state.isConnected); return (state.isConnected); }); unsubscribe(); 💡 state.isConnected : boolean (true / false) 💡 state.type : ..

[React Native_ Onboarding Screen] 온보딩 화면 만드는 방법에 대해 알아보자 ❓ 온보딩 화면 (Onboarding Screen) 💡 온보딩 화면이란 어플을 처음 설치한 후 실행했을 때 한 번만 나오는 화면을 말한다. 💡 어플 사용법 등의 내용이 간단하게 들어간다. 💡 어플을 처음 실행했는지 여부를 state에 업데이트하고 Local Storage에 저장한다. 1. 라이브러리 설치 yarn add @react-native-async-storage/async-storage yarn add react-native-pager-view or npm install @react-native-async-storage/async-storage npm install react-native-page..