서버5 [Troube Shooting] Json-Server를 활용한 가상 페이지네이션 데이터 호출 테스트 프로젝트를 하다보니, 페이지네이션을 구현해야 하는데 서버에서 API 명세서만 제공하고 아직 기능이 구현되지 않았다고 한다 이런 경우 프론트엔드는 어떻게 기능을 구현할 수 있을까? * 여러 로직을 통해 인증하고/뭐하고, 뭐하고 해봤자, 결국 서버로부터 받는 것은 "데이터"이고, 그 데이터를 내가 가상으로 호출할 수 있다면 기능을 충분히 구현할 수 있다! 이를 위해 익숙한 개발 툴인 JSON-Server를 활용해서 페이지네이션을 구현해보기로 했다. 데이터 호출 코드 const fetchList = async () => { const response = await axios.get( `http://{{url}}/list?pages=${currentPage}&size=20` ); const data = resp.. 2023. 4. 16. AJAX 요청 (React, 기본문법) 용어 및 관계 정리 먼저 HTTP, RESTful API, AJAX 이 3가지 서버와 관련된 통신들이 너무나 헷갈리기에 이에 관해 먼저 정리하고 각 개념을 카테고리로 묶어 정리하고자 한다. HTTP HTTP는 인터넷에서 데이터를 전송하는데 사용되는 프로토콜이다. * 프로토콜(Protocal) : 2개 이상의 컴퓨터가 서로 데이터를 주고 받을 때 (통신할 때), 사용되는 규칙 혹은 규약이다. 즉 HTTP는 아주 단순하게 2개 이상의 컴퓨터가 통신할 때 규칙이나 규약이 정해져 있지 않고 제각기 통신하게 되면 이를 분석하고 핵심 내용을 파악하는데 시간이 너무 오래걸리거나 혹은 통신이 불가능해지기 때문에 "인간"이 규칙이나 약속을 정해놔서 원활하게 통신할 수 있도록 정해놓은 것이다. RESTful API RES.. 2023. 3. 5. RESTful API가 필요한 이유 용어 및 관계 정리 먼저 HTTP, RESTful API, AJAX 이 3가지 서버와 관련된 통신들이 너무나 헷갈리기에 이에 관해 먼저 정리하고 각 개념을 카테고리로 묶어 정리하고자 한다. HTTP HTTP는 인터넷에서 데이터를 전송하는데 사용되는 프로토콜이다. * 프로토콜(Protocal) : 2개 이상의 컴퓨터가 서로 데이터를 주고 받을 때 (통신할 때), 사용되는 규칙 혹은 규약이다. 즉 HTTP는 아주 단순하게 2개 이상의 컴퓨터가 통신할 때 규칙이나 규약이 정해져 있지 않고 제각기 통신하게 되면 이를 분석하고 핵심 내용을 파악하는데 시간이 너무 오래걸리거나 혹은 통신이 불가능해지기 때문에 "인간"이 규칙이나 약속을 정해놔서 원활하게 통신할 수 있도록 정해놓은 것이다. RESTful API RES.. 2023. 3. 4. JSON / JSON-Server MDN JSON 공식문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON JSON - JavaScript | MDN JSON 객체는 JavaScript Object Notation(JSON)을 분석하거나 값을 JSON으로 변환하는 메서드를 가지고 있습니다. JSON을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메서드를 제외하면 자신만의 developer.mozilla.org JSON이란? JSON(JavaScript Object Notation)은 JSON은 객체, 배열, 숫자, 문자열, 불리언과 null을 직렬화하기 위한 구문이며, Javascript의 객체 문법을 따르는 문자 기반의 .. 2023. 3. 3. Fs 모듈 (File System Module) Module이란? 객체의 수가 방대해짐에 따라 이를 관리하기 위한 파일 관리 툴들을 통칭하는 말이다. 이러한 모듈들은 컴포넌트/함수 내부가 아닌 외부에 파일 별도로 두고 관리한다. 만약, 몇 개의 객체로 구성된 데이터를 다룬다면 제어하고자 하는 파일 안에서 해당 데이터를 다뤄도 큰 차이가 없지만 수십/수백개의 데이터와 함께 데이터 내부에 재귀/제어함수가 포함된 데이터를 다룬다면 자바스크립트 혹은 리액트에서 렌더링하고 읽어들이는데 불필요한 자원을 소모하게 된다. 이로 인해 데이터 파일과 제어하고자 하는 파일을 분리하여 Node.js를 통해 데이터를 필요할 때마다 주고 받게 함으로 불필요한 자원 소모를 줄이는 작업이 필요하게 되었다. Node.js 모듈 : 내장 메서드 Node.js에서 제공하는 모듈은 .. 2023. 3. 3. 이전 1 다음
