맨동이

유튜브 영상보면서 colab으로 실습좀 해보려했더니 .. 더보기 Error Code 429 - You exceeded your current quota, please check your plan and billing details. 이런 에러가 떴다. 냅다 복사해서 검색해보니 나같은 사람이 많았고, OpenAi Help Center 에서도 설명이 나와있었다. 결론부터 말하면 아래 openai 홈페이지에서 credit card를 등록한 사용자만 사용할 수있다는것. 카드 등록부터 애먹었고.. 카드 등록을 하고 다시 실행해보니 똑같은 에러가 나서 보니 credit card를 등록하기전 api key말고 카드 등록후 발급한 api key를 사용해야 하는것 같다. https://platform.openai.com..

@ViewChild의 정의 @ViewChild는 Angular의 코어 라이브러리에서 제공하는 데코레이터 중 하나로, 자식 컴포넌트나 DOM 요소에 직접 접근할 수 있는 기능을 제공합니다. 이 데코레이터를 활용함으로써, 우리는 컴포넌트의 뷰에 위치한 자식 요소들에 대한 직접적인 제어를 할 수 있게 되는데, 이는 웹 애플리케이션의 동적인 행동을 쉽게 구현하는 데 큰 도움이 됩니다. @ViewChild의 사용 방법 // @ViewChild(탐색 대상 클래스명) 프로퍼티명: 탐색 대상 클래스명; @ViewChild(Pane) set pane(v: Pane) { setTimeout(() => { this.selectedPane = v.id; }, 0); } @Component({ selector: 'test', ..

웹 표준 웹상에서 지켜야하는 표준 규칙. W3C에서 지정한 표준안을 지키는 사이트가 웹 표준을 잘 준수한 사이트입니다. 예: 문서 구조: 해당 페이지의 기본 정보를 포함하는 헤드와 본문을 포함하는 바디를 가진다. 표준 엘리먼트 사용: 모든 요소는 시작 태그와 종료태그가 함께 있어야 하며, 모든 요소와 속성은 소문자여야 한다. 인코딩 선언: 모든 HTML 문서는 기본 인코딩으로 'utf-8'을 사용한다. 웹 접근성 웹 접근성은 장애인과 비장애인 모두 웹사이트를 사용할 수 있도록 하는 방식을 가리킵니다. 모든 사용자가 정보와 기능에 차별없이 접근할 수 있어야 합니다. 한국형 웹 컨텐츠 접근성 지침으로 2.0버전이 있으며, 웹 접근성 표준은 원칙, 지침, 검사 항목 3단계로 구성되어 있습니다. 원칙은 웹 접근..

1. 수정사항 되돌리기 코드를 작성하면서 여러 군데에 로그를 출력하는 코드를 삽입했다던가, 개발 환경에서만 작동하는 코드를 임시로 넣었을 때 그 내용을 되돌리는 경우에는 checkout을 사용합니다. 기존 커밋과 비교해서 직접 수정해도 되지만, 수정한 내용이 많을 경우에 사용하면 편리합니다. 새롭게 추가된 파일, 다시 말하자면 Untracked file의 경우에는 checkout을 하더라도 삭제되지 않습니다. 2. Unstaging add 명령어로 stage 상태로 만든 파일을 다시 unstage 상태로 만드는 방법은 reset 명령어로 unstage 상태로 만들수있습니다. 3. Commit 되돌리기 3.1. reset 3.1.1. mixed reset은 말그대로 커밋을 되돌리는 명령어입니다. 파일을 추..

자바스크립트 this 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 자바스크립트는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자 this 를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 생성된다. 여기서 this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정이 된다. 더보기 바..

Property 'nav' does not exist on type 'DefaultRootState' React + TS + redux 사용중 DefaultRootState 값에 찾는 값이 없다는 에러를 발견했다. 해결방법은rootReducer가 있는 곳에 RootState 타입을 선언하고 state에게 알려주면 해결완료! export type RootState = ReturnType

유데미 강의를 보며 typescript에 webpack을 적용하였다. 하지만 강의는 webpack 4버전으로 녹화된 강의였고.. 나는 webpack5로 설정을 하던중 다른 부분이 있어 기록으로 남길겸 글을 남기게 되었다. webpack-dev-server ? 빠른 실시간 리로드 기능을 갖춘 개발 서버로서 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라지고, webpack.config.js파일에 devServer 옵션으로 커스터마이징도 가능하다. 22년 3월 기준 npm install 버전과 나의 프로젝트 구성 목록이다. npm start로 실행했을 시에는 webpack-dev-server가 실행되게 하고, build시에는 따로 build용 config 파일을 만들어 적용해주었다..

Component 외부 vs 내부 변수 선언 React를 사용하다 문득 Component 외부에서 변수 나 함수를 선언하는 것과 내부에서 선언하는 것의 차이가 궁금해져서 구글링을 하게되었다. 결론적으로 크게 차이는 없고 컴포넌트 내부코드의 가독성을 개선하고 싶거나, 특정 함수의 재사용성을 높이고 싶으면 외부로 빼는게 낫다고 한다. https://stackoverflow.com/questions/62848106/functional-component-write-functions-inside-or-outside-the-component Functional Component: Write functions inside or outside the component? I often wrote functional co..

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor 와 non-constructor 로 구분한다. constructor : 함수 선언문, 함수 표현식, 클래스 non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수 밑의 예제로 보면 메서드를 인정하는 범위를 구분할 수 있다. // 일반함수 정의: 함수선언문, 함수표현식 function one() {} const two = function() {}; // 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수와 같다. 메서드로 인정X const test = { x: function() {} }; new one(); // -> one {} new two(); // -..

일급 객체 일급 객체는 4가지 조건을 만족하는 객체를 말한다. 더보기 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체,배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 4가지 조건을 모두 만족하는 일급 객체이다. // 1. 함수는 무명의 리터럴로 생성 가능 const increase = function(num) { return ++num; }; const decrease = function(num) { return --num; }; // 2. 함수는 객체에 저장이 가능 const predicates = { increase, decrease }; // 3. 함수는 매개변수에..