Javascript

함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록으로 이름과 매개변수를 갖으며 필요할 때 호출하며 코드블록에 담긴 문을 일괄적으로 실행 할 수 있어 재사용측면에서 매우 유용합니다. 자바스크립트에서의 함수는 일급객체로 값처럼

함수 내부에서 return 키워드를 사용하는 것은 return 뒤에 작성된 내용이 함수 밖으로 반환된다는 것도 의미하지만 return 키워드가 사용된 부분에서 함수가 종료된다는 것도 의미합니다.따라서 아래와 같이 return키워드 이후 작성된 console코드는 실행되

화살표함수 vs 일반함수 1. 함수 최소화 일반함수와 달리 일부 내용을 생략하여 축약형으로 함수 최소화가 가능합니다. > 화살표 함수의 축약 실행문을 제외하고 {}와 return을 생략해줄 수 있습니다. 단, return 키워드 앞에 특정 로직이 들어 있다면 축약

_"코딩 공부를 시작했는데, 외계어를 배우는 것 같아" _"새로운 건 항상 어렵죠~" 정신이 번쩍 드는 대답이었다. 다시 한번 정신 차리고 늘어지지 않도록, 흥미가 사라지지 않도록 다잡아야겠다! Class : ES6에 추가된 스펙 지금까지는 비슷한 형태의 객체

자바스크립트에는 전역공간 말고도 전역객체가 있습니다. 이 전역 객체는 누구나 쉽게 접근을 할 수 있습니다.브라우저에서는 window객체가 전역객체입니다. 실제로 window의 객체를 살펴보면 수많은 웹API들과 document객체들이 있습니다.즉, 자바스립트는 인터프리

호이스팅이란 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 의미합니다.자바스크립트는 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, function\*, class)을 호이스팅(Hoisting)합니다.함수 선언문

즉시 실행 함수(IIFE)는 Immediately-Invoked Function Expression로 함수를 만들자마자 바로 실행시킬 수 있는 함수를 이야기합니다.익명함수를 소괄호로 감싼 후 소괄호 뒤에 소괄호를 열고 닫습니다. 아래와 같이 함수의 이름을 따로 만들지

HTTP(HyperText Transfer Protocol, 문화어: 초본문전송규약, 하이퍼본문전송규약)는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. 즉, HTML 문서를 주고받는 데에 쓰는 프로토콜입니다.여기서 프로토콜이란 일종의 통신규약으로, 컴퓨터에서 네

자바스크립트 생태계가 급격하게 발전했던 시기가 있는데 이는 바로 Ajax때문입니다. Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. (요즘은 XML보다 JSON

XMLHttpRequest 앞서 Ajax에 대해 공부를 해보았습니다. Ajax에서 마지막 X가 바로 XML입니다. 하지만 지난 시간에 이야기를 드렸듯이 요새는 XML보다 Json을 더 많이 사용합니다. XMKTttpRequest도 XML에서 유래가 되었지만 마찬가지

Fetch API의 경우 XMLHttpRequest에서 부족했던 부분을 상당 부분 보완을 했습니다. 이로 인해 굳이 XMLHttpRequest를 사용할 필요 없이 Fetch API를 사용함으로써 많은 것을 할 수 있게 되었습니다.과거에는 XMLHttpRequest가 불

웹이 발전하는데 있어 AJax가 굉장히 큰 영향을 끼치게 되었습니다. 이 JSON또한 마찬가지로 웹 생태계에 큰 영향을 미쳤습니다.JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반

JS에서 this 키워드의 경우 뿐만 아니라 다른 언어들에도 존재를 합니다만 특히, 에서 이 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 이 키워드는 내부적으로도 엄격모드와 비엄격모드에서 조금 다르게 동작을 하며 다른 언어들보다 조금 더 어려운 개념을 가

다양한 발전을 이룬 자바스크립트이지만, 내부적으로는 프로토타입이 가지고 있는 모델을 그대로 가지고 있습니다. 이렇게 자바스크립트는 프로토타입 기반의 언어입니다. 이는 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미입니다. 프

생성자 함수를 통해 인스턴스를 여러개 만들어 낼 수 있습니다. 이 생성자는 영어로 contructor입니다. 이 생성자로는 예전에 많이 사용하던 고전적인 생성자함수, 그리고 es2015부터 새로 나온 class에도 생성자 함수가 있습니다.또한 생성자 함수는 프로토타입

언더스코어가 두번 나오기 때문에 던더프로토라고도 불리웁니다. 이 던더프로토는 브라우저에서 비표준으로 제공을 했던 녀석입니다.여기서 비표준이란 언어자체에서 제공을 하는 것이 아니라 브라우저에서 별도로 제공을 하며 생겨나게 됩니다. array.prototype을 알고 싶을

프로토타입 체인은 \_\_proto\_\_의 특징을 이용하여, 부모 객체의 프로퍼티나 메서드를 차례로 검색하는 것을 의미합니다. 특정 객체의 프로퍼티나 메서드 접근 시 해당 객체에 접근하려는 프로퍼티나 메서드가 없다면 \[\[Prototpye]] 내부 슬롯의 참조에 따

확장은 extends라는 키워드를 많이 사용을 하며 강의나 책에서는 상속이라는 말로 부모와 자식으로 표현되기도 합니다. 부모 => 확장 => 자식 이를 통해 부모가 가진 것보다 자식이 더 많은 기능들을 확장될 수 있습니다.이 확장은 class를 사용하는 것을 권장하지만

지금까지 prototype에 대해 배워봤습니다. 이번에 배워볼 class는 객체를 생성하기 위한 템플릿으로 porotype의 원리로 동작을 하게 됩니다.또한 이 class를 이용하면 prototype보다 더 간결하게 생성자 함수를 생성할 수 있습니다.생성자함수, cla

클로저는 어휘적인 환경을 기억해놓고 캡쳐해놓을 수 있는 함수 기법입니다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성입니다.변수의 유효범위에 대한 어느정도 이해가 바탕이 되어야 자바스크립트의 클

클로저의 은닉화 1. Intro 자바스크립트의 함수를 활용을 하면, 함수를 통해서 어느정도 은닉화를 할 수 있다고 해 IIFE(즉시실행함수호출)을 활용한 적이 있습니다. 함수 외부에서 a를 출력해보면 아직 정의되지 않은 것을 확인할 수 있습니다. 이렇게 직접적으로

동기와 비동기 데이터를 받는 형식에는 비동기와 동기 두가지가 있습니다. 자바스크립트는 이 동기(Synchronous)와 비동기(Asynchronous)는 이미지만 봐도 어느정도 추론을 할 수 있습니다. .png) 동기는 1번이 끝나면 2번이 진행되고 2번이 끝나

