먹고 기도하고 코딩하라

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

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

이전 글 보기 Node.js로 카카오톡 학식 채팅봇 만들기 (1) 원래 Python3 + Django2 조합으로 카카오톡 챗봇을 만들어 운영하고 있었는데요. (관련 튜토리얼) 이제 노드에 전념해보고자 기존에 운영하던 챗봇을 Node.js로 똑같이 구현해보기로 결심했습니다. 바� dev-dain.tistory.com 저번에 '테스트'를 입력했을 때 메아리를 치는 채팅봇을 만들었습니다. 이제 용도에 따라 구체화를 시켜야겠죠? 저는 또 우리 학교 학식봇을 만들어 보겠습니다. 학교 홈페이지를 크롤링해야 하는데, 크롤링을 할 수 있는 모듈로 가장 유명한 것은 cheerio입니다. 하지만 cheerio는 동적 웹페이지를 제대로 크롤링하지 못한다는 단점이 있습니다. 그래서 puppeteer도 함께 이용할 것입니다. ..

Passport.js는 Node.js를 위한 인증 미들웨어이다. OAuth를 이용한 구글, 페이스북, 트위터, 혹은 전통적인 로컬 인증 방법(DB에 저장된 계정 정보로 로그인) 등 여러 가지 인증 방법을 제공하는데 이 개별 인증 방법을 Strategy라고 부른다. 현재 500개가 넘는 인증 방법을 제공하고 있다. 네이버, 카카오도 가능하다. Strategy는 passport 의존성과 별개로 설치를 해줘야 한다. 여기서는 OAuth를 통한 인증 방법은 다루지 않고 로컬 인증 방법만 다룬다. 추후에 OAuth 인증 방법을 다시 다룰 예정이다. 설치 > npm i passport const express = require('express'); const app = express(); const passport..

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