Coding Story

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D CanvasRenderingContext2D - Web APIs | MDN The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects. developer.mozilla.org canvas는 context를 갖고있는 html의 요소로, 그 안에서 픽셀들을 다룬다. CanvasRende..

스코프란? 모든 식별자(변수명, 함수명, 클래스명 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프는 식별자가 유효한 범위를 말한다. 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. 스코프의 종류로는 전역 스코프와 지역 스코프가 있다. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조할 수 있다. 지역이란 함수 몸채 내부를 말한다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프(중첩 함수)에서 유요하다. 스코프 체인 스코프가 계층적으로 연결된 것을 스코프 체인이라 한다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프..

Reset CSS 각 브라우저마다 제공하는 기본 스타일이 다르다. Reset css란, 브라우저 간의 요소들 차이를 없애 디폴트 값으로 초기화시키는 코드다. reset.css 파일을 추가하고, https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a ..

함수란? 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위 매개변수 : 함수 내부로 입력을 전달받는 변수 인수 : 입력 반환값: 출력 함수 호출: 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 지시하는 것 -> 반환값 반환 함수를 사용하는 이유 코드의 재사용 유지보수의 편의성 코드의 신뢰성 높임 코드의 가독성 향상 함수는 함수 리터럴로 생성할 수 있다. 함수 리터럴은 평가되어 값을 생성하며, 이 값은 객체다. 즉, 함수는 객체다. (함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 JS의 특징이다.) 일반 객체와 다른 점은 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 함수 정의 함수 선언문 함수 선언문은 표현식이 아닌 문이다. 피연산자로 사용할 수 없다. 함수 ..

데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다. 원시 타입과 객체 타입은 세가지 측면에서 다르다. 1. 원시 값은 변경 불가능한 값인 반면, 객체는 변경 가능한 값이다. 2. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장되는 반면, 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 3. 값에 의한 전달- 원시 값이 복사되어 전달 참조에 의한 전달- 참조 값이 복사되어 전달 원시 값 원시 값은 변경 불가능한 값이다. 그렇기 때문에 변수 값을 변경하기 위해 원시 값을 재할당 하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 불변성이라 한다. 문자열 자바스크립트는 개발자의 편의를 위해 원시 타입인 문자열 ..

객체란? 원시 타입의 값은 변경 불가능한 값이지만 객체는 변경 가능한 값으로, 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다. 프로퍼티: 객체의 상태를 나타내는 값. 키와 값으로 구성 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작 var counter = { num: 0, // 프로퍼티 //num : 프로퍼티 키, 0 : 프로퍼티 값 increase: function() { // 메서드 this.num++; } }; 객체 리터럴에 의한 객체 생성 리터럴은 사람이 이해할 수 있는 문자, 약속된 기호를 사용해 값을 생성하는 표기법이다. 객체 리터럴은 객체를 생성하기 위한 표기법이다. 객체 리터럴은 값으로 평가되는 표현식이다. 이 때 쓰이는 중괄호는 코드 블록을 의미하지 않기 때문에 중괄호 ..

타입 변환이란? 타입변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는것 암묵적 타입 변환(타입 강제 변환) : 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환 되는 것 암묵적 타입 변환 자바스크립트 엔진은 표현식을 평가할 때 문맥(Context)에 고려하여 암묵적 타입 변환을 실행한다. 문자열 타입으로 변환 : 숫자, 불리언, null, undefined, 심벌, 객체 타입 뒤에 +' ' 을 붙인다. 숫자 타입으로 변환 : 산술 연산자, 비교 연산자의 숫자 타입이 아닌 피연산자를 숫자 타입으로 바꾼다. ' ', [ ], null, false -> 0 true -> 1 u..

데이터 타입은 값의 종류를 말한다. 숫자 타입 정수와 실수를 구분하는 c나 자바와 달리, 자바스크립트는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리하며 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 자바스크립트는 2, 8, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석된다. 문자열 타입 자바스크립트에서 가장 일반적인 문자열 표기법은 작은 따옴표를 사용하는 것이다. 자바스크립트의 문자열은 원시 타입이며, 변경 불가능한 값이다. 문자열이 생성되면 변경할 수 없다. 템플릿 리터럴 백틱(` `)을 사용해 표현한다. 멀티라인 문자열 - 줄바꿈(개행)이 이스케이프 시퀀스를 사용하지 않고도 허용되고, 공백도 있는 그대로 적용된다. 표현식 ..

값 값은 식(표현식)이 평가되어 생성된 결과를 말한다. var sum = 10 + 20; // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. 값을 생성하는 가장 기본적인 방법은 리터럴을 사용하는 것이다. 리터럴 리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글등) 또는 약속된 기호('', "", ., [], {}, // 등)를 사용해 값을 생성하는 표기법이다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가에 값을 생성한다. 표현식 표현식은 값으로 평가될 수 있는 문이다. var score = 100; // 100은 리터럴이다. var score = 50+50; // 50+50이 평가되어 숫자 값 100생성 score; // ->100 변수 식별자..

변수란 무엇인가? 왜 필요한가? 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 10+20 이와같은 코드를 실행 하면 숫자 값 10과 20, 결과 값인 30은 메모리상의 임의의 위치(메모리 주소)에 2진수로 기억(저장)되고 CPU는 이 값을 읽어들여 연산을 수행한다. 이때 연산 결과를 재사용 하기 위해 메모리 주소를 통해 값에 직접 접근하는 시도는 올바른 방법이 아니다. 코드가 실행될 때마다 값이 저장될 메모리 주소가 변경되기 때문이다. 이 때문에 프로그래밍 언어는 변수라는 매커니즘을 제공한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 값을 저장하고 참조..