Evans Library

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

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

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

2019 Jun 03

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

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

2019 Feb 26

정렬 알고리즘 정리 (Bubble, Selection, Insertion, Merge, Quick)

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

2018 Oct 13

정렬 알고리즘 정리 (Bubble, Selection, Insertion, Merge, Quick)

Vue Server Side Rendering

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

2018 Sep 25

Universal Server Side Rendering이란?

이번 포스팅에서는 최근 모던 웹 어플리케이션에서 많이 사용하고 있는 에 대해서 설명하고자 한다. 과 의 방식을 간단하게 알아보고 이 두 렌더 방식을 조합한 의 방식을 설명한다. Server Side Rendering을 수행하는 Multi Page Application 방식은 원래 전통적인 웹 어플리케이션에서 사용하던 방식이다. 최근에는 과 대조하여 이라고도 불린다. 어플리케이션은 라우팅이 수행된 후 새로운 페이지가 서버에 요청되면 싶으면 그때마다 HTML를 렌더한 후 클라이언트에서 전체 페이지를 다시 내려받는다. 대략적인 실행…

2018 Sep 25

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

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

2018 Jul 19

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

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

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

2018 Jul 17

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

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

2017 May 14

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

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

2017 May 06

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

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

2017 May 06

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

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

2017 May 03

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

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

2017 May 03