IT 엘도라도

많은 프로그래밍 언어에서 그렇듯, JavaScript에도 iterable 객체와 iterator 객체의 개념이 존재한다. 여기서 iterable 객체란 반복 가능한 객체(for ... of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체)를 의미하며, iterator 객체란 해당 iterable 객체에서 각 요소를 반복하기 위해 사용하는 객체를 의미한다. 일반적으로 [1, 2, 3]과 같이 사용하는 배열 객체가 대표적인 iterable 객체이다. 그리고 여기에 추가로 JavaScript는 유사 배열 객체(Array-like object)라는 개념도 정의하고 있는데, 이는 배열은 아니지만 배열과 유사한 객체를 의미한다. 그렇다면 iterable 객체, iterator 객체, 유사 배열 객체가 정확히 ..

ES8(= ES2017) 이전 버전의 JavaScript에서는 비동기 프로그래밍을 위해 콜백 함수나 Promise 문법을 사용하곤 했다. 특히 ES6(= ES2015) 버전의 JavaScript에서 등장한 Promise 문법은 기존에 사용하던 콜백 함수의 한계점들을 많이 해결하였다. 그러나 콜백 함수 기반의 비동기 프로그래밍에 익숙하지 않은 사람들에게 Promise 문법은 여전히 낯설 수밖에 없었다. 결국 Promise 문법도 콜백 함수 기반이었기 때문이다. 그러다가 ES8(= ES2017) 버전의 JavaScript가 등장하면서부터 비동기 프로그래밍을 위한 새로운 문법이 등장했다. 바로 async, await 문법이다. 이 문법은 기존에 사용하던 콜백 함수나 Promise 문법에 비해 동기 프로그래밍과..

1. GitHub Contribution (feat. GitHub 잔디) Git과 GitHub을 사용해본 개발자라면 분명 Git 저장소 생성 혹은 커밋 등의 기록이 GitHub Contribution이라는 형태로 GitHub에 기록되는 것을 본 적 있을 것이다. Contribution 개수에 따라 진한 정도가 조금씩 다르긴 하지만, 전반적으로 녹색으로 표시되기 때문에 흔히들 GitHub 잔디라고 부르곤 한다. 그리고 채용 시장에서는 GitHub 잔디가 무성할수록 성실하게 개발 공부에 임한 사람, 드문드문할수록 개발 공부에 게을렀던 사람으로 평가되기도 하는 것 같다(개인적으로 필자는 조금 다르게 생각하지만). 그런데 GitHub 잔디를 열심히 심고 싶은 사람들은 주의해야 할 점이 하나 있다. 바로 GitH..

이번 포스팅에서는 URL의 인코딩/디코딩에 대해 간단히 알아볼 것이다. 그런데 이것을 이해하려면 먼저 문자열 인코딩에 대한 배경지식이 있어야 한다. 만약 ASCII, UTF-8의 개념을 정확히 알고 있지 못하다면 이 포스팅을 읽어보고 오기를 바란다. URL 인코딩/디코딩은 이 두 가지의 인코딩 방식을 기반으로 하기 때문이다. 1. URL 인코딩/디코딩 (URL Encoding/Decoding) 먼저, URL 인코딩이란 URL에서 URL로 사용할 수 없는 문자 혹은 URL로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '%XX'의 형태로 변환하는 것을 말한다. 여기서 XX는 16진수 값이다. 그리고 URL 디코딩이란 변환된 URL을 다시 원래의 형태로 되돌리는 것을 말한다. URL 인코딩/디코딩 과정..

캐싱(Caching)이란 한 번 가져온 데이터를 가까운 곳에 저장해 두고 다음번에 다시 먼 곳에서 그것을 가져올 필요 없이 저장해둔 것을 사용하는 일종의 성능 향상 기법이다. 그런데 캐싱은 특정 분야에서만 활용되는 기법이 아니다. 예를 들어, 하드웨어 수준에서는 먼 곳에 있는 메인 메모리 대신 가까운 곳에 있는 캐시 메모리에 자주 사용되는 데이터를 저장해둬서 CPU가 데이터를 빠르게 가져올 수 있도록 하는데, 이것도 캐싱의 한 예이다. 또한 일상생활에서도 쉽게 발견할 수 있다. 자주 사용하는 물건을 먼 곳에 있는 선반에 두지 않고 책상 바로 위에 올려두는 것도 캐싱의 한 예이다. 또는 자주 사용하는 프로그램의 아이콘을 바탕화면에 두는 것도 마찬가지이다. 이처럼 캐싱은 정말 다양한 곳에서 활용되고 있다. ..

