[TIL/React] 2023/03/14

원민관·2023년 3월 14일
0

[TIL]

목록 보기
45/159

JSON Server

JSON Server는 로컬에서 빠르게 RESTful API를 모의(mock)할 수 있도록 도와주는 도구이다. 'JSON 파일을 데이터 소스로 사용해서 API 엔드포인트를 생성'하고, 클라이언트에서 해당 엔드포인트에 요청(Request)을 보내면 적절한 응답(Response)을 반환한다. 그렇다면 ! API 엔드포인트는 또 무엇인가?

API 엔드포인트란 웹 API에서 클라이언트 애플리케이션이 서버에게 요청(Request)을 보내기 위한 URL 주소를 의미한다. 즉, 클라이언트가 API를 사용하기 위해 서버에게 요청(Request)할 때, 어느 URL로 요청해야 하는지를 나타내는 고유한 주소이다.

JSON Server는 Node.js 환경에서 실행되고, npm 패키지로서 제공된다. 'JSON 파일을 데이터 소스로 사용해서 API 엔드포인트를 생성한다는 것'은 다음과 같은 상황을 의미한다.

{
  "posts": [
    { "id": 1, "title": "JSON Server", "author": "John Doe" },
    { "id": 2, "title": "React.js", "author": "Jane Smith" },
    { "id": 3, "title": "Vue.js", "author": "Bob Johnson" }
  ]
}

'db.json' 파일에 위와 같은 data가 있다면, JSON Server를 실행시키면 http://localhost:3000/posts와 같은 URL로 API 엔드포인트를 생성할 수 있다. 이를 통해 클라이언트에서 해당 URL로 GET 요청(Request)을 보내면, 위 데이터를 JSON 형태로 반환할 수 있다. 그렇다면! JSON 형태라는 것은 무엇인가?

'JSON'은 'JavaScript Object Notation'의 준말로, 자바스크립트 객체를 기반으로 한 '가벼운 데이터 교환 형식'을 의미한다. 따라서 JSON 형태는 자바스크립트 객체와 유사하게 'key-value 형식'을 취하는 'data 표기법'이라고 볼 수 있다. JSON 형태는 다음과 같다.

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "languages": ["JavaScript", "Python", "Java"]
}

JSON 형식은 다른 프로그래밍 언어와 호환성이 좋고, 가볍고 직관적인 구조로 데이터 교환을 쉽게 할 수 있다. 이러한 이유로 JSON 형식은 현재 웹에서 데이터 교환에 가장 많이 사용되는 형식 중 하나이다.

이후 과정이다.

Optional Chaning

"Optional Chaning을 한 번 정리해야지..." 했는데, 역시 다음이라는 건 없다. 생각난 김에 정리해 봤다.

Optional Chaining은 자바스크립트에서 '객체의 속성'에 접근할 때, 해당 속성이 없는 경우 에러를 발생시키지 않고 undefined를 반환하는 기능을 수행한다.

Optional Chaining은 ?. 문법을 사용한다.

일반적으로 객체의 속성에 접근할 때 .을 이용한다. 위 코드는, person이라는 객체 내부에 있는 address라는 속성 중에서도 street에 있는 value에 접근하는 과정을 보여준다.

만약 address 속성이 없는데 address에 접근하려고 시도하면 Error가 발생할 것이다.

address에서 마지막 s를 제거했다. 즉, address라는 본래의 속성은 없는 상태이다. 없는 속성에 접근하려고 시도하면 곧바로 Error가 발생한다.

Optional Chaning을 활용하면, address라는 속성이 없는 상태에서도 Error를 발생시키지 않고 'undefined'를 반환한다.

Optional Chaning도 깊게 파고들면 학습해야 할 내용이 방대하다. 현재로서는 "Optional Chaning은 TypeError를 방지할 수 있는 유용한 방식 중 하나구나!" 정도로 이해했다.

회고

어제는 갑자기 코딩이 하기 싫었다. 그래서 그냥 안 했다. 나름대로 계획은 있었다. 인강 20~30분 분량, 딥다이브 5페이지 정도. 누가 시키지도 않았는데 스스로 코딩을 숙제로 만들어버리고 혼자 지치는 쌩쑈를 자행했다.

아침에는 학교에 가서 전공수업(통계)을 들었다. 통계야 뭐 원래 극도로 싫어하는 사람이라 휴대폰으로 'React Docs Beta'를 유영하며 시간을 죽이고 있었는데, 그때 한 가지 깨달음을 얻었다. "내가 운전대를 잡야야 한다."라는 것이었다.

'인강 몇 분', '책 몇 페이지' 따위의 형식이 중요한 게 아니라, 그러한 도구를 사용해서 내가 '능동적으로 쟁취할 수 있는 것이 무엇인가'가 중요한 것이다. 개발한다는 놈이 조수석에서 하품이나 하고 있었던 것이다.

모든 형식적인 것들로부터 벗어나겠다. 내가 오늘 어떤 개념을 'take'할 수 있는가에 집중하고자 한다. 이러한 결심을 하게 된 나는, 이제부터 자기 전에 오늘 무엇을 했는지 스스로에게 말할 수 있어야 한다.

나는 오늘 JASON ServerOptional Chaning을 배우고 정리했다.

영감을 준 'EO 채널'과 '오늘의 집 CTO, Justin'님께 닿지 않을 무한한 감사를 표합니다... ㅜ

profile
Write a little every day, without hope, without despair ✍️

0개의 댓글