API (12) 썸네일형 리스트형 Postman으로 Rest API 문서화하기 API 를 왜 문서화할까? 고객이 API 를 사용할 때 API를 이해하고, 사용할 수 있도록 API 를 문서화작업을 해주어야한다. postman을 사용해서 API 를 문서화하기 ( 기본 ) 1. Postman에서 Collections 로 들어간다. 2. New를 클릭해서, API 이름을 작성해준다. 3. 만든 API 의 오른쪽 마우스를 클릭해, New Request 를 만들어준다. 어떤 호출인지 작성하는 용도인듯 4. 어떤 호출인지 이름을 작성해주고, API 주소를 입력해서 Save 해준다. 5. 사용하는 사람이 예제를 볼 수 있도록 Save as example 을 클릭해준다. path value가 들어가야할 경우 1. API에 :id를 추가하면, 아래에 Path Variables 에 id 가 추가된다... 랜덤명언 REST API 만들어보기 개발 환경 셋팅 package.json 만들기 yarn init npm init node.js 는 아직 자바스크립트의 es6 문법이 적용되지 않는다. es6 문법을 이용하려면 , index.js 처럼 모듈로 만들어놓으면 된다. express 설치 - Node.js 를 위한 빠르고 개방적인 간결한 웹 프레임워크 - node.js를 사용하여 서버를 개발하고자 하는 개발자들을 위하여 서버를 쉽게 구성할 수 있게 만든 프레임워크 정리 : express 란 NodeJs를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체 yarn add express npm i express 서버 기본 셋팅 express require const express = require("express") // = .. [노마드 코더] React로 영화 앱 만들기3 이제, id를 사용해서 어떤 영화의 상세페이지로 들어가게 해주는지 설정해줄거임 url 에는 변수를 사용해줄 수 있는데, :id 이런 식으로 앞에 : 를 붙히면 된답니당. App.js 이렇게 되면, Movie 컴포넌트에 id가 필요하게 된다는 것을 알 수 있듬. 하지만 우리 Movie 컴포넌트를 확인해보면 Movie.jsx function Movie({coverImg, title, summary, genres}){ id 를 props 로 받고 있지 않다는 걸 알 수 있습다. Home.jsx 로 가서 Home.jsx { const json = await (await (await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)).json()).. [노마드코더] React로 영화 앱 만들기1 앱 안에서 페이지를 전환하는 방법 먼저 영화 정보를 불러와서 보여줘야함. 1. 영화 정보를 받을 수 있는 api 를 가지고 온댜. https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx 나는 이 사이트를 쓸것이당. 2. 정보를 불러오는 도중에 보여줄 로딩 창을 구현한다. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { const [loading.. [뉴스 타임즈] API 에러 발생시 UI 보여주기 유저가 입력한 검색 키워드에 대한 데이터가 없을 때, 화면에선 어떻게 보일까요? 아무것도 실행이 되지 않습니다. 물론 콘솔창을 보면 오류가 나오겠지만 user 들은 콘솔 창을 보지 않아요... ㅠㅠ 그래서 저희는 이 오류 상태를 user 에게 ui 로 보여줘야한답니당. 그럼 어떻게 보여줄까요? 먼저 저희가 만들어놓은 공통 api 불러오는 함수 있죠? getNews() 라는 함수입니다. 거기에서 에러핸들링을 사용할 것입니당. (에러 핸들링 모르시는 분들은 응용+예제에 적어놨으니까 봐주셔요!) // api 호출 함수 const getNews = async() => { // 에러 코드 try{ }catch(error){ console.log('잡힌 에러는' , error.message) } let respon.. [뉴스 타임즈] 반복된 코드 정리 코드는 거의 다 짰는데.. 너무 중복된 코드가 많죠? 그래서 중복된 코드를 간결하게 만들어주는 작업을 할것입니다용 1. 각 함수에서 필요한 url 을 만든다. 2. api 호출 함수를 만든다. 이 2가지가 지금 여러 함수에서 겹치고 있는 코드라서 이 코드를 간결하게 묶어줄거에요! // 뉴스 Api 갖고 오기 let news = []; // articles 를 담아줄 변수 const h2 = document.querySelectorAll('#news_cont h2') const newsContents = document.getElementById('news_contents') // 각 함수에서 필요한 url , api 호출 함수 const getNews = async() => { let response =.. [뉴스 타임즈] 키워드 검색 이제 키워드를 검색하면 키워드에 대한 내용이 나올 수 있도록 해줄겁니당! 먼저 검색할 수 있는 html 이 필요하겠죠? 저는 미리 만들어놨습니당. 자 요렇게 만들어놨구용 이제 이 html 을 자바스크립트 에서 불러옵시당. //숨겨진 메뉴 카테고리 클릭 const menu2 = document.querySelectorAll('#h_menu li'); menu2.forEach((menu2Item) => { menu2Item.addEventListener('click', (event) => getNewsByTopic(event)); }) // 웹 메뉴 카테고리 클릭 menu.forEach((menuItem) => { menuItem.addEventListener('click', (event)=> getNews.. [뉴스 타임즈] 카테고리 별 데이터 보여주기 이제는 위에 카테고리 메뉴를 이용해봐야겠죠?? 괜히 힘들게 만들은게 아니랍니다 .. ㅠㅠ api 별로 무슨 카테고리를 제공하는지 먼저 체크하셔야해요! 먼저 메뉴 탭들을 모두 갖고와야겠죠? button 으로 만드셔도됩니당. 저는 ul 태그의 li를 사용해주었어요 저희 코드 맨 위에 버튼을 가져오는 코드를 입력하겠습니당. let news = []; // articles 를 담아줄 변수 const categoryMenu = document.querySelectorAll('#h_menu li'); console.log(categoryMenu) 변수 news 아래에 만들어주겠습니다요. 그리고 콘솔로그로 잘 가져왔는지 꼭 체크!!!!! 이제 이 카테고리메뉴들에게 클릭 이벤트를 줘야겠죠? 클릭을 해야 카테고리 별로 .. 이전 1 2 다음
