glitch로 무료 json server를 꾸려보자
glitch란?
"Glitch"란 원래 컴퓨터 시스템, 전자기기, 소프트웨어 등에서 발생하는 작은 오류나 결함을 의미한다. 이 용어는 예기치 않은 문제, 작동 오류, 혹은 프로그램의 잘못된 동작을 가리키는데 사용된다.
오늘 사용해볼 glitch 서비스는 사용자들이 웹 애플리케이션을 쉽고 빠르게 만들 수 있게 도와주는 온라인 플랫폼이다. 이 플랫폼은 코드를 즉시 작성하고, 공유하며, 실행할 수 있는 기능을 제공한다. 사용자들은 Glitch를 통해 다양한 프로젝트를 호스팅하고, 다른 개발자들과 아이디어를 공유하며, 서로의 작업을 볼 수 있다.
당신은 당신만의 backend server가 있나요?
frontend 취준생, 혹은 개인의 포트폴리오를 꾸리려는 사람이라면 backend가 꼭 필요하다. 이걸 서비스하는 방법은 아래와 같이 많이 있다.
- aws에서 ec2등의 가상서버를 하나 임대받아 사용한다. 국내 naver cloud, cafe24 등을 사용할 수도 있다. 도메인, nginx 설정 등은 자기가 다 해야 한다. 무료는 너무 느리고 1년정도의 기간 제한이 있으며, 성능을 더 원하면 돈을 내야함.
- 만약 집에 남는 컴을 항상 켜둘 수 있다면 공유기의 포트 포워딩 기능을 이용해 서버를 꾸릴 수 있다. 설정은 역시 자기가 다 해야함 + 가끔 정전 나면 재부팅 해줘야 한다. 맥미니 2012 or 2014, 맥북에어 2013~15 를 추천한다. 요즘 모두 10만원대에 구입할 수 있고, 가상 서버에 비해 훨씬 성능이 좋다.
- jsonplaceholder(https://jsonplaceholder.typicode.com/) 등에서 가짜 api를 연결해 화면을 구성할 수 있다. 다양한 object들에 대해 rest api를 제공해준다. 다만 내가 직접 설계한 object를 서비스하려면 돈이 든다. 업데이트 결과를 다시 fetch받을 수도 없다.
- glitch등의 컨테이너 기반의 서비스에서 간단한 서버를 구동시킬 수 있다.
- heroku / vercel / netlify 는 찾아보세요~
- idc에 상면하는 것은 포폴용은 전혀 아니므로 패스.
이 중, 인증이나 프로그램 없이 데이터 출입만 할거면 4번 glitch 방법, 약간의 프로그래밍을 돌릴 거면 2번 방법을 추천한다.
가입 & 첫 프로젝트 만들기
우선 glitch 사이트에서 회원가입을 하자. github이나 google계정으로 가입이 가능하다.
다음으로 우상단의 new project 버튼을 눌러 새로운 프로젝트를 만들어보자. 여기서 "glitch-hello-node"를 선택.
그러면 아래와 같이 프로젝트를 시작하는 로딩화면이 나온다.
만들어지고 나면 vscode와 비슷하게 좌측에는 프로젝트 파일, 우측에는 에디터가 나온다.
여기서 상단의 주소줄 혹은 파일 목록의 최상단에 보면 특별한 단어 3개가 하이픈(-)으로 연결되어 있다. 이것이 이 프로젝트의 고유한 id라고 생각하면 된다. 나중에 api를 호출할 때 도메인에도 들어가게 되니 잘 보아두자.
https://glitch.com/edit/#!/autumn-fluorescent-ketchjson server 구동하기
다음과 같이 몇가지 수정을 하자.
- server.js 는 내용을 모두 삭제하거나 아예 파일을 지워버리자.
- db.json 파일을 하나 생성하자. 샘플 내용은 다음과 같다.
{
"users": [
{ "id": 1, "email": "user1@example.com", "name": "Alice" },
{ "id": 2, "email": "user2@example.com", "name": "Bob" },
{ "id": 3, "email": "user3@example.com", "name": "Charlie" },
{ "id": 4, "email": "user4@example.com", "name": "Diana" },
{ "id": 5, "email": "user5@example.com", "name": "Evan" }
],
"posts": [
{ "id": 1, "writerId": 1, "title": "My First Post", "content": "This is the content of my first post." },
{ "id": 2, "writerId": 2, "title": "Learning JSON", "content": "Here are some of my thoughts on learning JSON." },
{ "id": 3, "writerId": 3, "title": "Thoughts on Technology", "content": "Technology is changing the world." }
]
}- package.json 내용에서 필요없는 dependencies 대신 다음으로 대체하자.
"dependencies": {
"json-server": "^0.16.3"
},- 같은 파일에서 start 스크립트도 수정하자.
"scripts": {
"start": "json-server --watch db.json"
},이제 glitch에서 필요한건 다 준비되었다.
우리의 api url의 도메인은 {이 프로젝트의 id}.glitch.me 이다. 이의 하위에 db 명(db.json 에 붙여줬던 users, posts 등)을 붙이면 api url이 완성된다.
postman 으로 테스트해보기
postman은 api 테스트를 날려볼 수 있는 편리한 프로그램이다. web, mac, windows 모두 제공된다.
설치한 후 glitch-hello-world 라는 api collection (묶음)을 하나 만들자.
여기에 add request 를 한 후, user 목록을 얻는 url을 get방식으로 호출해보자. 아래와 같이 잘 나오는 것을 볼 수 있다.
이제 새로운 사용자를 등록해보자.
add request 를 한 후, 위와 동일한 url에 method만 post로 바꾸자.
그리고 params, authorization, headers는 넘기고 Body 에서, 형태는 raw, 내용 형식은 JSON을 선택한다. 그리고 아래와 같이 입력해보자.
{
"email": "newuser@example.com",
"name": "New User"
}실행하면, 아래처럼 새로운 id가 발급되면서 들어간 걸 볼 수 있다.
잠깐 glich로 돌아가 db.json 내용이 바뀌었는지 확인해보자.
좌측 파일에서 db.json을 선택해봐도 원래 내용만 보일 뿐이다. 이는 현재 보고 있는 glitch 화면에서 외부의 api에 의한 파일의 변경을 딱히 업데이트 받을 방법이 없기 때문에 이미 캐싱된 것을 보여주는 것이다. 아마 나중에 재접속하면 변경되어 있을 것이다. 여기서는 확인하지 말자.
대신 하단의 TERMINAL 버튼을 눌러 터미널을 연 다음 아래와 같이 입력해보자.
cat db.json그러면 아래와 같이 내용이 갱신된 것을 볼 수 있다. new user가 잘 추가되어 있다.
주의할 점
이 컨테이너는 항상 구동되는 것이 아니라, 접속이 없으면 일정시간 후 실행이 중지된다. free tier 수준에서는 이게 최선이다. 컨테이너가 중지된 상태에서 api를 호출하면 다시 깨어나는데 이 시간이 약 20초 정도 된다.
오히려 이 점을 활용해 포트폴리오에서 에러핸들링을 자랑해보자.
- 처음에 접속하면 backend의 구조를 알려주고 깨어날 때 시간이 걸림을 고지하자.
- fetch 실행시 timeout 오류가 떨어지면 사용자(아마도 서류 검토자나 면접관)에게 다시한번 실행하면 될거라고 친절하게 알려주자.
결론
이 글에서는 frontend 포트폴리오를 준비할 때 필요한 backend를 glitch를 사용해 간단히 띄워보는 것을 알아보았다. 간단한 서비스인 만큼 상시구동, 인증, 권한관리 등은 기대하지 말자. 그래도 원하는 걸 다 하겠다고 frontend 취준생이 express 공부를 하고 있는 것 보다는, 본업에 집중해 frontend의 여러 스킬과 고민의 깊이를 보여주는 것이 더 호소력있을 것이라고 생각한다.
