Evans Library

개발자의 집필 공간.
표상에서 그치는 것이 아닌, 본질을 탐구하고 사유하는 삶.

JavaScript와 함께 해시테이블을 파헤쳐보자

이번 포스팅에서는 많이 사용되는 자료구조 중 하나인 해시 테이블(Hash Table)에 대해서 정리하려고 한다. 먼저 해시 테이블이 무엇인지, 왜 사용하는지 알아보자. 해시 테이블(Hash Table)이 뭔가요? 해시 테이블은 어떤 특정 값을 받으면 그 값을 해시 함수에 통과시켜 나온 인덱스(index)에 저장하는 자료구조이다. 보통 배열을 사용해서 구현하는 경우가 많은 것 같다. 일단 해시 함수가 뭐길래 사용한다는 건지 해시가 뭔지 설명하기 전에 해시 테이블이라는 개념이 어디서부터 출발한 것인지 알아보자. 직접 주소 테이블(Di…

Jun 25, 2019

우리 집에서 구글까지 가는 길

이번 포스팅에서는 우리 집에서 구글까지 어떤 과정을 통해 통신을 하는지에 대해서 간략하게 얘기해보려고 한다. 필자가 대학에서 배운 것 중 재밌다고 생각했던 것이 몇 개 있는데, 그 중 대표적인 것이 바로 인터넷에 연결되어 있는 모든 컴퓨터는 실제로 케이블을 통해 연결되어있다는 사실이었다. 혹자는 당연하다고 생각할 수 있는 이 사실이 그땐 굉장히 신기했던 것 같다. 매일매일 인터넷을 사용하고 있지만 너무 생활 속에 자연스레 녹아있는 요소이다 보니 그 원리에 대해서는 그다지 신경쓰지 않았기 때문이다. 그러다가 학교에서 네트워크에 대해…

Jun 22, 2019

JavaScript의 let과 const, 그리고 TDZ

이번 포스팅에서는 JavaScript ES6에서 추가되었던 과 키워드에 대해서 자세히 포스팅하려고 한다. 부끄럽지만 지금까지 필자는 과 는 호이스팅이 되지 않는다고 생각하고 있었다. 하지만 얼마 전 친구와 대화하던 중에 과 도 호이스팅 대상체이지만 TDZ라는 특수한 영역을 사용하여 참조를 방어하는 것임을 알게 되었다. 다른 분: 근데 와 다르게 이랑 는 왜 참조 에러가 발생하는 건가요? 필자: 이랑 는 호이스팅 안될 거에요. 친구: 이랑 도 호이스팅 되는데…? TDZ에 들어가 있어서 참조 에러 나는거야 필자: 된다고??? TDZ…

Jun 18, 2019

JIRA 프로젝트 이슈 커스터마이징하기

이번 포스팅에서는 Atlassian의 대표 제품 중 하나인 Jira에 대해서 포스팅 하려고 한다. 요즘 많은 IT회사들에서 애자일 개발 방법론을 사용하여 소프트웨어 개발을 진행하고 있다. Jira는 애자일 방법론에서 사용하는 다양한 방법들을 좀 더 쉽고 편하게 사용할 수 있게 도와준다. 사실 애자일 프로세스는 일종의 방법론일 뿐 어떤 원칙이 아니기 때문에 팀마다 그 구성이나 개발 과정이 조금씩 달라지게 될 수 밖에 없고, 또 회고를 통해 이런 저런 방법들을 계속 시도해보기 때문에 어떠한 규칙으로 똑부러지게 정해지는 게 아니다. J…

Jun 16, 2019

[번역] JavaScript 배열(Array)의 발전과 성능에 대해서 자세히 알아보기

이 포스팅은 2017년 9월 2일에 Paul Shan이 작성한 Diving deep into JavaScript array - evolution & performance를 번역한 글입니다. 포스팅을 시작하기 전에 이 포스팅은 JavaScript 배열의 구문에 관한 것을 알려주거나 예제를 보여주는 등의 기본적인 내용은 아니라고 먼저 얘기해두고 싶다. 이 포스팅에서는 메모리 표현, 최적화, 구문에 따라 달라지는 동작의 차이, 성능 및 최근의 JavaScript 배열이 어떻게 발전했는지에 관해서만 설명할 것이다. 필자가 JavaScri…

Jun 15, 2019

[번역] JavaScript 배열(Array)의 발전과 성능에 대해서 자세히 알아보기

AWS와 함께 간단하게 HTTP/2 적용하기

이번 포스팅에서는 AWS(Amazon Web Service) 환경에서 HTTP/2 프로토콜을 적용하는 방법에 대해서 설명하려고 한다. AWS의 CloudFront와 Application Load Balancer는 자체적으로 HTTP/2 프로토콜을 사용할 수 있는 기능들을 제공해주고 있기 때문에 별도의 작업 없이 간단하게 HTTP/2 프로토콜을 적용할 수 있다. HTTP/2란? HTTP/1은 이미 세상에 나온지 30년이 다 되어가는 프로토콜로, 웹 어플리케이션을 위한 프로토콜이라기 보다는 문서를 위한 프로토콜로 설계되었기 때문에 모…

Jun 13, 2019

좋은 개발자란 무엇일까?

2016년 처음 회사에서 개발자로 일을 시작해서 2019년 이 글을 쓰고 있는 지금까지 늘 의문이었던 좋은 프로그래머, 또는 좋은 개발자는 무엇을 뜻하는 것인가에 대해서 글을 한번 끄적여볼까 한다. 사실 대학생 때 처음 프로그래밍이라는 것에 빠져들었을 때는 말 그대로 기술만능주의 였던 것 같다. 사용하는 언어에 잘 어룰리는 패턴을 연구하고 효율적인 알고리즘이 몸에 배어있고 변경사항에 유연하고 확장성이 뛰어난 설계를 하는 그런 것들에 한창 목마를 때였다. 왜 이렇게 생각하게 됐는지는 간단하다. 기술적으로 뛰어난 사람? 필자는 201…

Jun 06, 2019

클라이언트 사이드 렌더링 최적화

이번 포스팅에서는 필자의 현직장에서 진행했던 클라이언트 사이드 렌더링 최적화에 대해서 적어보려고 한다. 크롬 브라우저의 Audits 탭에서 현재 페이지의 퍼포먼스나 SEO 점수와 같은 지표를 확인해볼 수 있다. 이 지표는 Google Chrome 팀에서 제공하는 Lighthouse라는 툴을 사용하여 측정된다. 또한 측정된 지표를 JSON 포맷으로 Export하여 저장하고 Lighthouse의 Report Viewer 페이지에서 다시 확인해볼수도 있다. 아래 링크들을 살펴보면 Lighthouse에 대해서 더 잘 알 수 있을 것이다.…

Jun 03, 2019

TypeScript와 함께 간단한 인공 신경망 만들기

이번 포스팅에서는 저번 포스팅에 이어 TypeScript를 사용하여 간단한 인공신경망을 만들어본 것을 간단하게 정리하려고 한다. 이 어플리케이션은 현 직장에서 진행하는 Tech 세미나의 발표용으로 작성한 것이기 때문에 상당히 개발 시간이 촉박했다. 그래서 머릿속으로 생각해놓았던 기능을 전부 구현하지는 못했고 추후 기능을 더 추가해볼 예정이다. 예전에 JavaScript를 사용하여 완전 하드코딩한 ANN을 작성해본 경험이 있었기 때문에 그 코드를 재활용해볼까 생각했었다. 근데 막상 뜯어보니까 재활용할 수 있는 부분이 딱히 없어서 그…

Feb 26, 2019

정렬 알고리즘의 모든 것 (Bubble, Selection, Insertion, Merge, Quick)

이번 포스팅에서는 대표적인 정렬 알고리즘 5가지와 대략적인 Big O 표기법에 대해서 정리하려고 한다. 먼저, 그 5가지 정렬 알고리즘은 다음과 같다. 버블 정렬(Bubble sort) 선택 정렬(Selection sort) 삽입 정렬(Insertion sort) 병합 정렬(Merge sort) 퀵 정렬(Quick sort) 그리고 이 알고리즘들의 성능은 Big O 표기법으로 표현하므로, Big O 표기법에 대한 설명도 간단히 하고 넘어가려한다. Big O 표기법과 시간 복잡도 알고리즘들의 성능을 판단하는 지표로는 시간 복잡도(T…

Oct 13, 2018

정렬 알고리즘의 모든 것 (Bubble, Selection, Insertion, Merge, Quick)

Vue Server Side Rendering

이번 포스팅에서는 Universal Server Side Rendering에 이어서 VueJS의 공식 라이브러리인 와 Express를 사용하여 SSR(Server Side Rendering) 어플리케이션을 개발한 과정과 운영 환경에서 생겼던 문제, 그리고 그 문제를 어떻게 해결했는지 적어보려고 한다. 필자는 Frontend 개발자로 일하면서 Backend 프레임워크를 건드릴 일이 사실 거의 없었다. 그러나 필자의 현 직장에 SSR 서버를 필자가 도입하자고 주장하였고, 따라서 오너쉽도 필자에게 있었기 때문에 클라이언트 환경과 전혀 …

Sep 25, 2018

Universal Server Side Rendering이란?

이번 포스팅에서는 최근 모던 웹 어플리케이션에서 많이 사용하고 있는 Universal SSR에 대해서 설명하고자 한다. SSR(erver Side Rendering)과 SPA(Single Page Application)의 방식을 간단하게 알아보고 이 두 렌더 방식을 조합한 Universal SSR의 방식을 설명한다. Server Side Rendering을 수행하는 Multi Page Application SSR 방식은 원래 전통적인 웹 어플리케이션에서 사용하던 방식이다. 최근에는 SPA(Single Page Application…

Sep 25, 2018

[Deep Learning 시리즈] Backpropagation, 역전파 알아보기

이번 포스팅에서는 저번 포스팅에 이어 Backpropagation에 대해서 알아보려고 한다. 앞서 설명했듯, 이 알고리즘으로 인해 Multi Layer Network에서의 학습이 가능하다는 것이 알려져, 암흑기에 있던 Neural Network 학계가 다시 관심을 받게 되었다. Backpropagation이란? Backpropagation은 오늘날 Artificial Neural Network를 학습시키기 위한 일반적인 알고리즘 중 하나이다. 한국말로 직역하면 역전파라는 뜻인데, 내가 뽑고자 하는 값과 실제 모델이 계산한 이 얼마…

Jul 19, 2018

[Deep Learning 시리즈] Backpropagation, 역전파 알아보기

[Deep Learning 시리즈] 딥러닝이란 무엇일까?

이번 포스팅에서는 딥러닝이 무엇인지, 기존의 뉴럴네트워크와 다른 점이 무엇인지에 대해서 포스팅하려고 한다. Artificial Neural Network란? 인류는 과거부터 생각하는 기계를 만드려는 노력을 해왔다. 그 과정에서 다양한 시도들이 있었고, 결국 고안해낸 방법은 인간의 뇌를 프로그래밍해보자는 것이였다. 이런 발상이 가능했던 것은 현대에 이르러 인간의 뇌의 구조를 어느 정도 알 수 있었기 때문이기도 하고 이 구조가 생각보다 단순하다는 점도 있었다. 인간의 뇌는 이 뉴런이라고 불리는 세포들의 집합체이다. 이 뉴런들은 그냥 …

Jul 17, 2018

페이팔의 Express Checkout Restful API 사용하기

이번 포스팅에서는 Paypal의 RESTful API인 Express Checkout을 사용하는 방법에 대해서 포스팅 하려고 한다. 진행하기에 앞서 먼저, 페이팔 샌드박스 홈페이지에 접속해서 sandbox용 계정을 만들어야 한다. 이 계정으로 테스트를 진행하고 실제 운영 계정은 페이팔 홈페이지에서 회원가입하면 된다. Express Checkout이란? Paypal에서 제공해주는 결제 플로우 방식 중 하나이며, 유저가 “페이팔로 구매하기” 버튼을 클릭했을 때 페이팔 로그인 Modal window가 렌더되고, 이를 통해 결제를 진행하…

May 14, 2017