Evans Library

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

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

[JavaScript로 중력 구현하기] 2. 코딩하기

이번 포스팅에서는 저번 포스팅에 이어 중력을 직접 JS로 구현해보려고 한다. 개발환경은 JavaScript ES7, babel, Webpack, Three.js을 사용하였다. 필요한 상수 값들 선언 먼저 프로그램에서 사용할 상수 값들 부터 선언하겠다. 여기서 원래는 의 작은 값을 가지는 중력 상수 를 으로 설정했는데, 그 이유는 필자가 만들 시뮬레이션에 등장하는 물체들의 질량이 너무 작기 때문이다. 실제 중력 상수를 그대로 적용하면서도 중력의 영향이 눈에 보일 정도가 되려면 질량도 행성급으로 커야 하는데, 그러면 계산이 너무 힘들…

May 06, 2017

[JavaScript로 중력 구현하기] 1. 중력이란 무엇일까?

이번 포스팅에서는 만유인력의 법칙을 이용하여 중력을 구현해보려고 한다. 지표면 상에서 한 방향으로 작용하는 중력이 아니라 랜덤한 질량을 가진 여러 개의 물체를 랜덤한 좌표에 뿌려놓고 서로의 운동에 어떻게 간섭하는 지를 살펴볼 수 있는 시뮬레이션을 만들어 볼 예정이다. 중력이란? 먼저 이 포스팅은 물리학도가 아닌 필자같이 수학에 익숙하지 않은 사람을 대상으로 한 포스팅이기에 먼저 중력의 개념부터 제대로 짚고 넘어가려고 한다. 뉴턴께서 가라사대, 중력이란 두 개의 질량을 가진 물체가 서로 끌어당기는 힘이라고 했다. 사실 뉴턴은 만유인…

May 06, 2017

[JavaScript로 천체 구현하기] 행성의 움직임을 구현해보자

이번 포스팅에서는 저번 포스팅에 이어 실제 궤도의 모양과 크기, 위치, 방향을 정의하고 코드로 작성을 해보려고 한다. 케플러 궤도 요소 데이터 확인하기 어떤 천체든 케플러 궤도 요소를 사용하여 궤도를 구하는 방법은 동일하니, 이 포스팅에서는 우리에게 가장 익숙한 지구의 궤도를 한번 구해보도록 하자. NASA의 제트 추진 연구소 사이트(JPL)에서는 태양계 내 행성들의 케플러 궤도 요소 데이터를 제공하는데, 필자도 이 데이터를 그대로 사용하여 지구의 궤도를 구해볼 예정이다. JPL이 제공하는 궤도 데이터는 크게 세 가지인데, 이 데…

May 03, 2017

[JavaScript로 천체 구현하기] 케플러 궤도 요소 알아보기

이번 포스팅에서는 태양계 시뮬레이션을 개발하면서 제일 애먹었던 천체의 궤도와 위치 계산에 대해서 알아보려고 한다. 필자는 고등학교 시절 수포자였기 대문에 필자와 같이 수포자였던 분들을 위해 최대한 간단하게 설명하는 것을 목표로 하고 있다. 먼저 궤도를 그리는 방법과 행성의 위치를 추정하는 방법에 대해서는 구글에 널리고 널렸지만, 이를 이해하기 위해서는 기본적인 천문학용어들에 대한 지식이 있어야했다. 고1 지구과학시간에 배우는 용어들이라는데 필자는 고등학교때 잠만 잤기 때문에 하나도 기억이 나지 않아서 다시 찾아봐야했다. 필자는 천…

May 03, 2017