본문 바로가기

분류 전체보기35

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.
[정리] 어느덧 두 달이 된 내 블로그 공부한걸 꾸준히 올리고 기록으로 남기고자 시작한 티스토리 블로그. 초반에는 매일 포스팅을 하나씩 하는 것을 목표로 진행했는데, 어느 순간부터 이런 저런 핑계를 대면서 포스팅하는 기간이 길어지고 있다. 말로는 초심을 잃지말자고 하면서도, 몸과 마음은 조금씩 지쳐가고 있었다. 자바스크립트라는 주제로 포스팅을 하다보니, 이 키워드로 포털 사이트에 올라가있는 문서 수는 엄청나지만 검색하는 양은 정해져 있기 때문에 내 블로그로 들어오는 사람이 많이 적다. 방문자 수가 늘지 않으니 자연스레 흥미가 멀어졌다. 문서 수가 몇 백개가 되면 몰라도, 아직 백 개도 되지 않는 상태에서 나는 참 많은 것을 가지고자 했다. 시간과 노력을 투자하지 않고 결과를 바라는 것은 요행이다. 그래도 참 신기한건 구글에서의 검색 노출 수와.. 2020. 5. 27.
[GraphQL] 쿼리(Query) GraphQL에서의 Query SQL 쿼리는 데이터베이스로 보내는 반면, GraphQL 쿼리는 API로 보낸다. 그래서 GraphQL 데이터는 저장 환경을 가리지 않는다. GraphQL에서는 SELECT 대신 Query를 사용해 데이터 요청을 보낸다. INSERT, UPDATE, DELETE를 사용하는 대신 Mutation 이라는 데이터 타입을 가지고 데이터를 조작한다. GraphQL은 인터넷용 쿼리언어이다. 그래서 소켓 연결로 전달되는 데이터 변경 사항을 감지할 수 있는 Subscription 타입이 존재한다. 문법 Query 작업으로 API에 데이터를 요청할 때는 서버에서 받고 싶은 데이터를 써 넣어야 한다. 이 때 요청 데이터는 필드로 적으며, 서버에서 받아오는 JSON 응답 데이터의 필드와 일치한.. 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.