뚝딱뚝딱 코딩 기록_

[React_ axios] 유튜브 클론 프로젝트에서 axios로 통신을 하던 중 baseURL과 api_key가 반복적으로 사용되고 있었다. 반복되는 코드를 줄이기 위해서 axios.create를 통해 instance를 생성하여 사용하기로 했다. 1. 인스턴스 생성 후 export (내보내기) - 폴더 / 파일 이름을 임의로 정하고 axios를 import한다. - axios.create({}) 안에 기본 세팅 값들을 넣어준다. ❕ baseURL : request url (요청 보낼 url) ❕ params : 기본 query params → {key: value} 형태로 넣어준다. 2. 외부에서 import 하여 사용하기 - 기존 axios를 사용하는 것과 동일하게 사용 가능하다. axios.creat..

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

[React Native_image axios] ImagePicker로 받아온 이미지 데이터를 서버로 보내는 방법을 알아보자 1. ImagePicker 사진 가져오기 expo ImagePicker library를 이용하여 데이터를 받아오는 방법은 지난 포스팅에서 소개했다. ImagePicker 사용 방법이 궁금하다면 포스팅을 참고하면 될 것이다. 👉 [리액트네이티브] 갤러리에서 사진 가져오기-ImagePicker 2. axios import axios from 'axios'; const data = { key: value, } axios.post('url', data} .then(response => console.log) // 성공한 경우 .catch(error => console.log) // err..