본문 바로가기 메뉴 바로가기

AI Platform / Web

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

AI Platform / Web

검색하기 폼
  • 분류 전체보기 (374)
    • 알고리즘 (56)
      • 알고리즘 종류 (20)
      • 백준 (1)
      • sw (30)
    • Web (206)
      • HTML (10)
      • CSS (6)
      • Bootstrap (2)
      • Django (63)
      • JAVASCRIPT (22)
      • typescript (2)
      • Vue.js (10)
      • SQL (2)
      • git (2)
      • 프로젝트구현 (21)
      • React (42)
      • php (2)
      • nodejs (3)
      • nextjs (12)
    • Database (0)
      • MongoDB (0)
    • 빅데이터 (8)
    • 인공지능(Artificial Intelligenc.. (64)
      • python (23)
      • 자연어 처리(natural language pro.. (16)
      • Linear algebra (1)
      • Algorithm (2)
      • Tensorflow (8)
      • speech recongnition (0)
      • 머신러닝 (4)
      • 딥러닝(Deep Learning) (2)
      • CNN (4)
      • RNN (1)
    • 데이터분석 (9)
    • Platform (12)
      • spring boot (9)
    • 라즈베리파이 (5)
    • github (1)
    • 오픈소스 (1)
  • 방명록

vanillaJS (1)
[React] 첨부한 이미지 보여주기

이미지를 첨부하고, 첨부한 이미지를 브라우저 상에서 보여주는 방식을 알아보자. 브라우저에서 이미지를 업로드하여 보여주는 방식으로는 fileReader를 사용하는 방식과 URL.createObjectURL()을 사용하는 방식이 있다. 오늘 알아볼 방식은 URL.createObjectURL()이다. 우선은 작동 순서를 알아보고, React로 전반적인 파일 업로드와 Image를 브라우저로 표현하는 방식에 대해 알아보자. 그 후에 vanillaJS로 URL.revokeObjectURL() 도 추가로 알아보도록 하자. 구현 로직 순서 우리가 구현할 로직을 우선 생각해 보면 아래와 같다. input 태그를 통해 image를 받는다. 받은 image 파일에서 Blob 객체를 뽑아낸다. 뽑아낸 Blob 객체를 URL...

Web/React 2023. 9. 7. 20:00
이전 1 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • useState
  • react
  • 자료구조
  • next.config.js
  • pandas
  • react autoFocus
  • typescript
  • Queue
  • django
  • mongoDB
  • login
  • vuejs
  • useHistory 안됨
  • NextJS
  • Express
  • UserCreationForm
  • 클라우데라
  • DFS
  • Python
  • logout
  • nextjs autoFocus
  • JavaScript
  • TensorFlow
  • BFS
  • 자연어처리
  • read_csv
  • error:0308010C:digital envelope routines::unsupported
  • Deque
  • nodejs
  • Vue
more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바