지난 포스팅에 이어, 자바스크립트의 비동기처리로 인한 문제점 해결을 도와주는 방법인 Promise에 대해 공부를 해보도록 하겠습니다.Promise는 미래에 성공하거나 실패할만한 값을 가지는 비동기 연산을 돕는 객체입니다. 또한 이 Promise객체는 "대기", "이행"

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주는 일종의 키워드라고 할 수 있습니다. 내부의 then()메소드

자바스크립트의 이벤트는 전파되는 특성을 가지고 있습니다. 이 전파되는 방식에는 상위요소에서 하위요소로 내려가는 Capture과 하위요소에서 상위요소로 올라가며 전파되는Bubble이 있습니다.아래 사이트를 이용해 조금 더 쉽게 익힐 수 있겠습니다.DOM EVENT또한 리

자바스크립트에서 이벤트로 다룰 때는 어느정도 자원을 아껴야하는 경우가 있습니다. 예시로 검색의 자동완성 기능의 경우 우리의 눈에는 보이지 않는 ajax를 호출하면서 서버와 통신을 하고 있습니다. 검색창에 입력을 할 때마다 수 많은 API가 호출되고 있는 것을 확인할 수

자바스크립트는 싱글스레드 언어라는 이야기를 들어보셨을 것입니다. 이 이벤트 루프는 상당히 어려운 개념이기도 하며 자바스크립트 면접에 단골 질문이기도 합니다. 왜냐하면 자바스크립트 언어만 사용을 하는 것이 아니라 브라우저나 다른 플랫폼위에서 자바스크립트를 사용하는 경우가

실행컨텍스트는 자바스크립트가 동작하는 원리중 가장 핵심입니다. 하지만 이 실행컨텍스트를 이해하는 것이 굉장히 어렵습니다. 첫 번째로 호이스팅, this , window, 전역객체, argumetns 등 자바스크립트의 실행되는 메커니즘이 다 들어가는 것은 물론 자료구조

모듈 프로그래밍 언어 관점에서 모듈이란 독립적인 특성을 가진 기능 단위의 부품이라고 할 수 있습니다. 동시에 여러 다른 모듈과 함께 조합하여 재사용을 할 수도 있기 때문에 유지, 보수의 효율성을 높입니다. 하지만 자바스크립트는 원래 웹페이지 내 보조 작업을 처리하기

ES6부터는 import와 export키워드를 통해 모듈을 불러오고, 내보낼 수가 있습니다.기존의 Common JS에서는 require키워드를 사용하여 다른 변수를 할당하듯이 모듈을 불러오는 반면, ES6기반의 모듈의 내보내기와 가져오기의 경우 import, from,

