본문 바로가기

분류 전체보기95

setState is not a function 부모 컴포넌트의 boolean 상태값을(모달창 온오프) 자식 컴포넌트로 넘겨서 사용하던 도중 해당 오류를 접하게 되었다. Uncaught TypeError: setState is not a function 해당 오류의 해결책으로는 2가지 해결책이 제시되지만 1. Arrow function 사용 2. thisBinding 나는 이미 arrow function을 사용하여 상위 스코프의 this를 그대로 활용하고 있기 때문에 해결책이 아니였다. (thisBinding 과정 자체가 생략) > 원인 /* 부모 컴포넌트 */ const [open, setOpen] = useState(false); // 모달창 on off /* 자식 컴포넌트 props */ function ChildComponent(setOpen:.. 2022. 7. 29.
[Xcode] ios에 alert와 confirm 활성화 시키기 > 이슈 웹킷뷰(WKwebview)를 통해 모바일 앱을 만들었을 때 alert() , confirm()이 안드로이드와 달리 IOS 앱에서는 반응하지 않았다! (클릭하면 묵묵부답...) 웹킷뷰(WKWebView)에서 자바스크립트를 실행하기 위해 자바스크립트 모드를 활성화 시키는 기본 로직은 구축해 놓았지만, IOS에서 alert와 confirm을 띄우려면 ViewController에 UIViewController 뿐만 아니라 WKUIDelegate를 추가적으로 설정해야 한다. > 해결 ⭐️⭐️ WKUIDelegate를 활성화 하기 위해 viewDidLoad에 한줄 추가하고 class ViewController: UIViewController { let webView:WKWebView = { // ... }.. 2022. 7. 26.
클래스 비교(ES5 vs ES6) 자바스크립트는 프로토타입 기반 언어이기 때문에 클래스 및 상속 개념은 존재하지 않지만 프로토타입을 기반으로 클래스와 비슷하게 동작하도록 도입되어 왔다. > ES5 /* 생성자 함수 */ let ES5 = function (name) { this.name = name; }; /* 스태틱 메서드 */ ES5.staticMethod = function () { return this.name + ' 스태틱 메서드!'; }; /* 프로토타입 메서드 */ ES5.prototype.method = function () { return this.name + ' 프로토타입 메서드!'; }; let instance = new ES5('es5'); console.log(ES5.staticMethod()); // 'es5 스.. 2022. 7. 24.
Static Methods, Prototype Methods 정리 생성자함수 Array 입장에서 디렉터리 구조를 살펴보면 스태틱 메서드 from(), isArray(), of() 클래스(생성자함수)에서 직접 정의한 메서드 인스턴스에 상속(참조)되지 않는다. 인스턴스에서 직접 호출할 수 없고 클래스에서만 호출 가능. 프로토타입 메서드 map(), forEach(), pop() ... 클래스의 prototype 내부에 정의된 메서드 인스턴스에 상속(참조)가 가능하다. 인스턴스에서 직접 호출할 수 있다. > 예시 /* 생성자 Constructor */ let Constructor = function(width, height) { this.width = width; this.height = height; }; /* 프로토타입 메서드 */ Constructor.prototype.. 2022. 7. 17.
Object.create 활용예시 (prototype) 일전에 게시한 프로토타입 게시물들을 보게 되면 프로토타입 체인상 가장 마지막에는 언제나 Object.prototype이 있다고 볼 수 있는데, 예외적으로 Object.create 를 이용하면 Object.prototype의 메서드에 접근할 수 없도록 할 수 있다. Object.create(null) 은 __proto__가 없는 객체를 생성한다. > 예시 1. 변수 _proto에 __proto__ 프로퍼티가 없는 객체를 할당하고 2. getValue 메서드 추가해보았다. 3. 변수 obj에 앞서 만든 _proto를 __proto__로 하는 객체를 할당 > 정리 변수 obj를 출력해보면 __proto__에는 오직 getValue 메서드만이 존재하며 __proto__ 및 construtor 프로터티 등은 보이.. 2022. 7. 3.
HTMLInputElement에 number 사용하기 > 오류 페이지네이션을 작업하던 중 뜻하지 않은 에러가 나타났다. Argument of type 'string' is not assignable to parameter of type 'SetStateAction'. TS(2345) rowsPerPage는 페이지당 데이터 갯수(25개, 50개, 100개)를 보여주는 number인데 매개변수의 타입이 string이어서 number는 들어갈 수 없다는 오류이다. > 해결 구글링을 해본 결과 아주 높은 확률로 typeof e.target.value === 'string'이기 때문에, 타입스크립트가 오류로 뱉어내는 것이라 한다. HTML5에는 분명 number type input이 있긴 하지만, 일반 input과 차이가 없고 마크업의 내용상 개선과 클라이언트 구현.. 2022. 6. 28.
<botocore.awsrequest.AWSRequest object at > error Command failed with exit code 255 github Action을 통해 수정내역을 배포하던중 어느순간부터 deploy에 실패하기 시작했다. error Command failed with exit code 255. 여러 자료들을 찾아보던 중, 내가 찾게된 솔루션은 yml파일의 env에 AWS_DEFAULT_REGION을 추가해주는 것이였다. - name: Deploy env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} AWS_DEFAULT_REGION: ap-northeast-2 run: yarn deploy-dev 우리 사이트는 AWS에 기존 지역을 ap-northeast-2로 지정했었으.. 2022. 6. 27.
객체 전용 메서드란? 프로토타입 체이닝으로 인해 어떤 생성자 함수이든 prototype은 반드시 "객체"이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재하게 된다. 따라서 객체에서만 사용할 메서드(객체 전용 메서드)는 프로토타입 객체 안에 정의할 수가 없다. 왜냐하면 Object.prototype은 다른 데이터 타입이 __proto__에 반복 접근함으로써 도달할 수 있는 최상위 존재이기 때문! = 다른 데이터타입도 프로토타입 체이닝을 통해 거슬러 올라가 해당 메서드를 사용할 수 있기 때문 = Object.prototype에 메서드를 만드는 순간 다른 데이터타입에서 사용가능 > 객체 전용 메서드 구현방법은? 이와같은 이유로 객체 전용 메서드들은 Object.prototype이 아닌 Object.. 2022. 6. 6.
프로토타입 체이닝 (prototype chaining) 이전 게시물인 "프로토타입 디렉터리 구조"를 좀더 살펴보자면 Object 객체의 디렉터리 구조는 아래와 같다. 배열 리터럴의 디렉터리 구조도 다시 살펴보면 __proto__안에 또다시 __proto__가 등장하는데 Object.prototype과 동일한 내용인 것을 볼 수 있다! > 이유는? prototype 객체가 "객체"이기 때문이다. 결국 모든 객체의 __proto__에는 Object.prototype이 연결된다고 볼 수 있다. 배열 리터럴 기준으로 __proto__는 언제나 생략 가능하기 때문에 Array.prototype 내부의 메서드를 자신의 것처럼 실행할 수 있었듯이, Object.prototype 내부의 메서드 또한 자신의 것처럼 실행할 수 있다는 것이다! 생략가능한 __proto__를 한.. 2022. 6. 4.

티스토리툴바