먹고 기도하고 코딩하라

웹앱을 만들면서 DOM 요소를 조작하다 보면 어떤 요소의 부모 요소에 접근해야 하거나 자식 요소에 접근해야 하는 일이 생긴다. 그 때마다 parentNode를 쓰면 안 되고 parentElement를 쓰면 되고 하는 식으로 비슷해 보이는데 기묘하게 쓰임새가 다른 것들은 그냥 시도하면서 고개만 갸웃거렸는데 이번에 정리를 하려고 한다. 라고 하기 전에 먼저 노드와 엘리먼트 사이에 무슨 차이가 있는지 짚고 넘어가는 게 명확한 이해에 도움이 될 것 같다. 먼저 구글링을 해 보니 나처럼 아주 혼란스러워하는 스택오버플로우 질문자의 글이 보였고, 거기에 아주 좋은 답변이 추천도 많이 받아서 일부를 소개하고자 한다. node는 DOM 계층구조에 속한 객체의 어떤 타입이든 가리킬 수 있는 이름입니다. node는 내장 D..

클로저 자바스크립트 함수와 스코프를 공부하다 보면 클로저(Closure) 개념과 맞닥뜨리게 된다. 클로저란 한마디로 특정 스코프(주로 자신의 외부)의 변수를 기억하고 접근할 수 있는 함수 혹은 내부 함수와 외부 스코프의 변수들을 잇는 연결고리이다. 자신(내부 함수)을 포함하는 외부 스코프 바깥에서 내부 함수를 호출하더라도 외부 스코프 변수를 여전히 접근할 수 있는 함수라고 생각하면 된다(함수가 특정 스코프에 접근할 수 있도록 의도적으로 해당 스코프에서 정의하는 경우가 많음). 기본적으로, 자바스크립트의 모든 함수는 적어도 1가지 컨텍스트(전역 컨텍스트)에 클로저이다. 클로저 예시를 들기 위해 외부 함수의 변수나 함수에 접근할 수 있는 내부 함수를 반환하는 예시를 많이 들지만, 사실 클로저라고 무조건 함수..

Array 메소드 몇 개도 실험해 보겠습니다. 여기서는 map, filter 같은 것들 말고 정말 간단하고 기초적인 슬라이싱, 데이터 삽입과 삭제 메소드를 다뤄보겠습니다. let arr = ['Do', 'or', 'do', 'not.', 'There', 'is', 'no', 'try']; console.log(arr.join(' '));//Do or do not. There is no try console.log(`after arr.join: ${arr}`); //after arr.join: Do,or,do,not.,There,is,no,try 일단 join(token:String) 메소드를 보겠습니다. join 메소드는 token을 요소 사이사이에 넣어 연결해 String으로 만들어 반환합니다. joi..

자바스크립트의 String 메소드는 매번 적어놓고 보는데도 잘 안 외워집니다. 사이드 이펙트가 있는지도 까먹고 해서 이 참에 정리해보고자 간단 실험을 해봤습니다. String Method 일단 String 객체는 immutable한 객체이기 때문에 String 객체 레퍼런스에 무슨 메소드를 실행해도 원본 문자열이 변경되진 않는다는 사실을 짚고 갑니다. String에서는 메소드의 반환형이 어떤지만 살펴보겠습니다. let str = 'Beam me up, Scotty!'; console.log(str.split(''));//["B", "e", "a", "m", " ", "m", "e", ... "y", "!"] console.log(str.split(' '));//["Beam", "me", "up,", "S..

To do list 할 일 목록 적기 dev-dain.github.io 개발일지에 넣기엔 다소 조촐~한 느낌(진짜 튜토리얼!)이라 FE 공작소에 씁니다. JS 걸음마를 갓 뗀 사람이 할 수 있다는 그것.. 투두리스트 저도 만들어 봤습니다. 사실 어떻게 해야될지 몰라서 뭉개고 있다가 여느 때처럼 노트에 적고 시작해 봤습니다. 첫 단계는 항상 계획! 일단 HTML DOM 트리를 그린 다음 자바스크립트가 어떤 일을 할지 쭉 적어봤습니다. (노트는 글씨가 너무 더러워서 공개할 수 없습니다) 그리고 이번에는 flex를 써보기로 했습니다. 테스트 페이지에서는 flex를 안 쓰고 그냥 했는데 안 쓰다보니 까먹을 것 같아서요 ^^ 저 자신에게 주는 과제: 시계 구현 flex로 레이아웃 잡기 바닐라 자바스크립트 쓰기 (..

오늘은 자바스크립트 배열(Array) 이터레이터에 대해 알아 보겠습니다. 먼저 forEach입니다. forEach는 콜백 함수를 매개변수로 갖습니다. forEach에 매개변수로 넘겨지는 콜백 함수는 배열의 원소 갯수만큼 호출, 실행됩니다. majors 배열의 원소들을 콘솔에 하나씩 찍어보는 forEach문을 써보겠습니다. var majors = ['economy', 'literature', 'mathematics', 'chemistry', 'sociology', 'fineArt']; majors.forEach(function(value) { console.log(value); }); forEach에 콜백 함수로 등록되는 함수의 매개변수는 value, index, array 그 자체 총 3개입니다. 위의 ..

자바스크립트 배열(Array) 부분을 정리하기 위해 씁니다. 하도 자바스크립트를 후루룩 배웠더니 배열을 어떻게 갖고 놀아야 할지 모르겠더라고요 w3schools의 자습서를 보고 실습하며 모르는 부분만 정리해 봅니다. 1. Array 만들기 자바스크립트의 Array는 다음과 같이 대괄호 []로 만들 수 있습니다. var majors = ['economy', 'literature', 'mathematics', 'chemistry', 'sociology', 'fineArt']; // var majors = ['economy', 'literature', 'mathematics', 'chemistry', 'sociology', 'fineArt']; new Array()로도 만들 수 있지만 추천하지 않는다고 합니다..