본문 바로가기

Programming/JavaScript24

'계산기 만들기' 토이 프로젝트(2) - [Javascript 입문 _14] 저번 포스팅에서 계산기를 브라우저 화면에 띄우는 것 까지 완성했습니다. 그렇지만 아직 동작하지 않기에, 우리는 자바스크립트로 계산기가 동작하게끔 구현해야겠죠? 숫자 입력 소수점 입력 사칙연산 나머지 연산 부호 반전 백분율 계산 계산 초기화 결과 계산 후 출력 총 7가지 기능을 구현해야 하네요. 하나씩 차근차근 구현해보도록 하겠습니다. 입력 현재 사용자로부터 넘어오는 입력을 다루는 함수는 calculator.js에서 handleCalculator가 담당하고 있습니다. 여기서 handleCalculator은 event를 입력으로 받는데요, 우리는 이 event가 일어난 곳이 어디인지 알아야 적절한 반응을 보여줄 수 있도록 코드를 작성할 수 있습니다. 이벤트가 일어난 곳을 알고 싶으면 event.target을.. 2020. 7. 25.
Javascript - 동적으로 모듈 가져오기 import() 동적으로 모듈 가져오기 Javascript에서 어떤 모듈을 가져오고 내보낼 때 전에는 require 를 사용, 그 이후에는 import와 export를 사용하고 있다. 하지만 이러한 방법은 정적인 방식이기 때문에 문법이 단순하지만 제약사항이 존재한다. import 문에 동적 매개변수 사용할 수 없음. 원시 문자열만 가능하기 때문에 함수 호출 결과값을 경로로 사용 불가. 런타임이나 조건부로 모듈 불러올 수 없음 - if문, 코드 블록 안에서 사용 불가능 이런 제약사항들은 import / export 가 코드의 중심을 잡아주는 역할을 하기에 존재한다. 코드 구조를 분석해서 모듈을 번들링하고, 사용하지 않는 모듈이 있을 경우에는 가지치기가 필요한데, 코드에서 고정되어있을 때 이런 작업이 쉽게 가능하다. imp.. 2020. 6. 24.
Javascript - 프로미스(Promise) Promise 원격에서 스크립트를 불러오는 것과 같이 시간이 걸리는 일을 비동기로 처리할 수 있도록 해주는 자바스크립트 객체. 구성 const promise = new Promise((resolve, reject) => { // executor }); new Promise 에 전달되는 함수는 executor(실행자, 실행 함수). 인자로 resolve와 reject를 받음. resolve(value) - executor가 정상적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출 reject(error) - 에러 발생 시 에러 객체를 나타내는 error와 함께 호출 new Promise 생성자가 반환하는 promise 객체는 다음과 같은 내부 프로퍼티를 갖는다. state - pending(보류).. 2020. 6. 23.
Javascript - 내장 객체와 정적 메서드 상속 내장 객체와 정적 메서드 상속 내장 객체는 Object.keys, Array.isArray 등의 자체 메서드를 갖는다. 그리고, Array 가 Object 를 상속받듯이 네이티브 클래스들은 서로 상속 관계를 맺는다. 이렇게 한 클래스가 다른 클래스를 상속받으면 보통의 경우에는 정적 메서드와 그 외 메서드 모두를 상속받게 된다. 그런데 내장 클래스는 정적 메서드를 상속받지 못한다. 위의 이미지와 같이 Array 와 Date 는 모두 Object 를 상속받기 때문에 두 클래스의 인스턴스에선 Object.prototype 에 구현된 메서드를 사용 가능하다. 그런데 Array.prototype 과 Date.prototype 은 Object 가 아니라 Object.prototype을 참조하기 때문에 Array.k.. 2020. 6. 3.
'계산기 만들기' 토이 프로젝트(1) - [Javascript 입문 _14] 이번 시간에는 프로그래밍을 배우면서, 특히 자바스크립트를 배우면서 많이 시도하게 되는 계산기 프로젝트를 진행해보려고 합니다. 제가 만들고자 하는 계산기는 Mac 에서 사용되는 계산기의 디자인을 본따서 만들었습니다. 프로젝트를 진행하기 위해서는 우선 프로젝트 생성 및 파일 생성, 실행 방법을 알고 있어야 겠죠? 한 번도 프로젝트를 해보신 적이 없는 분들은 자바스크립트 입문 - 첫 번째 프로젝트 '클리커게임' 포스팅을 참고해주세요! 이번 프로젝트에서도 총 세 개의 파일이 필요합니다. 프로젝트를 생성한 다음에 index.html, calculator.css, calculator.js 이렇게 세 개의 파일을 생성해주세요. 지금은 javascript를 익히는 시간이기 때문에, 눈에 보이는 부분을 구현하지는 않겠습.. 2020. 5. 29.
버블링(bubbling), 그리고 target과 currentTarget - [Javascript _ 13] 안녕하세요! muko 입니다. 오늘은 브라우저에서 이벤트와 관련된 개념인 버블링에 대해서 다뤄보도록 하겠습니다. 버블링 (bubbling) 브라우저에서 한 요소에 이벤트가 발생했을 때 이 요소에 할당된 이벤트 핸들러가 동작하고, 이어서 부모 요소의 이벤트 핸들러가 동작합니다. 가장 최상단의 요소를 만날 때 까지 이러한 과정이 반복되면서 각각의 요소에 할당된 핸들러가 동작합니다. 이러한 동작이 마치 거품이 일어나는 것과 비슷하다 해서 '버블링' 이라는 명칭이 붙게 되었습니다. 예시를 한 번 볼까요? span 영역을 클릭했는데도 DIV 영역에 할당된 핸들러가 동작합니다. span 영역을 클릭했는데도 DIV 영역에 할당된 핸들러가 동작합니다. 위의 예시를 동작해보면, 핸들러는 에 할당되어 있지만, 같은 자식 .. 2020. 5. 29.
Javascript - 프로토타입 메서드와 __proto__ 가 없는 객체 프로토타입 메소드와 __proto__ 가 없는 객체 __proto__ 는 객체의 프로퍼티가 아니라 Object.prototype 의 접근자 프로퍼티이다. 그래서 obj.__proto__ 를 읽거나 쓸 때는 이에 대응하는 getter, setter가 프로토타입에서 호출되고 [[Prototype]] 을 가져오거나 설정한다. 따라서 __proto__ 는 [[Prototype]] 에 접근하기 위한 방법으로 쓰여왔다. 그런데 __proto__ 보다 모던한 메서드가 있다. let animal = { eats: true }; // 프로토타입이 animal인 새로운 객체를 생성합니다. let rabbit = Object.create(animal); alert(rabbit.eats); // true alert(Objec.. 2020. 5. 27.
Javascript - call/apply와 데코레이터, 포워딩 call/apply와 데코레이터, 포워딩 1. 데코레이터 함수를 인자로 받고, 그 함수의 행동을 변경시켜서 반환하는 함수를 데코레이터(decorator) 라고 한다. function slow(x) { // many operations return x; } function cachingDecorator(func) { let cache = new Map(); return function(x) { if (cache.has(x)) { return cache.get(x); } let result = func(x); cache.set(x, result); return result; } } slow = cachingDecorator(slow); 연산이 매우 많지만 안정적인(input과 ouput이 1대1) 함수 sl.. 2020. 5. 27.
재귀와 실행컨텍스트 재귀와 실행컨텍스트 재귀 : 함수내부에서 자기 자신을 호출하는 것 // 반복문을 통한 방법 function pow(x, n) { let result = 1; for(let i=0; i prev + current.salary, 0); // 배열의 요소를 합함 } else { // 두 번째 경우 let sum = 0; for (let subdep of Object.values(department)) { sum += sumSalaries(subdep); // 재귀 호출로 각 하위 부서 임직원의 급여 총합을 구함 } return sum; } } alert(sumSalaries(company)); // 7700 코드를 보면 객체를 만났을 때는 재귀를, 배열을 만났을 때는 임직원들의 임금 합계를 계산하는 로직을 동.. 2020. 5. 7.
이벤트, 이벤트 핸들링 (Event Handler) - [Javascript _ 12] 오늘은 이벤트와 이벤트 핸들링에 대해서 포스팅 하려고 합니다. 1. 이벤트 (event) 이벤트는 브라우저 상에서 일어나는 어떤 사건을 의미합니다. 여기서 사건은 사용자가 클릭을 했거나, 스크롤을 했을 때, 키보드를 눌렀을 때와 키보드에서 손을 뗐을 때, 입력 값을 제출했을 때, 마우스를 움직이고 있을 때 등을 의미합니다. 이벤트가 DOM에만 한정되는 것은 아니지만, 모든 DOM 노드는 이런 신호들을 만들어 낼 수 있습니다. 자주 사용되는 유용한 DOM 이벤트 종류를 소개하겠습니다. 마우스 이벤트: click - DOM 요소 위에서 마우스로 클릭(스마트폰에서는 탭)했을 때 발생 contextmenu - 요소 위에서 마우스 오른쪽 버튼 클릭했을 때 발생 mouseover - 마우스 커서를 요소 위에 두었을.. 2020. 4. 30.
alert, prompt, confirm으로 사용자의 행동에 반응하기 - [Javascript 입문 11] 안녕하세요! Muko 입니다. 저번 포스팅 마무리에 이벤트 핸들링에 대해서 다룬다고 적었었는데, 잠시 쉬어가는 느낌으로 다른 내용으로 포스팅을 해보려고 합니다. 이번 시간에서 다루려고 하는 것은 '사용자의 행동에 반응하는 웹페이지'를 만드는 가장 기초인 alert, prompt, confirm에 대해서 이야기 하겠습니다. 포스팅 주제로 원래 다루고자 했던 이벤트 핸들링을 아주 직관적으로 해석하면 어떤 이벤트가 발생했을 때 어떻게 다룰지에 대한 내용이라고 볼 수 있습니다. 여기서 이벤트라는 것은 어떤 사건, 즉 사용자로부터 입력이나 어떤 반응이 들어왔다고 해석할 수 있습니다. 우리는 이 중에서 사용자가 브라우저를 통해서 접근했을 때 우리가 코드 상으로 반응할 수 있는 가장 간단한 방법을 소개하겠습니다. 1.. 2020. 4. 26.
Javascript - 구조 분해 할당 (Destructuring assignment) 구조 분해 할당 (Destructuring assignment) Destructuring? 구조화된 배열 또는 객체를 분해해서 개별적인 변수에 할당 하는 것. 배열 또는 객체에서 필요한 값만 추출해서 변수에 할당하거나 반환할 때 유용하다. ex) 함수의 매개변수가 많거나, 매개변수 기본값이 필요한 경우 등 Array Destructuring const numbers = [1, 2, 3]; const [one, two, three] = numbers; console.log(one, two, three); // 1, 2, 3 const [one, two] = [1]; // 1, undefined // 반환 값이 배열인 메서드와 사용가능 const [firstName, surname] = 'Giin Lee'... 2020. 4. 24.

티스토리툴바