범데이의 개발노트 📄

1. 개요 외부 모듈을 npm으로 설치하여 package.json 에 의존성 정보 삽입 및 node_modules에 설치가 되었다. 하지만 serve 명령어로 electron을 띄었을 시에는 해당 모듈 import시 문제가 발생하지 않았는데, build 명령어로 프로그램을 빌드 후 실행하였을때 해당 모듈 import시 아래와 같이 Cannot find module 에러가 떴다. serve시에는 로컬에 이미 설치되어 있는 모듈을 잘 참조하지만, 빌드시에는 해당 모듈이 package.json에 관리되어 있어도, electron-builder가 프로그램에 필요한 모듈이라 생각하지 않아 설치되지 않고 빌드되어, 참조시에 에러가 발생하는 모양이다. 2. 해결방법 해결책을 찾은 사이트: https://stackov..

1. 개요 create-react-app을 통해 만든 React App의 경우 기본으로 3000번 포트를 사용해서 구동된다. 그러나 해당 3000번 포트가 겹치는 등의 사유로 따로 포트를 지정해줘야 할 상황이 생길 수 있다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법 세 가지를 정리해보고자 한다. (아래 내용들은 3001 포트로 변경한다고 가정한다.) 2. 포트 변경 방법 2.1 명령어로 포트 설정하기 - React 프로젝트 폴더에서 아래와 같은 명령어를 사용해 React 앱을 실행시킨다. (명령어를 통해 구동 시 한 번만 적용된다.) PORT=3001 npm start 2.2 package.json파일 설정 수정하기 - React 프로젝트 폴더에 ".package.json" 파일을 찾아 아..

1. 전제사항 NodeJS를 설치한다. (14~16 Version) VSCODE를 설치한다. 2. React 프로젝트 생성 프로젝트를 생성하고자 하는 위치의 상위폴더에서 다음의 명령어를 입력한다. 아래의 PROJECT_NAME에 원하는 프로젝트 이름을 넣으면 된다. npx create-react-app 이 과정을 스타벅스에서 진행하는게 아니라면(원활한 네트워크 환경이라면) 보통 1~2분내외 정도를 기다린 후 다음과 같이 Happy hacking! 이라는 문구와 함께 프로젝트가 생성됨을 확인할 수 있다. 생성된 프로젝트를 VSCODE로 열면, 다음과 같은 구조로 되어있음을 확인할 수 있다. 프로젝트 최상위 위치에서 다음과 같이 npm start명령어를 통해 로컬에 웹사이트를 띄운다. $npm start 컴..

Vue에서 템플릿과 스크립트 간 데이터 양방향 바인딩을 위해 아래와 같이 "v-model" 를 사용한다. 따라서, 이 textarea에 작성되는 값이 "something"이라는 변수에 반영이 되고, 반대로 "something" 변수의 값이 변경되면 이 textarea가 갖는 value도 변경이 된다. 이 v-model은 기본적으로 다음과 같다: :value - 데이터 바인딩. "something" 이라는 변수의 값을 textarea의 value로 설정한다. @input - 이벤트 바인딩. 이 textarea에서 input 이벤트가 발생하면 설정해준 "something = $event.target.value" 코드를 실행한다. 만일 v-model 대신 :value를 작성하면 "something" 변수의 값..

vue에서 html태그 내에 사용하는 data 단방향 바인딩 예약어로는 ":value", 이벤트 바인딩을 하기위해 "@change" 예약어를 사용하며, 이 둘을 혼합하여 양방향 바인딩을 하기위한 예약어로 "v-model"를 사용한다. 기본적으로 jQuery는 본연의 event system을 사용하기때문에 Vue에서 jQuery가 발생한 이벤트를 잡지 못하기 때문에 혼용하는것은 좋은 방식이 아닌데, 피치못하게 Vue에서 Jquery를 사용하여 HTML 요소 내 값을 직접적으로 건드릴 경우가 있다. 이럴때에는 다음과 같이 해결할 수 있다. jquery 모듈이 없으면 설치해 준다. npm install --save jquery mounted() 생명주기 메서드 내에 jquery 이벤트를 추가해주어 해결할 수 ..

[운영환경] vue: 3.0.0 language: typescript 기존에 Vue2를 사용할때는 전역으로 데이터를 전달하기 위해 EventBus를 사용하였었는데, EventBus는 이제 Vue에서 추천하는 공식적인 방법이 아니라고 한다. 그래서 이 포스팅에서는 'mitt' 라는 외부 라이브러리를 이용하여 이벤트 버스를 구현하고자 한다. (공식 usage 가이드는 다음 페이지에서 확인할수 있다: https://www.npmjs.com/package/mitt#usage) 1. 설치 npm install --save mitt 2. 사용 2.1 mitt 글로벌 변수 선언 /src 폴더의 main.ts에서 다음과 같이 import하고, globalProperties로 등록해 준다. import { createA..

로드할 컴포넌트와 선택적인 config object를 파라미터로 주어 open 메서드를 호출하면 다이얼로그가 열린다. 이 open 메서드는 MatDialogRef의 인스턴스로 반환된다. let dialogRef = dialog.open(UserProfileComponent, { height: '400px', width: '600px', }); MatDialogRef는 열린 다이얼로그를 조작할 수 있게 제공한다. 이는 dialog를 닫고 다이얼로그가 닫혔을때 알림을 받을수 있도록 사용할 수 있다. 모든 알림 Observables는 다이얼로그가 닫힐때 발생된다. dialogRef.afterClosed().subscribe(result => { console.log(`Dialog result: ${result..

1. EventEmitter란? @angular/core EventEmitter @Output 디렉티브와 함께 컴포넌트 내에서 사용하여 사용자 정의 이벤트를 동기식 또는 비동기식으로 내보내는 역할을 하고, 해당 인스턴스를 구독하여 해당 이벤트에 대한 핸들러를 등록한다. class EventEmitter extends Subject { constructor(isAsync?: boolean): EventEmitter emit(value?: T): void subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription } 2. 사용 예제 먼저, 아래와 같이 "processStart", "..

1. 설치환경 본 문서는 다음과 같은 환경을 기준으로 작성되었다. 1) 운영체제 : 우분투18.04 버전 2) 사용자 계정 권한 : 관리자. 관리자 계정이 아닌경우 각 명령어 앞에 "sudo" 를 포함해서 실행. 2. 사전 조건 Angular 버전 v9.0.7 를 설치하기 위해서는 NodeJS(v10.13.0 이상)와 NPM(v6.11.0 이상)이 설치되어있어야 한다. 다음은 NodeJS와 NPM 설치를 설명한다. 1) NodeJS 설치 Angular공식 문서(https://angular.io/guide/setup-local) 에는 node 10.13.0 버전 이상 버전 사용을 요구 하고 있고, 본 문서에서는 12.16.1 LTS(Long Term Support) 버전을 설치하는 것을 기준으로 한다. 가..

div의 클래스에 (level != '1' || !isCreate) 라는 조건을 주어 참이면 'active disalbed', 거짓이면 'active' 를 먹일 수 있다. 혹은 'disabled' 만 따로떼어내어 [class.disabled] 이런식으로 조건을 검사하여 참일 시에만 적용할 수도 있다. public level: number = 1; public isCreate: boolean = true; (관련 ts 변수)