💡 REST API 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 우리가 어떤 식당이나 카페의 손님이고, 식사 혹은 음료를 주문한다고 가정해 보자. 메뉴판의 상태가 아래 사진과 같다면 어떨까? 알아보기도 어렵고, 주문하기도 어려울 것이다. 클라이언트와 서버 사이에도 데이터와 리소스를 요청하고, 요청에 따른 응답을 전달하기 위한 메뉴판이 필요하다. 메뉴판을 보고 손님이 식당에서 음식을 주문하듯 클라이언트는 API를 통해 서버에 요청하고 이에 대한 응답을 받는다. 따라서 HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로..

state 애플리케이션의 "상태" 컴포넌트 내부에서 변할 수 있는 값 props 외부로부터 전달받은 값 컴포넌트의 속성(property)을 의미합니다. 이름이나 출생지처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록..

💡 SPA 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아서 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 애플리케이션이나 웹 사이트 SPA의 등장 배경 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다. 페이지 전체를 로딩하면서 깜빡이는 현상 등이 생기기 때문에 유저 경험이 좋지 않았습니다. 또한 사용자와 서비스 사이에 상호작용이 더욱 많아지면서 웹사이트가 더욱 복잡해졌습니다. 상호작용을 할 때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다. 이런 문제를 개선..

우리가 작성한 JavaScript코드는 웹브라우저의 엔진을 통해 해석하고 실행합니다. 하지만 자바스크립트 엔진만으로 충분하지 않아서 브라우저가 제공하는 JS런타임 환경이 Web API, Queue, Event Loop 등을 동원합니다. Runtime 자바스크립트 엔진(Single Thread) 자바스크립트 엔진 중 가장 유명한 것이 크롬의 V8엔진입니다. V8엔진은 크롬과 node.js 등 에서 사용됩니다. V8엔진을 간단히 표시한 모습은 이렇습니다. V8엔진은 크게 두 부분으로 구성됩니다. 메모리 힙(Memory Heap): 메모리 힙은 변수 및 객체들을 메모리 할당하는 공간입니다. 콜 스택(Call Stack): 코드가 실행되면서 스택 프레임이 쌓이는 곳입니다. JS Engine은 단 하나의 Call..

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. — 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 한 객체에 정의된 메소드와 속성을 다른 객체에서 사용할 수 있도록합니다. 프로토타입 체인이란? 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다. JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은..