SimCoding

타입스크립트 접근제한자 : public, private, protected + 정적메소드 static 자바스크립트와 달리, 타입스크립트에서는 접근제한자를 제공합니다. 코드 예시를 통해 접근제한자 대해서 알아보도록 하겠습니다. /* 접근 제한자 - public, private, protected public - 자식 클래스, 클래스 인스턴스 모두 접근 가능 protected = 자식 클래에 접근 가능, 클래스 인스턴스 접근 불가능 private - 해당 클래스 내부에서만 접근 가능 */ // ※ static - this가 아닌, 클래스명으로 접근 ! class Car { public name : string; private color :string; protected wheel : number; stati..

[JS] 자바스크립트 ES6 Class , extends 예시코드 ES6에 도입된 Class에 대해 예시코드를 통해 알아보자. @ Class 예시코드 class User { //constructor : 값을 초기화 해준다. constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(`이름 : ${this.name} 나이 : ${this.age}`); } } const tom = new User("Tom", 19); tom.showName(); // 이름 : Tom 나이 : 19 console.log(tom); /* showName이 Prototype에 할당된다. ▼User {name: 'Tom', age: 19..

타입스크립트의 함수 오버로딩 예시 코드 interface User { name :string; age : number; } // 함수 오버로딩을 통해 매개변수 age의 상태에 따른, return 상태를 정의해줘야 한다. // why ? Ts가 매개변수의 상태에 따른 return 값의 상태를 자동으로 결정하지는 못한다. function join(name : string, age :string) : string; function join(name : string, age : number) : User; function join(name : string, age : number | string) : User | string { if(typeof age === "number"){ return { name, ag..

자바스크립트 call , apply ,bind 예시 코드 javascript 함수호출시 사양되는 call, apply, bind를 코드예시를 통해 알아보겠습니다. @ call 사용예시 const mike = { name: "Mike", }; function showThisName() { console.log(this.name); } function update(birthYear, occupation) { this.birthYear = birthYear; this.occupation = occupation; } showThisName.call(mike); // this에 mike를 할당해준다. update.call(mike,1999,"singer") // 매개변수를 순서대로 받는다. console.log(..

타입스크립트 Interface 코드 사용 예시 interface 키워드를 사용해 값이 특정한 형태(shape)를 갖도록 제약할 수 있다. 인터페이스를 정의하는 기본적인 문법은 객체 타입의 그것과 유사하다. 예제코드를 보면서 Interface의 활용법을 확인해보자. @ 객체형Interface type Score ='A' | 'B' | 'C' | 'F'; interface User{ name : string; age : number; gender? : string; readonly birthYear: number; [grade : number] : Score; // 키값을 배열형태로 받을 수 있다. // grade는 다른값으로 대체될 수 있음. } let user : User = { name : 'xx', ..

예제를 보면서 제너레이터 작동방법을 확인하자. @ 제너레이터 함수 생성 및 호출 방법 // 제너레이터를 생성할때는 function* 을 사용한다. // 화살표 함수로는 제너레이터를 만들 수 없다. function* myGen() { yield 1; yield 2; yield 3; yield 4; return 5; } const myItr = myGen(); console.log(myItr.next()); console.log(myItr.next()); console.log(myItr.next()); console.log(myItr.next()); console.log(myItr.next()); console.log(myItr.next()); // 출력 // { value: 1, done: false } ..

예시 코드와 주석을 보면서 Formdata에 이미지파일 넣는 방법을 확인해 보자 ! 아래 코드를 통해 Formdata에 이미지 파일 넣는방법, 미리보기 이미지 생성/삭제 방법을 확인 할 수 있다. @ input태그 동적으로 생성하기. // map 함수를 활용해 , type="file"인 input을 동적으로 생성해준다. ... ImageUploader.jsx return ( {OrderList.map((item, index) => { return ( { handleImage(e, index); }} key={`ImgUploadInput_${index}`} id={`main_img_${index}`} type="file" accept="image/*" /> ) )}}) @ handleImage함수로, on..

모달창을 띄울 때, 스크롤을 비활성화 하는 방법과 모달창이 닫힐 때, 스크롤을 다시 활성화 하는 방법입니다. // 스크롤 비활성화 const openModal = (e) => { document.body.style.overflow = "hidden"; }; // 스크롤 활성화 const closeModal = (e) => { document.body.style.overflow = "unset"; };