오늘의 CODE

li에서 v-for문을 만들던 중 아래와 같은 에러가 뜸 원인 v-for 사용 시 key 값이 요구되므로 필수로 입력해줘야 함. 결과 v-bind:key 속성 추가 시 에러 없어짐

브라우저에서 지원하지 않는 코드를 사용 가능하도록 하게 하는 코드 조건이나 플러그인(추가 기능)을 의미한다. 예를 들어 ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assign() 등을 사용 가능한 객체로 만들어준다. 브라우저(특정 엔진)에서 지원하지 않는 코드를 사용할 때 바벨(babel)과 같은 트랜스파일러를 사용하는데 babel에서 사용되던 babel-polygill 모듈이 Babel v7.4.0부터 더이상 사용되지 않으므로 ECMAScript 기능을 대체하는 core-js/stable, 제네레이터 함수 기능을 대체하는 regenerator-runtime/runtime을 사용한다. core-js core-js Standard library www.npmjs.com ..

trim() 메서드는 문자열 양 끝의 공백을 제거함. 여기서 공백이란 모든 공백문자 space, tab, 등과 같은 모든 개행문자를 의미함 if(!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); }; } return str 문자열의 양쪽 공백을 제거한 후 문자열을 반환 str 문자열에 공백이 없어도 예외가 발생하지 않고 새 문자열 반환(본질적으로 str의 복사본이라고 할 수 있음) 한쪽 끝의 공백만 제거한 문자열을 반환하려면 trimStart() 또는 trimEnd() 메서드를 사용할 것 폴리필(polyfill) 다른 코드 전에 아..

객체를 합치거나 합칠 때 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에서도 사용할 수 있음. (object.assign은 폼(form) 등에 빈번히 이용됨) 1. 오브젝트를 합치기 const target = {a: 1, b: 2} const sources = {c: 3, d: 4} const returnedTarget = Object.assign(target, sources); console.log(target); // { a: 1, b: 2, c: 3, d: 4 } console.log(sources); // { c: 3, d: 4 } console.log(returnedTarget); // { a: 1, b: 2, c: 3, d: 4 } 2. 같은 프로퍼티를 가..

ie8이하 지원 X DOMContentLoaded HTML이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img, etc.)가 아직 로드되지 않았을 때 실행하는 이벤트로 DOM이 준비 상태이기 때문에 DOM 노드를 제어할 수 있음. jQuery의 ready와 동일하다고 볼 수 있다. load 브라우저의 모든 리소스(img, style, script, etc..)가 로드되었을 때 실행하는 이벤트로 모든 리소스가 로드된 시점이기 때문에, img 사이즈와 같은 값을 얻을 수 있다. beforeunload / unload 페이지를 떠날 때 실행하는 이벤트로 변화에 따른 저장 여부 및 페이지 이탈 여부를 확인할 수 있다. 1. load보다 DOMContentLoaded를 사용하는 이유? load는 모..

현재 열린 포트 목록 확인 lsof -PiTCP -sTCP:LISTEN 찾기 lsof -i :포트넘버 Kill kill -9 (확인한 PID)

NVM(Node Version Manager)는 Node.js의 버전을 변경, 사용해야 할 때 사용할 수 있는 도구이다. NVM은 협업을 하거나 다양한 프로젝트를 동시에 진행할 때 개발툴의 버전 호환문제를 해결하기 위해 사용한다. 루비의 rvm, rbenv나 파이썬의 pyenv도 같은 기능을 하는 도구이다. 아래 설명은 macOS 기준이다. (macOS 10.15부터 기본 셸은 zsh임) 👉 설치 방법 macOS 기준으로 nvm을 설치하기 가장 간단한 방법은 패키지 관리자인 Homebrew를 사용하는 것이다. brew -v 명령어를 입력해 설치여부를 확인한다. 이미 설치가 되어있다면 설치되어있는 Homebrew의 버전 정보를 확인할 수 있으며, 설치되지 않은 경우 아래와 같은 내용을 확인하게 될 것이다...

CORS란? Cross Origin Resources Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘을 말함. 요청 시에는 cross-origin HTTP에 의해 요청되며, 동일 출처 정책(same-origin policy)에 의해 CORS 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저에서 보안목적으로 차단하게 되어 정상적으로 데이터를 받을 수 없게 됨. * 동일 출처 정책 (same-origin policy) 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 중요한 보안 방식으로 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는 데 도움이 됨. 예시) localhost:3000으로 개발을 진행하며 서버는 locahost:80..

콜백함수 일반 함수가 입력(파라미터)과 출력(리턴값)있다라고 생각할 경우, 출력값이 없고 그 대신 콜백 함수를 입력받는 함수들이 있다. 콜백 함수는 다른 함수에 인자로 넘어가서 실행될 로직을 담는다. function userInfo(id, cd) { const user = { id: id, name: 'User' + id, email: id+'@test.com', }; cb(user); } userInfo(1, function(user) { console.log('user: '+user); }); // 결과 // user: {id:1, name:'User1', email: '1@test.com'} userInfo() 함수의 두번째 파라미터로 콜백 함수를 선언 userInfo()가 실행될 때 cb 매개 변..

메서드를 수행하기 위해서는 객체를 통해서 해당 메서드를 수행하여야 하며, 동작을 수행하는 주체는 객체이므로 객체에게 그 동작을 수행하라고 지시해야 함. 함수는 함수 자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행함. 또한 자바스크립트 객체에서 프로퍼티 값이 함수인 경우, 일반 함수와 구분하여 메서드라고 함. (자바스크립트 객체 - 키 key와 값 value으로 구성된 프로퍼티의 집합) 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값 프로퍼티 값: 모든 값 let foo = {}; foo.a = 1; foo.b =2; foo.sum=function() {console.log(foo.a+foo.b);}; foo.sum(); // 3 * 프로퍼티 키에 문자열이나 symbol값..