두 손끝의 창조자

샘플 코드를 받았는데 package.js는 없고 package.lock.js 파일만 있으면 npm install 이 안된다.package.lock.js에는 package.js가 가지고 있는 정보를 일정부분 보함하고 있으니 코드로 복원하자.const fs = require('fs');const lockFile = 'package-lock.json';const packageFile = 'package.json';fs.readFile(lockFile, (err, data) => { if (err) throw err; const lockJson = JSON.parse(data); const packageJson = { name: lockJson.name || 'example-project', v..

function moveElementInJson(json, sourceId, destinationId, newIndex) { // 복제된 JSON 생성 const updatedJson = JSON.parse(JSON.stringify(json)); // 소스 요소 찾기 const sourceElement = findElementById(updatedJson, sourceId); if (!sourceElement) { console.error('Source element not found.'); return null; } // 소스 요소를 제거 const removedElement = removeElementById(updatedJson, sourceId); // 대상 위치에 요소 삽입 co..

.env 파일은 node를 실행할 때 읽어서 앱의 환경변수값으로 쓸 수 있다. .env 파일은 node를 실행하는 디렉토리에 있어야 한다. react project에서는 빌드할 때 .env 파일을 읽어서 변수값과 소스를 묶은 후 js 파일을 만든다. 따라서 빌드할 때 환경설정 정보가 완비되어야 한다. 개발 서버에 올릴 때와 운영 서버에 올릴 때 환경 변수 값이 다른 경우 빌드 할 때 적절히 환경 변수 값을 교체한 뒤에 빌드해야한다. 환경 변수파일의 우선순위는 npm start 했을 때는 .env < .env.local < .env.development < .env.development.local 순으로 .env.development.local 파일이 가장 우선순위가 높다. npm build 했을 때는 ...

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 따라서 아래 코드의 실행결과는 두 함수 모두 1을 반환한다. const x = 1; function foo(){ const x = 10; bar(); } function bar(){ console.log(x); } foo(); bar();파이썬에도 비슷하게 동작한다. x = 1 def foo(): x = 10 bar() def bar(): print(x) foo() bar() 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다.=> 렉시컬 스코프

ES6(ECMA2015)에서 처음 소개된 import, export, const 같은 기능들은 ES6을 지원하지 않는 브라우저에서는 실행되지 않는다. ES6 문법으로 만들어진 소스 코드를 ES5 등 다른 형태로 변환을 시켜주는 트랜스 파일러 중에 한 아이가 Babel이다. import, export는 require, module.exports로 변환이 되는데 이 둘은 또 브라우저가 해석하지 못한다. 그래서 모듈을 가져오는 것들을 한 파일로 만들어서 require 같은 키워드를 사용하지 않아도 되도록 한 파일로 묶어줄 필요가 있다. 그럴 때 쓰는 것이 번들러라고 하고 번들러 중에는 webpack, rollup 등이 있다. ES6에서 ES5로 전환할 수 없는 기능은 변환하지 않고 그대로 놔두는데 이게 구형 ..

Formatter를 Prettier 사용하고 있다는 전제하에 settings.json 파일 열기 VS Code에서 cmd + shift + p 를 눌러서 커맨드 창을 연뒤 open settings(json)를 선택해서 settings.json 파일을 연다. 설정추가 아래 설정을 추가한다. "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true } } 세미콜론 자동 추가도 끄자 "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "semi": false } }

1. 프로젝트 생성 vue-cli 3.X vue create '프로젝트 명' vue-cli 2.X vue init webpack '프로젝트 명' 2. 프로젝트 구조 vue-cli 3.X vue-cli 2.X

JavaScript Array에서 Element 하나를 지울 때 delete Operator를 사용하여 지울 수 있습니다. 이 명령어로 삭제를 했을 때 해당하는 index는 undefined로 바뀌고 Array의 길이는 변하지 않습니다. var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[1];위 구문 실행 후 fruits의 상태는 원하는 결과 : ["Banana", "Apple", "Mango"] 처리 결과 : ["Banana", undefined, "Apple", "Mango"] 이렇게 되어 원하는 결과를 얻지 못하는데요, 원하는 결과를 얻기 위해서는 splice() Method를 사용 해야합니다.fruits.splice(1, 1);..