Life & Dev

Life & Dev

짤봇, QWER.GG 를 개발한 김석준 입니다. 개발과 관련된 주로 경험한 것들에 대해서 이야기합니다.

AWS, GCP, AZURE 쓰지 마세요
AWS

AWS, GCP, AZURE 쓰지 마세요

그 동안 작은 프로젝트를 하더라도 Cloud Service Provider 를 통해 배포하는 것이 버릇처럼 되었고, Server Instance 를 띄우기 보다는 Docker 를 Kubernetes Engine 에 올리는 겉멋 아닌 겉멋에 빠져있던 덕분에 서버비로 피땀흘려 모은 내 돈을 구글에 (GCP 를 주로 사용했음) 많이 주었더랜다. 심할땐 매월 100만원도 넘겨봤는데, 어찌어찌 비용을 회수하긴 했지만,
14 min read
개발팀과 개발팀장이 사라져야 하는 이유

개발팀과 개발팀장이 사라져야 하는 이유

오늘도 극단주의자는 극단적으로 이야기한다. 보통 회사에서는 팀을 꾸릴때 기능별로 분리하는 경우가 많다. 마케팅팀, 디자인팀, 개발팀, 기획팀 등등. 해당 팀의 리더가 팀장이 되어 팀원들의 성장과 업무분배를 책임진다. 일반적으로는 가장 경력이 길고 실력이 좋은 사람이 팀장이라는 직함을 달게 되고, 팀원의 인사평가, 업무 분배 등 여러가지 매니징을 하게 된다. 아주 쓰레기 같은 시스템이다.
29 min read
QWER.GG 를 떠나보내며
QWER.GG

QWER.GG 를 떠나보내며

0. Let it go 작년 12월부터 지난 2개월 간은 정말 감정적으로도 체력적으로도 힘든날들의 연속이었다. 새로운 사람들을 거의 강제로 만났어야 했고, 만날 때마다 즐거운 이야기보다는 힘든 이야기들을 해야만 했다. 나는 QWER.GG 를 매각하거나, 투자처를 찾았어야 했고 시간적인 여유도 매우 부족했다. 우리의 결정이나 그 과정이 만족스러울 리는 없지만 이제 어느정도 마무리가
24 min read
Phoenix LiveView + Typescript + Svelte + Tailwind CSS, How.
svelte

Phoenix LiveView + Typescript + Svelte + Tailwind CSS, How.

이전 게시물에 이어서, 실제로 Phoenix Liveview 에 Svelte 를 올려보겠다. 이 튜토리얼에서는 DB 연결이 필요하지 않기 때문에 ecto 를 제외하고 liveview 만 활성화한 형태로 프로젝트를 생성한다. $ mix phx.new phovelte --live --no-ecto Typescript 우선 typescript 를 먼저 세팅해본다. $ cd assets $ yarn add -D typescript ts-loader && npx tsc --init Phoenix LiveView
5 min read
svelte

Elixir + Phoenix LiveView + Svelte, Why?

요즘 누군가에 의하면 기술 하나에 꽂혀서 다른 기술은 다 천대하고 있다고 하니, 용기를 갖고 좀 더 꽂혀보도록 하겠다. Elixir Elixir 를 좋아하게 된 건 순전히 pipeline 오퍼레이터 때문이었다. 한참 FP 를 해보겠다고 lodash/fp 를 많이 사용할 때였는데, 함수 하나에 여러가지 행동을 하는 코드를 작성하는 곳에 주로 사용하였다. 말하니 복잡한데
8 min read
이제 React.js 를 버릴 때가 왔다
react Featured

이제 React.js 를 버릴 때가 왔다

Single Page Application 소위 SPA 라고 불리는 웹 사이트를 만들기 위한 기술의 사실상의 de facto standard 가 React 라는 걸 부정할 수 없을것이다. React “대항마”로 나온 라이브러리들 조차도 React 의 직간접적인 영향을 많이 받았음을 느낄 수 있다. React 가 초기에 다른 라이브러리들과 근본적으로 달랐던 점이 Component 기반이라는 점인데, polymer
18 min read
React SSR 그 고통의 기록
react Featured

React SSR 그 고통의 기록

QWER.GG 의 트래픽은 지난해 대비 500% 성장했고, 대부분 검색엔진을 통해서 유입되고 있다. 과정은 당연히 순탄치 않았는데 그 고통의 기록을 남겨볼까 한다. 우선 SSR 의 전제조건은 다음과 같다. 1. CRA 를 Eject 하지 않는다. 한번 eject 하면 되돌릴 수 없고, react-scripts 가 해주는 많은 편의기능을 포기하는 동시에 업데이트도 골치아파 진다.
15 min read
Electron 에서 Color Picker 만들기
일렉트론 Featured

Electron 에서 Color Picker 만들기

