본문 바로가기

JavaScript30

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.
'계산기 만들기' 토이 프로젝트(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.
함수 편 - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 안녕하세요! muko 입니다. 이번 시간에는 백준BOJ의 함수 파트를 풀어보려고 합니다. 총 세문제가 있는데, 첫 번째 문제는 Node.js를 지원하지 않는 문제라서 나머지 두 문제에 대해서 풀이를 올리도록 하겠습니다! BOJ 4373 - 셀프 넘버 # 문제 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 3.. 2020. 5. 17.
1차원 배열 편(2) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 저번 포스팅과의 시간 공백이 정말 많이 길었습니다. 이어서 1차원 배열 편 포스팅 하겠습니다! BOJ 3052 - 나머지 두 자연수 A와 B가 있을 때, A%B는 A를 B로 나눈 나머지입니다. 이 때, 수 10개를 입력받은 뒤 42로 나눈 나머지 중에서 서로 다른 값이 몇 개 있는지 출력하는 문제입니다. 실제로 다른 프로그래밍 언어에서나 Javascript에서도 % 연산자는 나머지를 구할 때 사용합니다. 이 문제를 해결하기 위해서는 나머지를 구하는 부분, 그리고 지금까지 나머지가 몇 개 나왔는지 저장하고 그 갯수를 구하는 부분을 구현해야 합니다. // 입출력에 사용할 rl을 받아오는 함수 const getRl = () => { const readline = require('readline'.. 2020. 5. 11.
재귀와 실행컨텍스트 재귀와 실행컨텍스트 재귀 : 함수내부에서 자기 자신을 호출하는 것 // 반복문을 통한 방법 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.
1차원 배열 편(1) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 안녕하세요~ Muko 입니다. 이번 포스팅도 계속해서 백준의 단계별로 풀어보기를 진행하려고 합니다. 벌써 5번째 시간인데요! 요즘 백준에서 단계별로 풀어보기를 대대적으로 수정하고 있는지 예전과 달라진 곳 들도 있고, 아직 개편 중인 곳도 있어서 확정된 문제집 부터 풀어보려고 합니다. 그래서 오늘은 6번 째 단계인 1차원 배열 편을 풀어보도록 하겠습니다. 사실 블로그를 운영하는데는 C언어나 Java, Python으로 풀이를 올리는게 더 유입이 잘 될 것 같아서 계속해서 흔들리고 있습니다. 열심히 포스팅을 올리고 있는데, 구글이나 네이버에서 유입이 전혀 안되고 있어서 더욱 그러네요. 포스팅을 하고, 사람들이 들어와서 공부하고 왔다는 표시가 늘어날 수록 보상 받는 기분에서 더 열심히 하게될텐데, 제가 컨텐츠를.. 2020. 4. 25.

티스토리툴바