Code Playground

< h1 > Code Playground </ h1 >

바닐라코딩 부트캠프 프렙 과정을 끝마치고 본과정으로 들어가기 전 일주일 동안의 휴식 기간이 있었는데, 정말 최선을 다해(!) 열심히(!) 놀았다. ㅋㅋㅋ 이제 다음주 월요일에 부트캠프 시작하고 열심히 달려야하니까 오늘부터 슬슬 그동안 공부했던거 읽어보면서 기억을 되살려보려고 한다... 오늘은 프렙 과정에서 배웠던 내용들 중에서 아직 정리를 못한 Rest Parameter, Spread Operator와 Destructuring에 대해서 정리를 해보려고 한다. 1. Rest Parameter (나머지 인자들) Rest Parameter는 나머지 인자들, 혹은 여분의 인자들이라는 뜻이다. 함수를 정의할 때 마지막 인자 앞에 ...을 붙이면 해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만든다. func..

며칠 전에 거의 일주일을 고생하며 구현한 지뢰찾기 게임이다. 오늘은 지뢰찾기 구현할 때 가장 핵심이 되는 알고리즘 2가지를 정리해보려고 한다. 1. 임의의 칸에 지뢰 배분하기 먼저 9X9 사이즈의 칸에 10개의 지뢰를 배분한다고 해보자. 우리는 먼저 아래와 같이 생긴 9X9의 빈 방을 만들어야할 것이다. 이 것을 2차 배열로 만들어준다. [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0..

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

-해당 문제는 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 ..