첫 번째 큰 프로젝트/JSON 서버 사용법 배우기

이것을 읽기로 결정한 사람에게 안녕하세요! 내 학습 진행 상황에 대한 업데이트를 제공해야 합니다. 나는 나의 첫 번째 큰 프로젝트를 끝냈으니 긴장을 풀고 초보자 프로그래밍을 볼 준비를 하십시오. 네, 웃고 움찔해도 괜찮습니다. 내 프로젝트를 보여주고 JSON 서버를 설정하는 방법에 대해 알아보겠습니다.



아시다시피 저는 Avatar the Last Airbender의 열렬한 팬입니다(Nickelodeon, 저를 찾아오지 마세요. 저는 가난합니다). 이 웹 애플리케이션은 Ba Sing Se에 있는 Iroh 삼촌의 찻집에서 영감을 받았습니다. Iroh의 캐릭터를 많이 존경하기 때문에 완전한 쓰레기 더미를 만들지 않는 것으로 존경심을 표하려고 노력했습니다. 저의 주요 초점은 JavaScript였으며 시간을 절약하기 위해 Materialize 을 사용했습니다. Materialise가 사람이라면 나는 그들에게 키스를 할 것입니다. 정말 편리한 멋진 CSS 프레임워크입니다!

API 헌팅

나는 내가 상상했던 것에 대한 내 요구를 충족시키는 API를 찾는 데 많은 어려움을 겪었습니다. 그래서 그냥 저만의 데이터를 만들고 JSON 서버를 사용하기로 했습니다. 저는 강력한 독립 프로그래머이며 무료 공개 API에 의존할 필요가 없습니다! 좋아요, 농담은 제쳐두고, 여기 제 비전을 기반으로 만든 것이 있습니다.

다음은 검색 표시줄로 사용되는 제출 양식입니다.


다음은 웹 애플리케이션 바닥글에 있는 클릭 이벤트입니다.


JSON 서버를 설정할 때 로컬에 설치했는지 확인해야 합니다. here을(를) 방문하여 할 수 있습니다! 그런 다음 작업 중인 디렉터리에서 데이터를 저장할 db.json 파일을 만들어야 합니다. 이 파일에서 데이터를 입력할 때 올바른 JSON 형식을 사용해야 합니다. JSON 구문은 일반적인 JavaScript 개체와 매우 유사하지만 완전히 동일하지는 않습니다. 예, 대괄호와 키/값 쌍이 있으므로 JSON을 처음 접할 때 일종의 친숙함을 보는 것이 자연스럽게 위안이 될 것입니다.

다음은 db.json 파일의 형식을 지정하는 방법에 대한 아이디어이며 자신의 형식을 지정하는 방법에 대한 기본 아이디어를 제공할 수 있기를 바랍니다.

{
    "id": 1,
    "name": "Black Tea",
    "image": "https://media.istockphoto.com/photos/black-tea-in-a-cup-picture-id475614605?b=1&k=20&m=475614605&s=612x612&w=0&h=rJ47IWDVx0UqSjWs_YlZCsN-cyXRLbtW-CMTQUmHnMs=",
    "description": "Often sold in a blend of some sort, the flavor depends on the location the plant was grown and the blend it is sold in. Consisting of many varieties, it is the most common type of tea. It supports heart health and boosts the body's defense towards oxidative stress.",
    "flavorProfile": "strong, dark"
  },

이것은 모두 쉼표로 구분된 다른 유사한 개체와 함께 대괄호로 묶인 단일 데이터 개체의 예입니다. JSON 형식에서 개체는 중괄호로 묶이고 쉼표로 구분됩니다. 대괄호는 배열을 유지하는 데 사용되므로 데이터를 생성할 때 이 모든 것을 염두에 두십시오. 작업하기 쉬운 구조를 찾으십시오.

데이터를 적절한 형식으로 설정했으면 실행하세요!

$ json-server --watch db.json

localhost URL을 방문하면 잘 지내고 있음을 상기시켜주는 지원 단어와 함께 가장 편안한 텍스트 얼굴로 맞이할 것입니다.