뚝딱뚝딱 코딩 기록_

[Expo_ permissions] 리액트 네이티브 expo cli를 이용한 기본 권한 설정하는 방법에 대해 알아보자 리액트 네이티브 exp-cli를 이용하여 개발한 애플리케이션을 출시하려고 했다. bundle 파일을 올리고 버전 검토를 했는데 자꾸 오류가 떠서 다음 단계로 넘어가지 않았다. 이유는 바로 위치 권한을 이용하고 있었기 때문이었다. 위치정보를 사용할 일이 없는 어플이었는데 자꾸 버전 검토를 통과하지 못해 엄청 답답했다. android.ACCESS_COARSE_LOCATION android.ACCESS_FINE_LOCATION android.ACCESS_BACKGROUND_LOCATION 바로 이 세 가지 권한 때문이었는데 찾아보니 expo-cli를 이용한 경우 permissions를 따로 설..

[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'; ````..

[HTML_a tag] 파일 다운로드 하는 방법에 대해 알아보자 📂 a tag 사용하기 다운로드 - href : 다운받을 파일의 url 📂 파일명을 다르게 하고싶은 경우 다운로드 - download='파일명' 으로 넣어주면 된다.

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

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 이벤트 추..