IT 공부를 위한 블로그

React 프로젝트를 진행하는 도 중 다음과 같은 에러가 발생하였다. input 컴포넌트에 에러가 생긴 듯하다. 그래서 구글에 검색해보니 많은 사람들이 같은 오류를 경험한 것을 확인할 수 있었다. 해당 에러가 발생한 이유는 input에 입력한 value 값이 undefined가 들어갔을 때의 예외처리를 안해줘서 발생한 것 같다. 다른 사람들의 해결방법으로는 value 값에 || ""을 추가해줘서 undefined값일 경우에는 ""으로 처리해준다고 입력해주면 된다. 그런데 나의 경우에는 useState("")로 초기값이 "" 이라고 설정했는데 이런 오류가 뜨지?라고 생각했는데 onChange 함수로 input의 value 값을 변경하고 나서 value 값을 입력 안 하고 다음과 입력값을 초기화하기 위하여 ..

스코프는 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위이다. 1. 스코프(Scope) - 스코프는 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위이다. - 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다. 계층적으로 연결된 것을 스코프체인(Scope Chain)이라고 한다. - 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. - 따라서 상위 스코프에서 선언한 변수를 하위 스..

import와 export는 JavaScript에서 사용하는 모듈들을 사용하면서 각 모듈을 가져오고 내보내는 역할을 하는 ES 모듈 명령어이다. 1. Named Module 1) export // 경로: user.js function name(user) { console.log(`${user} name : 루피`); } function age(user) { console.log(`${user} age : 15`); } export {name, age}; // as 사용하여 이름바꿔서 내보내기 export {name as username, age as userage}; - export로 name과 age함수를 내보낼 수 있다. - 여러 개를 export 할 때에는 중괄호를 사용한다. - export 할 때..

오류 Clone 한 Node.js 버전 제한과 기존 사용하던 Node.js의 버전 차이로 인해 오류가 발생하였다. 처음 package.json을 확인했을 때 버전을 제한하는 engines 객체에서는 다음과 같았다. 그래서 npm 은 6.0.0 이상, node는 14.0.0 이상이면 될 것이라는 생각을 했고 기존 사용하던 내 Node.js의 버전은 17.8.0, npm 버전은 8.5.5 였기 때문에 오류가 안 날 것이라는 예상을 했었다. 하지만 콘솔 창에서 요구하는 node의 버전은 14.15.0 또는 16.10.0 또는 18.0.0 이상을 요구했고 노드의 버전을 14.15.0으로 변경해주니 정상적으로 npm install을 실행할 수 있었다. - 노드 원하는 버전 설치 방법과 설치한 버전 확인하는 명령어..

Three.js 강의를 듣던 도중 THREE.Math 오류가 생겼다. 문제를 확인해보니 다행히 댓글에 이유가 나와있었는데 THREE.js 라이브러리가 업데이트되면서 THREE.Math가 사라지고 THREE.MathUtils로 해당 함수를 사용하는 것으로 바뀌었다. Three.js MathUtils 공식문서 https://threejs.org/docs/index.html?q=Math#api/en/math/MathUtils.randFloatSpread three.js docs threejs.org 배운점 프레임워크와 라이브러리에서 업데이트로 인해 사용 방법이 바뀌는 상황이 생길 수 있다. 그때는 공식문서를 확인해 볼 것

오류 three js를 연습하던 도중 다음과 같은 오류가 발생하였다. 그래서 setSize를 사용하는 resize 클래스를 확인해 보았지만 아무런 이상이 없다는 것을 확인했다. 해결 그래서 처음부터 하나하나 확인한 결과 constructor에서 윈도의 pixelRati 값을 가져오는 renderer를 다른 클래스에서도 사용할 수 있 도록 선언해 주었단 this._renderer = renderer 부분에 오타가 있는 것을 확인 하였다. // this._render = renderer; 변경전 // 변경 후 this._renderer = renderer; 배운 점 오타 유의하고 비효율적으로 전처적인 코드를 다시 처음부터 흝어보기보다는 콘솔 에러를 보고 에러의 원인을 한번 생각해본 다음 renderer를 사..

1. EAI란? - Enterprise Architecture Intergration의 약자로 일련의 컴퓨터 시스템(애플리케이션)을 통합하는 데 사용할 수 있는 통합 프레임워크이다. - 기업 내에서 또는 기업 외부에 필요한 여러 어플리케이션들 간의 상호 연동이 가능하도록 하는 통합 설루션이다. - EAI 방식은 각 비즈니스간의 통합과 연계성이 높아져서 효율성이 높아지고 시스템 간 확장성도 높아진다는 장점이 있다. 2. 포인트 투 포인트 (Point to Point) - 가장 기초적인 에플리케이션 통합 방법이다. 1 : 1 단순 통합 방식이다. - 단순한 방식이기 때문에 특별한 설루션 없이도 통합이 용이하다. 3. 허브 앤 스포크 (Hub & Spoke) - 단일한 접점 허브 시스템을 통하여 데이터를 전달..

1. 추상 클래스 - 추상 클래스는 상속받는 다른 클래스가 가질 property와 메서드를 파악할 수 있도록 도와준다. - TypeScript에서 추상클래스를 사용하면 JavaScript 컴파일에서는 일반적인 클래스로 보인다. - 표준화된 property와 메소드를 갖도록 해주는 청사진을 만들기 위해 추상 클래스를 사용한다. 2. 추상 클래스 사용법 - 추상 클래스를 정의할 때는 class 앞에 abstract를 작성해주면 된다. - 추가로 추상메서드를 정의할 때에도 동일하게 메서드 앞에 abstract를 작성해주면 된다. abstract class User { constructor( protected firstName: string, protected lastName: string, protected ..

1. 제네릭(Generic) 이란? - 다양한 타입의 객체들을 다루는 메서드나 클레스에 컴파일 시 타입 체크를 해주는 기능이다. C#, Java 등의 언어에서 재사용성이 놓은 컴포넌트를 만들 때 사용된다. - 의도하지 않은 타입이 들어오지 않도록 방지해주는 역할이며 여러 개의 타입을 가진 컴포넌트를 사용할 때 유용하다. - 관용적으로 를 사용한다.(아무 단어나 써도 무방하다.) 2. 제네릭의 장점 - 객체의 타입 안전성을 높이고 자료형을 정하지 않고 여러 타입을 사용 할 수 있게 해 주기 때문에 번거로움이 줄어든다. - 한번의 선언으로 다양한 타입에 재사용이 가능해진다. 3. any와의 차이점 - any는 자료의 타입을 제한할 수 없고 function을 통해 어떤 타입의 데이터가 리턴되는지 알 수 없다는..

git pull을 하던 도중 MERGE_HEAD가 존재하여 작동하지 않는 문제가 발생하였다. 이는 merge를 한 후 커밋이나 푸쉬를 하지 않아서 merge작업 완료되지 않아 생기는 문제이다. 따라서 나는 머지를 취소하는 방법으로 문제를 해결했다. 1) git merge를 취소 git merge --abort 2) 충돌을 해결하기 3) 변경내용 커밋 3) 다시 git pull 시도