본문 바로가기

Node.js/APIs12

뉴스레터앱2] 부트스트랩으로 sign up 화면 만들기 | HTML, CSS Bootstrap에서 sign-in 폼을 가져와서 html, css 파일을 만들기를 해보자. https://getbootstrap.com/docs/5.0/examples/ 1 ] 1. Bootstrap --> examples에서 Sign-in 폼을 선택한다. 2 ] 2. 빈 공간에 오른쪽 버튼 클릭하고 view page source를 누른다. 페이지 소스를 복사해서 가져온다. 3 ] 3. 코드에디터에 옮긴 html 내용을 웹브라우저에서 열어본다. index.html 파일 오른쪽 버튼 누르면 Open in Default Browser를 볼 수있다. 하지만 부트스트랩에서 보이던 모습과는 차이가 많이 난다. 아무런 부트스트랩 효과가 안들어가 있다. 부트스트랩 CDN 연결이 되어 있지 않기 때문이다. 4 ] 4.. 2021. 10. 12.
뉴스레터앱1] 기본 세팅하기 1. 새 폴더 만들기 mkdir newletterSignup 2. 파일 만들기 touch app.js signup.html success.html failure.html 3. npm init 4. npm i express body-parser request 5. VS코드 열기 6. express body-parser request require해서 실행 시키기 7. 서버용으로 port 3000번 열기 const express = require("express"); const bodyParser = require("body-parser"); const request = require("request"); const app = express(); app.get("/", function(req, res) { .. 2021. 10. 10.
날씨 API 불러와서 사이트 만들기 간단 총정리 1. weatherApp 폴더 만들기 2. 그 안에 app.js 와 index.html 파일 만들기 3. npm 실행 시키기 4. express 다운 받기 5. express 실행 시키고, 서버 실행 시키는 코드 작성 6. html 내용 집어넣기 7. postman 이용해서 api url 주소 만들기 8. 그 주소를 브라우저 주소창에 넣고 Json viewer pro 로 보기 9. app.get() get request 만들기 10. nodemon 으로 서버 리프레쉬하기 10-1 api url 주소 보기 편하게 만들기 const cityName = "London" const units = "metric" const apiKey = "3db5c76812836cde318eb5d225" apiUrl = "ht.. 2021. 10. 9.
지역에 따라 날씨 검색되게 하기 | html 만들기 지역에 따라 날씨가 검색되게 해보자. 이 전 한 내용을 간단히 살펴보면 1. OpenWeather api 사이트에서 현재 날씨를 볼 수있는 데이터 API doc을 눌러 들어갔다. 2 . 간단하게 도시 이름을 개발자인 내가 직접 London으로 입력하고서 그 곳 날씨가 뜨게 해보았다. q에 city name 를 넣고 appid에 회원가입시 받은 키 번호를 넣었다. 3 . 아래와 같이 긴 API url을 좀 더 보기 편하게 나눠보았다. 4 . html 파일에서 내용을 입력한다. html 템플릿을 만들고 title에 Weather App body에 label과 input을 입력한다. 5 . app.get( ) 메소드 안에 있는 모든 내용을 밖으로 빼고 일단 comment로 바꿔 놓는다. 6. 그리고서 app... 2021. 10. 8.
날씨 API에서 날씨에 따라 다른 아이콘 보이게 하기 날씨에 따라 다른 아이콘이 뜨게 하는 법에 대해 살펴보자. 1 . OpenWeather 메인 페이지에 가서 현재 날씨 데이터를 가져오고 있으니 current weather data의 API doc에 들어간다. 2. 그 안에 들어가면 List of condition codes가 있다. 3 . List of condition codes를 눌러보면 weather condition codes를 볼 수 있다. 또는 아래 주소로 가면 된다. https://openweathermap.org/weather-conditions 4 . Weather icons를 보면 "id" : 500은 whether condition code 이다 "icon": "10n" 각각 코드에 따라서 보여지는 아이콘이 다르다. 5 . 아이콘 U.. 2021. 10. 8.
가져온 API 데이터를 유저 브라우저에서 보게하려면? | render하는 법 | express 사용 이 앞에서 API에서 받은 데이터를 내 서버로 가져는 것까지 했다. 이제는 이 데이터를 어떻게 클라이언트 브라우저로 전송하는 지 배워보자. res.send( ) 이 전까지 배운 내용은 다음과 같다. console.log()로 보는 것을 지우고 가져온 api 데이타를 클라이언트 브라우저로 보내기 위해 get route안에서 파라미터 res를 써서 res.send()를 사용한다. 콘솔 로그에 담았던 내용을 클라이언트 브라우저로 보내기하고 아래에 있는 res.send("Server is up and running.")라인은 겹치게 되니 삭제한다. res.send()는 딱 한 번만 보낼 수 있고, 혹시 2개가 있다면 아래에 있는 코드가 읽히게 된다. 클라이언트 브라우저에 날짜 정보를 보내보자. 문구를 태그로 감.. 2021. 10. 8.
JSON.parse( ) | JSON을 parse 하는 법 날씨 api를 가져오는 과정을 하고 있다. https get request 문서에서 보면 https://nodejs.org/api/https.html#https_https_get_url_options_callback on 메소드를 이용해 가져온 data를 볼 수 있다. data가 어떤 내용인지 보자 콜백 함수로 터미널에 data가 나오게 해보았다. 터미널에 16진법인 hexadecimal code로 나온다. 뭐라고 하는지 인간이 알아 볼 수가 없다. 이 숫자를 복사해서 텍스트로 변환하면 JSON이 나오는 것을 알 수 있다. JSON.parse( ) 개발자가 보기 편하게 자바스크립트 오브젝트로 나오게 할려면 어떻게 해야할까? 이 때 필요한 것이 JSON.parse( )이다. 이케아 가구처럼 배달시 flat.. 2021. 10. 6.
HTTPs 모듈로 GET request 만들기 Node.js이용 API 구조 클라이언트 브라우저가 내 서버에 데이터를 달라고 하면 내 서버는 api를 제공하는 다른 서버로 가서 get request를 해서 원하는 데이터를 내 서버로 받는다. 내 서버로 받아온 데이터를 클라이언트 브라우저로 보내준다. 프로젝트 만들기 터미널에서 1 새 디렉토리 만들기 mkdir weatherProject 2 새 디렉토리 안에 새 파일 만들기 touch index.html touch app.js 3 npm 실행 시키기 npm init 4 express 설치하기 npm i express 5 코드에디터에서 파일 열기 6 app.js 에서 기초 세팅하는 코드 작성하기 const express = require("express"); const app = express(); app.get("/",.. 2021. 10. 6.
JSON 이란? JSON 은 Javascript Object Notation 의 줄임말이다. API 데이터를 보내는 여러 포맷 중 하나이다. 현재 가장 인기가 많다. JSON을 가장 많이 쓰는 이유는 API 데이터들을 인터넷을 통해 보내야할 때 JSON은 데이터를 자바스트립트 오브젝트 형태로 만들고서 인터넷에서 이동시 잘 접어 공간을 차지하지 않고, 펼쳤을 때는 정리되어서 사람 눈으로 보기 편하기 때문이다. 예를 들어 대충 이런 자바스크립트 코드를 보낼 때 var weather = { id: 501, main: "Rain", description: "moderate rain", icon: "10n" } JSON 포맷으로 한 줄의 string으로 줄여서 보내진다. "weather = {id: 501, main: "Rain.. 2021. 10. 5.
Authentication | Postman | 날씨 api 데이터 받기 Authentication이란? API에서 request를 할 때마다 개발자 확인하고 나서 얼마만큼 자기들 서버에서 데이터 가져가는지 확인후 요금 부과한다. 여기서 개발자 확인하는 과정을 authentication이라 한다. openwhethermap.org에 들어가서 회원가입을 하면 키 번호를 준다. 이 키 번호를 입력하는 것이 authentication하는 방법이다. 이 번호를 복사 한 후 원하는 api로 간다. 이제 API 데이터를 가져올 수 있다. 현재 날씨 데이터 받아보기 예를 들어 날씨 api 정보 받아보기 current weather data에서 api doc을 누르고 들어간다. 지역 선택하는 여러 방법이 있지만 도시 이름으로 선택해보겠다. API call 중에서 첫 번째 것을 복사해서 주소.. 2021. 10. 5.
endpoint, path, parameter | API 작동 원리 | API는 어떻게 작동하는가? 내 서버가 다른 곳에 있는 서버에 데이터 요청을 하고 내 서버는 요청한 데이터를 받는다. Endpoint 서버와 같이 외부 시스템과 인터렉하는 모든 API들은 Endpoint를 가지고 있다. endpoint가 한 개인 경우 kanye.rest 사이트에 들어가면 카니예 웨스트가 한 말들을 모아놓았다. 이 웹사이트는 카니예 웨스트 말을 모은 데이터 베이스를 호스트하는 곳이다. API를 사용해서 우리는 이 웹사이트의 데이터에 접근할 수 있다. API의 endpoint는 빨간 박스에 있는 url 이다. 이 경우는 서버에서 말 한마디만을 보내주는 아주 간단한 API이다. url을 내 brawser bar 에 복사 붙여넣기 하면 내 브라우저는 get 요청을 kanye.rest 서버에 보.. 2021. 10. 3.
API란? (Application Programming Interfaces) API 란? API는 An Application Programming Interface 의 약자이다. API는 프로그래머가 소프트웨어를 만들거나 외부 시스템과 상호작용 할 때 사용하는 명령어, 함수, 프로토콜, 오브젝트 뭉치들이다. API is a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system. 예를 들면, Weather API를 가져와서 날씨가 화면 한 쪽 구석에 뜨게 만들고 Police에서 제공하는 API에서 범죄 관련 데이터를 가지고서 범죄 위치 지도 웹사이트를 만든다던지 Facebook API는 사용자에 대한 정.. 2021. 10. 3.

티스토리툴바