데이터 흐름 개념을 활용하여 항공편 검색 기능을 구현하는 과제다. 이 과제의 핵심은 네트워크 요청을 통해 항공편 리스트를 받아오고, 도착지 정보 검색 기능을 구현하는 것이다. 기능 구현을 위해서 다음과 같은 고민을 한다. 상태 갱신 함수를 어디로 전달할지 Effect hook을 어떻게 활용할 수 있을 지 Component ...

Effect Hook이란? React 컴포넌트 내에서 특정 부분에 변화가 생긴 뒤에 (혹은 렌더링 이후에) 지정한 효과(콜백함수)를 실행한다. 특정 동작이 발생하면 자동으로 특정 행동을 하도록 하는 것을 Hook 이라고 보면 된다. Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Si...

React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다는 점이다. 단방향 데이터 흐름 (one-way data flow) React는 데이터가 위에서 아래로 흐르는 단방향 데이터 흐름을 따른다. React를 대표하는 설명 중 하나일 정도로 중요하며, 컴포넌트는 props 를 통해 전달받은 데이터...

HTTP API 테스트 도구란? 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저다. root-endpoint: 서버의 기본 주소 path: 세부 경로 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-en...

REST API란? REST API 는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 포로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. REST API에서 REST는 Representational State Transfer의 약자 로이 필딩(Roy Fielding)의 박사학위 논문에서 ...

SSR SSR(Server Side Rendering) 은 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET 요청을 보내면 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 보내기...

AJAX AJAX (Asynchronous JavaScript And XMLHttpRequest) 는 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있는...

HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인 되었으며, 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면, 서버도 HTTP Messages 양식에 맞춰 응답한다. HTTP Messages HTTP Messages 는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다. HTTP Messag...

URL과 URI 브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다. 예를 들어 https://codestates.com:443/ 사이트에 접속하게 되면, codestate.com 주소가 가리키는 서버의 기본 폴더를 뜻한다. CLI 환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래시(/)를 이용해 서버의 폴...

웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나눈다. HTTP를 이용해 주고받는 메시지를 HTTP 메시지 라고 부른다. 클라이언트와 서버 간 통신 스타벅스와 같은 커피 전문점에 가서 커피를 주문할 때 카운터로 찾아가거나 앱 또는 키오스크를 이용할 수 있습니다. 이러한 방법 하나하나 전부 프로토콜...