전체 글44 React Image Upload 컴포넌트 제작 1. 기능 image upload(drag drop, paste) image Resize (라이브러리 사용) image preview 2. JSX 작성 2-1. Image Upload Component JSX 업로드 {!!resizeFiles?.length && ( )} 2-2. Image Preview Component JSX import { UploadFiles } from "./ImageUpload"; import style from "./ImageUpload.module.scss"; interface Props { resizeFiles: UploadFiles[]; setResizeFiles: React.Dispatch; } export default function ImagePreview({ re.. 2023. 6. 4. javascript 기초부시기 - prototype(프로토타입) 1 1. 프로토타입 객체 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다. 그렇기 때문에 자바스크립트를 이해하기위해서는 프로토타입이 무엇인지 확실히 이해할 필요가 있다. 자바스크립트의 모든 객체는 자신의 부모역할을 담당하는 객체와 연결되어있는데, 그로 인해 부모 객체의 프로퍼티와 메소드를 상속받아 사용할 수 있게한다. 이러한 부모객체를 프로토타입 객체를 줄여서 프로토타입이라고 한다. 2.1 프로토타입 객체 확인하기 const obj = { name: 'Kim' } console.log(obj.hasOwnProperty("name")) //true 위의 코드는 객체 리터럴로 간단한 객체를 생성하고 그 객체에서 hasOwnProperty 메소드를 사용해 name이란 프로퍼티가 있는지 확인하는 코드이다... 2022. 6. 5. javascript 기초부시기 - 이벤트 루프 사실 이벤트루프는 자바스크립트의 기초는 아니다. mdn web docs에서도 Adavanced에 속해있으니까.. 하지만 이런 개념을 모르고 자바스크립트를 공부하다보면 작성자와 같이 다시한번 기초를 공부해야할 수 있다. 1.이벤트루프 자바스크립트는 싱글스레드 언어이다. 싱글 스레드라는건 한번에 하나의 작업만 처리 할 수 있다는 것인데, 자바스크립트를 다뤄보면 반복문을 실행하면서 API를 요청하고, 그 결과를 보여주는 다양한 작업을 한번에 수행하는 것처럼 보인다. 이 싱글스레드의 메인스레드인 이벤트루프가 어떻게 동작하는지 알아보자. 이벤트루프는 스택(Stack), 힙(Heap), 큐(Queue)로 구성되어있다. 1.1 스택(Stack) 자바스크립트에서 함수를 호출할때마다 프레임 스택을 형성하여 스택에 쌓이게.. 2022. 5. 29. javascript 기초부시기 - 데이터 타입 - object(객체) 3 1. 객체 1.1 객체는 참조타입 객체는 객체타입 혹은 참조타입이라고 한다. 참조타입은 원시타입과 달리 모든 연산이 실제값이 아닌 참조값으로 처리된다는 의미이다. 원시타입의 값은 한번 정해지면 변경할 수 없지만(이에 대해서는 변경 불가능 값 을 다시 읽어보세요.) 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경이 가능한 값이다. 객체는 언제든지 변경/추가/삭제가 일어나기 때문에 어느정도의 메모리를 확보해야하는지 알 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역에 저장된다. 객체타입과 원시타입의 특징은 아래의 코드와 같다. //참조 타입 var obj = { val: 10 } var foo = obj; console.log(obj.val, foo.val) //10 10 conso.. 2022. 5. 29. 이전 1 2 3 4 ··· 11 다음
