programing/Language
-
[JS] Date 객체 사용시 주의할 점programing/Language 2019. 8. 4. 14:16
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 시간을 다루기 위해서 Date객체를 사용하는 일이 많을 것입니다. 최근에 Date객체를 이용한 기능을 구현하면서 겪었던 점에 대해 공유하려고 합니다. month 프로그래머스 과제로 투두앱을 제작하는 과제가 있었는데, 그 때 월이 제대로 설정되지 않아서 정상적으로 작동하지 않았던 기억이 있습니다. 또한 최근에 부스트캠프에서 열차 도착 시간 예측 기능을 구현해야 했는데, 마찬가지로 또 요상한 동작을 하는 것을 경험했습니다. 이런 현상이 발생하는 이유는 바로 Date객체의 월(month)을 잘못 설정했기 때문입니다. const current = new Date(); console.log(current); // Sun Aug 04 20..
-
[JS] Scope, Execution context, Closureprograming/Language 2019. 8. 3. 18:30
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 해당 포스트는 JavaScript : Scope 이해를 읽고 간단하게 정리한 포스트입니다. 해당 내용은 ES3 기준이라는 제보가 있어, 참고에 ES5 이후 글을 링크해두겠습니다. 1. 유효범위(Scope) 유효범위(이하 스코프)는 변수와 매개변수의 접근성과 생존기간을 의미합니다. 스코프는 다음과 같이 두가지가 있습니다. 전역(global) 스코프 전역 스코프는 스크립트 내부 어디서도 참조가 가능합니다. 지역(local) 스코프, 함수(functional) 스코프 특정 함수 내부에서만 참조가 가능합니다. 위 그림에서, 전역 스코프에 해당하는 값들은 global_scope와 A함수입니다. A함수의 지역 스코프에 해당하는 값들은 lo..
-
[JS] SVG에 대해서programing/Language 2019. 8. 2. 10:29
SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, ..
-
[JS] CanvasRenderingContext2D 정리 1programing/Language 2019. 8. 1. 18:18
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 CanvasRenderingContext2D의 속성들에 대해 정리해보겠습니다. properties canvas read-only reference to the HTMLCanvasElement object that is associated with a given context. It might be null if there is no associated canvas속성은 HTMLCanvasElement객체를 가리키는 읽기 전용 속성입니다. 만약 관련 canvas객체가 없다면, 값은 null이 됩니다. example const canvas = document.getElementById('canvas'); const..
-
[JS] 태스크 큐와 이벤트 루프programing/Language 2019. 7. 31. 18:33
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 태스크 큐와 이벤트 루프에 대해 알아보도록 하겠습니다. 해당 포스트는 toast meetup의 김동우님의 글을 요약 및 정리한 글입니다. 자바스크립트와 이벤트 루프 1. ECMAScript와 이벤트 루프 ECMAScript 에는 동시성이나 비동기와 관련된 언급이 없다 (ES6부터 살짝 변화가 있다) V8과 같은 자바스크립트 엔진은 단일 호출 스택(Call Stack)을 사용하며, 요청이 들어올 때마다 해당 요청을 순차적으로 호출 스택에 담아 처리할 뿐이다. 이 자바스크립트 엔진을 구동하는 환경, 즉 브라우저나 Node.js가 비동기와 동시성을 담당한다. 위와 같이, setTimeout이나 XMLHttpReque..
-
[Node] 동일 출처 정책과 CORS와 에러 해결법programing/Language 2019. 7. 29. 11:54
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 프론트에서 http 요청을 할 때 심심하면 나오는 CORS문제 해결법에 대해 알아보도록 하겠습니다. 동일 출처 정책(same origin policy) Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy pre..
-
[JS] spread operator을 이용한 객체 복사programing/Language 2019. 7. 27. 20:01
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 전개 연산자(spread operator)를 이용해서 간편하게 객체를 복사하는 방법에 대해 알아보겠습니다. 배열 const arr = [1, 2, 3]; const cp = [...arr]; cp.push(4); console.log(arr); // [1, 2, 3] console.log(cp); // [1, 2, 3, 4] 배열의 복사는 [...arr]를 이용하면 됩니다. 객체 const obj = { a: 1, b: { c: 2 } }; const cp = {...obj}; cp.a = 2; cp.b.c = 3; console.log(obj); // {a: 1, b:{c: 3}} console.log(cp)..
-
[JS] prototype을 이용한 상속programing/Language 2019. 7. 27. 17:09
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 prototype을 이용한 상속과, 다양한 실험을 해보도록 하겠습니다. prototype의 종류 (사진을 제공해주신 나모씨에게 감사의 말씀 드립니다..) [[prototype]] 혹은 __proto__ 해당 객체의 프로토타입을 가리키는 포인터입니다. 예를 들어, Person 생성자 함수로 만든 인스턴스 person.__proto__는 Person.prototype입니다. 또한, Person.__proto__는 Function.prototype입니다. prototype 함수 객체에만 존재하는 속성입니다. 해당 함수가 생성자 함수로 사용되었을 때 생성되는 인스턴스의 프로토타입에 넣을 대상입니다. 예를 들어, Per..