CodeIt_Sprint87 (1)React로 데이터 다루기_1_React를 위한 단축키 기능들 ● 이론0_Vscode의 React 단축키 기능 ○ 기능1_ 단어의 일부만 입력하면, 나머지 완성 기능 //ToolTip 기능예 : useState() 입력시, 자동 import문까지 생성이렇게 입력 도중, "useState" 탭창이 나오고, Enter나 Tab 누를 시,import문과 함수까지 자동 입력이 된다. ○ 기능2_ 컴포넌트 내에서 함수 작성 후, 태그 내 onClick 속성에 대입 시,=> 속성의 일부 알파벳만 적어서 완성 시키는 기능해당의 속성 "onClick"을 선택한 후, Enter를 누르면, onClick 속성이 자동 완성 된다.=> 위에 선언된, 함수이름도 일부 알파벳만 입력하면, ToolTip이 추천 메소드로 나온다.해당의 "handleButtonClick"을 선택한 후, Ent.. 2024. 12. 26. (8)자바스크립트_리퀘스트_axios문법 + try,catch,finally ● 이론0_리퀘스트 오류 종류 복습 :○ 종류1 _ 요청하는 url이 이상한 경우 || 헤더 정보가 이상한 경우 //status code : 400, 500 ○ 종류2 _ API는 접근했는데, 특정 데이터가 없음○ fetch()메소드에서 Promise 객체 상태 : 오류 종류1 => Rejected Promises오류 종류2 => Fulfilled Promises● 이론1_ axios문법에서 반환 Promise 객체 상태는 오류1, 오류2 의 반환이 모두 Rejected된다. //status가 200일때만 fulfilled 된다. ＠ fetch+try,catch 예시 코드 ://API 전부 fetch 하는 메소드async function fetch_getColorSurveys(id){ const url .. 2024. 12. 9. (7)자바스크립트_리퀘스트_fetch()메소드 대신 더 간편한 문법 => axios 문법 //시발 처음부터 이렇게 알려주던가 ● 이론0_리퀘스트 fetch 문법 복습//api.js//1_ limit, offset 설정 후, API 데이터 fetch하기export async function getColorSurveysLO(params = {}){ const url = new URL('https://learn.codeit.kr/api/color-surveys'); //url에 limit , offset 설정 코드 Object.keys(params).forEach((key)=>{ url.searchParams.append(key,params[key]); }); //설정된 url를 기반으로 API에 fetch const res = await fetch(url); const data.. 2024. 12. 8. (6)자바스크립트_리퀘스트_웹브라우저에서 리퀘스트 기록 확인 => F12 + Network 탭의 기능 ● Default 상황 :○ index.html 네트워크 요청 데모 리퀘스트 보내기 ○ demo.jsimport { getColorSurvey, createColorSurvey } from './api.js';const btn = document.querySelector('button');const statusPostDiv = document.querySelector('div.status_POST');const dataPostDiv = document.querySelector('div.data_POST');const statusGetDiv = document.querySelector('div.status_GET');const dataGetDiv = document.querySelect.. 2024. 12. 8. 이전 1 2 3 4 5 6 7 ··· 22 다음
