[Elice] FE Study4 [JS] FileReader로 이미지 파일 업로드하기 [JS] 이미지 파일 업로드 에서 사용하는 FileReader 를 정리해보자 1. FileReader const reader = new FileReader(); ⭐ FileReader 객체는 웹 어플리케이션이 파일을 비동기적으로 읽을 수 있게 해주는 역할을 합니다. 이 객체를 사용하면 웹 페이지에서 파일을 읽어와서 처리할 수 있습니다. 2. FileReader.readAsDataURL() const selectedFile = fileInput.files[0]; if (selectedFile) { // 파일을 데이터 URL로 읽기 시작 reader.readAsDataURL(selectedFile); } ⭐ readAsDataURL 메서드는 파일의 내용을 데이터 URL 읽어와 Base64로 인코딩하여 Fil.. 2024. 1. 8. [JS] 이미지 파일 업로드 이미지 파일 업로드 실습 강의을 Line by Line 로 이해하기 위해 작성 포스트를 추가하는 아래 modal 화면에서 이미지 파일을 업로드하는 기능을 구현 이미지 파일 업로드 실습 코드 : 더보기 import close from './assets/close_icon.svg'; import media from './assets/media_icon.svg'; import arrow from './assets/arrow_back_icon.svg'; const modal = ` 새 게시물 만들기 공유하기 사진과 동영상을 업로드 해보세요. 컴퓨터에서 선택 `; function createPost(img) { // 업로드한 이미지를 가져와 해당 이미지의 포스트 추가 모달 창이 열린다 return ` `; } d.. 2024. 1. 8. [CSS] CSS Animation 1. CSS Animation animation ? 특정 지점 별로 애니메이션 효과를 적용할 때 사용합니다. .animation { width: 300px; height: 300px; background-color: yellow; animation-name: changeWidth; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; } 속성값들을 한 줄로 표현할 수 있습니다. .animation{ animation: changeWidth 3s linear 1s 6 alternate; } values ani.. 2024. 1. 8. [JS] Dom, Event 1. 네비게이션 기능 구현해보기 메뉴의 a 링크 클릭 시 설정된 href 링크로 스크롤되면서 이동되는 기능을 구현해보자 querySelector : 1개의 태그를 css 선택자를 기반으로 가져옵니다. querySelectorAll : 여러 개의 태그를 css 선택자를 기반으로 가져옵니다. preventDefault() : 현재 이벤트의 기본 동작을 중지시킬 때 사용됩니다. getAttribute : HTML 태그의 속성값을 가져올 때 사용합니다. window.scrollTo({}) : 원하는 위치로 스크롤 이동을 시킬 때 사용됩니다. offsetTop : 선택된 영역의 상단까지의 거리를 절대 좌표로 반환합니다. // 모든 a태그를 가져온다 var aTags = document.querySelectorAl.. 2024. 1. 6. 이전 1 다음