목록먹고살자/Javascript (8)
carrots-day

이벤트 (Event) 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 존대해도 간지나는 척 말하는건 좀 재수없다. 쉽개 말해서 브라우저에서 일어나는 브라우저에서의 사건을 말하는 것이다. 여기서 사건이란 사용자가 특정 행동을 했을 때 상호작용으로 인해 발생하는 것을 말한다. 예를 들어 당신이 브라우저 버튼을 클릭하면 클릭 이벤트가 발생하는 것이다. 이벤트 종류 전적으로 많이 사용하는 이벤트를 정리해봤다. (사실 다른 글에서 퍼옴 ㅎㅎ) 정리 잘해놓으셨네 ㅋㅋ.. JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결 ..

AJAX (Asynchronous JavaScript And XML) 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. AJAX란 주로 웹 서버(백엔드 소스)와 통신할때 사용하는 기법으로 브라우저 내장 XMLHttpRequest 객체를 통해 웹 서버와 비동기적 통신을 중개하는 것을 말한다. 비동기 처리에 관한 내용은 이전글에서 작성했으니 그거 보면된다. >> 동기/비동기 처리, callback/Promise/async & await [ 동기/비동기 처리, callback/Promise/async & await ] 동기/비동기 처리의 개념과 callback/Promise/async&await에 대해 알아보자 velog.io 에이잭스, 아작스등으로 불리는데 뭐가 맞다 ..

this this는 javascript 예약어로 수행하는 주체가 되는 인스턴스를 지칭하는 자기 참조 변수이다. 상황에 따라 this가 지칭하는 대상이 다르기 때문에 상황별로 어떤 것을 참조하는 지 알아둘 필요가 있다. 난 일을 할때 this에 대한 정확한 개념을 갖고 쓰진않았다. 그냥 여기서 this쓰면 이놈이겠지? 하면서 썼다. 근데 그게 맞았다. 내 자랑이 아니라 그만큼 this는 사용함에 있어 어느정도 추측이 가능하단 얘기다. 그래도 이 글을 읽는 사람들은 this의 사용 위치에 따라 정확히 어떤 것을 참조하는 지 알고 싶어서 읽는 것이라고 생각한다. 그래서 조사해봤다. this 특징 this의 값은 함수를 호출한 방법이 결정한다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 ..

Class 클래스(class)는 객체 지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이다. 객체를 정의 하기 위한 상태(멤버변수)와 메서드(함수)로 구성된다. class의 사전적 정의다. class는 객체지향프로그래밍(이하 OOP로 줄인다.)을 설명할때 빼놓을수 없는 컨텐츠 중 하나다. OOP에 있어 개발 프로세스는 다음과 같다. 1. 설계도에 해당하는 class를 구현한다. // iPhone7의 설계도를 만든다. class iPhone7 { ... } 2. 해당 설계도(class)를 활용하여 새로운 객체(instance)를 생성한다. iPhone7 newPhone = new iPhone7(); 3. 생성된 객체에 데이터를 설정하고 비즈니스 로직을 수행한다. n..

ES6+ ES란 ECMAScript의 약자이며 자바스크립트의 표준, 스펙을 나타내는 용어다. ES6+는 2015년에 개정된 javascript 스펙 ES6를 포함한 상위 스펙을 통칭하는 말이다. ES5 기준으로 개발을 시작했던 나로써는 ES6를 기점으로 javascript의 코드가 굉장히 간결하고 명확해졌다고 생각한다. 개발 업계는 역시 게을러지면서 발전한다.. ES6부터 추가된 기능 ES6+의 추가된 기능은 다음과 같다. 모든 기능을 전부 나열하기엔 양도 많고 범위도 정확하지 않아 내가 주로 사용하는 기능만 정리해본다. ES6에서 추가된 Promise와 classes는 다음 글에서 다루겠다. Variable (let, const) Arrow Functions (화살표 함수표현식) Template Lit..

변수 선언 모든 프로그래밍 언어가 그렇듯 어떤 데이터를 저장하고 관리하며 앱을 구현한다. javascript에서 변수를 선언하는 방법 중 var, let, const의 특징과 차이점에 대해 정리해본다. 기존의 javascript에서 변수 선언은 var로 할당하여 사용하였다. 하지만 기존 var의 경우 스코프에 대한 기준, 중복 선언 등 문제가 많았다. 그러고 보면 지금까지 잘도 해먹었다. 이를 개선하기 위해 ES6가 업데이트되고 변수 선언방식 추가되었는데 그것이 let과 const이다. var와 let, const는 다음과 같은 차이를 갖는다. 1. 중복선언 여부 [ 가능 : var | 불가능 : let, const ] var의 경우 같은 변수 명으로 중복 선언이 가능하다. 이것부터가 얼마나 기준이 러프..

Scope 식별자(객체)의 유효 범위를 말한다. 객체가 어디에 선언되었는지에 따라 유효 범위가 결정된다. 쉽게 말하자면 변수를 선언할 때 어떤 곳에 선언했냐에 따라 이 변수의 사용 가능 범위가 정해진다는 말이다. 기본적으로 스코프는 2가지 종류로 구분할 수 있다. 전역 스코프 : 코드 전체에서 참조 가능한 범위를 가진 스코프 지역 스코프 : 특정 조건에 따라 참조 범위가 다른 스코프 전역 스코프의 경우 같은 코드에 존재하면 어디서든 참조가 가능한 스코프이다. 지역 스코프의 경우 경우에 따라 참조 범위가 달라진다. 범위 산정의 기준은 4가지로 정리할 수 있다. 블록레벨 스코프 : 블록 ({}) 내에서만 참조 가능한 범위 함수레벨 스코프 : 함수 내에서만 참조 가능한 범위 동적 스코프 : 함수를 어디서 호출..

Javascript 웹 브라우저에서 구동되는 객체 기반의 스크립트 프로그래밍 언어 javascript는 웹브라우저 엔진에서 구동되는 스크립트로 HTML과 CSS랑 같이 사용되는 것이 일반적이며 node,js와 같은 자바스크림트 런타임을 활용하여 서버 프로그래밍도 가능하다. ECMAscript (ES) Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 위키 백과에는 저렇게 설명되어 있지만 javascript는 언어고 ECMAscript는 javascript의 표준이나 스펙을 의미한다. 그냥 javascript의 버전이라고 생각하면 된다. Javascript 구동원리 구동원리, 스크립트 엔진 구조를 찾다보면 다음과 같은 그림을 많이 봤을 것..