본문 바로가기

Node.js45

지역에 따라 날씨 검색되게 하기 | 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.
BMI 계산기 서버 만들기 앞에서 만든 계산기 서버 폴더 안에 BMI 서버를 만들어 보자. 1 새 파일을 만든다. bmiCalculator.html 2 html 내용을 입력한다. 버튼 타입을 button으로 해놔서 숫자 입력해도 아무 일도 일어나지 않았었다. 버튼 타입을 submit으로 해야 입력 내용이 서버로 간다. 3 서버를 만든다. 새 자바스크립트 파일을 만드는 것이 아니라 이미 만들어 놓은 calculator.js 파일에 내용을 추가하면 된다. express, nodemon, body-parser는 이미 실행 중이므로 다시 실행할 필요가 없다. 입력값을 Number()로 감싸지 않고, parsefloat()로 감쌌다. 왜 그랬을까..? HTML DOCTYPE html> BMI Calculator BMI Calculator .. 2021. 10. 3.
백엔드에서 일어나는 일 백엔드에서 일어나는 일 웹페이지에서 오른쪽 클릭하면 view page source가 나오는데 클릭하면 html 내용이 뜬다. 그 내용을 보면 계산이 되거나 하는 코드가 없이 단순한 코드만 있다. 계산이 되거나 하는 것은 사용자가 볼 수 없는 백엔드에서 일어나고 사용자는 그 결과만 볼 수 있게 된다. 2021. 10. 3.
Body Parser 사용하기 Body Parser 계산기 서버 만들 때 숫자를 서버에 입력받고 나면 서버가 계산 한 후 그 결과를 브라우저에 보낼 수는 없을까? 이 때 npm package 에서 Body Parser가 필요하다. https://www.npmjs.com/package/body-parser 다운받기 npm install body-parser을 써서 다운을 받자. 다운로드 후 package.json에서 body-parser가 들어가있는 것을 볼 수 있다. bodyParser 모드 bodyParser는 몇 가지 모드가 있다. bodyParser.text() : parse all the requests into text parse 팔-ㅆ : 분석하다 bodyParser.json() : special format that we.. 2021. 10. 3.
자바스크립트 파일 경로 알아보기 자바스크립트 코드 에디터에 console.log(__dirname); 을 입력하고 터미널에서 서버를 실행시키면 nodemon calculator.js (파일명) 혹시 nodemon을 다운 받지 않았다면 터미널에서 npm install nodemon 터미널에 경로가 나온다 2021. 10. 3.
POST 요청 방금 만든 계산기 웹사이트에서 숫자를 입력하고 calculator 버튼을 누르면 어떻게 될까? 크롬 디벨로퍼툴을 열어서 network로 들어가면 index.html 의 status가 404(Not Found)가 나온다. (내 크롬 디벨로퍼툴은 강의 때랑 지금이랑 크롬이 달라졌는지 status를 찾을 수 없었다..) html의 form태그를 보면 method가 post라서 아래에 입력된 내용을 어딘가로 보낼려고 만들었다는 의미이다. 그 어딘가는 action에 적힌 곳으로 가게된다. 위의 코드는 서버가 아닌 index.html로 가게 해놓았다. 또는 메인 페이지라서 이렇게 쓸 수 있다. 여기서 action을 지워도 괜찮다. 현재 페이지로 가도록 기본 설정되어있다. 하지만 404 에러가 나는 이유는 서버에서 .. 2021. 9. 28.
Get 요청 | sendFile() | __dirname GET request 하기 get요청하고 파일로 받을려면 sendFile() 메소드를 이용한다 여기서 파일 주소를 "index.html"로 했을 때 내 컴퓨터 안에 서버가 있는 경우는 괜찮치만 서버가 클라우드나 다른 컴퓨터에 있다면 이 경로는 찾을 수가 없다. __dirname을 붙여주면 /Users/mira/Desktop/코딩/calculator 이 폴더까지 전체 경로를 나타내 준다. 거기에 파일을 더해주면 res.sendFile(__dirname + "/index.html"); 서버가 어디에 있든 해당 파일을 받을 수 있다. 파일 위치를 변경해도 알아서 찾아간다. 2021. 9. 28.
계산기 서버 만들기 | body-parser | path.js | 웹사이트 서버 기본 세팅 회색 하이라이트는 터미널에서 실행 파랑 하이라이트는 코드에디터에서 실행 1 원하는 곳에 새 폴더 만든다 mkdir calculator 2 새로 만든 폴더 안에 들어간다 cd calculator 3 새 파일 만든다 touch calculator.js 4 npm을 실행시킨다 npm init 5 코드에디터에서 만든 폴더를 연다 6 express를 다운 받는다 npm install express 7 calculator.js에서 express 요청하는 코드 작성 const express = require('express'); 8 express 셋업 const app = express(); 9 포트 연결 app.listen(3000, function() { console.log("Serve.. 2021. 9. 25.
서버 기본 세팅 work flow 요약 파일 만들고 그 파일 안에 npm init 실행 npm install express npm install nodemon npm install body-parser 다운 받아 놓고 자바스크립트에서 코드 작성 웹사이트 서버 기본 세팅 회색 하이라이트는 터미널에서 실행 파랑 하이라이트는 코드에디터에서 실행 1 원하는 곳에 새 폴더 만든다 mkdir calculator 2 새로 만든 폴더 안에 들어간다 cd calculator 3 새 파일 만든다 touch calculator.js 4 npm을 실행시킨다 npm init 5 코드에디터에서 만든 폴더를 연다 6 express를 다운 받는다 npm install express 7 calculator.js에서 express 요청하는 코드 작성 const expr.. 2021. 9. 24.
Nodemon 설치하기 | rs 앞 포스트에서 보았듯이 코드에디터에 변경이 있을 때마다 터미널에서 계속 서버를 나왔다가 다시 들어갔다가를 반복해야하는데 너무 귀찮다. 소스 코드에 변경이 있을 때마다 이 작업을 자동으로 해주는 프로그램이 있는데 nodemon이다. nodemon 설치하기 https://nodemon.io/ 디렉토리 어디에 설치하든 상관없다. 모든 디렉토리에 적용이 된다. npm install -g nodemon 다운 받고 나서 터미널에 nodemon 과 파일 이름을 작업 중인 파일 안에 적어준다 nodemon server.js nodemon 실행 해보기 하나의 get 요청을 더 추가하니 콘솔에서 자동으로 변경이 된다. 로컬 호스트에 나온 내용 콘솔에서 rs 누르면 restart 할 수 있다. 2021. 9. 24.
request, response | GET 요청하기 우리가 구글에 접속하는 경우 우리 컴퓨터 브라우저가 구글 서버에 데이타 달라고 request를 한다. 구글 서버는 이 브라우저에 HTML, CSS, JS을 보내며 response를 해준다. 요청의 4가지 종류 요청에는 4가지가 있다. HTTP 요청이라고도 부른다. 1. 읽기: GET요청 (페이지 읽게 해달라고 요청) 2. 쓰기: POST 요청 (포스트, 블로그, 댓글 등 쓰게 해달라고 요청) 3. 수정: PUT 요청 (이미 있는 내용 수정해 달라고 요청) 4. 삭제: DELETE GET 요청보내기 기본 문법 app.get("/", function(req, res) { res.send("Hello world")}); 1. get 요청해서 콘솔에 request 내용보기 1) app.get 매소드 작성 app.. 2021. 9. 24.
Express.js 프레임워크 시작하기 express 란? express는 node의 많은 프레임워크 중 하나이다. java script에서 jQuery가 있듯이 node.js에는 express가 있다. 누군가가 써놓은 코드 뭉치들인데 Express는 특히 웹 만들 때 코드들을 organize하고 structure하는데 도움을 준다. Node가 수동 스크루 드라이버라면 express는 전동 드라이버로 Node보다 간단한 코드로 웹 서버를 만들 수 있다. express 라이브러리 설치하기 익스프레스를 다운 받으려면 npm을 먼저 다운 받고 그 npm에서 express를 다운 받는다. 터미널에 npm install express 눌러서 다운받는다. node-modules 라이브러리에 필요한 자료를 담는 공간 관련된 라이브러리 담겨있음 새 Web .. 2021. 9. 22.
npm 사용하기 npm 이란? https://www.npmjs.com/ node 개발팀이 만든 코드 라이브러리 말고, 다른 사람들이 만든 라이브러리를 사용하려면 라이브러리 설치를 도와주는 도구인 npm을 다운 받고서 쓸 수 있다. 즉 npm은 external module을 쓰기 위함이다. NPM: Node Package Manager nodejs 다운 받을 때 같이 다운 받아진다 npm -v 눌러서 다운 받아졌나 확인하기 npm 다운 안되면 yarn으로 해도 된다. package.json 만들기 라이브러리 어떤 걸 썼는지 기록해 놓아야하는데 package.json 이 그 역할을 한다. npm 다운 받을 때 자동으로 같이 온다. 터미널에서 npm init을 치고 나서 프로그램이 읽어지면 만들 package 이름을 넣는다... 2021. 9. 22.

티스토리툴바