본문 바로가기

자바스크립트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.
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.
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.
DOM - [Javascript 입문 _10] 이번 포스팅에서는 DOM에 대해서 다뤄보도록 하겠습니다. 1. DOM이란 우리가 보는 웹 페이지는 하나의 문서(document)입니다. 인터넷이 국내에서 지금처럼 누구나 사용하던 것이 아니던 1990년대에 쓰던 웹페이지를 보면 더욱 이 문장이 실감납니다. 위에 첨부한 네이버의 화면도 이미지가 조금 있지만, 더 초창기 인터넷 세계로 들어가면 텍스트로만 이루어진 화면을 볼 수 있습니다. 이처럼 웹 페이지 문서는 보통 HTML로 작성되어 있고, 크롬이나 인터넷 익스플로러와같은 웹 브라우저를 통해서 그 내용이 해석되어 웹 브라우저 화면에 나타나거나, HTML 소스 자체로 나타나기도 합니다. 여기서 동일한 문서를 사용해서 이렇게 다른 형태로 나타날 수 있는 것은 DOM이라는 존재 덕분입니다. DOM은 문서를 표현.. 2020. 4. 19.
for문 편(2) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 BOJ 단계별로 풀어보기 'for문' - 2편 이번 포스팅에서는 저번에 작성한 BOJ 단계별로 풀어보기 - for문 1편에 이어서 2편을 작성해보려고 합니다. 저번 시간에 '기찍 N' 문제까지 풀었었고, 이번 포스팅에서는 'A+B - 7'부터 'X보다 작은 수'문제까지 쭉 풀어보도록 하겠습니다. 7. BOJ 11021 - A+B - 7 이 문제는 두 개의 정수 A와 B를 입력받았을 때 A+B를 출력하는 문제입니다. 매우 쉬워보이죠? 이 문제를 푸는 핵심 코드는 결국 입력 받아서 A+B 연산 결과를 출력해야 하는 BOJ A+B문제 와 비슷하게 해결할 수 있습니다. 그런데 백준에 동일한 문제가 두 개 있을 이유는 없겠죠? 여기서의 차이점은 바로 테스트 케이스의 존재입니다. 기존의 A+B 문제는 입력으로부터 .. 2020. 4. 17.
backtick(`) 기호를 이용한 javascript 템플릿 리터럴(template literal)로 쉽게 만드는 문자열 가끔 다른 사람이 작성한 코드를 보다보면 헷갈리는 기호가 있습니다. 저는 보통 공부를 위해서 책을 사서 코드를 따라치는 경우에 책과 다른 결과를 얻게 되는 경우가 종종 있었고, 그 때마다 이 backtick(`) 기호가 원인이었습니다. 작은 따옴표(', single quote)와 매우 비슷하게 생겼지만 javascript에선 특이한 프로그래밍 문법으로 사용되는 기호입니다. 영어 사전에도 backtick을 검색해보면 프로그래밍에 사용되는 기호라고 설명되어있을 만큼 정말 개발자를 위한 기호라고도 볼 수 있습니다. (다양한 언어 문자를 표현할 때도 사용됩니다) 얼마나 구분히 안가는지 직접 확인해보면 편하겠죠? "큰 따옴표를 사용한 문자열" '작은 따옴표를 사용한 문자열' `백틱으로 작성한 문자열` 음... 블.. 2020. 4. 16.
반복문 for, while, forEach, map - [Javascript 입문 _9] 이번 포스팅은 반복문에 대해서 이야기해보려고 합니다. 친구들이랑 얘기하다보면, 혹은 인터넷 커뮤니티 글들을 보다보면 공대 출신 혹은 프로그래머 출신들이 종종 '무한 루프'라는 단어를 사용하는 것을 볼 수 있습니다. 여기서 루프는 고리, 고리로 만들다 라는 의미를 가지고 있죠. 프로그래밍 세계에서 루프는 어떤 일련의 과정의 반복과 순환을 의미합니다. 그래서 무한 루프에 빠졌다라는 말은 반복문에서 벗어나지 못해서 프로그램이 에러가 났다라고 해석할 수 있습니다. 우리의 일상 생활 속에도 반복이라는 개념은 정말 많은 곳에 존재하고 있습니다. 예를 들어볼까요? ✏️To Muko 🗓Muko@tistory.com 안녕하세요, muko님. 티스토리 블로그입니다. muko님의 블로그에 너무나도 좋은 IT 교육 자료가 많.. 2020. 4. 15.
for문 편(1) - Node.js로 [백준/BOJ] 단계별로 풀어보기를 풀어보다 BOJ 단계별로 풀어보기 'for문' - 1편 저번 포스팅에는 if을 다루었었고, 이번 포스팅에서는 반복문 중에서도 for문에 대해서 문제를 모아놓은 것을 풀어보도록 하겠습니다. 사실 백준 단계별로 풀어보기의 이번 단계 이름이 for문 이라고 작성되어있지만, 반복문을 동작시킬 수 있는 다른 문법을 사용해도 문제를 푸는게 가능합니다. 가장 보편적이고 처음에 직관적으로 이해하기 쉬운 것이 for문이라서 이렇게 이름을 작성한 것 같아요. 물론 for문과 while문의 사용방법이 조금 다르긴 하지만 동일하게 작동이 가능한데, 백준에서는 어떤 상황에서 각 반복문 문법을 사용하는 것이 좋은지 나름 생각해서 for문 편과 while문 편을 나누어서 문제집을 만들어 놓았더라구요. 핵심은 '어떤 문법이 항상 정답처럼 사.. 2020. 4. 14.

티스토리툴바