먹고 기도하고 코딩하라

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

방금 클로저에 대한 글을 쓰면서 개발자 도구를 열어 콘솔을 좀 쓰고 있었다. VS Code에서 Node 띄우고 js 실행이 잘 안 되길래 콘솔을 쓰고 있었는데 글을 다 쓰고 나니까 콘솔에 이런 로그가 떴다. 근데 내가 이걸 처음에 이미지인 줄 알고 헐 이미지? 콘솔에? 어떻게 띄운거지 이러고 막 찾아봤다. 그래서 얻은 결과... 다음과 같이 콘솔에 입력하면 이미지를 출력할 수 있다. console.log('%c ', 'font-size:400px; background:url(https://www.kanelov.com/wp-content/uploads/2019/06/1Print-1-24.jpg) no-repeat;'); font-size를 적절히 조절하고, url() 안에 원하는 이미지의 url을 입력하면..

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

지난 3월, 아는 언니네 집에 놀러갔다. 그 날 저녁 알싸한 마늘치킨을 시켜먹고 , 를 보면서 즐거운 시간을 보냈다. 새벽에는 내가 전혀 알지 못하는 케이팝 아이돌 뮤비를 구경하기도 했다. 이튿날, 오후 스터디를 위해 일찍 돌아가야 하는 나에게 언니는 링피트를 해보라고 권했다. 나는 닌텐도 스위치도 없고 모동숲이 날 유혹했을 때도 굳건하게 참고 스위치를 거부했다. 10여년 전 놀동숲을 하면서 즐거웠던 기억은 있지만 모동숲을 시작하면 내가 나를 제어하기 힘들 것 같아서 참았지만, 링피트는 운동하면서 즐기는 게임이라고 해서 해봤다. 언니가 손님용으로 만들어둔 캐릭터는 레벨 4 정도의 캐릭터였다. (참고로 언니 본캐의 레벨은 당시 160 정도였다) 맵 하나를 제자리뛰기로 달리고 걸으면서 링콘이라고 얇은 도넛같..

심심하면 유튜브에서 유명한 개발자들의 home office나 브이로그 같은 영상을 찾아보고는 한다. 이건 꽤 옛날에 봤던 영상인데, 리누스 토발즈(리눅스의 아버지)의 홈 오피스를 소개하는데 다음과 같은 것이 있었고... 아 이건 어떻게 봐도 서울시다.. 서울시가 아닐 수 없다! 라는 생각이 들었다. 영상 그런데 토발즈의 집에 대체 왜 서울시 로고가 새겨진 메달이 있는 걸까? 토발즈는 핀란드인이고 한국과는 전혀 관련이 없는 사람처럼 보인다. 사연은 2002년 12월, 한국 IT산업의 미래라는 주제로 강의와 토론을 하려고 한국에 방문한 토발즈에게 당시 서울시장이 토발즈를 명예 서울시민으로 임명하고 메달을 수여한 것이다. (관련 기사) 신기한 일이다. ㅋㅋㅋ 또한 토발즈에게는 펭귄 인형이 아주 많은데, 사람들..