본문 바로가기

분류 전체보기57

[JS] this 22장 : this 1. this 키워드 this : 자신이 속한 객체 또는 생성할 인스턴스를 가리키는 자기 참조 변수 this를 통해 자신이 속한 객체 또는 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. const circle = { radius: 5, // property getDiameter() { // method // 이 method가 자신이 속한 객체의 property인 radius를 참조하려면 // 자신이 속한 객체인 circle을 참조할 수 있어야 한다. return 2 * circle.radius; }, }; console.log(circle.getDiameter()); // 10 circle.radius 과 같이 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않.. 2024. 1. 13.
[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.

티스토리툴바