![]()
contenteditable 👍 contenteditable 사용자가 요소를 편집할 수 있게 하는 옵션이다. HTML 태그를 입력하더라도 vue의 v-html과는 달리 문자열 그대로 표시한다. https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable true: 편집 가능 / false: 편집 불가능 ex) textarea 의 값만 표기하고, 변경 불가능하게 할 경우 contenteditable = false disabled 예) textarea 에 입력한 값을 div 에 표시 (vuejs) {{ contents }} contenteditable에 css 속성 적용 // .scss div[contenteditable] ..
![]()
v-html 👍 v-html vue에서 html 그대로 적용시킬 경우, v-html 옵션을 이용해서 적용 가능하다. ex) TextEditor(quill)에서 입력한 내용을 표시할 때, 값을 html 로 반환하기 때문에 html을 그대로 표시하기 위해서는 v-html을 이용한다. vue에서 v-html사용 시 XSS 공격 예방을 위해 eslint 에서 경고(warning)를 발생한다. 경고를 없애기 위해서는 코드 최상단에 아래 코드를 추가해주면 된다. 참고: https://github.com/vuejs/eslint-plugin-vue/issues/260
![]()
[Error] Module parse failed: Unexpected token (28:51) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js 위 에러의 핵심은 ?? 이다. Nullish coalescing operator라고 불리는 ??은 ES2020에서 소개되었으며, null과 undefined인 경우 뒤의 값을 갖는 연산자이다. || 와 다른 점은 falsy값 (0 또는 '')일때는 앞에 값을 갖는 다는 것이다. const a = null ?? 'A'; // 결과: A const b = undefined ?? 'B'; // 결과: B const c = 0 ?? 'C'; // 결과: 0 const d ..
![]()
[NodeJs][Error] cannot find module 'node-gyp/bin/node-gyp' mac osx에 부팅디스크로 설치한 windows에 `npm install` 을 하려하니 아래와 같은 문구가 나왔다. osx에서 종종 발생되는 문제인듯 싶다. ☝️ 해결방법 해결 방법은 생각보다 간단하다. 1. PowerShell 또는 vscode 등 linux 명령어를 사용할 수 있는 터미널을 관리자모드로 실행시킨다. (관리자 모드로 여는게 핵심!) 2. 아래 명령어를 순차적으로 실행해서 설치한다. * node-gyp는 이미 global로 설치되어 있다면 지우고 다시 설치하는 것을 추천한다. 위치: C:\Program Files\nodejs\node_modules\npm\node_modules\no..
[Javascript] 호이스팅(hoisting) * 호이스팅? - '끌어올리다'라는 의미. - 변수 정보를 수집하는 과정을 더웃 이해하기 쉬운 방법으로 대체한 가상의 개념. > 출처: 도서 '코어자바스크립트' ⭐ 호이스팅 규칙: 함수 선언, 변수명을 위로 끌어올리고 할당과정은 원래 자리에 그대로 남겨둔다. ⭐ 아래 코드를 실행해보면 어떻게 될까? 한번 머릿속으로 예상해보자. var x = 1; console.log('x - (1): ', x); console.log('y - (1): ', y); console.log('a - (1): ', a); console.log('b - (1): ', b); console.log('c - (1): ', c); e(3); var y = 2; function a() ..
![]()
babel plugin 중 하나인 babel-plugin-transform-remove-console를 사용하여 한 번에 지울 수 있다. 1. babel-plugin-transform-remove-console 설치 babel-plugin-transform-remove-console $ npm install --save-dev babel-plugin-transform-remove-console 2. nuxt.config.js에 설정 export default { build: { babel: { // 옵션 있는 경우 plugins: [['transform-remove-console', { "exclude": [ "warn" ] }]], // 옵션 없는 경우 plugins: [['tra..
