frontend(vue.js)에서 FastAPI로 타입이 여러개 담긴 Formdata 보내기

frontend(vue.js)에서 FastAPI로 타입이 여러개 담긴 Formdata 보내기

1. formdata로 FastAPI에 값 보내기 formdata로 파일만 보내는 경우가 있지만, 때로는 formdata로 파일도 보내고 싶고 string이나 integer 등등 단순 데이터도 같이 보내고 싶을 수 있다 //vue.js async stopSoundToKeyword () { this.isLoading = true this.isRecording = false this.mediaRecorder.stop() this.mediaRecorder.onstop = (event) => { const blob = new Blob(this.audioArray, {type: 'audio/mp3'}) this.audioArray.splice(0) const formData = new FormData() form..

  • format_list_bulleted 프로그래밍/FastAPI
  • · 2023. 5. 14.
  • textsms
docker에서 nodejs + python-shell 사용할때 배운 docker 기본기와 개발 기본기

docker에서 nodejs + python-shell 사용할때 배운 docker 기본기와 개발 기본기

다음과 같이 dockerfile이 작성되었고 FROM python:3.8 WORKDIR /SubPjt2/backend/ RUN pip install --upgrade pip RUN pip install matplotlib RUN pip install tensorflow RUN pip install CMake RUN pip install dlib RUN pip install torch RUN pip install torchvision FROM node:16.18 WORKDIR /SubPjt2/backend/ COPY --from=0 . . COPY . . RUN npm install EXPOSE 3001 CMD ["npm", "start"] 이렇게 구성된 dockerfile에서 다음과 같은 python-s..

  • format_list_bulleted 프로그래밍/docker & jenkins
  • · 2023. 2. 13.
  • textsms
리액트 기본 배우기 -CSS에 대해-

리액트 기본 배우기 -CSS에 대해-

1. CSS에 대해 웹개발에서 스타일링을 위해 대표적으로 사용하는 것이 CSS CSS는 Cascading Style Sheets의 약자, 스타일링을 위한 일종의 언어 cascading은 계단식이라는 뜻으로, 여러가지 스타일이 정의되어 있는데, 한번에 여러 스타일이 적용될 경우에 스타일 충돌을 막기 위해 계단식으로 스타일이 적용되는 규칙이 있다. 하나의 엘리먼트가 여러개의 스타일 규칙을 만족하면, 해당 스타일을 마치 계단을 한칸씩 내려가는 것처럼 우선순위에 따라 하나씩 적용하게 된다. 결과적으로 하나의 스타일이 여러개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러개의 스타일이 적용될 수 있다. 엘리먼트에 스타일이 적용되는 규칙을 selector라고 부른다. 스타일을 어떤 엘리먼트에 적용할지를 선택..

  • format_list_bulleted 프로그래밍/React
  • · 2023. 1. 16.
  • textsms
리액트 기본 배우기 -컨텍스트에 대해-

리액트 기본 배우기 -컨텍스트에 대해-

1. 컨텍스트란 무엇인가 일반적인 리액트 앱에서 데이터가 컴포넌트의 props를 통해 부모에게 자식으로 단방향 전달되었다 하지만 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우, 기존 방식으로는 코드가 너무 복잡해지고 사용하기에 불편함이 많았다. 이런 과정에서 나온 것이 바로 컨텍스트(context) 컨텍스트는 리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신에 컴포넌트 트리(component tree)를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공한다 이를 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있다 위 그림은 props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 일반적인 방식 하지만 이 방식에서는 여러 컴포넌트에 걸쳐 자주 사용되는 데이..

  • format_list_bulleted 프로그래밍/React
  • · 2023. 1. 16.
  • textsms
react 기본 익히기 -JSX에 대하여-

react 기본 익히기 -JSX에 대하여-

1. JSX A syntax extension to JavaScript "자바스크립트의 확장 문법" 자바스크립트의 문법을 확장시킨 것 JavaScript와 XML/HTML을 합친 것 JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것 1-1) 예시 다음은 간단한 JSX 코드 대입연산자 =의 오른쪽에 특이하게 HTML코드가 나온다 HTML의 태그를 사용해 Hello, world!라는 문자열을 값으로 갖고 있다 const element = Hello, world!; 결과적으로 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드가 된다. 이 코드가 하는 역할은 태그로 둘러싸인 문자열을 element라는 변수에 저장..

  • format_list_bulleted 프로그래밍/React
  • · 2023. 1. 9.
  • textsms
react 기초 익히기 -기본 적용법, create-react-app-

react 기초 익히기 -기본 적용법, create-react-app-

1. 정의 react 공식 웹사이트에서는.. A JavaScript library for building user interfaces "사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리" - 라이브러리 = "자주 사용되는 기능을 정리해 모아 놓은 것" 1-1) 사용자 인터페이스(user interface) UI로 줄여서 부른다 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것 웹사이트에서 버튼, 텍스트 입력창 등이 모두 UI 버튼을 눌러 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여주어서 사용자들이 반응을 함 1-2) SPA(single page application) 하나의 페이지만 존재하는 웹사이트, 애플리케이션 수백 개의 웹페이지..

  • format_list_bulleted 프로그래밍/React
  • · 2023. 1. 9.
  • textsms