개발자 노트

1. 코드에디터 설치 (VSCode) 2. Node.js 설치 3. TypeScript 컴파일러 툴 설치 4. ts-node 설치 1. 코드에디터 설치 (VSCode) 1-1. 설치 vscode 설치 링크로 들어가서 운영체제 환경에 맞는 파일을 다운로드해서 설치한다. vscode를 설치하면 TypeScript 설정 파일(tsconfig.json)이 자동으로 생성된다. 1-2. StrictNullChecks 설정 StrictNullChekcs는 null과 undefiend 타입을 참조하려고 할 때 타입 에러를 보여줄지 여부를 결정하는 옵션이다 (공식문서 참고) vscode를 실행한 후, Settings 설정창을 연다. (단축키: (맥: cmd + ,) / (윈도우: ctl + ,)) - Set..

문제 타입스크립트를 사용하고 있는데, 다음과 같은 타입에러가 발생하는 경우가 있다. Property does not exist on type '{}'. 해당 에러를 발생시킨 코드는 다음과 같다. 1 2 3 const obj = {}; obj.name = 'name'; cs 해결 에러가 발생한 코드를 보면 obj 객체가 선언 및 할당될 때에 참조하려는 프로퍼티 키인 name 정보가 없어서 타입에러가 발생한 것이다. 변수 선언 및 할당할 때 어떤 프로퍼티 키 이름이 들어가게 될지 몰라 비워두는 때가 있는데 이럴 땐 index signiture 방법을 이용해 타입을 정의하면 된다. 프로퍼티 키 이름과 값이 어떤 게 들어갈지는 몰라도, 타입은 안다면 그 타입에 맞게 선언해 주면 되고, 프로퍼티 값 타입조차도 모..

환경: vue 3.x, script setup -- 문제 -- custom event 즉, 하위 컴포넌트에서 emit으로 전달된 이벤트를 상위 컴포넌트에서 받아서 사용하려는 상황이다. 이 때, 하위 컴포넌트에서 받아온 emit event에 object (객체) method 를 바인딩하였고, method에서 this를 사용해 객체 안에 있는 프로퍼티 값을 변경하려고 했다. 코드는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // 상위 컴포넌트 import ChildComponent from '하위 컴포넌트 경로'; const obj = { print() { console.log(this); }, }; cs 위의 코드처럼 custom event에 객체 method 이름을 바..

-- 문제 -- 회사에서 사용하는 깃허브 계정과 개인적으로 사용하는 깃허브 계정이 분리되어 있는데, 현재 로컬의 git user email은 회사 깃허브 계정만 등록해서 사용하고 있다. 그런 상황에서 개인 깃허브 저장소 프로젝트를 clone한 후 commit을 추가하고 push를 시도하니 저장소에 push 권한이 없다는 에러가 났다. 하지만 여전히 나는 로컬에서 두 계정 모두를 자유롭게 이용하고 싶었다. -- 해결 -- 로컬에서 사용할 각각의 깃허브 계정마다 SSH 키를 생성하고 해당 깃허브 페이지에서 생성한 공개키를 등록한 다음, 로컬에서 config 파일을 이용해 계정 이메일을 분리해서 설정해두면 된다. 해당 내용은 단계별로 기록했다. 1. SSH 키 생성 (개인 & 회사 깃허브 계정 이메일) $ c..

문제 CSS의 flex-wrap을 이용해서 list 아이템(li)을 반응형으로 정렬하고 싶었다. 아래의 그림과 같이 list 아이템의 컨테이너(ul)는 브라우저 가운데 정렬되도록 하며, list 아이템들은 컨테이너 안에서 왼쪽 정렬하고 싶었다. 그런데 브라우저의 크기를 좌우로 조절했을 때, 아래 그림과 같이 컨테이너 안의 오른쪽 공간의 크기가 아이템 너비에 미치지 못할 경우 그 공간이 여백으로 그대로 남아있는 문제가 발생했다. 그래서 컨테이너에 justify-contents: center 값을 추가했더니, 아래 그림과 같이 컨테이너 안의 아이템들이 왼쪽 정렬되지 않는 문제가 생겼다. 해결 문제의 원인은 flex layout에서 wrap이 발생할 때 남게 되는 공간의 너비를 다시 계산해서 배치해주는 작업을..

문제 main.js 파일에 class를 정의해둔 파일을 import 하는 과정에서 문제가 발생했다. net::ERR_ABORTED 404 (Not Found) 에러 메시지는 다음과 같다. 참고로 파일의 계층 구조는 다음과 같다. src 폴더 안에 main.js와 mousePointer.js 파일이 들어있으며, mousPointer.js는 class를 정의해둔 파일이다. 해결 에러 메시지를 자세히 보면 URL에서 src 경로가 두 번 표시된다는 것을 발견할 수 있다. http://127.0.0.1:5500/src/src/mousePointer.js http://127.0.0.1:5500/src/mousePointer.js main.js를 살펴보면 import 하려는 파일의 경로로 src 폴더를 함께 써준 ..

문제 부모 노드의 CSS 스타일을 display: flex로 설정해둔 다음 자식 노드를 배치했다. 그렇게 배치한 자식노드 중의 하나인 버튼을 숨기고 싶어서 버튼에 display: none 설정 값을 줬다. 그랬더니 버튼 다음으로 위치된 박스들의 위치가, 사라진 버튼의 위치 쪽으로 밀려 올라오는 문제가 발생했다. 해결 버튼의 스타일을 display: none이 아닌 visibility: hidden으로 설정하니 문제가 해결되었다. 코드 자바스크립트에서 버튼의 위치는 그대로 남겨둔채 숨기고 싶을 때, button.style.visibility = 'hidden' 버튼을 다시 보이게 하고 싶을 때, button.style.visibility = 'visible'