본문 바로가기

전체 글

 (64)
[ES6]Template Literal 템플릿 리터럴이란 ? 먼저 이 단어 자체에 대해서 생각을 해보자. Template 은 흔히들 기본적으로 어떠한 틀을 일컫는데 사용하는 단어이다. Literal 은 사전에서 찾아보자면 ' 원문 그대로의 ' 라는 뜻인것을 찾을 수 있겠다. 그러면 Template Literal은 ? ' 원문 그대로의 틀 ' 이라는 용어로 해석해볼 수 있겠다. 자, 이제 이 뜻을 생각하면서 사용법과 기능에 대해 알아보려고 한다. 사용법 기본적인 사용법은 백틱이라고 불리우는 `` 로 문자열을 감싸주는 것인데 이 백틱은 자판기의 영문자 상태에서 1의 왼쪽 ~/₩ 라고 적혀있는 자판을 누를 시에 나타난다. 기능 기능은 아래 코드를 보면 직관적으로 이해할 수 있다. // 일반적인 형태의 string 표기법 // 1. 일반적인 문자열 ..
[ES6]Arrow Function Arrow Function? 1. 화살표 함수란 ...? 화살표 함수란 기존에 사용하던 function 키워드 대신 ' ⇒ ' 를 사용하여 함수를 표현하는 방식. 2. 사용방법은 ? 기존의 함수 호출 방식인 // 함수 선언식 function Hello() { // Something... } // 함수 표현식 let Hello = function () { // Something ... } 요 위의 두가지 방식과 다르게 // 기본적으로 let something = () => { ... } 의 구조 // ex) let Hello = () => { // Something ... } 이와 같이 function 키워드 대신 ' ⇒ ' 를 사용하여 함수를 나타낼 수 있다. 3. 사용 시의 유의사항 // 1. 매개변수..
[ES6]let, const 등장 배경 이전의 Execution Context 글에서 정리한 내용 중 실행 컨텍스트 생성 시에 조금은 독특한 움직임이 하나 있었다. 그것은 바로 호이스팅(Hoisting) 이다. 이전 글에 있던 내용의 일부분을 가져와보면 더보기 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 따라서 변수 선언문 이전에 변수에 접근하여도 Variable Object에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이러한 현상을 변수 호이스팅(Variable Hoisting)이라한다. 아직 변수 x는 ‘xxx’로 초기화되지 않았다. 이후 변수 할당문에 도달하면 비로소 값의 할당이 이루어진다. 이라는 내용이 나온다. ( 추후 비교를 위해 여기서 var로 선..
[ES6] Promise, async/await Promise? ++) 자바스크립트 엔진은 하나의 코드 조각을 하나씩 실행하는 일을 하고, 비동기적으로 이벤트를 처리하거나 Ajax 통신을 하는 작업은 사실상 Web API에서 모두 처리된다. js의 기본 동작은 'Run to Complete' , 즉 하나의 task가 끝나면 다음 task를 실행하는 동기식 처리방식인데, 이보다 더 많은 동작을 하기 위해서는 다른 동작을 하면서 동시에 실행할 수 있는 비동기식 처리방식을 선호할 수 밖에 없다. JS에는 이를 구현하기 위한 패턴으로 보통 Callback 함수를 사용하였다. 하지만 Callback을 구현하게 된다면 프로젝트의 규모가 예전에 비해 많이 커진 지금의 프로젝트들에서는 콜백 함수가 엄청난 deps를 가지게 되어 코드 자체가 거대한 > 와 같은 모양을..
Execution Context 개념 ..? 코드가 실행될 때, Javascript는 실행해야하는 여러가지 코드들의 초안을 그린다. 이에 대한 순서로는 컨트롤이 실행 가능한 코드로 이동하면 논리적 스택 구조를 가지는 새로운 실행 컨텍스트 스택이 생성된다. 스택은 LIFO(Last In First Out, 후입 선출)의 구조를 가지는 나열 구조이다. 전역 코드(Global code)로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다. 전역 실행 컨텍스트는 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다. 함수를 호출 하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다. 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의..
객체 지향형 프로그래밍(OOP) 갑자기 무슨 ...? Javascript 개념에 대해서 전체적으로 다시 공부하는 과정에서 단순하게 글을 읽고 이해하는 것도 좋지만, 이렇게 글로 남기면서 한번 더 리마인드 할 수 있고, 아무래도 공부하고서 남는(?) 게 있으면 좋겠다는 생각으로 정리하기 시작. Javascript 의 언어적 특징 ? 객체 기반 동적 ( 타입 명시할 필요 x ) 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다. OOP (JS 하면 아무래도 객체 지향형 언어라고 할 수 있겠다.) 그래서 OOP란 ..? 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는..
31. JavaScript 30을 마치며 사실 이전에 간단한 HTML, CSS 공부를 마치고 바로 뛰어든 JavaScript였는데, 처음에는 단순하게 사용되는 메서드나 그 기능들에 포커스를 맞춰서 주먹구구식으로 공부를 했다. 그러다보니 몇가지 알고는 있지만, 정작 무언가를 만드는 것은 전혀 하지 못했을 뿐더러, 뭘 어떻게 해야할지 구상을 하는 단계에서도 전혀 손을 대지 못했다. 그러던 중 구글에서 JavaScript 30 이라는 외국사이트의 프로젝트를 보게 되었고, 일단 그걸 시작해보자고 생각했다. 다 듣고난 지금은 확실히 무엇인가 달라졌다. 이걸 들었다고 아무것도 만들지 못하는 상태에서 갑자기 생각하던 걸 바로바로 뚝딱 만들어내는정도의 발전은 애초에 기대하지도 않았고, 사실 불가능하다. 그렇다면 무엇이 달라졌을까. 위에서 언급한 문제중 후자에..
30. Whack A Mole 기본 코드 Whack-a-mole! 0 Start! 목표두더지잡기 게임을 만들어보자.코드 분석1. 사용할 변수들에 대해 선언한다. const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); let lastHole; let timeUp = false; let score = 0; 2. 두더지가 튀어나오는 시간을 정하는 함수를 정한다. function randTime(min, max) { return Math.round(Math.random() * (max - min) + min); } Math.r..

티스토리툴바