먹고 기도하고 코딩하라

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

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

작년(2020년) 9월부터 11월까지 우리 학교 학생 몇 명을 모아서 Node.js 기초 수업을 진행했다. 비록 학습비 지원 프로젝트에는 선발되지 못했지만 학우들이 잘 따라와줘서 나에게도 의미 있는 시간들이었다. 갓 복학하고 외주 받고 밀린 일하느라 너무 바쁘기는 했지만. ^^; 각설하고, 얼마 전 컴퓨터 정리를 하면서 PPT와 코드를 깃허브에 한꺼번에 정리했다. Node.js 입문을 원하는 분이 있다면 이 자료를 참고해도 좋겠다. GitHub - dev-dain/Node-Lecture: 매주 실습 코드 예제를 올립니다. 매주 실습 코드 예제를 올립니다. Contribute to dev-dain/Node-Lecture development by creating an account on GitHub. gi..

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

미들웨어 사용하기 Express 미들웨어란 무엇인가? 쉽게 말해 함수이다. Express에서는 사실상 모든 것이 미들웨어이다. 내가 이해하기로 미들웨어와 미들웨어 함수는 같은 말이다(아니라면 댓글 부탁드립니다). 문서에는 미들웨어는 애플리케이션의 요청-응답 주기 중 req, res 객체에 대한 접근 권한을 갖고 변형시킬 수 있으며 미들웨어 스택 내 다음 미들웨어 함수에 대한 접근 권한을 next라는 인자로 갖는 함수라고 되어 있다. 또한 next 호출을 통해 다음에 있는 미들웨어를 실행하도록 결정할 수도 있다. 말이 조금 어려운데 아직 미들웨어가 무엇인지 잘 모른다면 생활코딩 express 강의를 보기를 강력히 권한다. 초보자 입장에서 가장 쉽게 이해할 수 있도록 미들웨어를 설명해 주신다. 미들웨어엔 순..

지난 주에 express 문서를 보면서 궁금한 걸 다 털어내버렸다. 그런 김에 정리했으니 한 번 더 되새길 겸 블로그에 글도 남긴다. 더 자세하고 정확한 내용은 문서에 있다. 나는 내가 궁금한 것만 정리한 요약본을 올린다. express() - express() : Express app을 생성한다. const express = require('express'); const app = express(); - express.Router() : router 객체를 생성한다. 미들웨어와 HTTP 메소드 라우트를 router 객체에 붙일 수 있다. const express = require('express'); const router = express.Router(); - express.static(root) :..

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