본문 바로가기

728x90

Category

(384)
ESLint와 Prettier 설정하기 ESLint ESLint는 문법검사 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. Prettier-Code formatter 코드 스타일을 자동으로 정리해주는 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. .prettierrc를 프로젝트의 루트 디렉토리에 만들어줘야 합니다. (설정예제) { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, } 정렬은 파레트명령어(F1 또는 ctrl + shift + p)에서 format selection(부분정렬) 또는 format document(전체정렬) 를 입력해야합니다. 단축키는, 부분 정렬 하려면 뭔하는 부분 드래그하고 ctrl + k + f 하면 됩니다. 자동정..
Object.create() 란 ES5 Object.create() 는 ES5 문법입니다. ES6 에서는 new 문법을 사용합니다. The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. 새로 생성될 객체의 프로토타입 객체를 넣어주면, 새로운 객체가 생성됩니다. 아래의 예제를 보면 어떻게 작동하는지 쉽게 알수있습니다. const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me..
JavaScript assign 문법 a = { a: '1', b: '2', c: '3' } // {a: "1", b: "2", c: "3"} Object.assign(a, function () { return { d: '4' }; }()); // {a: "1", b: "2", c: "3", d: "4"} Object.assign(a, {e: '5'}); // {a: "1", b: "2", c: "3", d: "4", e: "5"} Object.assign(a, {f: function() { return 'hello'}}); /* a: "1" b: "2" c: "3" d: "4" e: "5" f: ƒ () */ Object.assign(a, {g: function() { return 'hello'}()}); /* a: "1" b: "2" c..
gitignore 문법 디렉토리 예외처리 temp/velbi/test.jpg 이럴때 velbi 디렉토리를 예외처리하고 싶으면 temp/velbi/ 가아닌 그냥 velbi/ 라고 적으면 무시된다.
오픈소스 첫 PR 후기 '오픈소스' 이제는 누구나 알고있는 단어다. 하지만 친구들끼리 PR하는 것이 아닌, 유명 리포지터리에 PR한다는 것은 뭔가 어렵게 느껴졌다. 최근 WebGL 엔진에 관심에 생겼고, 그 중 스냅챗에서 인수한 PlayCanvas 라는 WebGL 엔진을 사용하고 있었다. 사용하다 이상하다 싶은 것들은 이슈에 등록했고, 이슈에 등록하니 신기하게 반응이 바로바로 왔다. 그러던중 path 관련 함수를 사용하기위해 문서를 확인하니 관련 API 문서가 없었다. 소스를 확인하니 JSDoc 주석으로 문서를 생성을 하는데, 최근 만들어진 함수는 아직 주석이 안달려있었다. 그래서 주석을 달아 첫 PR을 했다. https://github.com/playcanvas/engine/pull/1809 [DOCS] Add documen..
Arrow function과 lexical binding function을 콜백으로 쓸때 스코프가 달라져서 this를 다른데 옮기거나, bind 함수를 사용했었다. const that = this; app.assets.loadFromUrl('path/file', 'material', function (err, asset) { that.shadow.model.material = asset.resource; }); 이런식이나 app.assets.loadFromUrl('path/file', 'material', function (err, asset) { this.shadow.model.material = asset.resource; }.bind(this)); 이렇게 사용했는데 그냥 Arrow function 쓰면 렉시컬 스코프(선언되는 위치가 중요)로 바인딩되서 위..
function 선언 방식별 차이점(함수 선언식, 표현식) 오늘 회사에서 코딩하고 있는데, 누가 두개의 차이점을 물어봤다. 함수 선언식 function sayHello() { console.log('Hello'); } 함수 표현식 var sayHello = function() { console.log('Hello'); } 함수 표현식은 호이스팅에 영향을 받지않는다. 그래서 클로져나 콜백으로 자주 사용된다. joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/ 함수 표현식 vs 함수 선언식 (기본) 자바스크립트 함수 표현식과 함수 선언식에는 어떠한 차이점이 있는지 알아봅니다. joshua1988.github.io
[git] pull과 fetch의 차이 pull 원격 저장소로부터 필요한 파일을 다운 + 병합 지역 브랜치와, 원격 저장소 origin/master 가 같은 위치를 가리킨다. fetch 원격 저장소로부터 필요한 파일을 다운 (병합은 따로 해야 함) 지역 브랜치는 원래 가지고 있던 지역 저장소의 최근 커밋 위치를 가리키고, 원격 저장소 origin/master는 가져온 최신 커밋을 가리킨다. 신중할 때 사용한다. 사용하는 이유? 원래 내용과 바뀐 내용과의 차이를 알 수 있다 난 주로 fetch를 사용함

728x90