본문 바로가기

분류 전체보기37

[2020 오픈소스 컨트리뷰톤] 멘티로 발대식 참여! - 모던 자바스크립트 팀 회사에 입사한지 벌써 반년이 지났다. 실력을 쌓고 싶어서 참여했던 자바스크립트 스터디. 사람들과 스터디를 진행하면서 참고했던 사이트가 오픈소스 프로젝트인 것을 알게되었고, 자연스레 오픈소스 컨트리뷰톤이라는 프로그램을 진행한다는 소식을 접했다. 오픈소스에 관심을 가지고 있었지만, 현재 팀에서 하는 업무에서도 헤매는 중이라서 도전하지 못하던 중에 정말 좋은 기회라 생각되어 지원했다. 사실 컨트리뷰톤 프로그램에 대한 자세한 설명을 읽어보지도 않고 무작정 지원하기로 마음먹은 터라 기간과 활동내용에 대한 아무런 정보를 살펴보지 않고 자기소개서를 작성했다. 그것도 아주 간략함을 넘어서 기본 인적사항만 적어놓은 자기소개서. 오픈소스 프로젝트인 만큼, 최대한 사람들을 많이 모아서 진행할 줄 알았다. 그리고 당시 나에게.. 2020. 7. 26.
'계산기 만들기' 토이 프로젝트(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.
[정리] 어느덧 두 달이 된 내 블로그 공부한걸 꾸준히 올리고 기록으로 남기고자 시작한 티스토리 블로그. 초반에는 매일 포스팅을 하나씩 하는 것을 목표로 진행했는데, 어느 순간부터 이런 저런 핑계를 대면서 포스팅하는 기간이 길어지고 있다. 말로는 초심을 잃지말자고 하면서도, 몸과 마음은 조금씩 지쳐가고 있었다. 자바스크립트라는 주제로 포스팅을 하다보니, 이 키워드로 포털 사이트에 올라가있는 문서 수는 엄청나지만 검색하는 양은 정해져 있기 때문에 내 블로그로 들어오는 사람이 많이 적다. 방문자 수가 늘지 않으니 자연스레 흥미가 멀어졌다. 문서 수가 몇 백개가 되면 몰라도, 아직 백 개도 되지 않는 상태에서 나는 참 많은 것을 가지고자 했다. 시간과 노력을 투자하지 않고 결과를 바라는 것은 요행이다. 그래도 참 신기한건 구글에서의 검색 노출 수와.. 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.

티스토리툴바