프로그래밍에 대한 공부를 하며 가장 어려운 것은 에러를 디버깅하고 에러를 하나하나 고쳐나가는 것입니다. 이 에러를 처리하는 방법 중에 예외처리라는 방법이 있습니다.사실 예외처리를 하기에 앞서 에러를 처리하는 방법에는 트랜잭션이라는 것도 있습니다. 트랜잭션이란 어떠한 에

타이머 함수 타이머함수의 종료 >- setTimeout(함수, 시간): 일정 시간 후 함수 실행 setInterval(함수, 시간): 시간 간격마다 함수 실행 clearTimeout(): 설정된 Timeout 함수를 종료 clearInterval(): 설정된 Int

ECMAScript(또는 ES)란 Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해 만들어졌습니다.또한 ECMAScript는 2015년 ECMA6가 새로 출시되며

비구조화 할당을 의미하며, 배열이나 객체의 속성을 구조분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.위와 같이 객체 데이터가 있을 때 user.name, user\[name]과 같이 작성을 해 그 객체의 데이터를 꺼내올 수 있었습니다

자바스크립트에서 사용되는 데이터는 원시형데이터와 참조형 데이터로 나뉘게 됩니다. 원시데이터(String, Number, Boolean, undefined, null)참조형 데이터(Object, Array, Function)let이나 const로 데이터가 할당이 되게 되

앞서 살펴봤듯이 참조형 데이터의 경우 새로운 데이터를 할당할 때 단순히 메모리 주소만 변경하는 경우가 아니라면 복사라는 개념을 사용해 각각의 변수들을 구분해서 관리해야합니다. 이러한 복사라는 개념은 겉의 표면만 복사하는 얕은 복사와 내부의 모든 참조까지 새로운 메모리로

OMDb API를 이용하여 영화 데이터를 요청하고 받아서 프로젝트에서 출력하는 방법에 대해 공부해보았습니다.주소?속성=값&속성=값&속성=값특정한 웹의 주소부분에 ?시작하는 어떤 속성과 값의 모음을 query string이라고 합니다.(속성과 값이 끝나면 & 기호를 통해

Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 여기서 런타임이란 프로그래밍 언어가 동작하는 환경으로 결국 자바스크립트가 동작하는 환경을 의미합니다.자바스크립트가 동작할 수 있는 환경은 크게 두가지가 있습니다. 첫번째는 Node.

개발서버 실행과 빌드 개발서버 실행 Open with Live Server를 통해 index.html 파일을 여는 방법은 원시적인 방법으로 동작하는 것으로 최신의 웹프론트엔드 개발을 할 때는 별로 유용하지 않습니다. 프로젝트에 parcel-bundler를 설치했다

유의적버전이란 Semantic Versioning, SemVer 특정한 프로그램에 버전을 명시할 때 유의적 버전이라는 개념을 사용하게 됩니다. 유의적이란 버전에 의미가 있다는 이야기로, Node.js를 사용하는데 있어 버전을 일치시키는 것은 매우 중요합니다.ex) 12

npm를 통해 프로젝트를 관리를 할 때는 몇가지 주의사항이 있습니다. npm install을 통해 패키지를 설치하면 설치한 모듈들은 node_modules라는 폴더로 들어가게 됩니다. 그리고 그 내역은 package.json 파일 내, devDependencies, d

자바스크립트의 데이터는 크게 참조형과 원시형으로 나눌 수 있습니다.원시데이터(string, Number, Boolean, undefined, null)참조형 데이터(Object, Array, Function)따옴표를 사용합니다.'', "", 백틱(\` )으로 묶어 사용

비동기 처리는 네트워크 통신에서만 해당하는 내용이 아니라 특정 로직에서도 충분히 사용될 수 있습니다. 그렇기 때문에 비동기 처리를 이해하는 것은 매우 중요합니다.하지만 콜백함수를 이용한 비동기 처리 방식의 경우 콜백지옥에 빠질 수도 있어, 이런 경우 작성하기도 어려워지

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.기존 배열을 변경하지 않습니다.reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.누적값(acc),

HTML이란 문서를 자바스크립트로 모델링한 것을 (Documnet Object Model)이라고 합니다.우리는 자바스크립트로 HTML을 조작하기 위해 DOM(Documnet Object Model)으로 모델링을 합니다.DOM은 노드 단위로 이루어져있으며 그 노드들은 트

JavaScript 최신 문법 지수 연산자 *을 두번 반복사용하여 간단하게 제곱처리를 할 수 있습니다. 언더바(_) 로 단위구분 _를 이용해 단위 구분이 가능해졌습니다. 템플릿 리터럴을 이용한 함수 실행