에르노트

vue cli에서 yarn serve로 프로젝트를 실행했을 때 위와 같은 에러를 겪었다. 일단 컴파일은 되서 결과 화면은 보이지만 핫 리로딩이 동작하지 않았으며 아예 새로고침으로도 수정 사항을 즉각적으로 반영할 수 없었다. 이는 미세한 부분 하나하나를 수정할 때마다 매번 새롭게 컴파일해야만 결과를 볼 수 있는 치명적인 문제를 야기한다. 그런데 해결법은 매우 매우 간단하다. 프로젝트의 package.json 파일에서 serve 명령에 대해 명시적으로 host 플래그를 붙여주면 된다. 그런고로 로컬 환경에서 빌드한다면 간단히 --host localhost 를 붙여주면 끝이다! 클라우드 환경에서 개발한다면 localhost 자리에 적절한 호스트 ip를 넣어주면 될 것이다.

뷰(Vue)에서는 데이터 바인딩과 각종 디렉티브를 활용하여 CRUD를 간단히 구현할 수 있다. [삽입] addMemo(){ if(this.newMemo.length == 0){ alert("Fill in the blank!") return } this.list.push(this.newMemo) } [삭제] deleteMemo(targetMemo){ let index = this.list.findIndex(memo=>memo==targetMemo) if(index != -1) this.list.splice(index, 1) } [수정] setEditMode(targetMemo, idx){ this.newMemo = targetMemo this.state = EDIT_MODE.UPDATE this.updat..

React에서와 마찬가지로 구름IDE에서 Vue 프로젝트를 돌리면 원격 서버의 localhost에 대해 자체 웹서버가 돌아간다. 즉 내 컴퓨터의 localhost:8080으로 접속해서는 절대로 구름IDE에서 작업중인 프로젝트를 확인할 수 없다. 다행히 구름 IDE에서는 URL과 실행 포트 매핑 기능을 깔끔하게 제공하고 있으므로 그대로 이용하면 된다. 그래서 예상대로라면 위에처럼 8080포트에 대해 URL을 등록해주기만 하면 끝이어야한다. 실제로 3000포트를 이용하는 React에서는 이걸로 끝이었다. 그런데 Vue에서는 안 된다. 다행히 구글링 결과 모 커뮤니티에 구름IDE 담당자께서 직접 달아주신 해결책을 찾을 수 있었다. localhost 대신 0.0.0.0을 이용하면 된다고 한다. 호스트 설정을 바..

구름IDE에서는 자체적으로 React 템플릿을 제공하고 있으므로 손쉽게 React 프로젝트를 만들 수 있다. 그러나 많은 부분이 자동으로 설정되고 이런저런 파일들이 덕지덕지 붙으면서 자유도가 줄어들고 입맛대로 설정하기 까다롭다는 단점이 있다. 그래서 빈 프로젝트(Blank)를 생성해서 리액트 개발 환경을 직접 세팅하는 과정을 정리해본다. 개괄적인 진행순서는 다음과 같다. 프로젝트 생성 및 관련 패키지 설치(사전 준비) NVM 설치하기 노드제이에스 설치하기 yarn 설치(선택) 리액트 앱 생성 및 구동 1. 프로젝트 생성 및 관련 패키지 설치(사전 준비) 먼저 구름IDE에서 빈 프로젝트를 생성해준다. 우분투 버전은 16.04 또는 18.04를 선택할 수 있는데 아무거나 골라도 무방하다. (여기서는 18.0..