728x90 반응형 Coding With Jina154 [자바스크립트] fetch( ) 함수로 API 호출하기 ◾ fetch( ) 함수 fetch('api 주소') .then(res => res.json()) .then(res => { // data를 응답 받은 후의 로직 }); fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); - 첫번째 인자로 URL - 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환 - 반환된 객체는 API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고 - 실패했을 경우에는 예외(error) 객체를 reject함 ◾ 예시 fetch("https://jsonplaceholder.. 2022. 11. 16. [API] 영화진흥위원회 오픈API 사용하는 방법 1. 영화진흥위원회 사이트에 들어가서 회원가입하기 영화진흥위원회 회원가입 2. 키 발급/관리로 들어가서 키 발급받기 클릭 - 사용 목적과 관리명만 적으면 됨 - 사용 목적은 공부용 정도로 적고 관리명은 원하는대로 적어주면 됨 3. 키 발급/관리에서 발급키를 확인 4. OPEN API에서 제공서비스 클릭 후 원하는 서비스를 클릭 5. 스크롤 하단 응답 예시 링크를 클릭하면 object 형태로 데이터가 나오는 것을 확인 6. 인터페이스 참고해서 변형시켜서 원하는 곳에 가져다 사용하면 됨 2022. 11. 16. [자바스크립트] Ajax 정리 ◾ AJAX - Ajax는 Asynchronous Javascript and Xml의 약자 - 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능 - 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식 - 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 - 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미 ◾ AJAX로 GET/POST요청하는 방법 1. XMLHttpRequest라는 옛날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 .. 2022. 11. 16. [GitHub] 리액트 프로젝트 GitHub Desktop으로 배포하는 방법 - 리액트 깃허브에 올리는 가장 쉽고 간단한 방법 리액트는 자바스크립트 프로젝트 배포방법과 다르다! 조금 더 복잡한 것 같다. 최대한 쉽고 쉽게 설명을 해놓으려고 시간을 투자했으니 부디 미래의 내가 헷갈릴때마다 도움이 되길... 먼저 깃허브 데스크탑이 컴퓨터에 설치되어있어야합니다. [GitHub Deaktop 설치방법 바로가기] 1. 깃허브 데스크탑에서 repository를 새로 생성하기 (repository명은 소문자와 - 로만 해야함) [repository 생성하는 방법 바로가기] 2. 하위 경로에 배포하고 싶으시면 프로젝트에 설정이 따로 필요함! 2-① 깃허브 홈페이지에 들어가서 깃허브 데스크탑에서 만든 레파지토리 잘 만들어졌나 확인하고 경로 복사 [경로 어딨는지 모르면 클릭] 2-② 배포하고자 하는 프로젝트 파일 중 package.json 이라는.. 2022. 11. 15. [React] 리액트에서 아이콘 사용하기 / 리액트에서 Font Awesome 사용하기 자바스크립트에서처럼 설치없이 링크만으로 import 해서 사용하는 방법은 없는 것 같다.. 1. 일단 터미널에서 아래 코드입력해서 설치하고 npm install react-icons --save https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install r.. 2022. 11. 14. [자바스크립트] Array filter( ) 함수 filter( ) 사용 방법 callback함수를 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 Boolean 값인 true 또는 false 값을 반환하는 함수를 등록하는 것 const numbers = [1]; numbers.filter((number, index, source) => { // number: 요소값 // index: source에서 요소의 index // source: 순회하는 대상 console.log(number); // 1 console.log(index); // 0 console.log(source); // [1] return number > 3; }); 예제 const words = ['spray', 'limit', 'elite', 'exuber.. 2022. 11. 12. 이전 1 ··· 4 5 6 7 8 9 10 ··· 26 다음 728x90 반응형
