json의 향연

인터페이스를 먼저 정의하고 서버 사이드와 클라이언트 사이드를 동시에 개발 진행 많이들 해 보셨으리라 생각합니다. 특히 모바일 개발을 할 때 더 더욱 이런 방법을 많이 씁니다. json은 모바일 데이타 주고 받는 데에 표준 처럼 사용되는 상황입니다. json-server는 이런 경우에 많이 사용할 수 있는 프로젝트입니다.

typicode/json-server
_json-server - Get a full fake REST API with zero coding in less than 30 seconds (seriously)_github.com

설치를 해 봅시다

언제나 반복하는 말이죠. 간단합니다.

$ npm install -g json-server

사용을 해 봅시다

json-server가 사용할 데이타베이스를 구성해 봅시다.

이렇게 보통의 mongodb같은 NoSQL에서 줄것만 같은 형태로 json을 구성하고 나서 json-server를 실행 시켜 봅니다.

$ json-server --watch db.json

어떤 일이 발생했을까요?

와 실행이다

http://localhost:3000를 확인해 봐야겠죠?

이런 형태의 페이지가 뜹니다.

그리고 각 router에 따라서 json service 를 입맛에 따라 확인해 볼 수 있습니다. 주의 깊은 개발자라면 watch 옵션을 확인했을 텐데요. 이 옵션을 통해 파일을 실시간을 고치고 그것이 서버에 반영됩니다.

그리고 서버를 실행시킬 때에

Type s + enter at any time to create a snapshot of the database

라는 문구를 볼 수 있는데 스냅샷을 저장할 수 있는 옵션입니다.

더러워 콧구멍이라니

실제 실행해 보면 이런형태로 저장이 되는군요. 파일을 변화시킬때 서비스 별로 스냅샷을 지정할 수도 있겠습니다.

다양한 기능

• Node.js 에서 서버로 활용할 수 있고 그에 따른 API도 지원합니다.
• Routes 섹션을 살펴보면 NoSQL이 해 주는 여러가지 라우팅 옵션들을 자체 지원합니다. (Filter, Sort, Full text Search등등)
• Static File Server, Port변경, 랜덤 데이타 기능등등 개발할 때 필요한 부분들을 골고루 갖추고 있습니다.

Typicode

이 프로젝트를 만든 Typicode 는 최근에 핫한 프로젝트를 연달아 내고 있는데 hotel, husky,lowdb등이 있습니다.

hotel은 localhost:2000 같이 나오는 url을 my.dev형태로 바꿔주는 프로젝트이고 husky는 git hook를 손쉽게 걸어주는 프로젝트이고 lowdb는 정말 간단한 형태의 json db를 구성할 수 있는 프로젝트입니다.

다음에 같이 다뤄보도록하겠습니다.

By Keen Dev on May 3, 2016.

Exported from Medium on May 31, 2017.

오랜만에 상관없는 이미지

React Native 다들 개발은 하고 계시죠? 개발자라면 한 번 도전은 해 봤을 텐데요.(응?) 죄송합니다. Native 컴포넌트를 Javascript로 그리고, Style을 직접 주다 보니 본의아니게 개자이너 혹은 디발자의 영역을 넘나드셨을 거라고 봅니다.

그러다 보면 당연하게 생기는 생각이 “아 부트스트랩 같은 녀석 없을까” 인데 여기 그런 프로젝트가 있습니다.

2016/05/03 Editor’s choice

GeekyAnts/NativeBase
_NativeBase - The missing piece of React Native_github.com

설치를 합시다.

설치는 간단합니다. (물론 react-native를 해 보셨다면 말이죠.)

프로젝트에서는 일단 react-native init 부터 시작하던데 다음의 명령어면 기존 프로젝트도 충분합니다.

npm install native-base --save

만약에 처음부터 만들 요랑이시라면

react-native init AwesomeNativeBase  
cd AwesomeNativeBase  
npm install

명령어가 먼저 필요합니다.

rnpm

rnpm이라는 명령어는 react-native 를 사용하는데 요즘은 필수가 되었습니다. native 컴포넌트를 가진 프로젝트를 추가하면 (npm install) 이후 관례적으로 해 주게 되는데요

• $rnpm link

명령어로 가능합니다. 기본적으로 설치되어 있는 모듈 전부에 대한 링크를 점검해 줍니다.

실행

이런 일들이 갖추어 지고 나면 xcode를 켜서 run 을 통해 실행을 해 봅니다.

엇 달라진게 없습니다.

index.ios.js 소스를 고쳐보겠습니다.

그리고 다시 실행을 하면

어익후 깜짝이야

이런 그림이 나타납니다.

분명히 개자이너, 디발자 어쩌구 저쩌구 했는데, 아무리 좋은 툴을 가져다 줘도 저같은 디알못은 소용없나 봅니다.

아 글쎄 이쁘다니깐요

http://nativebase.io/docs/v0.2.1/assets/img/magic-with-nativebase-020.mp4

클릭은 위의 링크. 미디엄은 이미지 링크를 지원하라!

동영상을 감상해 보시면 글쎄 이쁜… 프로젝트가 나옵니다.

By Keen Dev on May 2, 2016.

Exported from Medium on May 31, 2017.