본문 바로가기

json8

데이터 처리 [JSON 형식의 API에서 데이터를 불러올 때 주로 사용되는 데이터 처리 방법]이 과정은 API 호출, 데이터 변환, 상태 관리 및 오류 처리 등을 포함1. API 호출API를 호출할 때는 fetch API나 axios와 같은 라이브러리를 사용함1.1. Fetch API 사용fetch('') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 데이터로 변환 }) .then(data => { console.log(data); // 데이터를 처리 }) .. 2025. 2. 12.
JSON 기본 구조 1. JSON 기본 구조객체: { "key": "value" } 형태로, 키와 값의 쌍으로 이루어져 있음배열: [ { "key": "value" }, { "key": "value" } ] 형태로, 여러 개의 객체를 포함할 수 있음2. 일반적인 API 응답 구조API 응답은 여러 가지 형태를 가질 수 있지만, 다음과 같은 구조가 일반적1. 단일 객체 응답{ "id": 1, "name": "John Doe", "email": "john@example.com"}2. 배열 응답[ { "id": 1, "name": "John Doe" }, { "id": 2, "name": "Jane Smith" }]3. 메타데이터 포함{ "data": [ { "id": 1, "name.. 2025. 2. 12.
html->json 넘기는법 1) GET 서버로 무언가를 요청할 때 2)POST 서버로 어떤 데이터를 보내 줄 때 사용 , '/join' 으로 request url이 탐지되면, 이제 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값) 그 값이 올바른지 확인하거나 아니면 DB에 그 값을 추가하는 등의 작업을 할 겁니다. text로 바꿔줘야됨. JSON.stringify() 사용 fetch('/topics', { method:'POST', //텍스트로 바꿔줘야 된다. body:JSON.stringify({title:'html', body:'html is ..'}), // 내가 보낸건 json이야~ 라고 서버에게 말해주는 것 headers: { 'Content-Type': 'application/json' }}) .. 2023. 8. 3.
canvas 1) canvas width,height으로 속성 지정 inline-block 형태임 캔버스 태그 안에서 내용 그리려면 자식 노드를 추가 하는 것이 아니라 객체를 가져와서 함수 호출하여야 함 canvas api 사용하려면 캔버스 생성 + 렌더링 콘텍스트를 만들어야함 : 1-1) 사용법 ) 이후 js에서 다루기 const canvas = document.querySelector('canvas'); const ctx = canvas.getContext("2d") //ctx ->context 라는 의 1-2) 좌표 왼쪽 위 구석이 (0,0) 오른쪽으로 갈수록 x값 커짐 아래쪽으로 갈수록 y값 커짐 1-3) 각도 기준 : 가로축의 오른쪽 라디안 값 계산 radians = (Math.PI/180)*degree e.. 2023. 8. 3.
동기 /비동기 (1) 동기 (Sync) 예 ) 폼 제출 폼 제출 시 웹 페이지를 새로고침하고 서버로부터 새로운 웹페이지를 받아서 화면에 표시하게 됨 서버에 한꺼번에 자료를 요청하고 수신이 완료될 때까지 기다림 (2) 비동기(Async) 웹페이지를 새로고침하지 않고도 데이터를 불러오는 방식 예 ) 댓글 입력시 웹 페이지의 새로고침 없이 댓글 영역만 업데이트되어 적용됨 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 (1) 콜백 함수 함수 안에 또 다른 함수를 매개변수로 넘겨서 실행 순서를 제어 displayB(displayC()) //B함수에 C 함수를 인수로 사용 (2)프로미스 프로미스 타입 객체 : 자바 스크립트 비동기 처리에 사용되는 객체 new Promise(reso.. 2023. 8. 3.
fetch https://velog.io/@ldaehi0205/ajax-fetch-xhr-비동기통신-이해하기#fetch ajax, fetch, xhr 비동기통신 이해하기 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응 velog.io 참고 출처 (1)fetch 원격 api를 간편하게 호출할 수 있도록 브라우저에서 제공하는 함수 비동기 통신 가능 프로미스를 반환함 fetch ( url, options) (위치,옵션 ) 첫번쨰 인자 : url 두번째 인자 : 옵션 객체 : → http 방식(method ) , http 요청 헤더(headers), http 요청 전문(body).. 2023. 8. 3.

티스토리툴바