먹고 기도하고 코딩하라

웹앱을 만들면서 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..