Code Playground

< h1 > Code Playground </ h1 >

오늘은 바닐라 자바스크립트로 캘린더 구현하는 방법을 포스팅해보려고 한다. 캘린더 모양은 대충 이렇게 생겼고, 오늘 날짜는 노란색 동그라미로 표시된다. 그리고 특정 날짜를 클릭하면 해당 날짜가 다른 색깔로 표시되고 왼쪽 사각형에 있는 날짜와 요일이 클릭한 날짜로 바뀌어야 한다. See the Pen calendar by juyeonH (@JY712) on CodePen. 해당 기능을 구현한 코드는 위에 codepen으로 올렸고, 몇 가지 코드만 어떻게 구현했는지 적으려고 한다. const init = { monList: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novem..

자바스크립트의 이벤트 루프(Event Loop)에 대해서 공부를 해보려다가 정말 좋은 영상을 발견했다. JSconf EU에서 Philip Roberts라는 사람이 이벤트 루프에 대해서 발표한 스피치 영상인데, 오늘은 이 동영상 내용을 정리해보려고 한다. 자바스크립트는 기본적으로 싱글 스레드 프로그래밍 언어(Single threaded programming language)이다. 여기서 싱글 스레드라는 것은 한 번에 하나의 작업만 할 수 있다는 뜻이다. one thread == one call stack == one thing at a time 여기서 호출 스택(call stack)이라는 것은 지난번에 재귀함수에 대해서 정리하면서 언급했었다. call stack은 프로그램 상에서 우리가 어떤 순서로 작업을..

오늘은 DOM에서 이벤트를 처리하는 방법에 대해서 포스팅해보려고 한다. 1. HTML 태그 안에서 이벤트 처리기 연결 (Inline Event Handlers) 이 방법은 이벤트를 발생시킬 HTML 태그 안에 직접 이벤트 핸들러를 추가하는 방법이다. 이 방법을 사용하면 HTML 태그와 자바스크립트 소스가 섞이기 때문에 중간에 이벤트 수정하거나 연결 함수를 바꾸려면 HTML 코드를 수정해야 한다. function logMessage (msg) { alert(msg || 'logging'); } 1번 2번 3번 4번 5번 태그에 직접 연결해야하기 때문에 이벤트 함수가 전역 공간에 미리 선언되어 있어야 한다. 이 방법은 요즘엔 거의 사용하지 않는 방법이고, HTML 코드와 JS 코드가 뒤섞이기 때문에 사용을 ..

오늘은 자바스크립트로 DOM을 동적 생성하는 방법에 대해서 정리해보려고 한다. 정리를 위해서 간단한(...간단하지만 나름 깔끔하게 만들려고 오랜 시간 고군분투했다.히히) 영화 정보를 출력하는 웹 페이지를 만들어보기로 했다. 영화 정보를 가져오기 위해서 인터넷을 뒤져서 146개의 영화 정보를 담고 있는 JSON 파일을 다운 받았다. JSON 파일을 연결하는 방법은 아직 모르니까 일단은 js 파일에 MOVIES라는 이름의 객체로 만들어 html파일에 연결시켜주었다. const MOVIES = [{ "id": 1, "title": "Beetlejuice", "year": "1988", "runtime": "92", "genres": [ "Comedy", "Fantasy" ], "director": "Tim B..

1번 2번 3번 만약에 위 HTML코드에서 태그를 자바스크립트를 이용하여 동적으로 제어하기 위해 돔을 가져온다고 해보자. 여러 가지 방법이 있겠지만 가장 흔하게 사용되는 방법은 아래와 같다. const $li = document.querySelectorAll('.list li'); 콘솔 창에 출력해보면 원하던대로 li 요소들을 잘 가져오는 것을 확인할 수 있다. 또한 querySelectorAll()을 이용하여 가져 온 li 요소들은 NodeList라는 이름의 객체로 반환된다. const $li = document.querySelector('.list').children; 이번에는 다른 방법으로 li 요소에 접근했는 데, 부모 요소인 ul의 children 속성을 사용하여 탐색하였다. 이 경우에도 아까와..

클로저에 대해서 이해하려고 간단한 툴팁 만들기 연습을 해보았다. 물론 클로저를 이용하지 않아도 그냥 클래스를 조작해서 만들 수 있지만 나는 클로저 이해하는게 목적이니까 굳이 굳이 클로저를 활용하여 만들기ㅋㅋ 초간단 버튼 툴팁! Toggle hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello..

https://im-developer.tistory.com/100 [JS/DOM] 자바스크립트, 문서 객체 모델(Document Object Model)에 대하여 문서 객체 모델은 영어로 "Document Object Model"이라고 하고 줄여서 DOM(돔)이라고 부른다. DOM이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을.. im-developer.tistory.com 지난번 글에서 DOM이 무엇인지에 대해서 다루었다. 오늘은 DOM에 어떻게 접근하고 탐색하는 지 본격적으로 다뤄보려고 한다. HTML Element에 접근하기 지난 번 글에서 우리는 Element(요소)가 HTML 문서 상의 태그를 객체화시킨 것이라는 것을 알았다. 이제 그..

예전에도 한 번 이 주제에 대해서 글 쓴 적이 있는데, 사실 그 때는 완전히 이해가 안 된 상태에서 쓴 글이었다. MDN이나 W3Schools에 클로져 관련 글을 읽어봐도 쉽게 이해가 안갔는데 이번주에 수업을 듣고 처음으로 이해가 갔다.! 그래서 다시 한 번 개념 정리를 해보려고 한다. Lexical Scope Closure에 대해서 얘기하기 전에 우리는 Lexical Scope가 무엇인지 정확히 알고 넘어가야한다. 지난 번 글에서도 정리했는 데, Lexical Scoping은 함수를 어디에 선언했는지에 따라서 스코프가 결정되는 것을 말한다. 즉, 함수를 어디에서 호출했느냐는 스코프에 전혀 영향을 끼치지 않는다. var a = 1; function foo () { var a = 10; console.lo..

slice()와 splice()는 배열을 다룰 때 자주 사용하는 함수이다. 두 함수는 언뜻 보기에 비슷한 기능을 하는 것처럼 보이지만 큰 차이점이 있다. [1] Array​.prototype​.slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다. slice(start[, end]) start: 추출 시작점에 대한 인덱스. undefined인 경우: 0부터 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다. 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다. end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까..

재귀再歸 (Recursion) 프로그래밍에서 재귀(Recursion)란 자신을 정의할 때 자기 자신을 재참조하는 것을 말한다. 따라서 재귀 함수란 함수가 호출되어 실행할 때, 함수 내부에서 자기 자신을 다시 호출하는 재귀 호출(Recursive call)의 형태를 말한다. Recursive vs Iterative 보통 Recursive와 Iterative가 많이 비교되곤 한다. Iterative는 '반복적인'이란 뜻을 가지고 있다. 즉, 우리가 흔히 사용하는 for문이나 forEach문과 같은 반복 연산을 가리킨다. 항상 그런 것은 아니지만 많은 경우에 Recursion으로 처리할 수 있는 문제는 Iterator로도 처리할 수 있고, 반대로 Iterator로 처리할 수 있는 것은 Recursion으로 처..