맨 땅에 프론트엔드 개발자 되기

JavaScript 동기와 비동기, 콜백함수 JavaScript를 공부하다보면 자주 듣게 되는 용어인 ‘동기’와 ‘비동기’. 한자어로 되어 있어서 직관적으로 무슨 뜻인지 알기가 어려운데, 알고보면 쉽기도 하고 CS적으로 깊이 들어가다 보면 어렵기도 한 용어다. 일단 얕게 이해할 수 있을만큼 공부해본다. 동기(Synchronous)와 비동기(Asynchronous) 동기와 비동기를 간단하게 설명하자면, 동기는 순차적으로 이행되는 방식, 비동기는 비순차적으로 이행되는 방식이라고 할 수 있다. 순차, 비순차라는 말을 보면 무엇엔가 순서가 있다는 말이 된다. 자바스크립트는 싱글스레드 언어다. 그 말인 즉, 문서의 위에서부터 아래로 순서대로 스크립트를 읽어나가며 일을 처리하며, 하나의 순서대로 처리된다는 뜻이다...

호이스팅 (Hoisting) 호이스팅(Hoisting)의 뜻은 영어로 ‘끌어올리다, 게양하다’ 라는 뜻으로 자바스크립트가 실행될 때 끌어올려지는 현상을 말한다. 그렇다면 무엇이 끌어올려지느냐?!! var로 선언된 변수와 함수 선언문에만 호이스팅이 일어난다. 잠깐, 함수표현식과 함수선언문을 짚고 넘어가자. 함수표현식 const sayHello = function() { console.log('Hello!'); } 함수선언문 function sayHello() { console.log('Hello!') } 호이스팅은 유효범위 (전역 변수라면 최상단, 지역 변수라면 변수가 선언된 영역의 최상단) 안에서 최상단으로 끌어올려진다. 왜 호이스팅 현상이 일어나느냐고 묻는다면, 자바스크립트의 문법을 해석하는 parse..

배열 (Array) 배열은 연속적인 데이터의 집합이다. 자바스크립트를 처음 배웠을 때, 배열과 객체에 대한 개념을 그냥 배열은 대괄호이고, 객체는 중괄호이고 안에 콜론(”:”)이 있는 거라고 생각했다. 전혀 아무것도 몰랐던 것이다. 😱 배열은 자료구조의 한 형태로 스택이나 트리처럼 자료를 효율적으로 관리하기 위해 자료를 관리하는 구조의 한 형태이다. 순서대로 0부터 번호가 매겨져 있기 때문에 인덱스로 자료에 접근이 가능하다. 이 때, 데이터는 공중에 떠다니는 추상적인 개념이 아니라 실제로 컴퓨터 하드웨어에 데이터로 기록이 되어있는 것이기 때문에 물리적인 것이라고 할 수 있다. 새로운 배열을 만드는 방법은 아래와 같다. const fruits = new Array() const fruits = [a, b,..

JavaScript 생성자 함수와 클래스 함수 (ES6) 생성자 함수를 사용하는 목적은 여러 매개변수를 이용한 객체 함수를 생성해서 재사용 하는 것이다. 초심자 레벨에서 겨우 함수 선언식과 함수 표현식 그리고 arrow function에 익숙해지고 있을 때 쯤 두둥!! 갑자기 생성자 함수와 클래스 함수가 등장을 했다. 생성자 함수와 클래스 함수는 EcmaScript 6버전에서 새로 등장한 문법이며, IE에서는 지원이 안 된다고 한다. 생성자 함수(Constructor Function) 생성자 함수란 객체(Object)를 이용한 함수 묶음이라고 생각할 수 있다. 함수 선언식처럼 함수를 선언하지만 일반 함수와 구분하기 위해 함수명을 대문자로 시작한다. 그리고 그 함수를 다시 불러올 때는 new를 붙여서 새로..

async와 defer Parsing 이란? 영단어 ‘Parse’ 의 뜻은 ‘문장을 문법적으로 분석하다.’ 라는 뜻으로 프로그래밍의 개념에서는 브라우저가 html, css, javascript 같은 프로그래밍 언어를 읽고 해석하여 결과물을 도출하는 과정을 의미한다. 브라우저는 보통 언어를 위에서부터 아래로 차례대로 읽어 내려가 해석하고 결과를 도출한다. 여기서 차례대로 가 중요한데, 동시에 html문서, js문서를 읽어내려가는 것이 아니기 때문에 어떤 기능이 실행되는 시점에 그 기능과 연관된 개념이 파싱되어 있지 않으면 제대로 작동하지 못하고, 이를 에러라고 부른다. async와 defer html 문서에서 스크립트가 실행될 때 태그의 위치가 굉장히 중요하다. 자바스크립트는 html의 요소(DOM)를 동..

// 반복문을 활용한 구구단 출력하기 오늘은 버튼을 눌렀을 때 해당 숫자의 구구단을 출력해주는 초간단 구구단 출력기를 구현해보려고 한다. for문 사용과 증감 연산자 사용을 연습해볼 수 있는 예제다. 구현된 최종화면에는 아래와 같이 구구단이 출력된다. #HTML 구구단 출력 2 3 4 5 6 7 8 9 All #JAVASCRIPT const elBtn = document.querySelectorAll('.ex-gugu > div > button'); const elResult = document.querySelector('.result'); let result = ''; let gugu = function(n){ for(i=1; i