두유노리모트? 두유노프로토파이? 두유노일렉트론? 지난 12월 프로토파이에 합류하고 3.10.0 버젼 릴리즈, 그리고 3.10.1 버젼 핫픽스를 앞 둔 시점에서 기억에 남는 개발 과정을 기록해본다. Protopie Studio 프로토파이 스튜디오는 Electron 으로 개발된 데스크탑 어플리케이션으로 주로 디자이너들이 Sketch, Adobe XD, Figma 와 같은 UI 툴로 디자인을 한 후, 시연 혹은
21 min read
QWER.GG 를 통해 배운 것들
QWER.GG Featured

QWER.GG 를 통해 배운 것들

요즘 시간 날때마다 QWER.GG 라는 웹서비스를 사이드 프로젝트로 개발 및 운영하고 있다. 덕심으로 시작해 근성으로 계속하고 있는데, 2달만에 꽤 의미있는 수준으로 발전한 것 같아서 일종의 포스트모템 을 나눠보고자 한다. 홍보타임 아래의 내용은 QWER.GG 홍보를 포함하고 있으니 불편하신 분은 다음 섹션으로 내려주시면 됩니다. QWER.GG 는 E-Sports 특히 League
18 min read

회사는 어떻게 운영해야 할까?

일단, 나는 아직 흔히말하는 성공 이라는 걸 해본 사람이 아니다. 이걸 전제로 하고 이야기를 시작하고 싶다. 다만, 성공하진 않았어도 고생 끝에 커리어 개발은 잘 해왔다고 생각하고, 많은 실패 를 해온 것은 사실이나, 그만큼 고민도 많이했고 다양한 시도를 해온 것은 자신할 수 있다. 30살 부터 2년여간의 삽질 끝에 사업을 정리하고말아먹고 나는
22 min read
웹 어플리케이션에서 UI Design 과 Frontend 개발에 대하여
design

웹 어플리케이션에서 UI Design 과 Frontend 개발에 대하여

How to develop web application 광의적인 의미에서 Web Application (혹은 Web Service) 은 규모의 차이를 불문하고 현대 IT 서비스의 핵심이 되어가고 있다. 이러한 Application 의 개발은 흔히 건축으로 비유하곤 하는데 실제 이루어지는 과정을 보면 많이 다르다는 것을 느낄 수 있다. 탄탄한 설계를 기반으로 각 전문가가 해당 분야를 만들고 재료의 표준화와
22 min read
react

React Server Side Rendered Page

Single Page Application 은 개발 생산성이 높고 유닛 테스트 도입이 용이하기 때문에 완성도가 높은 어플리케이션을 만들 수 있지만, 팀 버너스리가 주창한 월드와이드 웹 페이지로서의 가치로는 다소 떨어지는 것 또한 사실이다. 이것은 무슨말이냐 하면, javascript 코드 없이 어플리케이션은 동작하지 않게 되어 저사양 컴퓨터나 오래된 브라우저에서 일관성을 떨어뜨린다. 또한 javascript 의 긴
8 min read
react

React Application Performance Optimization

What comes first? 암호화폐 거래소 GOPAX의 프론트엔드 개발자로서 퍼포먼스를 가장 중요하게 생각하고 두번째로는 생산성 그 다음이 안정성이다. 당연히 거래소니까 안정성을 먼저 생각해야 하는거 아니냐 라고 이야기하기 쉽지만, 실제로 유저들은 퍼포먼스에 매우 민감하게 반응하고, 심각한 오류가 아닌 이상 무시하는 경우가 대부분이다. 오히려 필요하다고 생각하는 어떤 기능이 개발 되지 않을때 악성 피드백을
19 min read
리액트 어플리케이션 업데이트 하기
react.js

리액트 어플리케이션 업데이트 하기

React, 아니 대다수의 Single Page Application 에서 나타나는 문제 중 하나로 업데이트를 들 수 있다. 여기서 업데이트는 react 나 redux 같은 javascript package 를 말하는 것이 아니라 서비스 자체에 필요한 업데이트를 이야기한다. 1. 새로운 컴포넌트를 추가하거나, 기존의 컴포넌트를 변경 혹은 삭제하는 경우 2. 웹 어플리케이션의 데이터 구조를 변경해야 하는 경우
7 min read
비트코인

비트코인과 정부 그리고 화이트리스트 정책

다시 시작된 병크 또 다시 시작되었다. 박상기 법무 “가상화폐는 도박…거래소 폐쇄 목표” - 한겨례 정부는 (정확히는 박상기 법부무 장관이) 블록체인 거래소를 불법 투기장으로 규정하고 폐쇄 법안을 올리겠다며 언론에 강력한 메시지를 흘렸다. 개인 투자자의 피해를 막고 투기를 잡겠다며 내 놓은 조치가 가격 폭락으로 이루어지며 외려 심각한 손해를 끼쳤다. 순간적으로 50%
13 min read
비트코인

블록체인 거래소의 활황 어떻게 접근할 것인가?

암호화폐 어떻게 받아들여야 할까? 올해 초만 해도 “비트코인이 100만원이라니 거품이다” 하던 것이 무색하게도, 이미 2500만원을 넘어서기도 했고, 혹자는 1억을 넘을것이라고 예측하기도 한다. 누구는 이렇게 불안정한 것은 화폐로 쓸 수 없다고 하고, 누구는 전송 수수료가 지나치게 많다고들 한다. 투기인지 투자인지 알 수 없을 만큼 요동치는 암호화폐에 대해 이야기해보고자 한다. 1. 계속
16 min read

