에르노트

뷰(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..

자바스크립트를 독학할 때 유용한 웹페이지들을 몇 개 정리해본다. 1. MDN web docs JavaScript JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache developer.mozilla.org 가장 기본이 되는 공식 문서다. 영어와 한국어를 비롯한 매우 다양한 언어를 지원한다. 다만 번역 상태..

비쥬얼 스튜디오 코드의 확장기능(Extension)을 다운로드 받으려는데 문제가 생겼다. 'XHR failed'라면서 아예 다운로드가 실패해버리는 것이다. github 등에서 이미 관련 문제로 논의가 이어져고 있는 듯하고, DNS 관련 문제인듯하다. 그래서 해결법으로 제시된 DNS 서버 주소를 설정도 따라해봤지만 실패했다... 그렇게 좌절하던 중, 어차피 확장 기능도 애초에는 다 파일로 제공되던 것이라는 것을 깨달았다. 당연히 Visucal Studio Marketplace는 잘 갖춰져있었고 손쉽게 vsix 파일을 구할 수 있었다. 그리고 Extensions 옵션에서 우상단 메뉴를 클릭하면 'Install from VSIX'라는 옵션이 있다. 여기서 마켓플레이스에서 내려받은 vsix 파일을 선택하면 XH..

여타 프로그래밍 언어들처럼 자바스크립트도 배열을 자료형으로 제공하며, 이 배열을 다루기 위한 Array를 내장 객체로 제공한다. Array Array The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects. developer.mozilla.org 자바스크립트 배열은 길이가 가변적이며 요소의 타입에도 제약이 없다는 점에서 기존 언어의 배열보다도 파이썬의 리스트와 유사하다. 그래서 JS 배열에는 [1, 'a', true]와 같이 자료형과 무관하게 아무 요소나 다 들어갈 수 있다. 이게 싫어서 타입을 딱 정해놓고 싶다면 ES6에 새롭게..

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

Math 클래스 String 클래스 Date 클래스 Math 클래스 Math Math is a built-in object that has properties and methods for mathematical constants and functions. It’s not a function object. developer.mozilla.org 자바에서처럼 자바스크립트의 Math 라이브러리는 static 클래스(모든 프로퍼티와 메서드가 static)이다. 그래서 객체 생성 과정 없이 바로 Math.func() 형태로 사용할 수 있다. 여타 언어가 제공하는 수학 관련 클래스와 마찬가지로 자연상수 e나 원주율 pi 등의 상수를 제공하며 절대값이나 제곱근 및 랜덤 등의 연산도 제공한다. 또 sin, cos, t..

자바스크립트에서 일정 시간마다 특정한 동작을 수행하고 싶을 때는 자체적으로 제공되는(내장 함수) 타이머 함수를 사용할 수 있다. - setInterval() 일정 시간마다 주기적으로 특정 구문을 실행하는 기능 - setTimeout() 일정 시간이 지난 후 특정 구문을 딱 한번 실행하는 기능 - clearInterval() 실행중인 타이머 함수를 멈추는 기능 setInterval() WindowOrWorkerGlobalScope.setInterval() The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed ti..

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

사지방에서 구름IDE로 코딩 공부를 시작하려던 참에 군 복무중인 개발자(?)들을 위한 아주 좋은 사이트를 알게 되었다. 국방오픈소스아카데미라는 군인들만을 위한 코딩교육 사이트이다. 웹, 앱, 기초 프로그래밍 언어뿐만 아니라 인공지능(AI)과 빅데이터 등의 컴퓨터과학 과목들도 개설되어 있다. 그리고 무엇보다 군 장병 및 관계자들을 대상으로 100% 무료로 전 강좌가 제공된다는 점에서 주목할만하다. 사이트 제목답게 오픈소스 교육을 강조하고 있다. 몇 과목 이상을 수료하면(수료 기준은 80% 이상 수강완료) 하반기에 열리는 오프라인 집체교육에도 참여할 수 있다는는데, 이때 [공개SW 활용 및 참여] 과정은 필수 과정에 포함되어 있다. 또한 Git/Github에 대한 강좌도 정식으로 제공되고 있는데, 아직 들어..

앱에 광고를 게제해서 수익을 창출하기 위해 페이스북 오디언스 네트워크(Facebook Audience Network)를 사용해왔다. 그러던 중 오디언스 네트워크 SDK의 버전이 오래되었으니 최신 버전으로 업데이트하라는 알림을 받았고, 무심코 앱 단위 build.gradle에서 버전을 높여주었다. (5.5 -> 5.10.0) 그랬더니 다음과 같은 문제가 발생하기 시작했다.. 해당 문제는 기존에 안드로이드9에서 발생하던 ERR_CLEARTEXT_NOT_PERMITTED 에러와 연결되어 있다. 그래서 페이스북에서도 이 해결법대로 자체적인 해결 가이드(네트워크 보안 구성)를 따로 마련해두었다. 즉 그대로 따라하기만해도 손쉽게 해결할 수 있다는 것이다. 여기서 핵심은 오디언스 네트워크가 localhost를 캐싱에..