클래스형 컴포넌트를 다루면서 이벤트 핸들러에 함수를 등록하는 과정에서 this를 제대로 불러오지 못했다. 어떻게 작성하는지에 따라 this 값이 달라지는 것이었다. this는 호출자에 의해 동적으로 결정된다. 따라서 this를 바인딩하여 원하는 값으로 불러올 수 있는 4가지의 방법들을 살펴보겠다. 1. bind() 메서드 this.이벤트명 = this.이벤트명.bind(this); 사용자가 만든 일반 함수를 bind 메서드를 통해 this로 사용할 객체를 전달하는 것이다. bind 메서드는 새롭게 this 값이 교체된 함수를 반환한다. 함수를 반환할 뿐이지 호출하지는 않기 때문에 apply, call 메서드와 다르게 이후에 직접 실행해야 한다. 위의 코드는 constructor() 또는 render()에..
this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 식별자이다. 바인딩이란 바인딩이란 식별자와 값을 연결하는 과정 동적으로 결정되는 this this는 호출하는 주체에 따라서 달라진다. console.log(this); // (1) window const a = { name: "realzu", getName() { console.log(this); } } a.getName(); // (2) { name: 'realzu', getName: ƒ getName() } const b = a.getName; b(); // (3) window (1)의 경우, 전역이기 때문에 전역 객체 window를 가리킨다. (2)의 경우, 호출한 객체인 a를 가리킨다. 이는 메서드 호출이라고도 부른다. ..
노드, npm 버전이 안 맞아서 npm install을 했을 때 제대로 실행이 되지 않았다. nvm으로 node 버전은 바꿀 수 있지만, npm 버전은 nvm로 바뀌지 않는다. 또한 명령어 작성시 옵션을 제대로 붙이지 않아 헤맸다. npm 버전 변경하기 npm install npm@변경할버전 -g npm install npm@6 -g 위는 npm 버전을 6으로 변경하기 위한 명령어이다. -g를 꼭 함께 작성해야 한다. 버전 확인하기 npm -v npm 버전이 바뀐 것을 정상적으로 확인할 수 있다.
nvm을 설치하면서 오류가 발생해서 해결 방법을 찾았다. zsh인지 bash인지에 따라 방법이 달라진다. 나는 zsh이기 때문에 해당 방법을 공유하려고 한다. nvm 설치 brew로 설치하는 방법이다. brew install nvm - 설치 확인 nvm --version 버전이 나오면 정상적으로 설치된 것이다. 근데 나의 경우, 제대로 설치되지 않았다. 터미널 열고 아래의 방법을 진행한다. 해결 방법 - zshrc 파일 열기 open ~/.zshrc - 환경변수 추가 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvmexport PATH=/opt/homebrew/bin:$PATH - 터미널..
회사에서 맥북을 새로 세팅하면서 telnet을 처음 접해보았다. telnet은 네트워크를 관리하는 프로토콜로, 원격 서버를 접속하는 테스트에 사용된다. 해당 포트 등이 접속 가능한지 확인할 수 있다. homebrew를 이용한 설치 brew install telnet telnet 실행 telnet [호스트IP/도메인] [포트] 성공/실패 여부 Trying... 이 계속 뜬다면 실패한 것이다. 성공이 되었다면 Connected to와 함께 실행된다. telnet 종료 "Ctrl"와 "]"를 동시에 누른 후, "q"를 입력해 엔터를 치면 종료된다.
npm 패키지는 상황에 따라 -g 옵션을 작성해 준다. 프로젝트별 패키지는 전역 설치할 필요가 없지만, npm 자체를 설치하는 등의 패키지는 -g 옵션을 필수적으로 입력해야 한다. 설치 및 버전 변경 패키지 설치 시 @뒤에 숫자를 입력해 주면, 해당 버전으로 지정해서 설치할 수 있다. npm install npm@7 -g 위는 7 버전의 npm을 설치하기 위한 명령어이다. npm -v 이후 해당 버전을 확인함으로써 설치가 완료되는 것을 알 수 있다. -g (전역 설치) -g란 global, 즉 전역적으로 설치되는 옵션이다. NPM을 전역 설치한다는 것은 어떤 말일까? 시스템 레벨에서 사용하는 라이브러리라는 것이다. 모든 프로젝트가 공통적으로 사용해야 하는 패키지의 경우, 전역 설치를 해야 한다. npm ..
vite 환경에서 환경변수 값을 주기 위해서는 기존의 CRA와 다르게 설정해야 한다.처음에는 CRA처럼 환경변수에 접근해서 값이 나오지 않았는데, Vite의 경우 prefix가 달랐다! 먼저 CRA에서 접근하는 방법을 알아보자.CRACreate-react-app으로 만든 React에서는.env 파일에서 REACT\_APP을 prefix로 붙여야 한다.그다음 이를 사용하기 위해서는 process.env 를 앞에 붙여서 사용한다.Vite환경변수 생성Vite의 경우, VITE\_를 prefix로 사용하여 환경변수를 생성해야 한다.# .envVITE_TEST_VALUE=123환경변수 사용그다음 앱에서는 import.meta.env로 값에 접근할 수 있다.dotenv 패키지도 필요가 없다.const TEST_VA..
새로 나온 리액트의 공식문서에서 따르면, 이제 리액트 프로젝트를 생성할 때 CRA의 사용을 지양한다. 따라서 next.js 또는 Remix, Gatsby와 같은 프레임워크와 함께 만들거나 Vite로 만들 것을 권장한다. 프로젝트 생성 npm create vite@latest yarn create vite npm 또는 yarn 중에서 선택해서 입력한다. 터미널에서 위의 명령어를 실행하면, 설정할 프로젝트 네임을 입력할 수 있다. 프레임워크 선택 React, Vue, Svelte 등 사용할 프레임워크를 선택한다. 언어 선택 타입스크립트 or 자바스크립트 선택 가능하며 SWC 빌드 툴도 선택할 수 있다. 생성 완료 생성이 완료되었다. npm install을 하면 node_modules 파일이 생긴다. npm..
mongoose 데이터베이스 연결하려고 nodemon 통해서 명령어 실행하니까 오류가 발생했다. 스택오버플로우에서 한 사용자가 작성해준대로 해봤더니 잘 해결이 되었다! pkFactory: db.options?.pkFactory ?? utils_1.DEFAULT_PK_FACTORY, SyntaxError: Invalid or unexpected token at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) Node.js v18.14.2 [nodemon] app crashed - waiting for file changes before starting... 해결 방법 방법은 mongoose의 버전을 낮추는 것이다. 현재 7버전이었는데 6..