개발자와 소프트웨어 생산의 3대 요소

경제학에서는 소위 생산의 3대 요소로 노동, 토지와 자본을 꼽는다. 어떠한 재화를 생산하는데 있어서 없어서는 안될 최소 단위라고 볼 수 있을 것이다. 소프트웨어 또한 재화의 일종으로 보기에 무리가 없고 3요소가 반드시 필요한 것이 사실이지만, 그 특성상 조금 다르게 바라볼 수 있을 것이다. 그러면 소프트웨어 생산의 3대 요소를 한번 생각해보자. 1. 개발자
12 min read
Composition over inheritance
javascript

Composition over inheritance

우선 동영상 하나 보고 가실게요. What's wrong with inheritance? Object Oriented Programming (이하 OOP) 에서 polymorphic (다형성) 을 구현하기 위해서 사용되는 방법 중 가장 대표적인 것이 아마 inheritance 일 것이다. 하지만, 지속적으로 inheritance 의 문제점이 지적되어 왔다. 대표적인 것이 이른바 고릴라 바나나 역설 이다. I think the lack of reusability
5 min read
Javascript prototype inheritance
javascript

Javascript prototype inheritance

최근 Javascript 는 그야말로 어디에나 쓰인다고 해도 과언이 아닌데, 그 범용성 만큼이나 문법이 변태같다 특이하다. 이는 functional 한 언어인 동시에 object oriented 코딩을 지원하기 때문에 더더욱 그렇다. 게다가 class 도 아니고 prototype 방식으로 OOP 를 구현하여 더더욱 알수 없는 물건이 되었다. *The 'new' keyword from [FunFunFunction](https://www.youtube.com/
9 min read
흔한 2017년의 Front-end 기술 스택
node.js

흔한 2017년의 Front-end 기술 스택

DevOps 를 위한 기술 스택 쏘카에서의 마지막 프로젝트는 2017년 제로카 웹 프로모션을 대비하여 전체적인 스텍을 새로 설계 및 개발하는 것이다. 기존의 제로카 프로모션 페이지는 빠르게 개발하기 위해 기술 부채를 상당히 껴안고 시작한 프로젝트였고, 올해 제로카가 주요 사업 목표 안에 들어있기 때문에 전체적으로 개선할 필요가 있었다. Requirement 요구사항 혹은 기능명세서가 없는
15 min read
기획자는 왜 IT 기업에서 점차 사라져 가는가
스타트업

기획자는 왜 IT 기업에서 점차 사라져 가는가

부제: IT 회사에서 비개발자 CEO 가 줄어드는 이유 우리나라의 현실과는 다소 동떨어진 이야기처럼 들릴 수도 있겠다. 글로벌 회사들의 이야기일 수도 있다. 그저 시차일 뿐이라고 생각한다. * 구글의 새로운 CEO, 순다 피차이(Sundar Pichai) * MS는 왜 나델라를 CEO로 뽑았을까 일명 기획자란 무엇인가 우리나라 IT 회사에만 존재하는 독특한 직책이 하나 있다. 그래서 번역하기
20 min read
개발자

하나의 생태계는 어떻게 갈라파고스화 되어 가는가?

올해 처음으로 해외에서 열리는 컨퍼런스에 내돈 70만원(!)을 내가며 참가했다. 24일 play.node 에서 발표를 하고, 저녁에 싱가포르로 넘어가 25일 아침에 도착해서 곧바로 cssconf 를 참석, 이어 26-27일 양일동안은 jsconf 를 참관하고, 다음날 오전에 바로 귀국하는 빡빡한 스케쥴이었다. 이 포스트는 play.node 를 제외한 나머지 두 행사에 대한 리뷰이자, 참석하며
25 min read
node.js

Node.js 로 TDD 를 도전해보자

개발자가 쓰는 코드는 우선 동작하는 것을 우선하며 그 순서대로 만들기 쉽다. 물론 틀린말은 아니지만, 단순히 코드 작성에만 우선한 코드는 반드시 문제를 만들기 마련이다. Kent Beck 이 말한 위의 문장은 TDD (Test Driven Development) 를 왜 해야하는지에 대한 좋은 답변이라고 생각한다. 작동하게 만들고, 제대로 만들고, 최적화 하자. @Kent Beck 가까이 하기엔
9 min read
nginx

HAProxy 와 Nginx 의 로드밸런싱

NGINX Nginx 는 대표적인 웹서버인 Apache 의 문제점을 해결하면서 만들어진 웹서버로 비동기 방식으로 개발되어 가볍고 빠른 것으로 유명한 오픈소스 어플리케이션이다. Nginx 는 http 나 reverse proxy 같은 기능 외에도 load balancer 기능 또한 강력하다. # Load Balancing upstream target-server { least_conn; server [서버주소1] weight=5 max_fails=3 fail_timeout=10s;
5 min read