모든 글
블로그 댓글 서비스 교체: Disqus → Utterances 데이터 이관
이전글 (블로그 댓글 서비스 교체: Utterances)에서 댓글 서비스를 교체했다. 광고가 달린 disqus 서비스에서 깃헙 기반의 utterance로 바꾼 것이 작업 내용이다. 하지만 그 동안 작성된 댓글은 여전히 disqus에 남아있어서 utterance로 교체해버린 이상 블로그에서 이전 댓글을 볼 수 없게 되버렸다. 이 댓글을 깃헙으로 이관하는 작…
블로그 댓글 서비스 교체: Utterances
언제부터인가 블로그 하단에 광고가 붙기 시작했다. 구글 애드샌스를 사용하는것도 아닌데 이상하다. 마치 자가용에 택시 광고판을 붙이고 다니는 것 같아서 얼른 떼어버리고 싶었다. 원인은 댓글 서비스로 사용하는 디스커스(Disqus)에서 나오는 광고였다. 처음엔 광고 없이 사용할수 있지만 일정 기간이 지나면 광고가 붙게되는데 광고를 없애려면 구독료를 지불하는 …
한성 키보드를 매직 키보드와 유사하게 사용하기
이전 글(나의 첫 무접점 키보드)에서 소개한 키보드를 여전히 사용하고 있다. 이 키보드 키배열에 손가락이 익숙해 오타도 줄어들고 손바닥도 고정된 상태로 타이핑할 수 있게 되었다. 하지만 맥 운영체제의 특수 기능키를 매직 키보드처럼 쓰고 싶은 아쉬움은 여전하다. 지금은 일부 기능만 몇 가지 키조합으로 사용하고 있는데 최대한 매직 키보드의 그것처럼 사용하고 …
프론트엔드 테스트할 기회가 생겼다
백엔드 개발할 때 웬만하면 테스트 코드를 작성했다. 어플리케이션을 출시한 뒤에도 부족한 테스트를 마져 작성했는데 이런 방식이 코딩에 자신감을 주었기 때문이다. 새로운 기능을 만들거나 버그를 수정 하더라도 자동화된 테스트 덕분에 회귀 테스트를 빠르게 반복 할 수 있기 때문이다. 한편 프론프엔드 개발에서는 테스트를 잘 못했다. 초반에 몇 번 시도해 보았지만 …
디자인시스템과 라이브 방송
지난 달 사내 DR팀으로부터 디자인시스템을 주제로 발표 요청을 받았다. 프론트엔드 개발에서 디자이너와 협업 언어로 사용한 것인데 프로덕트 조직 외부의 관심이 의외였다. 발표를 준비하면서 디자인 시스템에 대해 다시 생각해 보았다. 더불어 라이브 방송이라는 경험도 꽤나 유쾌했다. 디자인시스템 기술적인 것 보다는 디자인시스템을 바라보는 관점에 대해 다루었다. …
CSS 변수와 웹사이트 테마
맥OS에 다크 테마가 나온 후 웹 사이트에도 다크 테마 버전이 적용된 걸 심심찮게 보았다. 나는 맥OS 화면 모드를 자동으로 두어 해가 뜨면 라이트 모드로 해가지면 다크 모드로 설정해 두는데 이 변화가 웹사이트까지 영향을 주는 모습이 꽤 인상적이었다. 이런 동적 테마는 요점 쉽게 찾을수 눈에 보이는 즐거움만이 다가 아니다. 하루 종일 화면을 보고 있다가 …
리액트 컨텍스트
리액트 안내서에 나온 컨택스트는 읽어보기만 했지 실제로 사용해 본적은 한 번도 없었다. 상태관리 솔루션으로 리덕스(Redux)나 모빅스(Mobx)를 사용해서 그런걸까? 문서에는 UI 테마나 로그인한 유저, 로케일 따위의 데이터가 컨택스트로 관리할 수 있는 것이라고 말한다. 상태관리 써드파티 라이브러리로 관리해서 그런지 더욱 컨텍스트의 필요성을 느끼지 못한…
나의 첫 무접점 키보드
항상 컴퓨터로 일하는 사람들은 누구나 한 번 키보드에 욕심을 부려 보았을 것이다. 노트북에 내장된 것으로는 아쉬워서 외장 키보드를 연결해 사용하는데 그 가격만이 천차만별이다. 처음 해피해킹을 보았을 때 단순한 디자인에 매료되서 너무 갖고 싶었다. 30만원이 넘는 가격을 확인하고서야 구매를 포기했는데 이처럼 키보드는 여유돈이 생기면 사고 싶은 일종의 악세사…
만들면서 학습하는 리액트: 사용편2(컴포넌트편)
리액트 컴포넌트 소개 컴포넌트를 사용하는 이유 사용 편에서 우리는 이미 컴포넌트를 사용하고 있었다. 어플리케이션 자체를 의미하는 App 컴포넌트가 그것이다. 어플리케이션의 전체 상태와 유저 인터페이스를 관리한다. 이 모습은 마치 큰 서랍장 안에 모든 물건을 넣은 것과 비슷하다. 나중에 뭔가를 서랍에서 찾으려면 복잡한 서랍 안을 한참 뒤져야 한다. 반면 서…
만들면서 학습하는 리액트: 사용편1
준비편에서는 순수 자바스크립트로 검색 화면을 만들었다. 이 때 사용한 요구사항을 리액트 버전으로 만들어 보는 것이 이번편의 내용이다. 요구사항에 대해서는 이미 익숙하기 때문에 리액트의 특성과 장점에 대해 집중하자. 검색 폼 구현하기 1 Input 요소 사용하기 검색 화면 상단에 위치할 검색 폼부터 만들어 보자. 💡요구사항: 검색 상품명 입력 폼이 위치한다…
만들면서 학습하는 리액트: 소개편
React.js 소개 데이터와 화면을 연결하는 방법 리액트나 뷰 같은 UI 라이브러리의 가장 큰 특징은 화면에 출력되는 유저 인터페이스를 상태로 관리할 수 있다는 점이다. 브라우저는 돔(DOM)을 통해 어플리케이션을 렌더링하는데 라이브러리 없이 자바스크립트만으로 그려보자. 이전 준비편을 떠올려 보자. UI를 담당한 뷰는 템플릿 객체로부터 HTML 마크업 …
만들면서 학습하는 리액트: 준비편
개요 "백문이 불여일타" 우리는 이론과 실습 두 가지 방법으로 공부한다. 가령 기타를 배운다고 하자. 악보 읽는 법, 기타 소개 등의 전반적인 이론을 학습한 다음 실제 연주하면서 머리와 몸으로 기타를 익힌다. 한편 이론과 실습의 순서를 뒤짚는 경우도 있다. 유투브에서 누군가 멋지게 연주하는 모습을 보고 떠듬 떠듬 따라해 본다. 말도 안되게 어렵겠지만 여러…
AWS 람다 초기 응답 속도 개선하기
AWS 서버리스는 람다를 중심으로 구성한다. 대쉬보드에서 코드 수정만으로 서버에 변경사항을 즉시 반영하는 편리함과 급격한 트래픽을 감당할 수 있는 안정성이 특징이다. 이러한 장점을 갖는 이면에는 '콜드 스타트'라는 구조적 문제도 가지고 있다. 콜드 스타트 자동차에 관심이 있다면 콜드 스타트라는 용어는 익숙하다. 보통 추운 겨울날 열쇄를 꼽아 시동을 걸면 …
AWS 람다 용량 관리
AWS 람다는 작은 코드 조각을 실행시켜주는 함수다. 별다른 서버 설정이 거의 필요 없고 웹 대시보드에 코드만 올리면 바로 실행되어 결과를 확인할 수 있는 AWS 서비스이다. 그동안 이미지 리사이징처럼 단일 목적을 위해서 람다를 사용했는데 이번에는 웹 어플리케이션을 올려봤다. 아무래도 코드와 외부 패키지 갯수가 늘어나다 보니 비교적 용량이 크고 나중가서는…
어플리케이션 다국어 기능과 번역가와 협업 방법
지난 겨울 일본에 서비스 출시를 준비하면서 일본어 기반의 웹 어플리케이션을 만들 기회가 있었다. 늘 사용하던 한국어 문자를 일본어 문자로 바꾸는 것처럼 간단한 상황은 아니다. 사용자는 일본인이지만 개발자나 테스터는 한국인이기 때문에 일본어에 익숙하지 않으면 일하기 힘들다. 게다가 일본인과 한국인이 사용하기 백오피스는 두 개 언어로 번역되어야 한다. 다국어…
유니온 타입과 타입 가드
타입스크립트를 사용하면서 편리한 점은 코딩할 때 매우 정확하게 자동완성 된다는 점이다. 코드 편집기에 연동된 타입스크립트 컴파일러가 실시간으로 코드를 분석해서 타입을 추적해준 덕분이다. 타입스크립트 피처링의 멋진 개발 환경이다. 타입가드(Type Guard) 타입스크립트는 원시 타입과 클래스뿐만 아니라 이것들을 마구 섞어서 유니온 타입을 만들 수 있는데 …
babel-loader와 ts-loader의 빌드 결과가 다른 현상
규모있는 자바스크립트 프로젝트의 개발 환경을 구성할 때 번들러를 사용한다. 파일간의 의존성을 분석해서 몇 개의 압축된 파일로 만들어 최적의 결과를 만들어낸다. 뿐만 아니라 웹팩 로더는 최신 ECMAScript를 사용하는데 쓰인다. 타입스크립트도 마찬가지로 웹팩을 이용해 빌드 환경을 구성한다. 타입스크립트 컴파일러인 tsc가 타입스크립트 코드를 자바스크립로…
균형 감각
아버지와 자주 대화하는 편이다. 부자지간에 30분 이상 전화 통화하는 모습을 지인들은 신기하게 바라본다. 어머니와 딸처럼 우리는 미주알고주알 이미 했던 얘기를 반복하며 대화를 주고받는다. 아버지께서 여러 번 말씀하신 것 중 하나가 "균형 감감" 이다. 어렸을 때는 균형 있는 삶을 살아야 한다는 것에 별로 공감하지 못했다. 오히려 내가 하는 일에 열정을 쏟…
아, 전설적인 한 해였다
2020년 30개 포스팅을 발행했다. 매년 블로그에 50개 글을 쓰겠다고 계획을 세우는데 거의 달성해 본 적이 없었다. 이런 목표는 달성보다는 방향에 의미가 있는 것 같다. 마치 옛 뱃사람들의 북극성처럼 말이다. #재택근무 2020년 가장 기억에 남는 건 코로나 19 사태다. 많은 사람이 삶 전반에 거쳐 영향을 받았고 기업도 살아남기 위한 변화를 많이 했…
프론트엔드 개발자의 역할
예전에 인프런에 올린 Vue.js 강의가 지금 보니 수강평도 괜찮고 질문도 많아서 리뷰할 겸 전체 영상을 정주행 했다. '퍼블리셔와 일한다'를 전제로 HTML/CSS는 다루지 않고 자바스크립트 코드만 다루었다. 최근에는 세 가지 언어를 모두 사용하고 있다는 점에서 세월의 흔적이 남은 것인가 싶다. 돌이켜 생각해 보면 당시 개발 조직의 영향인 것 같다. 일…
"당장 야금야금 부지런히 행복해야 돼"
하루 목표 중 하나가 조깅이다. 웬만하면 아침에 뛰려고 하지만 못할 때는 저녁에라도 뛴다. 컨디션 조절 때문인데 조깅을 할 때와 그렇지 않을 때 느끼는 기분은 아주 딴판이다. '행복하기 위해 조깅한다'라고 말할 수 있을 만큼 내게는 중요한 일과 중 하나다. 행복하게 만드는 요소 중에 또 하나는 글쓰기다. 생각을 정리해 글로 옮기는 과정이 다소 귀찮은 게 …
블로그에 글을 쓰는 이유
회사 동료 중에 가끔 내 블로그에 대해서 언급해 주시는 고마운 분들이 있다. 블로그 잘 보고 있어요. 블로그 보고 많이 도움됐어요. 누군가가 내 블로그에 방문해 준다는 것은 관심받는 느낌도 들고 구글 봇에게 인정받는 느낌도 들어서 기분이 좋다. 개발하다가 부딪친 문제를 해결하는데 내가 쓴 글이 도움이 된다는 것에 특히 보람을 느낀다. 하지만 기술 블로그를…
서버리스 웹 애플리케이션 만들기
서버 운영에서 손을 뗀 지 4년 정도 된 것 같다. 호스팅 업체를 사용하다가 클라우드가 유행하면서 AWS로 옮겨 가상컴퓨팅머신(ec2)이나 이것저것 자동으로 만들어주는 앨라스틱 빈스톡(elastic beanstalk)으로 서버를 구성하고 운영했었다. 크라우드로 옮겼지만, 서버 운영에 대한 부담은 여전했다. 오토 스케일만 믿다가 장애를 겪었다는 다른 회사의…
업무 밀도
며칠 전 사무실에서 퇴근길 인사를 주고받으며 "업무 밀도가 높다"는 피드백을 받았다. 표현도 생소하고 누군가 내 일하는 모습을 보고 있었다는 생각에 조금 당황해서 "야근하기 싫어서"라는 이유를 댔다. 웬만해선 출근 후에 개인 일은 안 하려고 한다. 가방 속에 들어 있는 핸드폰은 꺼내지 않고 그대로 두거나, 가방 없이 출근할 때는 책상 서랍에 넣어서 가능…
styled-component로 리액트 컴포넌트 만들기
이번에 스타일드 컴포넌츠(styled-components)를 사용해 보고 기존 방식과의 차이점, 그리고 왜 이것이 더 나은지를 정리해 보고자 한다. 기존 방식의 문제점 기존에는 사스(sass)를 사용해서 스타일 요소를 관리했다. 리액트 컴포넌트로 예를 들자면 컴포넌트 이름과 동일한 CSS 클래스네임을 정의해서 컴포넌트의 클래스명으로 지정하는 방식이다. 이…
상태관리 라이브러리 mobx
일 년 정도 리액트, 리덕스 조합으로 사용해 봤다. 뷰(vue)나 모빅스(mobx)에 비해 러닝커브가 있다고 했지만 반복하고 시간이 지나니 익숙해 지더라. 그러던 중 신규 프로젝트에 상태관리 라이브러리로 모빅스를 사용해 보자는 의견이 팀에서 나왔고 비교적 단순해 보였다. 사용해 본 결과, 역시 단순하다. 문서 기준으로 기본 개념을 정리해 보자. 기본 개념…
개츠비 프리로딩과 프리패치
브라우져에서 웹 페이지 로딩 성능을 좌우하는 요소 중 하나가 리소스를 다운로드 하는것이다. 이미지, 폰트, 자바스크립트, 스타일시트 등 HTML 문서는 다양한 리소스를 가지고 웹페이지를 만들어내기 때문에 미리 다운로드 해야한다. 다운로드할 파일의 크기가 페이지 로딩 성능에 영향을 주는 것은 인터넷 환경에서 자명하다. 그렇기 때문에 이미지 크기를 줄이고 코…
개츠비의 이미지 처리 방식
개츠비 문서를 봤을때 눈에 띄었던 것이 이미지 처리 방식이다. 화면 스크롤에 따라 이미지를 로딩하는 것(lazy load)은 이전에 만들어 봐서 익숙했지만 새로운 몇 가지가 더 있는것 같았다. 이미지를 가지고 있는 화면을 로딩할 때, 뿌옇게 보여주다가 원본 이미지를 보여주는 효과(blur up)가 마치 미디엄의 고급스러운 분위기를 자아냈다. 브라우져 너비…
react-helmet의 동작 방식
Gatsby.js 프로젝트를 보면서 react-helmet을 발견했다. 개발 용어로 "헬멧"이라는 단어는 친숙한데 노드의 웹 프레임워크인 익스프레스에서 본 기억이 있다. 보안과 관련된 미들웨어인데 헬멧이라는 이름처럼 웹 어플리케이션을 안전하게 지켜 주는 그런 도구로 알고 있다. 그런데 react-helmet도 비슷한 것인가하고 휙 지나쳤더니 전혀 아니더라…
Gatsby.js 훑어보기
뷰와 리액트를 사용한 이후 컴포넌트 기반으로 접근하는 것이 개발을 무척 단순하고 빠르게 만들었다. 이를 기반한 정적 사이트 생성기도 나왔는데 리액트의 개츠비(gatsby)와 뷰의 뷰프레스(vue-press)가 자주 보였다. 내 블로그도 정적 사이트 생성기를 이용해서 관리하고 있다. 루비 기반의 지킬(jekyll)이라는 툴인데 깃헙 페이지에 무료로 관리하려…
웹팩 개발 서버로 부족하다면 webpack-dev-middleware를 사용해 보자
이제 프론트엔드 개발에 웹팩은 항상 달고 다닌다. ES6+ 뿐만 아니라 타입스크립트를 사용하려면 이것 없이는 쉽지 않다. 웹팩과 더불어 필수로 사용하는 것이 webpack-dev-server이다. 잼스택(JAM Stack)으로 개발된 결과물을 바로 바로 확인하려면 개발용 웹서버가 필요한데 바로 webpack-dev-server의 역할이다. 번들링한 JS,…
시퀄라이즈 Model 클래스 활용하기
시퀄라이즈로 모델링하는 방법을 한 번 정리한 적이 있는데 sequelize.define() 함수를 사용했었다. 시퀄라이즈 4 버전을 사용했는데 노드js에 클래스 문법이 들어오기 전이었다. 이번에 데이터베이스 사용할 기회가 있어서 오랜만에 시퀄라이스 문서를 보는데 Model 클래스를 따로 제공하고 있더라. 리액트도 일반적으로는 Component 클래스를 확…
node-sass가 노드 버전에 의존적이 이유
스타일시트 전처리 언어인 sass를 사용하는데 노드 환경에서는 node-sass를 이용해 css 코드로 변환한다. 전처리 언어 중 less를 먼저 사용했는데 점차 sass를 사용하는 분위기였다. c언어 구현체가 있는 sass의 빠른 빌드 속도 때문이듯 하다. 요즘엔 거의 sass만 사용한다. sass 환경의 프로젝트에서 이따금 이런 오류를 접하게 된다. …
패스포트 동작 원리와 인증 구현
해외에 나가기 전 꼭 챙겨야 하는 것이 여권(passport)이다. 출국장에서 나의 신원을 확인해 주는 것이고 해외 입국장에서도 입국을 허가받을 수 있는 수단이기 때문이다. 서비스를 사용할 때도 등록된 사용자임이 확인되어야 기능을 사용할 수 있고 그렇지 않은 경우 일부 제한된다. 이것이 바로 로그인인데 노드에서는 패스포트(passport) 패키지를 많이 …
HTML5 폼 검증에 대해 정리해 보자
폼(Form)은 웹 개발 할 때 반드시 다뤄야 하는 기술이다. 로그인 화면, 글 작성 화면, 데이터를 다루는 커머는 어드민 화면까지 폼은 웹 개발에 있어서 폭넓게 사용되고 있다. 돌이켜 보면 그 때마다 적당한 폼 관련 라이브러리를 사용해서 화면을 만들었다. 앵귤러의 ngForm 뷰의 vee-validate 리액트의 antd 하지만 브라우져가 자동으로 처리…
Node.js로 만든 API 테스트(supertest)
토이프로젝트를 하면서 테스트 코드를 어떻게 작성할까 고민이다. 보통은 1) 함수나 클래스 단위의 유닛 테스트나 2)기능 단위의 통합 테스트를 한다. 이번에는 유닛 테스트 보다는 통합 테스트를 먼저 시작했다. 학습 목표에 따라 여러가지 대체 기술을 사용하려면 탄탄한 통합테스트가 준비되어 있어야하기 때문이다. 화면을 검증하는 방법에는 마땅히 좋은 아이디어가 …
파일명 컨벤션과 웹팩/노드 오류
내가 파일 이름을 만들때 사용했던 방식은 이런 순서대로 거쳐왔다. 스네이크 케이스(snake_case) → 케밥 케이스(cabab-case) → 카멜 케이스(camelCase) 가령 "foo bar"라는 의미를 가진 파일을 만든다면, 스네이크 케이스: foo_bar 케밥 케이스: foo-bar 카멜 케이스: fooBar 단어 중간에 언더 스코어를 넣은 방…
테스트 코드는 꼭 필요한가요?
결혼하고 나니 체중이 늘기 시작한다. 혼밥에 비해 대화가 있는 식사 시간은 편하고 여유로워 섭취량이 부쩍 늘었나 보다. 자연스레 손에 뱃살이 잡히고 건강의 적신호라 여겨 아침마다 조깅하고 있다. 나름 꾸준하게 운동하지만, 체중이 늘어나니 운동복으로 갈아입는 것부터가 귀찮아진다. 온갖 핑계를 대며 게으름 피우다 마침에 밖에 나가 뛰고 돌아오면 그렇게 기분 …
노드몬(nodemon) 사용시 포트 충돌 이슈
노드(Node.js)로 서버를 개발하다 보면 이따금씩 마주하는 현상이 있다. 요청 대기 상태로 만들기 위해 3000번 포트를 사용하려고 시도하는데 이미 사용 중이라는 메세지를 던지고 실행되지 않는다. 서버를 재구동하면서 이전 프로세스가 아직 남아 있기 때문이다. 사용 중인 포트를 운영체제가 아직 회수하지 못한 것 같다. 이럴 경우 즉효약은 포트를 사용하는…
인터페이스만 사용하다가 클래스를 다시 보았다
만 1년 정도 타입스크립트를 프론트엔드 개발에 사용해 봤는데 꽤나 매력적이다. 함수 전달 인자의 타입을 강제화 할 수 있다는 점에서 안전한 코드를 만드는데 적잖은 도움을 받고 있다. 타입을 문자열이나 정수 따위의 원시 타입으로만 한정하는 것은 아니다. 하나 이상의 원시 타입으로 구성된 합성 타입을 정의할 수도 있는데 이때 주로 "인터페이스(interfac…
알아두면 쓸데있는 VSCode 노하우
깃헙에서 만든 아톰 에디터를 즐겨 사용했던 적이 있다. 무척 가볍고 서브라임과 비슷한 UI를 가지고 있어서 단순한 모습이 무척 맘에 들었다. 그러나 가끔 발생하는 CPU 100% 현상은 적잖케 불편했다. 그마다 프로그램을 재 실행 해야 했기 때문이다. 그런 시기에 VSCode가 나왔다. IDE 잘 만든다는 마이크로소프트에서 무료로 만든 것이라 호기심 있게…
슬기로운 재택생활
오늘로써 재택 근무 22일차다. 사무실에서 얼굴을 마주하면서 일하다가 이렇게 갑작스레 전직원이 집에서 일하게 되는 경험은 우리가 직장 생활하면서 겪게될 흔치 않은 기회일 것이다. 그만큼 업무 환경이 급변했고 평소에 일반적이라고 생각했던 소통 방식이 먹히질 않아 일이 잘 안되는 상황도 발생한다. 집에서 일하는 것은 혼자 일한다는 것이고 8시간 이상을 방 안…
오래된 아이맥, SSD 교체하기
2015년 후반에 만든 21.5인치 아이맥을 지금까지 사용하고 있으니 거의 5년이 다 되어간다. 구입 당시에 여러 옵션이 있었는데 그중에 하드 디스크 옵션에서 적잖게 망설였던 기억이 있다. HDD과 SSD, 그리고 퓨전드라이브 기본이 하드 디스크였다. 5년 전이었지만 그래도 웬만한 랩탑은 대부분 SSD를 사용하고 있던 터라 HDD를 사용하는건 맘에 들지 …
순환 참조
며칠전 일하다 발생했던 일이다. 깃헙 코드를 로컬환경으로 가져와 머지한뒤 빌드하고 브라우져로 프론트엔드 어플리케이션을 돌리는데 이런 메세지가 나왔다. 보통 오류 메세지와 함께 출력되는 스택 스레이스 몇 단계만 따라가면 원인을 찾기 마련이다. 하지만 이 녀석은 도통 모르겠다. 개발팀 슬랙방에 문의해보니 경험 많은 선임자로부터 이런 얘길 들었다. 웬지 서큘라…
리액트 라우터를 활용한 권한별 라우팅 제어
라우팅 로직을 만들때 매번 들어가는 것이 인증과 인가이다. 이 둘은 비슷하면서 엄연히 다른데 인증(Authentication)은 사용자를 식별하는 것이고, 인가(Authorization)은 식별된 사용자의 권한을 제어하는 것을 말한다. 인증과 인가에 따라서 분기 처리하는 라우팅 로직을 작성하는 것은 대부분의 어플리케이션에서 제공되어야 할 필수 기능이다. …
플렉스(flex) 박스, 한 번 정리하고 가자
화면을 개발할 때마다 곤혹스러운 점이 있는데 "내가 플렉스를 알고 사용하는건가?" 라는 생각이 들 때 그렇다. 스타일을 수정하면서 어찌 어찌 레이아웃을 만들어 내긴 하는데 이게 제대로 알고 하는게 아닌것 같아서 좀 찝찝하다. 플렉스 관련 글이 많이 있지만 (이 글이 좋다. A Complete Guide to Flexbox) 정리해 보면서 한 번더 손에 익…
깃(Git) 개념과 상황별 팁
git-usage 저장소가 어느새 스타 100을 넘었다. 에버노트에 정리한 것을 깃헙에 공유한 것인데 필요한 분들이 그만큼 많았나 보다. 기억나지 않을때 들춰볼 요량으로 명령어만 나열한 것인데, 다시 쭉 읽어보니 이해하기 어려운 부분도 종종 눈에 띈다. 여기에 살을 좀 더 덧붙여 "깃 노하우" 혹은 "팁"을 정리해 보면 좋겠다. 기본 개념과 명령어 초기화…
컴포넌트의 역할 분리
리액트로 프론트엔드 일을 하면서 지난 1년간 가장 많이 사용한 관련 기술이 리덕스다. 최근 Mobx를 사용하면서 구조가 다소 바뀌긴 했지만 컴포넌트를 구성하는 방식은 여전히 리덕스를 사용했던 방식이 남아있다. 몇 년 전 플룩스 아키텍처가 나올 즈음 이 글(Presentational and Container Components)을 읽고 컴포넌트 설계 방식을…
프론트엔드 개발환경의 이해: 웹팩(심화)
이전글 웹팩(기본편)에서는 웹팩의 개념과 간단한 사용법에 대해 살펴보았다. 웹팩은 프론트엔드 개발 서버를 제공하고, 몇 가지 방법으로 빌드 결과를 최적화 할 수 있는데 이번 글에서 자세히 살펴 보겠다. 1. 웹팩 개발 서버 1.1 배경 지금까지는 브라우져에 파일을 직접 로딩해서 결과물을 확인했다. 인터넷에 웹사이트를 게시하려면 서버 프로그램으로 이 파일을…
프론트엔드 개발환경의 이해: 린트
1. 배경 오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 보푸라기가 많으면 옷이 보기 좋지 않은데 코드에서도 이런 보프라기가 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를 사용하지 않은 경우...... 보프라기 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 어플리케이션도 동작은 한다. 그러나 코드의 가독성이 떨어지고 점점 유지보수…
프론트엔드 개발환경의 이해: Babel
1. 배경 1.1 크로스 브라우징 사용하는 말이 달라서 바벨탑이 실패했듯이, 브라우져마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때가 많다. 스팩과 브라우져가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 작년까지만 해도 사파리 최신 브라우져는 Promise.prototype.finally 메소드를 사용할 수 …
프론트엔드 개발환경의 이해: 웹팩(기본)
1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. 아래 덧셈 함수를 보자. math.js: app.js: 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.…
프론트엔드 개발환경의 이해: NPM
몇 년 전부터 프론트엔드 개발자 채용 공고에 Node.js 기술이 우대 사항 항목으로로 추가 되었다. Node.js는 백엔드를 구현하는 기술이라고 생각했다면 이 채용 항목이 의문이었을지 모르겠다. 웹 어플리케이션 개발에 직접적으로 사용하는 것은 아니지만 개발 환경을 이해하고 구성하는데 Node.js를 모르면 언젠가는 한계에 부딪히게 될 것이다. 1. 프론…
IE의 ajax 캐시 이슈를 처리하는 방법
이번 프로젝트 QA 중에 IE11 브라우져에서만 데이터가 잘 안나온다는 피드백을 받았다. 오랜만에 윈도우즈를 켜고 인터넷 익스플로러를 열어 문제를 확인했는데 재현 시나리오는 이렇다. 목록 화면에서 상세 화면으로 들어가 내용을 수정한다. 수정 내용을 저장하고 목록화면으로 돌아온다. 수정 내용이 반영되지 않는다. (이전 목록 내용이 유지된다) 개발자 도구를 …
리덕스 사가 사용하기 (타입스크립트 버전) - 2편
이전 글에 이어서 리덕스 사가 예제를 몇 가지 만들어 보자. 메모 추가: 버튼 상태와 리다이렉션 기존에 만들어 둔 메모 추가 화면은 아래와 같다. 메모 추가 화면 여기에 메모 추가하는 로직을 아래처럼 작성하고 싶다. 저장 버튼을 클릭하면 메모 추가 버튼을 비활성화해서 추가 입력을 막는다 메모 추가 API 요청이 발생하고 API 응답을 받으면 스토어에 저장…
리덕스 사가 사용하기 (타입스크립트 버전) - 1편
지난 글에서 정리한 것 처럼 리덕스는 다음 순서로 상태를 관리한다. 액션 객체 생성 스토어로 전달 리듀서가 액션 객체를 수신 액션 타입에 따라 전달받은 패이로드를 가지고 스토어 상태 변경 이러한 일련의 과정은 모두 동기적으로 일어난다. 가령 API 통신같은 외부 리소스를 가져오는 경우 동기적인 리덕스 흐름만으로는 해결할 수 없다. 그래서 리덕스는 미들웨어…
리액트 리덕스 사용하기 (타입스크립트 버전)
단일 페이지 어플리케이션 구현을 위해 지난 글 "리액트 라우터 사용하기 (타입스크립트 버전)"에서 간단히 정리했다. 브라우져에서 하나의 페이지로 어플리케이션을 구현하려면 라우팅 뿐만아니라 데이터도 다루어야 하는데 리덕스를 많이 사용한다. 리덕스는 전역 데이터를 단순한 방법으로 사용할수 있는 일명 '상태 관리 도구'이다. 이번 글에서는 타입스크립트를 이용해…
리액트 라우터 사용하기 (타입스크립트 버전)
지난 글 리액트, 타입스크립트 시작하기에 이어 타입스크립트로 리액트 라우터를 어떻게 사용하는지 정리해 보자. 패키지의 기본 사용법 위주의 설명 보다는 메모장 예제를 보면서 웹 어플리케이션에 라우터를 어떤 방식으로 적용해야 하는지 알아보겠다. 설치 및 라우터 세팅 브라우저 라우터인 react-router-dom 패키지와 타입을 프로젝트에 다운로드 한다. …
리액트, 타입스크립트 시작하기
올해 3월, 진행중인 프로젝트를 인수인계 받았다. 타입스크립트와 리액트 기술로 만든 싱글페이지 어플리케이션이다. 주변에 이러한 조합으로 사용하는 이들이 꽤나 있는것 같았고 평소 타입스크립트를 관심있게 보고 있어서 좋은 기회를 얻은 셈이다. 이번 글에서는 타입스크립트로 리액트 개발 환경을 구성하는 방법에 대해 정리해 보겠다. create-react-app(…
러닝머신과 도로 위
밖에서 뛰기 좋은 날씨다. 겨울에는 헬스장에서 운동하지만 매년 돌아오는 봄에는 집 근처 공원에서 뛰는 것이 소소한 행복 중 하나다. 그런데 헬스장에서만큼 밖에서 뛰지 못한다는 것은 이상한 일이다. 러닝머신 위에서 30분 뛸 수 있는 것도 밖에서는 20분 채우기가 어렵다. 생각만큼 다리가 올라오지 않고, 숨은 훨씬 헐떡댄다. 이러한 데는 몇 가지 차이 때문…
변화와 고통 그리고 집중
변화는 고통을 수반한다. 마지막까지 부들부들 떨며 아령을 들어 올릴 때 근육 하나가 생긴다. 다이어트하는 사람들은 오늘의 허기를 참아내야만 살이 빠진다. 무엇이든 더 나은 모습으로 변화하기 위한 과정은 호락호락하지 않은 듯하다. 유혹을 참고 고통을 인내할 수 있는 것은 목표에 대한 강한 집중력이라고 생각한다. 학생 대학 시절 얘기를 잠깐 꺼내 보자. 입학…
Go로 투두 웹 어플리케이션 만들기
지금까지 Go 기본 패키지에 대해 정리했던 것을 기반으로 웹 어플리케이션을 만들어보는건 어떨까? SPA 구조의 프론트엔드를 공부할 때 종종 둘러보는 TodoMVC를 이용하고, Go 언어로 백엔드를 만들어 가는 과정을 정리해 보면 웹 어플리케이션 개발을 이해하는데 도움이 되지 않을까 생각한다. TodoMVC에서 가져오기 먼저 go-todo란 폴더부터 만들자…
Go net/http 패키지
웹 어플리케이션을 개발하려고 Go 언어를 살펴보기 시작했다. 앞서 정리한 몇 가지 기본 패키지는 net/http 패키지를 사용하기 위한 준비 과정이라 생각하자. 이번에는 네트웍 프로그래밍을 위한 net/http 패키지 사용법을 정리해 보겠다. Get 요청하기 브라우져는 사용자가 입력한 url를 통해 해당 웹페이지를 요청한다. 이처럼 웹상의 리소스를 요청하…
Go encoding/json 패키지
소프트웨어는 바이트 단위로 데이터를 인식한다. 97이란 바이트 값을 정수로 보면 97이지만 문자로 보면 "a"다. 메모리 바이트는 해석하는 틀에 따라 달라지는데 이러한 변환을 '인코딩' 또는 '마샬링'이라고 한다. Go의 encoding이 이를 담당하는 기본 패키지다. 실제로는 인터페이스 타입만 정의 되어 있고 데이터 형태에 따라 서브 패키지로 기능을 제…
Go time 패키지
프로그래밍에서 시간은 꽤 빈번히 다루는 영역이다. 가령 디비에 저장된 시간을 타임존마다 다른 값으로 보여줘야 하는 경우다. 모든 언어단에서 이를 지원하지만 자바스크립트 경우 moment.js 따위의 써드파티 라이브러리를 더 애용하는 편이다. 반면 Go언어는 time 패키지를 기본으로 제공하는데 이것만으로도 원하는 기능을 비교적 쉽게 구현할 수 있다. Ti…
Go fmt 패키지
Go 언어를 접하면서 가장 처음 사용하는 것이 fmt 패키지다. 기본적인 출력과 입력 포맷 관련한 기능을 제공하는데 이 글에서는 fmt에서 제공하는 함수와 타입의 사용법에 대해서 살펴보겠다. 템플릿 fmt 패키지는 포맷 템플릿을 이해하는 것이 핵심이다. 이것은 출력할 텍스트와 동사(verb)라고 부르는 변수를 출력하는 방식으로 구성된 문자열이다. 가령 a…
기록
연말부터 서점 문구 코너에는 신년 다이어리가 브랜드마다 즐비하다. 아기자기한 디자인에서부터 고급스러움이 물씬 풍기는 가죽 커버까지 계획적으로 새해를 살겠다는 이들의 욕망을 한껏 부추긴다. 2018년부터 새롭게 시도한 것 중 하나가 다이어리 사용이다. 디지털에서 종이로 옮겨오면서 얻은 장점과 그간의 기록 방식에 대한 변화를 정리해 봤다. 일기장 유년시절 일…
코드랩 시리즈를 마치고 느낀점
지난달 노드JS 강의는 난이도 조절 실패로 모두가 어려워했다. 종료시간은 다가오고 준비해온 것은 절반도 못해고. 초초하다. 결국에는 나중에 글로 정리해서 공유하겠다고 약속했다. 한 달이 지나서야 블로그에 정리해서 올렸다. 🌳[Node.js 코드랩] 소개 및 목차 발표의 두려움 나는 언제부터 강의를 시작했을까? 과거의 기억을 떠올리면 남들 앞에서 말하는것 …
[Node.js코드랩] 18. 마무리
구성도 다시보기 지금까지 작성했던 모듈을 그림으로 다시 살펴 보겠습니다. 모듈의 성격에 따라 총 4가지 섹션으로 구분합니다. Boostrap 이 섹션은 서버 어플리케이션을 구동하는 bin.js와 어플리케이션인 app.js로 구성됩니다. bin.js은 도메인 주소와 포트 번호를 정해서 어플리케이션에게 전달하는 역할을 합니다. 이 정보를 이용해 app.js…
[Node.js코드랩] 17. Express.js
🌳목표 지금까지 만들었던 웹 어플리케이션을 웹 프레임웍을 이용해서 다시 만들어 봅니다. Express.js로 다시 만들기 먼저 지난 시간까지 작성한 코드로 이동 하겠습니다. 우리가 가장 먼저 만들었던 debug 모듈을 기억하시나요? 이제는 NPM에서 다운받아 우리가 만든 것과 교체하겠습니다. 그리고 웹 프레임웍인 Express.js도 NPM에서 다운받습니…
[Node.js코드랩] 16. body-parser
🌳목표 요청 바디 데이터를 처리하는 body-parser를 만듭니다. 그리고 이것을 이용해 포스트 생성 API 개발을 완료합니다. 스트림 데이터 지난 시간에 POST 메소드를 갖는 엔드포인트를 라우터에 추가했습니다. 다만 컨트롤러 함수는 비어 있는 채로 남겨 두었는데요. req.body 값을 로그로 출력하는것 까지만 코딩했습니다. 이 데이터는 어떻게 접근…
[Node.js코드랩] 15.라우터 Get, Post
🌳목표 메소드 이름으로 라우팅하는 기능을 구현합니다. POST 메소드 요청 화면을 조금 변경했는데요, 브랜치를 이동하고 확인해 볼까요? 서버를 실행하고 브라우져로 접속합니다. 화면 상단에 입력 폼을 만들었습니다. 여기에 포스트 제목과 내용을 입력하고 submit 버튼을 눌러 볼까요? "POST /api/posts" 엔드포인트를 요청하고 있네요. 지금까…
[Node.js코드랩] 14. 요청 객체
🌳목표 Response 모듈을 만든 것처럼 익스프레스와 유사한 요청 객체인 Request 모듈을 만듭니다. 쿼리스트링 요청 먼저 브랜치를 이동해 볼까요? 서버를 재 구동하고 브라우져로 접속해 보세요. 크롬 개발자 도구로 보니 에러가 나오는데요. 이전과 다르게 /api/posts 요청에 쿼리문자열이 추가 되었습니다. 그런데 이게 404로 응답되는군요. 분…
[Node.js코드랩] 13. 응답 객체
🌳목표 익스프레스와 유사한 응답 객체인 Response 모듈을 만듭니다. Response 모듈 앞으로 웹 개발을 할 때 API는 자주 사용 될 것입니다. 단일 페이지 어플리케이션에서는 거의 모든 데이터를 API 형태로 다루기 때문이죠. 이 때 서버는 JSON 형식으로 데이터를 응답해야 하는데 꽤 자주 사용되는 코드가 될 듯 싶습니다. 뿐만아니라 상태 코드…
[Node.js코드랩] 12.포스트 조회 API
🌳목표 이전 시간에 구현한 라우터 기능을 이용해서 API를 하나 만들어 보겠습니다. 어떤 API죠? 먼저 실습을 위한 브랜치로 이동해 볼까요? 서버를 구동하고 브라우져로 접속해보세요. "Loading..." 메세지가 사라지지 않네요. 뭔가를 로딩하고 있는데 잘 안되는가 봅니다. 크롬 개발자 도구를 확인하면 "GET /api/posts" 요청을 보냈는데…
[Node.js코드랩] 11.라우터 use
🌳목표 라우터 기능을 만들어 다양한 경로를 처리할 수 있습니다. 기존 라운팅의 한계 지금까지 우리가 만든 어플리케이션은 정적파일을 제외한 모든 요청을 index 미들웨어가 처리합니다. "GET /foo" 로 요청하더라도 index 미들웨어가 동작해서 index.html 파일을 제공하는 것이죠. 아, 물론 에러가 발생하면 다르지만요. 만약 아래와 같이 코딩…
[Node.js코드랩] 10.커스텀 모듈 logger
🌳목표 요청이 오더라도 서버의 터미널에는 아무런 정보도 남아 있지 않습니다. 이번 시간에는 서버 로그를 기록하는 미들웨어인 logger를 만들어 보겠습니다. 익스프레스JS 진영의 morgan과 유사한 모듈입니다. 🐤실습 - Logger 미들웨어를 구현해 보세요 매 요청마다 메소드명과 URL을 터미널에 찍어 보세요. 먼저 지난 시간까지 작성한 코드로 이동합…
[Node.js코드랩] 9.미들웨어 활용
🌳목표 Middleware 모듈을 활용하여 serve-static의 문제를 해결합니다. 기존 코드도 미들웨어 형태로 개선합니다. Middleware로 Application.use() 메소드 구현 이전 시간까지 작성한 코드로 체크아웃 하겠습니다. 어플리케이션에서 미들웨어 함수를 등록해야 하는데요 Application.use() 메소드가 그 역할을 하도록 하…
[Node.js코드랩] 8.미들웨어
🌳목표 미들웨어 패턴을 구현하여 serve-static 모듈의 문제를 해결합니다. 미들웨어 패턴 서버는 요청에서부터 응답까지 하나의 흐름을 가지고 있습니다. 이 요청과 응답 사이에 실행되는 함수 목록을 우리는 "미들웨어 함수"라고 하겠습니다. 미들웨어 함수는 본연의 역할을 한 뒤 두 가지 일을 할 수 있습니다. ▲ 요청한 클라이언트에게 응답 하거나 ▲ 다…
[Node.js코드랩] 7.커스텀 모듈 serve-static
🌳목표 이전 코드를 리팩토링하여 serve-static 모듈을 만듭니다 🐤실습 - serve-static 모듈 구현 이전 시간까지 했던 코드로 브랜치 이동하겠습니다. src/Application.js에 있는 정적파일 다루는 로직을 src/serve-static.js 파일로 분리하세요. 🐤풀이 그럼 같이 풀어 볼까요? src/serve-static.js 파…
[Node.js코드랩] 6.정적 파일
🌳목표 서버에 자원 중에서 브라우져에 다운로드하여 화면을 그리는 파일을 정적파일이라고 합니다. 이번에 이 기능을 만들어 봅니다. 정적 파일이란? 미리 만들어둔 브랜치로 이동하겠습니다. public 폴더가 보이죠? 이곳에 모든 정적파일을 모아두었습니다. 이 파일을 브라우저에서 요청을 하면 서버에서는 다운로드 할수 있도록 처리해 주어야 합니다. 🐤실습 - 정…
[Node.js코드랩] 5.커스텀 모듈 Debug
🌳목표 노드에서 꽤 많이 사용되는 debug 모듈을 직접 만들어 봅니다. Debug를 사용하는 이유 Debug 모듈은 노드에서 가장 많이 사용하는 디버깅 모듈입니다. 로그를 구조적으로 기록할 수 있다는 점에서 console.log 보다 뛰어납니다. Debug가 갖고 있는 장점은 아래 두 가지입니다. 태그를 지정한 로그 함수를 만들 수 있다 태그별로 색상을…
[Node.js코드랩] 4.어플리케이션
🌳목표 우리가 만들었던 server.js는 http 모듈을 직접 가져다 사용한 것입니다. 모듈의 createServer() 함수와 listen() 함수를 직접 사용했죠. 외부 모듈 혹은 라이브러리 따위를 사용할 때는 한 번 래핑해서 사용하는 것이 좋습니다. 우리 코드가 라이브러리와 강하게 커플링 되지 않도록 하는것이죠. 한 단계 버퍼를 둬서 외부 코드의 …
[Node.js코드랩] 3.리팩토링
🌳목표 코드를 유연하고 읽기 쉽게 개선하는 것을 "리팩토링 한다"라고 말하는데요, 이번 글에서는 이전에 작성한 헬로월드 코드를 리팩토링 해 보겠습니다. server.js 파일에 작성한 코드는 두 가지 일을 하고 있습니다. 서버 생성 - createServer() 서버 구동 - listen() 🐤실습 - 역할에 따라 파일을 분리해 보세요 위에서 나눈 두 가…
[Node.js코드랩] 2.기본 모듈 http
🌳목표 노드의 기본 모듈 중 네트웍 기능을 제공하는 http 모듈을 알아 봅니다. 헬로월드 코드로 http모듈을 이용한 서버 어플레케이션을 만드는 것이 목표입니다. 왜 http 모듈부터 시작하나요? 우리는 웹 어플리케이션을 만들어 볼겁니다. 웹 서버를 만들기 위해서는 꽤 많은 네트웍 지식을 알고 있어야 합니다. 가령 tcp, listen, 3way han…
🌳[Node.js 코드랩] 소개 및 목차
소개 익스프레스JS(Express.js)는 노드에서 가장 많이 사용하는 웹 프레임웍 입니다. 이것을 이용해서 API 서버나 웹 서비스를 만드는 강의는 몇 번 진행했는데요. 라이브러리나 프레임웍 도움 없이 직접 웹 서버를 만들어 본다면 웹 기술을 더 본질적으로 이해할 수 있지 않을까 생각합니다. 며칠 전 진행한 코드랩 "노드JS를 이용한 웹 어플리케이션 이…
[Node.js 코드랩] 1.오리엔테이션
🌳목표 이론적인 내용보다는 코드를 직접 따라하는 내용이 많습니다. 중간에 실습 문제가 있어서 여러분이 직접 코딩하는 순서도 있구요. 이런 환경을 갖추기 위한 실습 세팅 작업부터 시작하겠습니다. 프로젝트 생성 모든 코드는 깃헙 저장소에 올려 두었습니다. 이 코드를 여러분 컴퓨터에 복사해서 가져 옵니다. 진행 순서에 따라 브랜치를 여러개 만들어 두었는데요, …
비오는 날, 집에서 일하기 좋은 날씨다
비오는 날. 집에서 일하기 좋은 날씨다. 직장생활과 서울살이. 해가 거듭될수록 원격근무에 대한 생각이 깊어진다. 두 가지 관점으로 얘기해 볼수 있겠다. 하나. 환경이 업무에 미치는 영향은 적지 않다 오픈 사무실이 유행이라지만 어느 정도 프라이버시가 보장된 사무공간을 선호한다. 누군가 내 모니터를 들여다보고 있다는 생각이 들면 여간 신경쓰이는게 아니다. 한…
AWS를 슬랙으로 모니터링
여러 서비스를 AWS 기반으로 운영하면서 가장 많이 사용하는 컴퓨팅 서비스가 빈스톡(Elastic Beanstalk)이다. 플래폼이나 로드밸런서 같은 서버 세팅작업을 대폭 줄여주기 때문이다. 클릭과 설정 코드 몇 줄이면 단숨에 쓸만한 서버를 뚝딱 만들어 내기 때문에 데브웁스에게는 그야말로 제격이다. 빈스톡이 제공하는 기능 중 하나인 알림은 등록한 이메일 …
앤트 디자인 - 어드민 개발을 위한 프레임웍
dashboard 어드민 웹개발에 적합하다 초반엔 고객이 사용하는 제품에만 몰두하는 경향이 있다. 웹인지 모바일인지, 어떤 디자인으로 갈건지에 대해 적잖케 고민한다. 어느 정도 구상하다보면 자연스럽게 서비스 운영에 대한 생각으로 넘어간다. 운영은 데이터를 관리하는 것을 말한다. 마케팅 전략이나 서비스 정책에 따라 데이터를 수시로 변경해야하는데 쿼리를 직접…
리액트, 노드 백엔드 통합 후 CI 연동하기
지난 블로그에서 설명한 리액트 기반의 프로젝트를 노드 서버로 통합하는 작업을 진행했다. 물리적으로 분리된 프론트앤드와 백엔드를 하나의 서버로 합치는 일이다. 각자를 분리하면서 얻는 이점도 있겠지만, 제한된 인력 리소스로는 이를 통합하는 것이 생산성 측면에서 더 좋다고 판단했기 때문이다. 효율적인 업무를 위해서는 서버의 통합 뿐만 아니라 코드 저장소, 개발…
React로 만든 프로젝트 톺아보기
최근 이직 후 리액트(React.js) 기반의 어드민 사이트를 만질수 있는 기회가 생겼다. AE(Account Executive)가 사용하는 서비스로 광고 캠페인을 관리하고 효율을 모니터링 할 수 있는 인하우스 어플리케이션이다. 업무 파악겸 리액트 기반의 프로젝트에서는 어떤 기술을 사용하는지 프로젝트에서 사용한 기술을 중심으로 정리해 보았다. Creat…
VueJS 폼 검증
logo 웹 서비스를 개발할때 사용자 인터랙션이 가장 많은 부분이 폼 필드다. 단순한 로그인 화면부터 어드민의 복잡한 상품 등록 화면까지 폼은 사용자의 입력을 받아 서버로 전달하는 역할을 한다. 이 데이터가 API를 통해 서버로 전달되고 일련의 검증 과정을 마친후 비로소 데이터베이스에 들어가는 흐름이다. 입력 데이터 검증을 서버측에서 수행하지만 API를 …
UI 컴포넌트 확장
brand image 하나의 서비스를 만들다보면 다양한 디바이스에에 동작하는 어플리케이션을 만들어야할 때가 있다. 핸드폰, 테블릿 그리고 데스크탑까지 화면 크기에 따라 다른 컨텐츠와 레이아웃을 제공해야하는 경우가 그렇다. 방법은 두 가지. "반응형"과 "분리된 도메인" 반응형은 CSS 미디어쿼리 기반으로 디바이스 크기에 따라 스타일시트를 다르게 적용하는 …
Vue-Router 살펴보기
뷰JS의 간단한 라우팅 단일 페이지 어플리케이션(SPA)에서 가장 먼저 처리해야 할 것이 바로 라우팅이다. 서버에서 라우팅은 URI에 따라 해당하는 정적파일을 내려주는 방식이다. 이를 브라우져에서 구현해야 하는것이 SPA 개발의 핵심이다. 아이디어는 간단하다. 요청 URI에 따라 브라우져에서 돔을 변경하는 방식이다. Vue.js 공식 문서의 Scaling…
Vuex, Vue-router, Axios를 이용한 SPA 인증 구현
웹 서비스를 개발할때 매번 등장하는 것이 바로 "인증"이다. 사용자로부터 아이디, 비밀번호를 입력받아서 서비스 사용을 허가해 주는 기능으로 대부분의 서비스가 가지고 있는 기능이다. 로그인을 통해 인증한 뒤에는 권한에 따라서 각 페이지 접근할 수 있게된다. 이러한 권한에 관리는 라우팅시에 하는데, 권한이 있으면 요청한 화면을 보여주고 그렇지 않으면 적절하게…
jQuery 보다 먼저 알았으면 좋았을 것들
웹개발할 때 난 jquery 부터 사용하기 시작한것 같다. 라이브러리가 주는 편리함 넘어 어떻게 DOM API를 사용하는지는 몰랐다. 앵귤러, 리엑트 같은 프레임웍을 사용할 때도 마찬가지다. 기능을 구현하는데 별다는 어려움은 없었다. 그러다 보니 다양한 개발 환경에 민첩하게 움직이기 쉽지 않다. 운영중인 서비스에 쉽게 UI 프레임웍을 도입할수 없는 경우.…
2017년을 보내며
작년 이맘때 회고의 글을 읽어봤다. 글 말미에 프론트엔드 개발자로 일해보겠다고 말했는데 이직을 염두해둔 말이었다. 나는 지난 2017년 배민찬이라는 모바일 반찬가게의 프론트엔드 개발을 해왔다. 웹프론트엔드 영역에 본격적으로 뛰어 들어 기술적 역량을 키우고, 푸드 커머스라는 새로운 영역의 멋진 서비스를 만들고 싶었다. 물론 배민처럼 핫하게 말이다. 지난 1…
자바스크립트 this 바인딩 우선순위
자바스크립의 컨텍스트(this) 바인딩은 헷갈릴 때가 많다. "이 정도면 이해할수 있겠군" 하다가도, 막상 코딩하다 보면 예상치 못한 상황에 부딪쳐 당황한적이 있지 않은가? 이 글은 자바스크립트 컨텍스트 바인딩을 "우선순위"라는 관점에서 정리했다. 카일 심슨의 글 this와 객체 프로토타입을 참고했다. 기본 바인딩 먼저 아래 코드로 시작해 보자. 기본적인…
익스프레스 만들기 Day 4
이제 인증 기능을 만들어 보자. 쿠키, 세션, 로그인 순서로 진행하면 되겠다. 쿠키 먼저 쿠키부터 시작하자. 문서에 노드의 쿠키설정 방법을 찾았다. Set-Cookie 헤더를 설정해 주면 되는군. 익스프레스에서는 헤더에 쿠키를 설정하기 위해 응답객체 메소드로 형태로 req.cookie() 함수를 제공한다. 그럼 내가 만든 response.js에도 cook…
익스프레스 만들기 Day 3
지금까지 만든 페이지가 포스트 조회, 생성임. 편집까지 만들어보자. 아니, 귀찮으니깐 삭제 기능부터 만들자. 삭제 기능 구현 조회 페이지의 각 포스트 하단에 삭제 버튼을 만들고 버튼을 클릭할때 호출할 DELETE /api/posts?id= API를 만들면 되겠다. application에 delete 메쏘드 기능도 추가하자. (현제는 post, get까지 …
익스프레스 만들기 Day 2
미들웨어 구조를 만들고 났으니 기능을 추가하는 것 좀더 쉬울것 같다. 우선은 테스트 코드부터 정리하자. 기능만 우선 만들어 본다고 제대로 못했다. ... 오케이 supertest 위주로 완료. 로거 요청 정보를 터미널에 찍어보자. 메소드, 주소 정도만 찍어도 좋겠다. 익스프레스의 morgan 이랑 비슷한 녀석이다. 미들웨어 형식에 맞게 작성하면 되겠다. …
익스프레스 만들기 Day 1
이번 추석만 기다리고 있었다. 어느때 보다 긴 연휴라서 그리고 혼자있는 시간이 생겨서 집중해서 해보고 싶은 일이 있었다. 프레임웍을 사용하지 않고 웹 어플리케이션을 개발하는 것. 만들게 되면 아마도 노드 익스프레스와 비슷한 구조일 것 같다. 헬로 월드부터 시작하자 서버 어플리케이션이니깐 app.js에다 헬로 월드 코드부터 만들자. app.js: 음... …
프론트엔드 개발을 위한 Gulp
Gulp를 이용한 프론트엔드 개발 자동화에 대한 번역글입니다. (원문: https://nystudio107.com/blog/a-gulp-workflow-for-frontend-development-automation) Gulp는 멋진 작업을 빠르게 수행할수 있도록 도와주는 워크 플로우 자동화 도구에요. 이 글은 프론트엔드 개발을 위한 사용방법에 대해 설명…
에러 처리를 위한 익스프레스 가이드
원문: http://thecodebarbarian.com/80-20-guide-to-express-error-handling.html 익스프레스의 에러 처리 미들웨어는 HTTP 응답 로직을 견고하게 만드는 파워풀한 도구입니다. 아래는 익스프레스 코드로 작성한 코드입니다. 한 두 개 엔드포인트라면 이런 패턴이 잘 동작할테지만 여러 개를 유지해야한다면 금새 …
Node.js Stream 당신이 알아야할 모든 것 3편
원본: https://medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93 이전글: (번역)Node.js Stream 당신이 알아야할 모든 것 2편 스트림 구현하기 노드js의 스트림을 말할때 두 가지 다른 태스트가 있습니다 스트림을 구현하는 작업 스트림을 사용하는 …
Node.js Stream 당신이 알아야할 모든 것 2편
원본: https://medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93 이전글: (번역)Node.js Stream 당신이 알아야할 모든 것 1편 스트림 101 (기초?) Node.js에는 네 가지 기초 스트림 타입이 있습니다. Readable, Writable,…
Node.js Stream 당신이 알아야할 모든 것 1편
원본: https://medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93 노드js의 스트림은 정말 다루기 어렵고 이해하기 힘든 것으로 유명합니다. 글세요. 이제는 더 이상 그렇지만은 않을 거에요. 지난 몇년간 개발자들은 스트림을 쉽게 다루기 위한 노드 패키지를 …
웹팩의 file-loader와 url-loader
웹팩에서 이미지나 폰트같은 파일을 다루는데 file-loader와 url-loader를 많이 사용하는 것 같다. 뷰JS를 시작할 때 vue-cli를 이용해서 코드 스캐폴딩을 만들어 내는데 이 중 웹팩 설정파일에 보면 나온다. 파일을 처리하는 file-loader와 파일 내용을 모듈에 문자열 형태로 추가하는 url-loader에 대해 정리해 보자. file…
웹팩의 기본 개념
자바스크립트 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 그렇다고 여러개 파일을 브라우져에서 로딩하는 것은 그만큼 네트웍 비용을 치뤄야하는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데 잘못 작성할 경우 변수 충돌의 위험성도 있다. 함수 스코프를 사용하는 자바스크립트는 즉시호출함수(IIFE)를 사용해 모듈을 만들 …
흐름 기반 프로그래밍
이전글: (함수형JS) 순수성, 불변성, 변경정책 앞서 설명한 순수성, 불변성, 변화 제어가 함수 조립에서 어떤 역할을 하는지 알아봤다. 이러한 특징을 이용해 함수를 더 자유롭게 조립하는 방법을 이번 글에서 살펴보겠다. curry-banner 체이닝 아래와 같은 함수 체이닝 기법은 코드를 매우 간결하고 읽기 쉽게 만든다. 사람 객체를 만들어 이름과 나이를…
순수성, 불변성, 변경정책
이전글: (함수형JS) 함수로 함수 만들기3 부분적용 앞서 함수로 함수를 조립할 수 있는 방법을 살펴보았다. 함수 조합 기법 뿐만 아니라 프로그램 개발의 복잡성을 줄이는 것이 함수형 프로그래밍이 추구하는 바다. 이번 글에서는 상태변화를 최소화할 수 있는 기법에 대해 알아보겠다. Purity-Immutability-and-Policies-for-Change…
함수로 함수 만들기3 부분적용
이전글: (함수형JS) 함수로 함수 만들기2 커링 partial-application-banner 커링을 충분히 이해했다면( (함수형JS) 함수로 함수 만들기2 커링 ) 부분적용은 쉽게 접근할 수 있다. 커링이 하나의 인자만 받는 함수열을 만드는 것이었다면, 부분적용은 여러개 인자를 미리 고정하고 나머지 인자만 받는 함수 하나를 반환한다. 여러번 함수를 …
Vue 글로벌 컴포넌트 테스트
뷰js의 장점 중 하나는 기존의 프로젝트에 점진적으로 적용할 수 있다는 점이다. 이것은 앵귤러나 리액트를 사용해 본 사람이라면 쉽게 납득할 수 있을 것이다. 앵귤러 2를 사용하려면 타입스크립트를 알아야 한다. 프레임웍이기 때문에 프로젝트 전체 설계를 앵귤러 식으로 변경해야하는 큰 작업이다. 리액트는 ES6, JSX, 웹팩, 바벨 등 새롭게 공부해야할 기술…
함수로 함수 만들기2 커링
이전글: (함수형JS) 함수로 함수 만들기1 다형성 curry-banner 왜 커링을 사용하는가? 이 글에서는 함수로 함수 만들기 두 번째 시간으로 커링(currying) 에 대해 알아보겠다. 커링이란 다중인자를 받는 함수를 단일 인자 함수열로 만드는 것을 말한다( 커링 - 위키백과, 우리 모두의 백과사전). 커링의 정의에 대해서는 잠시 잊어 버려도 좋다…
함수로 함수 만들기1 다형성
이전글: (함수형JS) 고차 함수 ploymophism 지난 글에서 고차함수를 다뤘다. 함수를 받고 다른 함수를 반환하는 고차함수를 이용하면 자바스크립트에서 다형성(polymorphism)을 구현할 수 있다. 다형성이란 타입이 다른 자료형이 하나의 상위 자료형으로 속하게 되는 개념인데 OOP를 지원하는 언어에서 많이 사용한다. 이번 글은 고차함수를 이용해…
고차 함수
high-order-function 함수형 프로그래밍을 설명하기에 앞서 프로그래밍에서는 일급 객체(First-class citizens)라는 개념이 있다. 일급 객체는 다음 아래와 같은 특성을 가지고 있다. (참고: 일급 객체 - 위키백과, 우리 모두의 백과사전) 변수 혹은 데이터 구조에 담을 수 있다 파라매터로 전달할 수 있다. 반환값으로 사용할 수 있…
과연 Vue.js가 앵귤러나 리엑트보다 좋을까?
이 문서는 Vue.js Is Good, But Is It Better Than Angular Or React? 를 번역한 내용입니다. Vue.js는 웹 인터페이스를 만들기 위한 자바스크립트 라이브러입니다. 다른 도구를 함께 사용하면 "프레임웍"이 될수 있는 녀석이죠. 우리가 작성한 최근 블로그를 통해 여러분은 이미 Vue.js가 최고의 자바스크립트 프레임…
자스민으로 프론트엔드 테스트 코드 작성하기
노드에서는 모카로 테스트 코드를 작성했다. 문서도 깔끔하고 함수 사용하는 것도 간단해서 어렵지 않았다. 한편 프론트엔드에서는 테스트 러너로 자스민(Jasmine) 을 사용하는데 이게 좀 까다로웠다. 문서가 정확하지 않는 것인지, 아니면 잘못 이해하고 사용한 것인지 아직도 모르겠으나 문서보다는 스택오버플로우에서 동작 가능한 사용법을 찾는 경우가 많았다. j…
Vue.js 살펴보기
첫인상 뷰js 문서를 읽어보면서 느낀것은 "쉬운데?" 앵귤러나 리엑트 문서와는 다르게 비교적 이해하기 쉬운 문서였다. 최신 유행하는 웹 프레임웍에 익숙해진 탓인지 비슷한 기술로 구현되어 있는 뷰js가 쉽게 느껴졌다. 무엇보다도 잘 번역된 한글 문서가 이 녀석을 더 친숙하게 해준것 같다. 새로운 프레임웍이 나올때 마다 토이 프로젝트에 적용해 보는 편이지만…
Apex로 좀 더 편리한 람다 개발환경 만들기
웹사이트의 성능 측정을 위한 도구 중 구글의 PageSpeed 라는 툴이 있다. 웹사이트 주소를 입력하면 자바스크립트, CSS 파일 등 정적파일이 몇 개고 총 용량이 얼마인지 분석해 준다. 게다가 개선 방법에 대한 가이드라인도 제시해 주는 웹사이트 성능 측정 도구다. 사이트 개선 작업 후 개선 효과를 확인하기 위해 툴을 돌리고 있는데 문제는 사이트 내용이…
의존성 주입
의존성 주입은 어떻게 사용하는가? 의존성 주입(Dependency Injection, DI)을 처음 접한 것은 앵귤러JS를 사용하면서부터다. 앵귤러 컨트롤러 함수에서는 의존성 객체(대부분 서비스)를 함수 매개변수로 받은 뒤 사용한다. 대표적인 것이 $scope라고 하는 스코프 객체다. 앵귤러 컨트롤러 함수는 템플릿과 데이터를 연결하는 역할을 하는데 스코프…
시퀄라이즈에서 이모티콘 저장하기
utf8과 utf8mb4 프로젝트를 시작하고 처음 실서버에 배포할 때 겪는 실수가 있다. 데이터베이스 생성시 기본 문자셋인 latin1을 그대로 사용하는 것이다. 영문만 사용할 것이라면 문제될게 없지만 이 문자셋은 한글을 제대로 다루지 못한다. 특히나 요즘처럼 이모티콘(Emoji)를 많이 사용하는 경우라면 한글 서비스가 아니더라도 반드시 인코딩 설정을 확…
노드 개발자가 IO 작업을 시작하면 무슨일이 일어날까?
이 문서는 http://www.nearform.com/nodecrunch/developer-initiates-io-operation-wont-believe-happens-next/를 번역한 내용입니다. 모든 링크를 열어보면서 읽어보기 바란다. 코어 팀의 Saúl Ibarra Corretgé님, 이 포스트를 리뷰해 주셔서 고맙습니다. 노드JS 개발자로서 우…
토이프로젝트_라이프트래커
4년 전만 해도 기록하고 분석하는 것에 상당한 관심을 가지고 있었다. 독후감 말고도 일기와 가계부를 꾸준히 기록하고 있었다. 온/오프라인 할 것없이 여기저기 닥치는 대로 기록해 오다가, 졸업한 뒤로는 모든 것을 컴퓨터에 저장해왔다. 오픈 오피스 파일로 관리해온 데이터를 MySql이라는 하나의 데이터베이스에 옮겨 담았다. 입력하는 인터페이스도 웹기반으로 변…
토이프로젝트_페이스북 분석기
4년전 페이스북 초창기에 몇가지 아이디어가 타임라인에 올라왔다. 페북 텍스트를 분석하면 사용자의 성향을 파악할수 있지 않을까요? 친구 관계를 점수로 매겨보는 건 어떨까요? 그래프 API를 이용해서 특정 유저의 페이스북 분석기를 만들었다. OAuth 인증을 통과하면 5~10초 정도 분석시간이 소요되고 세 가지 결과를 보여준다. 자주 사용한 단어 게시물 생성…
함수형 프로그래머가 되고 싶다고? 파트6
이 문서는 https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403#.lmm1riwt1 를 번역한 내용입니다. 함수형 프로그래밍 개념을 처음으로 접해본다는 것 자체가 중요하다. 그리고 이 단계가 가장 어렵기도 하다. 하지만, 올바른 관점으로 접근한다면…
토이프로젝트_독서노트
프로그래밍을 처음 시작할 때 가지고 놀았던 토이 프로젝트를 소개해 볼까 한다. 졸업후 프로그래밍을 놓치지 않으려는 목적으로 시작한 토이 프로젝트는 실제 내가 필요한 툴을 만드는 것이었다. 프로그래머의 길, 멘토에게 묻다라는 책으로부터 영향을 받았다. 이 책은 개발자로서의 성장 관리 노하우에 대한 내용을 담고 있는데 지금도 다시 읽어 볼만한 내용이다. 쉽게…
2016년을 보내며
시간이 지날수록 사람은 성장하기 마련이다. 지난 2016년을 돌이켜 보면 여전히 개발자로서 성장을 멈추지 않았다. 기술 성장은 더디었지만 다른 부분에서 얻은 것이 많았던 한 해였다. 강의 인터넷진흥원과 함께 진행하는 웹프레임웍스에서 기술 강의를 맡았다. 입문자 대상으로한 앵귤러와 노드JS 코드랩에 강사로 참여했다. 대중 앞에서 말하는 것이 쉬운 일은 아니…
제너레이터와 프라미스를 이용한 비동기 처리
자바스크립트 개발에 있어 프론트엔드도 마찬가지겠지만 백엔드에도 비동기 로직이 많다. 어쩌면 대부분 비동기 작업일 수 있다. 디비를 읽고, 파일을 읽는 행위 자체가 서버의 기능인데 모두 논블락(non-block) 비동기로 처리되니깐 말이다. 이를 구현하는 방법 중 가장 기본적인 것이 콜백(callback) 스타일 코딩 기법이고, 이를 개선한 프라미스(Pro…
WebStorm에 Flow 기능 사용 후기
웹스톰 업데이트를 주기적으로 하는편인데 이번 버전에 flow라는 기능이 추가되었다. (2016.3 릴리즈노트) Flow는 페이스북에서 만든 코드 타입을 점검하는 툴인데 이것을 IDE 단에서 지원하게 되는 것이다. 자바스크립트 슈퍼셋으로 타입스크립트가 있긴 하지만 러닝커브가 심해 적극적으로 공부하지 못하고 있는게 사실이다. 그러는 중에 타입만 체크해 줄 수…
Yeoman 제너레이터 만들기
작년까지만 하더라도 리엑트보다는 앵귤러가 더 인기였던것 같았다. 그래서 Angular, Nodejs, Express, MongoDB 조합의 MEAN 스택에 대한 인기가 상당했고 이를 구현하는 방법도 다양했다. 이러한 프레임웍과 라이브러리를 조합하여 프로젝트를 시작할 수 있게 구성된 코드를 스캐폴딩이라고 한다. 요맨(Yeoman)은 스캐폴딩을 자동으로 만들…
아이맥, 커널 패닉에 빠지다
아이맥이 커널 패닉 상태에 빠졌다. 검은 화면에서 벗어나지 못하고 16진수로 표현한 메모리 주소만을 뿜어 내고 있다. 아이맥에 시에라(Sierra)를 업그레드한 한뒤 새로움을 대하는 즐거움에 흠뻑 빠져있었다. 이틀뒤 유투브 영상을 전체 화면 모드로 즐기고 있는데 갑자기 검은색이 화면을 뒤덮었다. 모니터 전원이 나간것은 아니다. 자세히 보면 여전히 어두운…
JSCON 2016 참관 후기
소셜과 블로그에 올라오는 파이콘 소식들을 접하면서 파이썬을 미리 공부하지 못한게 못내 아쉬웠다. 자바스크립트로 그런 비슷한게 있나 찾아봤는데 이미 2014년 부터 모임이 있었고 올해로 3년째 열리는 JSCON이라는 모임이 있었다. 이번 JSCON은 자바스크립트 개발에서 아주 핫한 리엑트와 앵귤러를 중점적으로 다뤘다. 연사들도 대부분 이런 신기술에 대한 유…
Angular2 Quickstart에서 사용하는 라이브러리는 왜 이렇게 많을까?
앵귤러2 공식 문서를 보기 시작했다. 퀵스타트를 하나씩 따라하고 있는데 아무래도 index.html에서 로딩하는 외부 라이브러리의 쓰임새를 모르고서는 학습을 진행하기가 여간 껄끄럽지 않다. 대충 각 라이브러리가 어떤 역할을 하는지 그 사용 목적을 파악해야 겠다는 생각에 좀 조사해 보았다. core-js/shim core-js라는 것은 자바스크립트 라이브러…
앵귤러 개발자가 놓치기 쉬운 10가지 사실들
앵귤러를 처음 접한건 전문 개발자로서의 커리어를 시작한 순간부터였다. 웹 개발은 학교에서 APM 기반의 지식이 전부였고 간단한 텀프로젝트를 만들었던 수준이라서 '나는 웹 개발자 입니다' 라고 말하기 민망할 정도였다. 제이쿼리를 사용하긴 하지만 간단한 돔 조작을 하는 정도 수준이지 복잡한 이벤트를 다룬다거나 하는 그런 어려운 것은 대부분 인터넷에서 구하기 …
Git Alias 사용법: 깃 단축키 설정하는 방법
깃(Git)은 코드를 관리하는데 더 없이 훌륭한 툴임이 틀림없다. 그러나 그만큼 많은 명령어를 가지고 있고 복잡한 옵션을 일일이 기억하는 것은 매우 어려운 일이다. Bash등의 쉘이 Alias 기능을 지원하는 것처럼 깃도 Alias 설정을 통해 복잡한 명령어를 간단한 단축키로 설정하여 사용할 수 있다. 깃 로그를 볼때 사용하는 명령어가 git log다. …
PYENV로 파이썬 버전 관리하기
지난 글에서 내 컴퓨터에 버전별로 노드를 설치하고 사용하는 방법에 대해 정리해 봤다. 그럼 파이썬은 어떤 툴이 있을까? 가끔 파이썬으로 만든 개발툴을 사용하다보면 상위버전이 나오는데 파이썬 v3를 사용해야 하는 경우가 있다. 한번은 파이썬을 v2에서 v3로 업그레이드 한 뒤 다른 툴들이 동작하지 않은 경우가 있었는데 다시 파이썬 v2로 롤백하느라 진땀을 …
NVM으로 노드 버전 관리하기
기본적으로 노드는 LTS 버전인 v4를 설치해서 사용한다. LTS 버전을 사용하면 좀더 안정적으로 지원받을 수 있다는 생각 때문이다. 그러나 요즘 개발툴들은 노드기반의 것이 많고 상위 버전의 노드를 요구하는 경우가 종종 있기 때문에 내 컴퓨터에 여러 버전의 노드를 설치해야할 필요가 생겼다. NVM은 컴퓨터에 다양한 버전의 노드를 설치할 수 있게 해주는 툴…
Ionic으로 Hello world 시작하기
앵귤러를 사용한지 만 이년이 되었지만 아이오닉(ionic)이 앵귤러 기반의 프레임웍이라는 사실은 최근에 알게되었다. 하이브리드 모바일 어플리케이션에 대한 의심쩍은 태도 때문인지 그동안 무시했던 것 같다. 지난 주말 엣지있게 설명한 아이오닉을 읽고 나니 아이오닉이 그동안 내가 사용한 앵귤러 코드와 너무 똑같다는 느낌이 들었다. 그리고 가볍게 시작해 볼수 있…
Istanbul로 코드 커버리지 측정하기
노드, 익스프레스로 모바일 API 서버를 구현하는 것이 위플래닛에서의 나의 주업무다. 요구사항에 있는 기능 대부분을 구현하고 나면 조금씩 리펙토링과 테스트 코드를 작성하면서 시간을 보낸다. 테스트를 할 때 작성한 모든 코드에 대한 테스트를 하고 싶은 것이 개발자의 욕심이다. 그래서 어떤 부분을 놓쳤는지를 찾아보는 것이 필요한데 이것을 코드 커버리지(cov…
Babel로 ES6 코드 사용하기
바벨(Babel)을 처음 들은것이 작년이다. ES6 초안이 나온 상황에서 미리 사용해 보고 싶은 이들위해 ES5용 코드로 변환해 주는 기능이다. 나는 머지않아 ES6 스펙이 확정될 것이고 더불어 브라우져와 노드에서는 신속히 지원해 줄 것이라 생각했다. 그래서 굳이 바벨이라는 툴을 학습할 필요성을 느끼지 못하고 지나쳤다. 요즘 격주로 Kisa에서 주관하는 …
Sequelize Transaction 사용할때 주의할 점
노드에서 데이터베이스 ORM으로 Sequelize를 사용한다. 성능상의 단점이 있지만 개발 속도와 가독성을 생각해 대부분 프로젝트에서 사용하는 편이다. 사실 그동안 트랜젝션 처리해야할 부분을 많이 놓쳐서 이번엔 제대로 트랜젝션을 걸어서 사용해 보기로 했다. 예를 들어 회원가입 API를 만든다고 생각해 보자. 사용자 정보를 테이블에 추가하고 2) 추가된 사…
노드에서는 쿼리스트링 인코딩을 어떻게 처리할까?
디비가 없는 서버를 만들고 있다. 디비가 없다니 무슨말인가 싶을 것이다. 운영중인 웹서비스에 모바일 서비스를 추가하기위한 중계서버를 만들고 있다. 모바일 요청을 그대로 메인 서버로 전달하는 역할이다. 따라서 http 요청을 많이 하는데 url에 대한 인코딩 이슈로 몇 일간 고생한 적이 있다. 그런데 왜 URL을 인코딩 해야 하는거죠? 어떻게 설명해야 비개…
앵귤러로 Todo앱 만들기 13 - $http로 앵귤러 서비스 개선하기
이번엔는 서버와 통신하는 앵귤러 서비스 todoStorage를 수정할 차례다. 지난 포스트에서 언급했듯이 앵귤러 서비스는 백엔드 api와 http 통신하면서 데이터를 주고 받는 역할을 한다. 그리고 컨트롤러에서는 이 서비스를 이용해 데이터를 가져와 템플릿에 뿌려주는 역할이다. 데이터베이스 -> 벡엔드 api -> 앵귤러 서비스 -> 앵귤러 컨트롤러 -> …
앵귤러로 Todo앱 만들기 12 - APIs
이번엔 서버의 두 번째 기능 API를 만들어 보자. API는 왜 만들어야할까? 클라이언트와 통신하기 위해서다. 그럼 무슨 목적으로 클라이언트와 서버는 통신을 하는가? 데이터다. 일반적으로 데이터는 서버에서 관리한다. 서버에 데이터베이스를 운영한다던지 써드파티 API를 이용해 데이터를 서버로 가져온다던지... 결국은 클라이언트 입장에서 데이터 관리는 서버에…
앵귤러로 Todo앱 만들기 11 - Static Files
사실 우리 싸이트의 홈페이지로 접속하면 angular로 만들었던 index.html 페이지가 로딩되는 것이 자연스럽니다. 결국은 서버에 있는 프론트엔드 코드들이 브라우져로 다운로드 되어야 하는데 이러한 파일들을 우리는 정적파일(Static Files) 이라고 부르고 express.js는 그러한 기능을 제공한다. static file 설정하기 express…
앵귤러로 Todo앱 만들기 10 - Express.js로 웹서버 만들기
이제부터 서버를 만들어 보자. 서버 기능은 두 가지라고 앞서 얘기했다. (참고: 앵귤러로 Todo앱 만들기 1 - 노드 설치노드 설치) 정적파일 호스팅 API 기능 이것을 쉽게 구현할수 있는 것이 Express.js라고 하는 웹프레임워크다. npm으로 익스프레스 엔진을 프로젝트에 추가해보자. package.json에 express 모듈이 추가 되었을 것이…
앵귤러로 Todo앱 만들기 9 - Service
다른 것도 디렉티브로 만들어 봤는지 모르겠다. 웬만하면 직접 해보는 것이 유익하다. 이번에는 컨트롤러를 쪼개 보자. 컨트롤러 스코프 변수에는 todos 변수가 있는데 이것은 투두 목록을 담고 있는 것이다. 그리고 remove(), add() 같은 것들은 투두 목록을 삭제하거나 사용자가 입력한 데이터를 투두 목록에 추가할수 있다. 자세히 보면 컨트롤러에는 …
앵귤러로 Todo앱 만들기 8 - Directive
이전 포스트까지 해서 프론트에서 사용할 기능은 대부분 완성했다. 그러고 보니 파일이 좀 길어진것 같다. 앵귤러의 많은 기능 중 템플릿과 컨트롤러만 사용했기 때문에 그렇다. 앵귤러의 장점 중 하나는 모듈화다. 모놀리틱한 구조를 더 작은 단위로 모듈화시켜서 설계할 수 있는데 앵귤러는 그러한 구조를 만들 수 있는 기능을 제공한다. 우리가 사용할 기능은 디렉티브…
앵귤러로 Todo앱 만들기 7 - 투두 목록 필터링
우리가 ngRepeat 디렉티브를 이용해 todos 배열 데이터를 출력해 봤다. 이번에는 출력된 리스트를 필터링해 보겠다. 필터링할 수 있는 기준은 아래와 같다. completed: 완료된 투두 리스트 active: 미완료된 투두 리스트 all: 모든 투두 리스트 ngRepeat는 기본적으로 필터기능을 지원한다. 완료된 투두 리스트만 필터링 한다고 하면 …
앵귤러로 Todo앱 만들기 6 - Bootstrap으로 꾸미기
여기서 잠깐. 이왕이면 좀더 이쁘게 만들어 보자. 가장 많이 사용하는 스타일시트 중 트위터 부트스트랩을 이용할 작성이다. 이전 포스트에서 앵귤러 라이브러리를 추가했던 과정이 기억나는가? 그렇다. NPM을 이용해서 라이브러리를 추가 했다. 부스스트랩을 우리가 만든 index.html에 추가한다. index.html: 추가만 했어도 기존 화면에 변화가 있을 …
앵귤러로 Todo앱 만들기 5 - 새로운 투두 추가하기
이번에는 ngSubmit 디렉티브를 이용해 투두를 추가하는 방법에 대해 알아보자. 템플릿 작성 입력을 위해 텍스트 입력 필드와 추가 버튼을 만들자. 입력필드는 마찬가지로 ngModel 디렉티브로 양방향 데이터 바인딩을 설정했다. 컨트롤러에서는 newTodo를 통해 데이터를 확인할수 있다…
앵귤러로 Todo앱 만들기 4 - 투두 목록 출력하기
컨트롤러에 배열 데이터 만들기 우선 데이터가 있다고 가정하자. 우리 프로젝트에서 데이터는 투두 목록이다. 하나의 두투는 아이디(id), 타이틀(title), 그리고 완료여부(completed)를 데이터로 가질 수 있고 컨트롤러에서 아래와 같이 표현할 수 있다. js/controllers/TodomvcCtrl.js: 스코프변수에 할당된 todos 배열을 템…
앵귤러로 Todo앱 만들기 3 - 컨트롤러
사실 앵귤러 로딩을 했다고 해서 우리의 코드가 그리고 웹문서에서 달라진 점은 거의 없다. 자바스크립트 파일 두 개가 더 다운로드 될 뿐이다. 앵귤러를 사용하려면 ngController라고 하는 앵귤러 디렉티브를 사용해야 한다. 참, 한가지 알아둘 것. 앵귤러에서 ngController는 ng-controller와 동일하다. ngModel이 ng-model…
앵귤러로 Todo앱 만들기 2 - 앵귤러 로딩
index.html 기본 html 파일부터 작성해 보자. index.html: 모바일에서 잘보이도록 하기위해 뷰포트를 설정하고 타이틀만 있는 간단한 문서다. 브라우져로 열어보면 브라우저 탭에 타이트만 출력된다. 우리는 이 파일에 앵귤러 라이브러리를 로딩할 것이다. 그런데 앵귤러를 로딩한다는 것은 뭘까? 제이쿼리 스크립트를 html 페이지에서
앵귤러로 Todo앱 만들기 1 - 노드설치
지금부터 Angular.js, Node.js를 이용해서 Todo앱을 만들어 보자. 본 시리즈는 총 20개의 포스트로 구성되어 있고 앵귤러와 노드 초심자를 위한 내용이다. 하나씩 따라해 보면 어느덧 백엔드 기능을 갖춘 풀스텍 웹 서비스 코드를 작성하는 본인을 발견하게 될 것이다. 노드 설치 잠시만! 왜 노드를 설치해야할까? 웹서비스를 만들어야 하기 때문이다…
AWS Summit 2016 참관 후기
어제 삼성 코엑스에서 열린 AWS Summit 2016에 구경하러 갔다. 2년 전에 한번 왔었는데 그때에 비해 사람이 눈에띄가 많아졌다. 사전 등록만 6000명이라고 하니 AWS에 대한 관심이 상당한 것 같다. 관심뿐만은 아닐것 같다. 다양한 성공사례가 나오고 스타트업에서부터 대기업까지 다양한 유저층에서 아마존을 도입하고 기존시스템을 변경하는 사례들이 …
람다를 이용해 이미지 리사이징 서버 만들기
람다. 람다. 람다. 요즘 아마존웹서비스에 람다(Lambda)가 인기인가 보다. 특히 API게이트웨이와 연결하면 HTTP 인터페이스로 덧입혀져 인터넷 상의 리소스를 활용할 수 있으니 서버구축이 필요없는 서버도 더이상 말장난은 아는듯 하다. 아니 수평선 끝의 돛대처럼 그 가능성이 조금씩 현실로 드러나기 시작한다. 이번에는 그동안 미루어왔던 AWS 람다서비스…
스웨거 문서 문법 체크하기
팀에 스웨거(swagger)를 도입한 이후 개발 패턴이 많이 변했다. 이전에는 API문서를 주로 깃헙 위키나 Apidoc으로 작성하고 포스트맨(Postman)으로 테스트했다. 문서 작성 시간이 많을 뿐만 아니라 수많은 파라매터를 일일이 입력해야 하는데 상당히 번거로웠다. 스웨거를 사용하면서 이 두 가지 작업이 한 곳에서 이뤄졌다. 작성한 문서를 보고 바로…
ECMAScript2015(ES6)로 Node.JS 코딩하기
Node.JS v4부터는 ES6를 지원하고 있다. 최근 아마존웹서비스(AWS)중 람다(Lambda)라는 서비스도 Node.js v4를 지원하기 시작했는데, 샘플코드를 보면 곳곳에 ES6 문법이 사용되어 있다. 순수 자바스크립트 차원에서 제공되는 기능들이 추가되었고 비교적 간결한 코드를 작성할 수 있는 것이 특징이다. 더 이상 새로운 자바스크립트 문법인 E…
서버 개발자 입장에서 바라본 모바일 API 디자인
이 글은 지극히 서버 개발자 입장에서 생각한 모바일 API 디자인 방법이다. 모바일 앱과의 효과적인 인터페이스를 설계함에 있어서 그 동안의 경험을 공유하고자 한다. 모르는 부분은 개발하면서 찾아다녔지만 일부는 여전히 잘못된 정보일수 있음을 감안하고 읽어주기 바란다. 이름짓기 "Man Gave Names to All the Animals" 이름 만드는 것은…
Promise.reject()에 에러 객체를 넘겨줘야하는 이유
노드에서는 비동기 코드를 작성할 때가 많다. 그래서 콜백헬, 프라미스 키워드가 자주 등장한다. 콜백헬의 대안으로 프라미스를 사용한다는 글도 있지만 꼭 그런것도 아니다. 콜백헬과 프라미스는 그냥 별도의 개념들이다. 프라미스는 비동기 코드를 작성할 때 사용하는 개념이다. 프라미스 관련 라이브러리도 상당히 많은데 Q와 bluebird대표적이다. 그동안 Q를 사…
Jekyll 커스터마이징 2 - 태그
블로그를 깃헙 페이지로 옮기면서 두번째 해야할 일은 태그 시스템을 만드는 것이다. 데이터베이스, 백엔드가 없는 상황에서 검색은 좀 힘들고 최소한 태그나 카테고리라도 있어야 검색에 용이할 것 같다. 내가 쓴 글들이지만 구글링해서 찾지 않으면 찾을 수가 없다. 그러고 보니 나중에 구글 검색기를 추가하는 것도 방법일 것 같다. 이번에는 지킬에서 태그 시스템을 …
Nock, Mocha로 HTTP 테스트하기
API 서버를 개발할 때 유닛테스트를 꼼꼼히 작성하는 편이다. 반복적인 작업임은 물론이고 '이럴 경우도 테스트 해야할까?'라는 의문이 들때가 많다. 그러나 이러한 생각에도 불구하고 생각나는 모든 경우의 테스트 코드를 작성하고 테스트를 돌리면 심리적으로 안정감이 들뿐만 아니라 코드에 대한 자신감도 생기기 때문에 모든 API 테스트 코드를 작성하려고 노력한다…
서울에서 Elastic Beanstalk 사용하기
AWS 한국 리젼이 추가되면서 빈스톡도 서울에 설치해봤다. 프로젝트를 새로 만들고 깃 커밋을 작성한 뒤에 AWS 커맨드라인 명령어로 빈스톡을 초기화 했다. 결과에 서울 리전이 보이지 않는다. 하긴 빈스톡 사용한지도 좀 오래됐다. 커맨드라인 툴의 버전을 확인해 봤다. 가장 최근 버전이 v3.7이다. 파이썬 패키지 툴로 업그레이드 한다. PIP로 업그레이드가…
워드프레스에서 지킬로 블로그 이동
이번 설 연휴에 뭘해 볼까하다가 블로그를 옮기기로 작심했다. 워드프레서스에 지킬(Jekyll)로 옮기고 싶었다. 다른 프로젝트에서 지킬 웹페이지를 다뤄볼 기회가 있었는데 은근히 재밌는 경험이었다. 코딩하듯이 텍스트 에디터로 글을 작성하는 점 커맨드라인 명령어로 웹페이지를 생성하는 과정 깃헙 페이지에서 지킬로 만든 페이지를 무료 호팅해주는 점 이런 점이 끌…
Jekyll 커스터마이징 1 - 코멘트와 페이지네이션
지킬(Jekyll) 기본 템플릿에는 글목록과 글만 있다. 워드프레스로 작성한 블로그를 지킬로 가져오는데 이것만으로는 부족한 점이 많다. 각 글에는 댓글 시스템을 추가하고 글 목록은 페이지네이션으로 처리하자. 코멘트 블로그를 이동하면서 기존 댓글을 포기한 점은 아쉽다. (이전포스트 참고) 워드프레스로 영원히 작성하리라 생각하고 젯팩 코멘트를 사용했었기 때문…
Sequelize Seed - 시드 데이터 관리하기
API 서버를 만들다 보면 테스트가 필요하다. 코드단에서 유닛테스트 따위를 말하는게 아니다. 서버 개발자가 만든 코드를 개발 서버에 배포한뒤 모바일 개발자가 API 서버를 사용할 때를 말한다. 서버를 업데이트 할 때마다 데이터베이스가 텅텅 비어있기 때문에, (개발초기에 디비 스키마가 확정되지 않은 상태라면 매번 디비 스키마를 갱신한다) 뭔가 샘플 데이터를…
morgan-helper
Morgan으로 로깅하는데 POST Body도 함께 나오도록 했다.
lodash
자바스크립트 유틸리티 라이브러리로 underscore를 사용하다가 요즘은 거의 lodash로 옮겼다. 체감하지는 못하지만 성능이 좋다고 한다. 내가 살펴보는 대부분의 오픈소스도 undersocre에서 lodash로 옮기고 있는 분위기다. lodash 사용기를 정리해 보자. 뭐 underscore와 별 차이가 없을지도 모르겠다. _.fill() 특정한 값으…
AWS 서울 리전으로 블로그 이동
아마존웹서비스 서울 리전 출시전에는 지리적으로 한국과 가장 가까운 곳이 도쿄였다. 블로그를 도쿄에 EC2 하나로 구성한 것을 이번 기회에 서울로 옮기기로 작정했다. 이따금 데이터베이스 데몬이 죽는 경우가 발생해서 여간 귀찮지 않았기 때문. 이왕 하는김에 RDS로 분리하자. 장애를 고치는 것보다 돈 조금내고 신경 안쓰는게 더 낫다. 도쿄에서 서울로 EC2 …
Sequelize Modeling
글 순서가 반대로 되었다. 이왕 Sequelize ORM에 대해 정리할 것이라면 개발 순서에 따라 모델링부터 작성했으면 보기 좋았을 것 같다. 이번 글은 Sequelize로 테이블을 정의하는 방법(모델링)에 대해 알아보자 Definition 데이터베이스 테이블을 정의하기 위해서는 define() 함수를 사용한다. 첫번째 파라메터 'User'가 테이블 이…
Sequelize 마이그레이션
Sequelize ORM을 사용하면서 편리한 점은 마이그레이션 지원이다. 특히 운영중인 서비스의 데이터베이스를 변경할 때 편리하다. 개발 단계에서는 매번 sync({force: true})로 데이터베이스를 갱신할 수 있겠지만 운영중인 서비스에서는 불가능하다. 그렇다고 데이터베이스 스키마를 직접 수정하고 Sequelize 모델링 코드를 변경한다는 것은 번거…
Sequelize로 마이그레이션 시 외래키 추가하기
데이터베이스 ORM인 Sequelize는 마이그레이션 기능을 제공한다. 모델링을 마친 데이터베이스에 대해 변경 작업이 필요한 경우, 코드로 변경내용을 기술한 뒤 커맨드라인 명령어를 통해 마이그레이션을 진행할 수 있다. addColumn()은 기존 테이블에 컬럼을 추가할 경우 사용하는 메소드인데 외래키 설정은 아직 미지원 상태다. (참고) 이를 해결하기 위…
워드프레스 파일 업로드 시 파일명 처리
이번해 블로그 방향은 사진을 함께 첨부하는 것이다. Feedly 같은 곳에 썸네일과 함게 RSS 피드 목록이 보이니 그럴듯해 보인다. 그런데... 가끔 이미지 링크가 깨지는 것을 발견했다. 크롬, 파이폭스, 그리고 오페라 브라우져에서도 잘 보이는 이미지 파일이 유독 사파리 브라우저에서만 보이지 않는다. 이미지 파일의 링크를 확인해 보니 좀 이상하다. 캡처…
NodeJS에서 가장 많이 사용하는 테스트 프레임웍, Mocha
서버와 웹프론트를 개발하면서 테스트는 항상 아쉽다. 프로젝트 초기에는 TDD 방법론으로 개발을 시작한다. 실패하는 테스트 유닛을 만든다. 함수 로직을 만든다. 테스트에 성공한다. 각 기능을 테스트 가능한 단위로 쪼개어 개발하는 과정 자체에 매력을 느낀다. 아마도 테스트 유닛을 통과하기만 하면 된다는 심리적 안정감도 선호에 영향을 주는 것 같다. 테스트 없…
boot2docker 업데이트 (v1.9)
Boot2docker를 OSX 환경에서 사용중이다. 도커 이미지를 빌드하기 위해 docker build 명령어를 실행해 보지만 이따금 재대로 실행되지 않은 경우가 있다. 실행하면 커맨드라인에 아무 결과도 출력되지 않는다. 수분이 지나서야 도커데몬으로 데이터를 보낸다는 메세지가 나오고 빌드가 완료된다. 사용하는 도커 버전은 boot2docker v1.8.3…
2015 블로그 결산
2015년 마지막 날인 어제, 구독하는 블로그들을 읽다보니 2015년을 결산하는 포스팅이 자주 보였다. WhatILearn.com도 어드덧 운영한지 1년이 지났고, 올해 결산을 해보면 재미있을 것 같다. 총 90개 포스팅 100개 포스팅이 목표. 그러나 조금 못 미치는 결과다. 4~6월 기간에 포스팅 활동이 미비 했는데, 이러한 속도로 글을 작성하면 내년…
ng-plualize 단수, 복수형 처리
제목 정하기가 쉽지 않다. 영어에는 단수, 복수에 대한 문법이 확연하게 드러난다. "an apple"과 "two apples". 그러나 한국어로는 사과가 몇개이든 그냥 뒤에 사과를 붙인다. 사과 2개라고 하지 사과들 2개라고 하지 않는다. ng-plualize는 영어 문법에서 드러나는 단수, 복수 문자 표현을 위한 앵귤러 디렉티브다. 하나의 변수에 대해 …
Javascript Decorator Pattern
Ghost 소스를 보면서 데코레이터 패턴을 처음 보았다. 이전 포스트에 보면 http() 메쏘드 주석에 이것은 데코레이터 패턴이라고 되어있다. Decorator for API functions which are called via an HTTP request. Takes the API method and wraps it so that it gets dat…
Swagger-node로 express 시작하기
스웨거 개념을 잡느라 상당한 시간을 소요하고 있다. 이전 포스트에서는 기존프로젝트에 스웨거를 적용하는 방법에 대해 정리하였다. 이번에는 노드 익스프레스(Express.js)로 프로젝트를 시작할때 스웨거 툴을 이용해서 개발하는 방법에 대해 알아보겠다. swaager 커맨드라인 툴 설치 스웨거 모듈(swagger-node)을 글로벌로 설치한다. 설치가 완료되…
mongodump 크론잡이 동작하지 않을 때
서비스 중인 몽고디비 백업을 위해 크론잡에 등록해 놓았다. mongodump로 덤프 뜨고 압축해서 S3로 매일 한번씩 백업하는 스크립트다. 스크립트 파일을 꼼꼼히 작성하고 커맨트창에서 실행해 보니 잘 동작한다. 약 1기가 되는 파일이 생성되었고 수 분내에 S3에 업로드 되는 것도 확인했다. 그런데 며칠 지나서 S3 버킷을 확인해 보니 백업파일이 없다. 테…
우분투에 Django-admin, mysql-python 설치
우분투에서 pip가 동작하지 않을 때 로컬에서 장고 프로젝트 테스트를 모두 마쳤다. 이를 우분투 실서버에 올려서 웹에 공개하는 일만 남았다. 장고 설치를 위해 pip 커맨드를 사용하자 에러가 발생한다. 아래 몇가지 시도를 했으나 문제는 여전하다. pip 최신버전(7.1)을 설치 파이선 최신버전(3.x)을 사용 apt-get 으로 설치. 장고 구버전이 설치…
gunicorn: 장고 어드민 프로덕션 서버에 구동하기
runserver로 장고 서버를 구동할수 있지만 운영서버에서는 사용하지 말아야한다. (참고) 백그라운드 프로세스로 구동할 수 있지만 성능이나 안전성 이슈가 있는가 보다. gunicon은 장고 서버를 관리하는 툴이다. 포에버가 노드를 관리하는 것과 비슷한 역할인 것 같다. 데몬으로 구동하고 워커를 생성하는 기능이 있다. gunicon을 이용해 장고 서버를 …
기존 데이터베이스에 장고 어드민 통합하기
운영중인 서비스의 MySql 데이터베이스에 장고 어드민을 붙일 일이 생겼다. 몇가지 이유 때문에 망설여 진다. '노드로 만든 서비스에 파이썬 프레임웍을 얹으라고?', '장고 어드민으로 실수하면 서비스에 주는 영향은 어떻게 하라고?' 그럼에도 불구하고 장고 어드민을 설치해 본 결과, 실 보다 득이 큰 것 같다. 이번 글에서는 운영중인 MySql 데이터베이스…
페이스북 토큰 권한 확인 주소
https://graph.facebook.com/me/permissions?access_token=
Ghost 라우팅 로직 분석
Php에서는 워드프레스, NodeJS에서는 Ghost를 많이 사용한다. 노드로 API 서버를 만드는 일이 많아 지다보니 다른 사람은 어떻게 구현하나 궁금한 점이 많다. 노드로 만든 CMS 오픈소스 중 가장 인기있는 프로젝트인 Ghost의 백엔드 API 부분을 살펴보자. 일단은 express 사용 가장 많이 사용하는 Express 엔진을 사용한다. 여느 C…
카카오 인증 테스트
카카오 API를 이용해서 인증하는 과정을 정리해보자. 카카오 로그인 페이지를 띄워서 사용자로부터 로그인 및 각 리소스의 접근 권한 동의를 얻은 다음 액세스 토큰을 얻는다. 이후에 사용하는 API는 획득한 액세스 토큰을 가지고 요청할 수 있다. 인증 페이지 요청 주소: 요청 쿼리: 각 각의 파라메터를 설정하여 URI를 호출하면 카카오 로그인 페이지가 로딩된…
Atom 플러그인: atom-sync
가끔은 리모트 서버에 접속해서 PHP 코드를 수정해야 하는 경우가 있다. 간단한 경우야 리눅스 서버에 설치된 VIM 에디터로 작업할수 있지만 파일간 이동이 잦거나하면 솔직히 답답하다. EditPlus, Coda 처럼 Atom에도 리모트 서버에 접속하여 코드를 수정할 수 있는 플러그인이 있다. atom-sync 설치: 폴더 루트에 .sync-config.c…
기존 프로젝트와 Swagger-ui 연동하기
모바일 API를 개발하면서 클라이언트 개발자와 협업하기 위해 API 문서를 작성한다. 보통은 깃헙 위키를 사용하는데 쉽게 편집하고 공개할수 있는게 장점이 다. 한 때는 APIDOC을 사용하기도 했다. 코드에 주석으로 문서를 작성하면 html 파일로 문서를 생성한다. 이를 서버에 올려 호스팅하는 방식으로 사용했다. 모바일 개발자 입장에서는 문서를 보면서 포…
Atom 에디터 플러그인 정리
Atom 에디터가 손에 익었다. 초반에 이것 저것 플러기인을 설치해보며 테스트해본 결과 지금까지 삭제하지 않고 사용하는 플러그인을 소개한다. 파일명 앞에 아이콘을 붙여주는 플러그인이다. 이것이 에디터 본연의 기능과 무슨 상관이냐라고 할지 모르지만 에티터는 보기 좋아야 한다고 생각한다. IDE를 사용하는 이유 중 하나는 문법오류 체크 기능 때문일 것이다.…
karma에 리포터 추가하기
karma와 watch로 유닛테스트 코드 개발하기에 이어 karma에 리포터 추가 방법에 대해 알아보자. 리포터 설정 기본적으로 두 가지 방식의 리포터를 설정할수 있는데, dots와 progress다. 이를 karma.conf.js 파일에서 설정할 수 있다. karma.conf.js: 각각의 테스트 결과는 아래와 같다. dots: progress: 성…
karma와 watch로 유닛테스트 코드 개발하기
Karma는 프로론트엔드 유닛테스를 위한 라이브러리다. Grunt와 함께 사용하는 방법에 대해 살펴보자. Grunt에서 사용할 Karma를 설치한다. Gruntfile.js Gruntfile을 작성한다. Gruntfile에서는 먼저 karma 작업에 대한 설정을 한다. configFile을 karma.conf.js로 설정한다. 그리고 서브 테스크 unit…
서버 구동시 버전 체크
배경 코드 저장소에서 노드 프로젝트를 다운받아 개발환경을 구성할때 버전 문제가 발생하는 경우가 있다. 서버를 이관할때 모듈간 버전충돌 문제, 혹은 노드 버전 문제로 고생. 별다른 오류 메세지도 없어서 원인도 못찾음. 몽고 디비 최신버전을 설치하니 안되는 경우도 발생함. 2.4로 고정 했어야함. 위 경험으로 볼때 서버 구동시 모듈 버전 체크 로직을 사전에 …
앵귤러로 만든 spa 프로그램을 아마존웹서비스 s3에서 웹호스팅 하는 방법
앵귤러 코드 SPA를 위한 앵귤러 코드를 살펴보자. angular.config() 함수에서 $locationProvider.html5Mode()를 호출한다. 이렇게 설정하면 /, /about로 라우팅 할수 있다. 없는 페이지는 404.html 파일을 렌더링 하도록한다. S3 호스팅 설정 AWS S3 콘솔에서 버킷 생성. 생성한 버킷에 소스를 업로드 한다.…
도커에서 몽고디비 컨테이너 사용하기
몽고디비는 이를 사용하는 서버(API 서버등)와 별도로 구현한다. 도커를 사용하여 각각 별도의 컨테이너로 실행하여 서버를 구성할 수 있다. 몽고 서버 만들기 몽고 이미지 다운로드 hub.docker.com 에서 'mongo'로 검색. 첫번째 저장소를 클릭한다. 필요한 버전의 몽고 이미지를 당겨온다. 몽고 컨테이너 구동 몽고디비 서버는 아래 사항을 만족해야…
SimpleTest – php unit test
Php 유닛 테스트 라이브러 중 하나이다. PHPUnit과 SimpleTest 중 후자가 바로 사용하기 간단해 보임. 라이브러리 다운로드 simpletest 폴더가 생성됨. 라이브러리 로딩 테스트 통과할 함수 코딩 함수 인터페이스만 구현한다. 테스트 실행 테스트 실패로 떨어짐. 함수 본체 작성 다시 테스트하면 통과한다. 예제 코드: https://gith…
git push 이벤트를 slack 채널로 보내기
회사에 슬랙을 도입하면서 모든 알람을 이곳에서 확인할 수 있다. 깃(Git) 훅을 이용해 서버를 재가동하는 구조라면 서버 재가동시마다 이벤트를 슬랙의 특정 채널로 보낼수 있다. 이번 글에서는 슬랙 API를 깃 훅커에 적용하는 방법에 대해 알아보자. 슬랙 그룹 페이지 좌측 상단에 Menu를 클릭. Integrations 페이지로 이동한다. All Servi…
osx 노트 글꼴 변경
iOS9이 나오면서 노트 앱에도 큰 변화가 있었다. 점점 노트 어플리케이션으로서 다른 프로그램에 뒤지지 않을 기능을 갖춰 나가는 것 같다. 한 가지 아쉬운 점은 활자가 너무 작다. 좀 키우고 싶은데 메뉴에 없다. plist를 편집해서 폰트를 키울 수 있다. 노트앱 폴더의 Resoureces 폴더에는 언어셋에 따라 하위 폴더가 있다. ko.lproj 폴더로…
mysql 데이터베이스 삭제 에러
문제 mysql 테이블을 삭제할 경우 아래 오류 메세지를 보는 경우가 있다. osx에서 homebrew로 mysql을 설치한 환경이다. 이럴 경우 직접 테이블 폴더를 삭제하면 해결할 수 있다. 데이터 폴더 삭제 mysql 데몬을 실행할때 mysql.server start 명령어로 실행한다. 명령어 위치를 찾자. 파일을 열어보면 스크립트 코드로 되어 있다.…
원격로그인(SSH) 접속
원격 로그인 접속이 쉽게 이뤄지는 경우도 있으나 상황에 따라서는 그렇지 않은 경우가 종종 발생합니다. 필요한 상황에 따라 원격 로그인 접속하는 방법에 대해 정리한 글입니다. 공개키를 사용하면 비밀번호 없이 서버에 원격로그인 할 수 있습니다. 편리해서 가장 많이 사용하는 방법이기도 합니다. 서버와 클라이언트 양 측에서 설정 작업을 해야 합니다. 공개키를 생…
도커 활용기
도커를 활용한 예제입니다. 우분투 서버에 노드를 설치하고 익스프레스 엔진으로 서버를 구현하는 방법에 대해 설명합니다. 우리는 포에버를 이용해 서버를 구동할 것입니다. 서버 구성은 아래와 같습니다. Ubuntu 14.04 Node.js 0.12 Exoress.js Forever 다음은 위 환경을 도커로 구성하는 방법에 대해 설명합니다. 프로젝트 폴더 프로젝…
Forever와 Docker
포에버(Forever)는 노드를 구동해주는 모듈이다. 이렇게 실행하면 (1) 노드 프로그램을 구동해 주고 (2) 노드에서 내뿜는 콘솔 로그를 파일로 기록한다. 몇가지 옵션을 추가해서 사용한다. 이렇게 실행하면 노드 프로그렘을 데몬으로 돌릴수 있고 로그파일도 MyApp.log로 기록되기 때문에 좀 편리하다. 무엇보다 로그를 볼수 있다는게 편하다. 문제 도커…
익스프레스 API 서버 테스트 코드 작성하기
익스프레스 테스트 코드 작성하기 이 글은 익스프레스에서 유닛 테스트 코드를 작성하는 방법에 대해서 기술합니다. 설치 Express.js 설치 Mocha.js, Should.js 설치 테스트 러너인 모카(Mocha.js)와 검증 라이브러리 중 하나의 Should.js 모듈을 설치합니다. 테스트 실행 스크립트 노드 패키지 파일에 테스트 스크립트를 추가합니다.…
안쓰는 iMac을 맥북 외장 모니터로 사용하자!
맥북에 아이맥을 연결해서 사용해 보자. 아이맥은 타겟 디스플레이 모드(TDM)를 제공한다. 아이맥이 켜져있는 상태에서 디스플레이만 다른 컴퓨터의 외장 모니터로 연결해 주는 기능이다. 썬더볼트 연결을 통해 맥북의 화면을 아이맥으로 보내준다. 중고나라에서 2미터짜리 썬더볼트 케이블 2미터를 구매했다. (2만원) 맥북과 아이맥을 연결한 뒤, 아이맥에서 cmd …
Agenda
특정 시간 혹은 주기로 어떤 작업을 처리해야 할때 리눅스의 크론(Cron)을 사용한다. 노드에서는 cron-node 모듈을 이용해 프로그래밍 단에서 크론잡을 관리할 수 있다. 단일 잡일 경우 간단히 구현할 수 있지만 처리해야할 잡의 종류가 많아지면 그만큼 관리하기 복잡하고 힘들어질 수 있다. Agenda는 여러개의 크론 잡을 관리하기 위한 노드 모듈이다.…
깃(git) 서버 만들기
깃헙만 사용하지말고 깃서버도 만들어서 사용해보자. 서버세팅 깃 설치: 깃 서버용 계정 추가: 깃 프로토콜을 ssh로 할거니깐 로컬의 ssh 공개키를 서버에 추가: 프로젝트 생성 홈 폴더에 프로젝트 폴더 생성 및 저장소 생성 클론 로컬 컴퓨터에서 hello 프로젝트를 클론:
크론을 사용할때 서버 시간을 정확히 맞추자
일정한 주기로 서버에서 어떤 일을 처리할 때, 크론(Cron)을 사용한다. 모바일로 푸시노티피케이션을 주기적으로 보내야 할때, 혹은 실시간으로 처리하지 않고 쌓아둔 작업을 한번에 처리할 때 크론을 사용하면 좋다. 노드(Nodejs)에서는 node-cron 모듈을 사용하여 크론잡 관리를 할수 있다. 문제 그런데 서버에 설정한 잡이 제 시간에 돌지 않은 것 …
Docker + Git
도커랑 깃이랑 연동해서 사용해 보자. 그전에 빈스톡에서 개발한 경험을 되새겨 보자. 코딩 배포용 코드 빌드 빌드파일 커밋 빈스톡 커맨드라인으로 커밋 푸시 (eb push) 서버 재 구동 도커 관련들을 살펴보니 위와 비슷한 개발 환경을 꾸밀수 있었다. (참고) 생각해보니 빈스톡에서도 커밋을 푸시하고 깃 서버에서는 훅을 걸어서 서버 재구동 작업을 수행한 모양…
개발 절차에 도커 적용하기
저의 개발 순서는 이렇습니다. (1) 소스코드를 작성한다. Node.js로 서버를 띄우고 노드 이외에 필요한 라이브러리는 Homebrew로 설치합니다. 소스코드는 깃(Git)으로 버전관리 합니다. (2) 로컬에서 작성한 소스를 빌드하여 개발 서버에 배포한다. 개발서버는 원격 호스트에 구동되어 있고 보통 우분투를 사용합니다. (3) 개발서버의 테스트가 완료…
카페24 SMS node 모듈
카페24 문자 발송 서비스를 노드(Node.JS)에서 구현한 모듈입니다. https://github.com/jeonghwan-kim/cafe24.sms.node
아톰 에디터 외모 변경하기
지난 주 발표를 하면서 아톰(Atom) 에디터를 사용해 보았습니다. 평소에는 웹스톰을 사용하기 때문에 웹스톰 프리젠테이션 모드로 띄워서 발표하려고 했지만, 아톰 에디터의 기능을 사용해 보고 싶었기 때문입니다. 바로 에디터를 스타일시트로 꾸미는 기능입니다. 아톰은 HTML로 되어있어서 연결된 스타일시스트를 재정의하면 에디터 외모를 변경할 수 있습니다. Vi…
sequalize 쿼리
ORM을 써보기 시작했다. Sequeilize. 편리한 점이 한 두가지가 아니다. (1) 무엇보다 쿼리를 주저리 주저리 입력하지 않아도 알아서 보내준다는 점이 편리하다. (2) 특히, 자바스크립트 코드로 테이블을 디자인하면 자동으로 쿼리가 실행되어 테이블을 만든다. 물론 외래키(foreign key)도 자동으로 만들어 준다. (3) 테이블 컬럼별로 검증…
$resource로 REST api 사용하기
REST API와 $resource 앵귤러에서 AJAX를 이용한 서버 통신은 $http 서비스를 사용한다. 제이쿼리의 ajax() 함수와 사용법이 유사하다. 그러나 REST API로 구현된 백엔드 서버의 자원을 사용한다면 $http 서비스 보다는 $resource 서비스를 사용하는 것을 권장한다. 이름만 봐도 감이 온다. HTTP 호출로 요청하는 서버 …
$$postDigest()와 $timeout()
배경 앵귤러에서 뷰와 데이터를 연결하는 것이 스코프다. 데이터가 변경되는 것에 따라 뷰에 반영해야 하는데 Digest 싸이클을 통해 이뤄진다. Digest 싸이클을 통해 변경된 스코프 변수는 자동으로 뷰에 반영된다. 이것은 Digest 싸이클이 scope.$watch에 등록된 스코프 변수들을 감시하기 때문에 가능하다. 가끔 이런 상황이 있다. foo라는…
Oh My Zsh로 터미널 꾸미기
주로 맥 기본 터미널을 사용한다. iTerms가 있지만 그래도 기본 터미널이 제공해 주는 기능으로도 충분하기 때문입니다. 터미널에 설치하여 터미널을 좀더 재밌게 사용할 수 있는 Oh My Zsh 를 소개한다. Curl로 간단히 설치: $ curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools…
grunt open
Grunt, Gulp등 프로젝트 빌드툴을 사용하면 편리한 점이 한 두가지가 아니다. 브라우져를 자동으로 띄워주는grunt-open부터 살펴보자. 기능 grunt-open 은 웹개발시 개발 URL로 브라우져를 자동으로 띄워주는 기능을 한다. 설치 혹은 package.json 파일에 gurnt-open을 추가하여 설치한다. Grunt 설정 파일에서는 path…
Express.js - 3. 템플릿(Jade)
익스프레스(Express.js)를 설치하고 라우팅 설정을 마쳤으면 웹페이지 서비스 방법에 대해 알아보자. 익스프레스는 템플릿 엔진을 이용해서 웹페이지를 생성하는데 제이드(Jade)가 대표적이다. 템플릿과 연결된 스타일시트는 기본적으로 CSS를 사용할 수 있지만 LESS, STYLUS 등 CSS 전처리기(pre-processor)를 사용하여 코딩의 효율성을…
Express.js - 2. 라우팅
클라이언트가 서버로 접속할때는 특정한 URL를 통해 접속한다. 서버에서는 이 URL에 해당하는 자원을 클라이언트로 보내준다. 혹은 POST요청일 경우는 자원을 만들기도 한다. 이러한 클라이언트 요청을 위한 URL 스키마를 라우트라고 한다. 서버에서는 라우팅 작업을 통해 클라이언트와 통신의 인터페이스를 제공해 준다. 익스프레스에서 중요한 것 중 하나가 이 …
Express.js - 1. 설치와 구조
설치 노드 모듈로 작성된 익스프레스는 노드 관리 파일인 package.json에 express를 추가하는 것만으로도 설치 가능하다. 그러나 익스프레스 모듈을 글로벌로 설치해서 사용한다면 커맨드라인 명령으로 익스프레스 기본 골격을 만드는데 훨씬 수월하다. sudo npm install -g express express myapp 구조 위 명령어로 기본 뼈대…
리눅스 데몬으로 노드 어플리케이션 관리하기
운영 서버에서 노드 어플리케이션은 forever 모듈로 관리한다. forever start app.js 기본적으로는 이러한 명령이지만 NODE_ENV, PORT등의 환경 변수를 설정한다거나 forever 명령어에 옵션값을 추가하여 구동하는 경우, 또는 기존의 forever 로그 파일을 지워야 하는 경우 등이 있다면 별도의 쉘스크립트로 관리할수 있을 것이다…
이미지 업로드 – 2. gm 모듈로 이미지 리사이징
Multer 모듈로 이미지 업로드에 성공했다면 서버에 업로드된 이미지 파일 경로을 알수 있다. 이번 글에는 gm 모듈을 사용하여 이미지 리사이징 하는 방법에 대해 알아본다. 설치 노드에서 많이 사용하는 이미지 프로세싱 라이브러리 중 하나인 gm을 설치하자. $ npm install --save gm gm 라이브러리를 사용하기 위해서는 GraphicsMa…
이미지 업로드 - 1. multer 모듈로 파일 업로드
이미지 리사이징을 할 때 두 가지 방법을 고려할 수 있다. 1) 브라우져에서 크롭하여 다양한 이미지 크기를 생성한 뒤 서버에 보내는 방법. 2) 원본 이미지만 서버로 보내고 서버에서 리사이징을 처리하는 방법이 있다. 전자의 경우 후자에 비에 데이터 전송량이 많아지면서 프로토콜 응답이 느려질 수 있는 성능 상의 이슈가 있다. 본 글에서는 서버로 이미지 데이…
웹스톰 Dusk 테마
Xcode 사용하던 iOS 개발자가 항상 부러웠습니다. 그래서 웹스톰에서도 사용할 수 있는 Dusk 테마를 만들어 봤습니다. https://github.com/jeonghwan-kim/Dusk
ngForm 사용자 정의 밸리데이터 만들기
폼필드 중 이메일 입력은 type="email"로 선언한다. 앵귤러 폼에서도 이러한 이메일 입력폼에 대해 검증하고 그 결과를 앵귤러 폼 객체에 저장한다. 실제로 어떻게 동작하는지 살펴보자. ngForm 밸리데이터 활용에 이어서 폼을 정의를 추가한다. 이메일 입력 필드에 "6pack@wepla.net"을 입력해보자. 입력하는 도중 계속 필드값을 검증하다가…
ngForm 밸리데이터 활용
ngForm 클래스명 활용하기에서 앵귤러 폼에서 자동으로 붙여주는 클래스에 대해 확인해봤다. 그중 .ng-invalid, .ng-valid클래스가 붙는데 다음과 같은 경우에 발생한다. 인풋 필드의 타입이 type="number"일 경우. 실제 입력값이 숫자이면 .ng-valid가 붙고 그렇지 않고 문자열이면 .ng-invalid 클래스가 붙는다. 인풋 필…
passport-google-oauth 구글 인증 모듈
(1) 웹 콘솔에 접속하여 프로젝트를 생성한다. (2) 생성된 프로젝트 상세 화면으로 이동한 뒤 사용자 인증 정보 메뉴로 이동한다. (3) 새 클라이언트 ID 만들기 버튼을 클릭하고 승인된 리디렉션 URI를 입력한다. 이것이 패스포트 모듈에서 사용할 콜백 URL이다. 본 테스트는 로컬에서 진행하므로 http://localhost:3000/auth/goog…
ngForm 클래스명 활용하기
앵귤러 폼을 구성하기 위해서는 (1)
Mi Band, Moves, Rocket Pocket
샤오미의 미밴드(Mi Band)를 한달간 사용해 봤다. 가장 궁금한 것은 이 가격에 얼마나 정확한 데이터를 뽑아낼수 있느냐이다. 현재 사용 중인 다른 서비스와 비교해 봤다. (1) 스마트폰으로 자동으로 이동거리 측정하는 무브스(Moves)와 (2) 시작/종료 버튼으로 트래킹 할수 있는 로켓포켓으로 비교했다. 아래는 결과 그래프를 보자. moves gra…
Socket.io를 이용한 실시간 웹 구현
TCP/IP 소켓프로그래밍이라는 도서가 생각나는가? 인터넷의 다른 컴퓨터와 연결할 수 있다는 사실에 몇번이고 다시 읽었던 책이다. 이러한 소켓을 웹 프로토콜에서도 사용할수 있다. 80번 포트를 그대로 사용하면서 http 핸드쉐이크 과정 없이 데이터를 주고 받을 수 있다. 물론 초기 핸드쉐이크는 한 번 있어야 한다. 웹소켓의 개념과 socket.io의 예제…
이니페이 모바일 결제 (계좌이체) 개발 후기
iconv('EUCKR', 'UTF8', 파라메터)
momentjs
자바스크립트에서는 날짜/시간을 다루기 위해 Date 객체를 사용합니다. 다양한 출력 함수를 지원하고 있지만 필요한 기능은 직접 만들어야 할때가 있습니다. '2016-06-19' 이라던지 '07:40'같은 포맷을 출력하려면 별도 함수나 프로토타입 함수를 만들어야 합니다. 또한 서버, 브라우져의 시간대가 다를 경우 이를 고려하여 개발할 때는 여간 까다로운 일…
이니페이 모바일 결제 (신용카드) 개발 후기
이니시스 모바일 결제 서비를 사용하게되어 시작함. 개발 문서도 샘플 소스도 제공하지만 한참이나 삽질을 거듭한 후 테스트 결제에 성공함. 대략적으로 작성된 개발 문서와 5년이 지난 샘플 코드가 개발자 입장에서 상당히 아쉽다. 예를 들면 프로토콜 메소드 명이라던가 실제 구동할 수 없는 샘플코드는 많은 시행착오를 격을 수 밖에 없다. 본 문서에서는 이니시스 …
Google Material Design
지메일을 사용해 오면서 기능에는 딴지를 걸 수 없을 정도로 만족하며 사용했습니다. 좀 아쉬운것은 '디자인 좀 개발자스럽네'라는 것. 그러나 베타 버전인 점과 메일서비스 고유의 기능만 충족하면 됐다는 생각에 꾸준히 사용하고 있습니다. 몇 전 전부터 구글은 로고 이지를 고급스럽게 바꾸고 메일도 멋스럽게 변경을 했습니다. 이제 디자인에 신경쓰나보다 했죠. 최근…
REST api에 OAuth2.0 구현
노드 익스프레스 엔진으로 api 서버를 구축할때 보통 인증부분은 패스포트(passport) 모듈을 사용합니다. 클라이언트에서 이메일, 비밀번호를 리퀘스트 바디에 담아 서버로 인증요청을 하면 서버는 이를 확인해 인증된 클라이언트 정보를 세션에 저장을 하게 되는데 패스포트가 그 역할을 하는 것이죠. 한번 인증된 클라이언트는 서버에서 받은 세션 아이디를 쿠키 …
프론트에서 잡지 못한 예외를 서버에 리포팅하는 방법
ExceptionLogToServer 서비스를 정의한다. 전체코드
nginx를 이용하여 nodejs와 php 어플리케이션 함께 구동하기
기존에는 아파치 가상호스트 설정을 이용해 한 서버에서 여러개의 php 어플리케이션을 구동하였다. 그러나 Nodjs 어플리케이션을 함께 구동한다면 어떻게 해야할까? 우선 기존의 가상호스트 환경을 살펴보자. PHP와 아파치가 연동되어 있고 가상 호스트마다 사이트 경로를 설정하였다. 그러나 노드 어플리케이션은 단독으로 서버를 구성하기 때문에 특정 폴더를 지정…
ui-route로 라우팅 인증 구현
단일 페이지 웹 어플리케이션(SPA)을 지원하는 앵귤러의 핵심적인 모듈이 바로 "라우팅 모듈"입니다. 이것을 구현한 것이 ng-route와 ui-router 모듈이구요. ng-route는 앵귤러에서 기본으로 제공하는 모듈입니다. 힌편 angular-ui에서 개발하는 ui-router는 최근 많이 사용하는 모듈이죠. angular-fullstack 제너레이…
워드프레스 커스텀 메뉴 추가하기
워드프레스는 여러개의 메뉴를 배치할 수 있다. 테마에서 제공해주는 것은 보통 상단과 우측 혹은 좌측에 메뉴를 둘수 있다. 우리는 블로그 하단에 메뉴를 추가해 보자. 우선 워드프레스 메뉴 구조에 대해 알아보자. 메뉴 위치(메뉴가 아닌). 이것은 메뉴를 어디에 위치 시킬 것인가에 대한 정의다. 관리자 화면에서 외모 > 메뉴 > 위치 관리하기 메뉴에서 테마가 …
워드프레스 자식 테마 만들기
워드프레스에는 무료로 제공하는 멋진 테마들이 많다. 이러한 테마를 그대로 가져다 사용하면서 몇가지 수정하고 싶은 경우에는 자식 테마(Child Theme)를 만들어 사용하면 간편하다. 기존 테마의 기능과 디자인을 모두 가져오면서 추가 기능과 디자인 변경만 코드 수정하면 되기 때문이다. 마치 OOP의 상속과 비슷한 개념이라 보면 될 것 같다. 테마 폴더(w…
익스프레스 파일 업로드
노드 익스프레스에서 파일 업로드를 위해서는 multer 모듈을 로딩해야 한다. 로딩 후 리퀘스트 객체를 통해 업로드한 파일을 핸들링 할수 있다. (req.files) 만약 서버로부터 413 (Request Entry Too Large) 상태 코드가 반환된다면 서버 설정을 변경해야 한다. 아마존 빈스톡(Elastic Beanstalk)을 사용 한다면 앞…
앵귤러 서비스에 템플릿 로딩
상황 상황은 이렇다. 버튼 클릭 이벤트 핸들러에 서비스 함수를 연결하고 서비스 함수에서는 모달창을 띄워야하는 상황이다. 핸들러 함수를 서비스로 만든것은 모듈화를 위함이고 모달창을 앵귤러 서비스 안에서 처리하는 것도 같은 이유다. 해결 버튼에 search() 함수를 연결한다. 연결된 컨트롤러의 search() 함수에서는 우리가 만들 MyService 서비스…
options 메쏘드에 대해
POST 메소드로 리모트 서버의 프로토콜을 호출하면 POST만 요청하지 않는다. 동일한 주소의 OPTIONS 메소드를 먼저 요청하고 200 응답을 확인 후 POST 메쏘드를 호출한다. 이것을 Preflighted request라고 한다. POST, PUT처럼 서버 자원을 변경하는 메소드일 경우 서버 확인을 위해 OPTIONS 메소드를 사용하는 것이다. P…
앵귤러 디렉티브 등
디렉티브 생성시 반환하는 객체 중 scope 속성에서 스코프 변수를 설정한다. 이 변수들은 디렉티브 호출측에서 설정한 스코프 변수에 대한 연결을 설정하는 것이다. '='는 양방향으로 ng-model처럼 동작하고 '@'는 단방향으로 ng-bind처럼 동작한다. '&'는 함수라고 하는데 나중에 알아보자. 폼 입력값 검증시 잘못된 입력은 아래 클래스로 스타일링
워드프레스 플러그인 정리
워드프레스로 홈페이지 개발을 처음으로 진행했다. 50불짜리 유료테마를 구입하고 부족한 기능은 무료 플러그인을 사용하거나 직적 소스를 수정하는 방법으로 진행했다. 사용자 인증, 게시판 등 사용한 플러그인을 정리해보자. 사용자로부터 폼 입력을 받고 싶다면 Contact From 7 플러그인을 사용하자. 텍스트는 물론이고 이메일, 전화번호, 날짜를 입력받는 폼…
워드프레스와 제이쿼리 등
워드프레스에는 기본적으로 제이쿼리 라이브러리가 포함되어 있다. wpenqueuescripts 액션훅을 이용해 wpenqueuescript( 'jquery' ) 함수로 로딩한다. 그럼에도 불구하고 $ 사용시 undefined라는 에러가 나왔다. 몇가지 솔루션을 찾았는데 (1) 함수 사용시 의존성을 해결하는 방법과 (2) 즉시 실행함수를 사용해 jQuery …
몽고DB 인덱스 외
노드 몽고디비 모듈을 통해 디비 서버에 쿼리가 갑자기 느려졌다. 길게는 30초까지 걸린다. 아마존 ec2 인스턴스을 올려도 마찬가지다. 백업해둔 몽고 DB를 mongorestore로 복구할 때 인덱싱을 스킵한 것이 원인이다. 빈스톡에 log.io-harvestor 데몬을 설정해 놨다. 빈스톡에 새 버전 소스를 배포할때 간헐적으로 이 데몬이 죽는 경우가 발…
서버 다운타임 없이 빈스톡 갈아타기
Elastic Beanstalk에 워드프레스를 설치하여 운영중이다. 여기에서 제안하는 방법으로 Elasticache, CloudFront 등의 서비스를 추가하여 유연한 성능의 서버를 구축하였다. 그러나 갑자기 아래같은 메세지를 보이면서 빈스톡 대쉬보드에 빨간불이 들어왔다. 트러블 슈팅 문서를 보면 정확히 위와 같은 경우는 없었다. 비슷한 경우가 있는데 t…
Hapi Api 서버 스캐폴드
Hapi 프레임웍을 이용해 Api 서버를 구현할 때 필요한 최소한의 기능은 이렇다. 예를들어 /users 라우팅시 아래와 같은 폴더 구조로 만들 수 있다. 이외에 데이터베이스 연결 모듈, 로깅 모듈 등 라우팅 이외의 모듈을 components 폴더에 위치한다. 지금까지 작성한 모듈을 정리하면 아래와 같다. DAO 본 글에서 새로 추가할 부분이 DAO 폴더…
Hapi 테스트 코드
프론트도 마찬가지지만 백엔드 서버를 개발할수록 테스트가 중요성을 실감한다. 서비스는 서버 혼자서 동작하는 것이 아니라 모바일, 웹 브라우져 등의 클라이언트와 함께 동작해야 하기 때문에 다양한 시나리오에 대응할 수 있어야 한다. 또한 한 번 발생한 버그는 재발하지 않는다는 것을 보장해야 마음 놓고 코드를 수정할 수 있다. 때문에 테스트 뿐만 아니라 테스트 …
워드프레스에 Grunt 설정하기
자바스크립트를 이용한 프로젝트에서는 Grunt를 이용해 프로젝트를 관리한다. 코드 검사, 압축, 배포 등 grunt의 자동화 기술은 과거 수작업이 많았던 웹 개발을 비교적 편리하게 해주는 유용한 툴이다. 자바스크립트 뿐만 아니라 php 프로젝트에서도 grunt를 이용한 프로젝트 관리 자동화를 구현할 수 있다. php의 대표 오픈소즈 중 하나인 워드프레스(…
Hapi 인증
이번에는 Hapi Api 서버의 인증 기능을 구현해 보자. hapi-auth-cookie 모듈을 이용하여 세션 쿠키를 이용하여 인증을 구현할 것이다. 인증 정보를 세션에 저장하고 클라이언트와는 쿠키를 통해 인증상태를 통신하도록 구현한다. 세션 인증 활성화 Hapi에는 서버객체의 register() 함수를 통해 플러그인을 등록할 수 있다. Hapi에서의 플…
Hapi 로깅, Good
익스프레스에 winton 로깅 모듈이 있듯이 Hapi에서는 Good이라는 좋은 로깅 모듈이 있다. 이번 글에서는 Hapi 프레임웍에서의 로깅 방법에 대해 알아보자. Good 모듈로 로깅시 리포터 모듈을 함께 추가해야한다. Good 모듈은 hapi 프레임웍에서 내뿜는 이벤트를 감지하는 역할을 하는 것 같다. 실제 출력(콘솔이나 파일 등)은 리포터 모듈을 통…
Hapi 파라매터 검증, Joi
지난 포스트에서 Hapi 프레임웍을 이용한 라우팅을 구현하였고 파라메터를 얻는 방법을 잠깐 언급하였다. REST Api에서 파라메터를 입력받는 것은 비지니스 로직을 처리하기 위한 첫 단계다. 파라메터를 제대로 검증하는 것이 로직 구현에 있어 안정적이다. 익스프레스 모듈을 사용할 때는 별도로 파라메터 검증 모듈을 만들어서 사용했다. 실제 익스프레스용 검증 …
Hapi 시작하기
Node.js에서 서버 구현은 대부분 Express.js 프레임웍으로 개발했다. Express.js 3.x에서 4.x대로 업그레이드 되면서 개선된 성능과 사용 편의성에서 만족하고 있었다. 이제 막 익스프레스 프레임웍이 손에 익을 무렵 Hapi라는 신규 노드 페레임웍에 대한 글을 접한게 되었다. (Hapi.js로 Node.js를 시작하세요. - 1부 Why…
$http 테스트 코드 작성
앵귤러 $resource로 서비스를 만들고 이것을 활용하면 백엔드 자원을 간편히 사용할 수 있다. 이렇게 내부적으로 $http를 사용하는 앵귤러 서비스는 어떻게 테스트 코드를 작성해야할까? 간단히 설명하면 목(Mock) 백엔드 서버를 구현하여 테스트할 수 있다. $httpBackend는 Mock 서버를 구현할수 있는 서비스로 $httpBackend.whe…
비트 연산
비트연산은 공부할 때만 익혔지 실제 프로그래밍에 사용해 본적은 이번이 처음이다. '간단히 비트 연산으로 하면되지' 라고 생각했지만 코딩한 경우는 처음이라 어색했다. 몇 가지 비트연산을 정리해 보자. 비트연산은 각 자리을 true / false 로 표현한다. 이진수 001과 010은 각 각 별도의 값을 의미하고 011은 앞의 두 값을 합한 값을 의미한다.…
브라우져에서 아마존 S3 파일 업로드
아마존 웹 서비스를 사용할 때 이미지 같은 스테틱 파일들은 아마존 S3에 업로드하여 관리하는 경우가 많다. 브라우저 단에서 아마존 S3로 이미지를 업로드하고 조회하고 삭제하는 방법에 대해 알아보자. 우선 S3에서 버킷(폴더라고 생각하면 된다)을 생성하고 버킷의 접근권한을 설정해야한다. 리눅스 서버에서 호스팅할 서버상의 폴더를 지정하고 파일 권한을 설정하는…
$resource와 service
$resource는 $http에 리소스 주소를 설정하여 추상화해 놓은 앵귤러 서비스다. 이것을 한번더 앵귤러 Service()로 감싸면 백엔드 자원에 대해 한단계 더 추상화 할 수 있다. 결과만 놓고 보면 User 서비스로 간단하게 백엔드 자원을 다룰 수있다. 위와 같은 User 서비스를 구현해 보자. service()함수로 User 서비스를 만드는데 …
꼬리에 꼬리를 무는 setTimeout()
자바스크립트에서 타이머 설정은 setTimeout()과 setInterval() 두 가지 함수로 구현할 수 있다. 전자는 시간 경과후 동작하게 하는 것이고 후자는 동일 시간마다 동작을 반복하는 것이다. 재생 시간이 다른 여러개 동영상을 연속해서 재생한다고 생각해 보자. 같은 시간이 아니기 때문에 setInterval()로는 힘들겠다. setTimeout…
$resource 캐쉬 설정
$resoure는 앵귤러에서 백엔드 자원을 추상화한 서비스다. 레스트(REST) 방식의 백엔드 프로토콜이 지원된다면 $resoure의 장점을 충분히 활용할 수 있다. url로 $resoure 서비스를 생성하고 사용할때는 get(), query(), post() 등 메소드 이름으로 함수를 호출하면 된다. 또한 프라미스(promise)를 반환하기 때문에 비동…
eb-cli 툴 사용법 정리
아마존 웹서비스의 엘라스틱 빈스톡(Elastic Beanstalk)은 웹 콘솔뿐만 아니라 커맨드 툴(eb-cli)을 제공한다. 이를 사용하면 웹콘솔에 직접 접속하지 않아도 빈스톡에 새로운 어플리케이션을 생성하고 로컬에서 작업중인 프로그램을 명령어 한줄로 아마존에 배포할수 있다. 현재 최신버전인 eb-cli 3.x 버전을 기준으로 사용법을 알아보자. 커맨드…
AngularJS, Passport로 인증구현
AngularJS를 사용하는 프로젝트에서 사용자 인증을 구현해 보자. 작업환경은 아래와 같다. 노드 익스프레스에서는 패스포트 모듈로 인증을 쉽게 구현할 수 있다. 로그인 정보는 서버측 세션 메모리에 저장할 것이고 /api/auth (get/post/delete) 프로토콜로 프론트엔드와 통신할 것이다. 우선 패스포트 모듈을 익스프레스과 연동해야 한다. 앵귤…
워드프레스 SSH2 설정
아마존 EC2에 워드프레스를 설치했다. ec2 인스턴스에 ssh 연결을 위해 아마존에서 제공하는 .pem 키페어 파일을 사용한다. 콘솔 작업뿐만 아니라 워드프레스 관리자 페이지에서 플러그인 등 업데이트를 할때도 SSH 프로토콜을 지원한다. 그러나 관리자 화면에는 .pem파일이 아니라 .pub 파일도 사용한다. 찾아보니 .pem 파일을 .pub 파일로 변경…
WordPress study 01 – misfit.kr
Misfits.kr 웹사이트를 따라하면서 학습한 내용을 정리한 글이다. https://github.com/jeonghwan-kim/misfits-copy flexslider 라이브러리를 사용한다. 부트스트립 Carousel과 다른점은 화면 크기 변화에도 이쁘게 나온다는 점. 포스트의 특성 이미지 만을 가져와 슬라이더로 구성한다. 이미지의 위의 카테고리명은…
Angular Form
앵귤러에서는 폼작성을 위한 클래스와 스콥 변수를 지원한다. 이를 통해 폼 데이터와 화면을 제어할 수 있다.
underscore.js
자바스크립트 코딩시 구 버전 웹브라우져까지 고려한다면 ECMAScript 스펙을 기준으로 한 깔끔한 코딩을 유지하기 어렵다. 자바스크립트 배열을 체크하는 코드를 살펴보자. 그나마 짧은 코드이긴 하지만 뭔가 꼼수 같다. underscore 라이브러리를 사용한다면 isArray()로 검사하면 충분하다. underscore는 자바스크립트의 아쉬운 부분을 채워주…
expressjs 4.0 마이그레이션
익스프레스 4.x는 이전버전 대비 20%로 응답속도를 개선할 수 있다고 한다.(참고) 정말 그럴까? 익스프레스 적용 전과 후의 서버에 AB 테스로 성능 비교를 해봤다. Connection Times (ms) CPU Utilization (%) cpu utilization 기존대비 약 10% 응답속도가 빨라졌다. 기존에 간헐적으로 발생했던 응답 실패도 없었…
노드 실행모드에 따른 환경설정
개발 초기에는 데이터베이스 주소, Auth 토큰값 등 환경 설정파일을 직접 로직에 대입해서 사용한다. 점점 코드가 많아지고 환경설정 값을 사용하는 부분이 많으면 이를 config.js 파일로 분리해서 사용한다. 문제는 테스트/배포시 마다 config.js의 내용을 수정해야 한다는 것이다. NodeJS에서는 development mode와 productio…
log.io를 이용한 beanstalk 로그 모니터링
서비스를 개발하다보면 웹서버, api서버, 파일업로드 서버 등 수개의 서버를 구현하게 된다. 개발/운영시 각 서버에 접속하여 로그파일을 보는 번거로움을 해결할수 있는 것이 log.io다. 원리는 간단하다. log.io 서버를 또 한대 두는 것이다. 대신 다른 모든 서버에서는 log.io 서버로 로그 데이터를 보낸다. 서버 운영자는 이 log.io 서버에 …
Angular-fullstack 로딩 속도 개선
서비스 개발시 프론트앤드와 백앤드를 구분하여 작업한다. 최근 노드와 몽고디비로 백앤드를 개발하고 앵귤러 프레임웍으로 프론트를 함께 개발하는 MEAN 스택을 사용하는 추세다. 이러한 풀스택 개발을 지원해 주는 프레임웍 중 하나가 앵귤러 풀스택(angular-fullstack)이다.MEAN stack으로 개발시 브라우져단의 성능을 높일 수 있는 방법에 대해 …
노드에서 세션을 이용한 로그인/아웃 구현
노드 익스프레스에서는 세션관리를 위한 미들웨어를 기본으로 제공한다. 세션은 쿠키에 의존하기때문에 cookieParser와 session 미들웨어를 함께 사용한다. 노드 익스프레스의 세션 미들웨어를 이용해 로그인, 로그아웃 기능을 구현해 보자. 또한 세션 저장소로 레디스 서버를 사용해 보자. cookieParser와 session 미들웨어를 추가한다. 세션…
트위터 부트스트랩 소스분석
웹 개발을 하면서 프론트작업은 대부분 트위터 부트스트랩으로 개발한다. 소스코드를 분석해 보자. /less/bootstrap.less 으로 전체 구조를 살펴보자. 이 파일에서 모든 스타일시트 정의를 불러온다. Core variables and mixins 프로젝트에서 사용하는 색상, 크기 등 모든 변수들을 variables.less 파일에 정의한다. 함…
아마존 S3를 이용한 이미지 업로드 서버 구축
아마존 EC2로 서버를 운영하다보면 이미지 등 파일을 서버에 업로드하고 저장해야 하는 경우가 있다. 단일 서버라면 디스크에 파일을 저장할수 있다. 그러나 EC2로 오토 스케일링을 묶어놓은 경우는 다르다. 스케일 아웃될 경우 같은 파일을 가지고 있는 서버가 여러대 생성되기 때문이다. 데이터 정합성, 리소스 낭비 같은 문제가 있다. AWS에는 파일저장을 위해…
Elastic Beanstalk
아마존 클라우드 서비스에는 다양한 IaaS를 제공한다. 서버 컴퓨터를 제공하는 EC2, 데이터베이스 서버 RDS, 파일서버 S3 등 계속해서 그 종류가 늘어나고 있고 EB(Elastic Beanstalk)도 이러한 제품 중 하나다. EC2, RDS, S3 등을 간단하게 연결하고 오토 스케일 설정, 플랫폼 설치 등을 한 번에 진행해 주는 것이 장점이다. …