최근 몇 달간 리액트를 열심히 익히다보니 작은 기능 단위로 기능 구현을 연습해오고 있다. 기능 구현 연습 방법은 먼저 내가 즐겨 보는 다음이나 네이버 뉴스에서 잘 쓰이는 기능 (예를 들어 탭을 누르면 관련 아이템이 렌더되는)을 보면, 이건 리액트로 어떻게 구현해볼 수 있을까라고 고민해본다. 그리고 해당 기능을 구현한 간단한 리액트 데모 앱을 만들어보는 방식이다. 충분한 연습을 거치고 원리를 파악한 후 응용 프로젝트를 진행해보기도 한다. 이후 해당 내용을 블로그 글로 정리하는 습관도 가지려 노력하고 있다.

이런 연습 방법은 지금까지 해보니 꽤나 효과적인 것 같아서 앞으로도 계속 이런 방식을 가져가려 한다. 문제는 샘플 데이터를 구하는 것이다. 예를 들어 리액트에서 componentDidMount 함수 안에서 fetch나 axios 등을 통해 API 데이터를 불러오고 setState 함수로 상태에 데이터가 추가되거나 변경되어 해당 컴포넌트가 새롭게 렌더되는 방식이 리액트의 기본이다. 따라서 API 데이터를 어디에서 가져오는지, 그리고 그 데이터가 어떤 데이터인지, 내가 사용하는 데모 앱과 잘 맞는 데이터인지가 늘상 숙제였다.

그래서 지금까지는 JSONPlaceholder를 사용해왔다. Lorem Ipsum으로 되어있는 샘플 JSON 데이터를 Rest API로 제공해주기 때문에 사용하기가 굉장히 편하고 직관적이다. GET 뿐만 아니라 POST, PUT, PATCH, DELETE와 같은 메서드를 리소스별로 제공하기 때문에 Rest API 사용법을 익히는데에도 큰 도움이 된다. 또한 100개의 포스트, 500개의 댓글 등 많은 데이터를 제공해주고 있어서 대부분의 연습용 프로젝트에 사용하기에는 큰 무리가 없다.

하지만 한가지 아쉬운 점이 있었는데, Lorem Ipsum과 한글은 다르다는 점이다. 아무리 기능 구현에 충실한 연습용 앱이라고는 하지만, 라틴어이자 알파벳 문자로 되어있는 Lorem Ipsum을 잔뜩 보고 있노라면 아무래도 현실 감각이 떨어진다. 댓글 목록 컴포넌트를 구현하고 있는데 댓글에 Lorem Ipsum이 주루룩 뜬다면 별로 댓글 같이 느껴지지는 않을 것이다.

또한 한글과 알파벳은 웹에서의 느낌이 굉장히 다른 편이다. JSONPlaceholder에서 제공하는 Lorem Ipsum 문장은 알파벳 문자를 사용하는 서양 개발자들에게는 친숙하기도 하면서 웹 개발과 웹 디자인 측면에서도 추가적으로 고려해야 할 요소가 특별히 없을 것이다. 하지만 한글은 한글에 좀 더 잘 맞는 font와 font-size, line-height 등이 명확히 존재하는 편이다. 따라서 Lorem Ipsum 문장으로 계속 작업을 진행하다가 똑같은 자리에 한글을 입혀놓고 보면 느낌이 사뭇 다른 건 이상한 일이 아니다.

faker 사용을 고려해보지 않은 건 아니다. 한국어로 locale setting을 할 수 있어서 한국어를 사용할 수 있는 것이 장점이 있긴 하다. 하지만 내가 원하는 건 한국어 데이터 그 자체 뿐만 아니라 JSONPlaceholder처럼 쉽고 단순한 Rest API로 한글 데이터를 받는 것이었다.

그래서 Korean JSON을 만들었다

구조는 JSONPlaceholder와 똑같다. 리소스별로 GET, POST, PUT, DELETE 메스드를 요청하면 그에 대한 응답으로 대한민국 헌법 구문을 제공한다. 이를테면 다음과 같다.

유저의 요청 예시

fetch('https://koreanjson.com/posts/1')
	.then(response => response.json())
	.then(json => console.log(json))
	.catch(error => console.log(error));

응답 예시

{
  "id":2,
  "title":"모든 국민은 능력에 따라 균등하게 교육을 받을 권리를 가진다.",
  "content":"연소자의 근로는 특별한 보호를 받는다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 누구든지 성별·종교 또는 사회적 신분에 의하여 정치적·경제적·사회적·문화적 생활의 모든 영역에 있어서 차별을 받지 아니한다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 모든 국민은 주거의 자유를 침해받지 아니한다.",
  "createdAt":"2019-02-24T07:41:57.000Z",
  "updatedAt":"2019-02-24T07:41:57.000Z",
  "UserId":1
}

제공 리소스

현재 제공하고 있는 리소스는 다음과 같다.

  • 유저 10명
  • 포스트 200개
  • 할 일 200개
  • 댓글 200개

리소스별로 GET, POST, PUT, DELETE 메서드를 지원한다.

오픈소스를 향한 첫 발걸음

샘플 데이터로 데이터베이스를 채우고, 로컬 서버를 띄워서 나 혼자 쓰고 만족할 수도 있었다. 하지만 분명 나같이 한글 데이터를 원하는 사용자들이 있을 것이고 그들에게 대단하진 않지만 약간의 도움이 된다면 만족스러울 것 같았다. 특히 이제 막 웹개발을 배우기 시작했다거나, Rest API 사용법을 익히기 시작하는 한국어 사용자들이 Lorem Ipsum 대신에 멋진 내용으로 가득한 대한민국 헌법 구문을 샘플 데이터로 사용할 수 있다면 꽤나 보람찬 일이지 않을까 싶었다. 그래서 깃헙 리포Korean JSON의 코드를 올려두었다.

향후 계획

일단 API는 만들었고 잘 작동하니 여기서 멈출까 생각도 들지만 만들어놓고 보니 Node 환경에서 API 테스트는 어떻게 할 수 있을까 궁금해진다. 그래서 조만간 Mocha와 Chai로 Rest API 테스트를 공부해보고 블로그로 그 과정을 공유해보도록 하겠다.