Code Playground

< h1 > Code Playground </ h1 >

-해당 문제는 codewars사이트의 level6 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Given a string representation of a 2d map, return the number of islands in the map. Land spaces are denoted by a zero. Water is denoted by a dot. Rows are denoted by newlines ('\n'). Two land spaces are considered connected if they are adjacent (horizontal or vertical, but not diagonal). Too easy? Try solving it without recursion....

자바스크립트의 이벤트 루프(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..

-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Given a list of integers and a single sum value, return the first two values (parse from the left please) in order of appearance that add up to form the sum. sum_pairs([11, 3, 7, 5], 10) # ^--^ 3 + 7 = 10 == [3, 7] sum_pairs([4, 3, 2, 3, 4], 6) # ^-----^ 4 + 2 = 6, indices: 0, 2 * # ^-----^ 3 + 3 = 6, indices: 1, 3 # ^-----^ 2 + 4 ..

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..

-해당 문제는 codewars사이트의 level6 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] In this kata, you must create a digital root function. A digital root is the recursive sum of all the digits in a number. Given n, take the sum of the digits of n. If that value has more than one digit, continue reducing in this way until a single-digit number is produced. This is only applicable to the natural numbers. Here's how ..