이 포스팅은 Django가 CSRF를 방지하는 기본적인 메커니즘에 대해 다룬다. 만약 CSRF가 무엇인지 모른다면 이 포스팅을 먼저 읽어보고 오기를 권장한다. 또한 '기본적인' 메커니즘이라고 말한 것에서 알 수 있듯이, 원한다면 CSRF 방지 메커니즘을 어느 정도는 커스터마이징 하는 것도 가능하다. 다만 여기서는 기본 설정에 대해서만 다룰 뿐이다. 여기서 설명할 내용을 먼저 한 장의 그림으로 요약하자면 다음과 같다. 이후의 설명은 해당 그림을 토대로 진행하도록 하겠다. 목차를 보는 느낌으로 먼저 한 번 쓰윽 살펴보기 바란다. 결론부터 얘기하자면, Django의 기본적인 CSRF 방지 메커니즘은 CSRF 토큰을 쿠키(세션이 아니라)에 저장하는 방식을 채택한다. 참고로 Django 공식 문서의 설명을 가져오..

jQuery에서 벗어나 바닐라 JS를 공부하면서(참고) 정말 낯설었던 부분 중 하나를 꼽으라면 DOM 엘리먼트들을 다루는 Web API가 아니었나 싶다. 특히, DOM 엘리먼트의 크기나 위치와 관련된 정보를 참조하는 Web API들이 익숙하지 않아서 매번 MDN을 방문하지 않을 수 없었다. 그런데 계속 사용하다 보니 매번 찾았던 것만 또 찾는 것 같아서, 이번 기회에 자주 사용되는 DOM 엘리먼트의 크기 및 위치 관련 Web API들을 깔끔하게 정리해보기로 하였다. 잘 검색하는 것도 중요하지만 자주 사용되고 헷갈리는 부분은 한 번 직접 정리해서 나만의 것으로 만드는 것이 중요하다고 생각했기 때문이다. 우선, 본 포스팅의 내용을 사진 두 장으로 요약하자면 다음과 같다. 각 API에 대한 설명은 사진 하단에..

Django의 라이브러리 중 하나인 django-allauth는 여러 종류의 소셜 로그인을 구현해두었다. 카카오 로그인, 페이스북 로그인, 구글 로그인, 네이버 로그인 등 아주 많은 종류의 소셜 서비스와 편리하게 연동이 가능하도록 기능을 제공하고 있는 것이다. 이번 포스팅에서는 해당 라이브러리가 그러한 소셜 로그인을 어떠한 원리로 구현하고 있는지, 카카오 로그인을 예시로 한 번 살펴볼 것이다. 카카오 로그인을 예시로 설명하지만 대부분의 소셜 로그인은 그 구현 원리가 비슷하다는 점을 기억하기 바란다. ※ django-allauth의 소셜 로그인 구현 원리를 살펴보기에 앞서, 그 구현 원리의 바탕이라고 할 수 있는 OAuth 2.0의 개념을 완벽히 이해하는 것이 먼저이다. 해당 개념에 대한 설명은 이 포스팅..

본 포스팅은 Python에서 정규식을 어떻게 사용할 수 있는지만 설명한다. 즉, 정규식 자체의 개념에 대해서는 설명을 생략한다. 만약 정규식 자체의 개념에 대해 알고 싶다면 이 포스팅을 참고하기 바란다. 프로그래밍 언어와는 독립적으로 정규식 자체의 개념에 대해 설명하고 있는 포스팅이다. 1. 정규식 표현 방법 Python에서는 정규식의 사용을 위해 re 모듈을 기본적으로 제공하고 있다. 즉, 정규식을 사용하고 싶다면 re 모듈을 먼저 import 해줘야 한다. Python에서 정규식은 패턴 객체로 표현된다. 패턴 객체는 re.compile() 함수를 이용하여 정규식을 컴파일 하면 생성된다. 이때 정규식을 작성하는 방법은 다음과 같이 두 가지이다. 정규식 작성 방법 패턴 객체 생성 예시 설명 r문자열 re..

본 포스팅은 JavaScript에서 정규식을 어떻게 사용할 수 있는지만 설명한다. 즉, 정규식 자체의 개념에 대해서는 설명을 생략한다. 만약 정규식 자체의 개념에 대해 알고 싶다면 이 포스팅을 참고하기 바란다. 프로그래밍 언어와는 독립적으로 정규식 자체의 개념에 대해 설명하고 있는 포스팅이다. 1. 정규식 표현 방법 JavaScript에서 정규식은 RegExp 타입의 객체로 표현된다. 정규식 객체를 생성하는 방법은 다음과 같이 두 가지이다. 정규식 객체 생성 방법 예시 설명 정규식 리터럴 사용 (슬래시(/)로 감싸는 패턴) /\w+\s/g; 스크립트가 불러와지는 시점에 컴파일 된다. 정규식 옵션(= 플래그)들은 닫는 슬래시 뒤에 나열하면 된다. 상수인 정규식이라면 이 방식을 사용하는 것이 성능적으로 이득..