본문 바로가기

분류 전체보기364

API 강의를 마치며 찝찝한 마무리 강의 들으며 만든 웹사이트를 헤로쿠 서버에 올리는 것까지 했는데 내가 해결할 수 없는 에러 발생으로 결과물을 볼 수 없었다. 개운하지 않은 마무리 백엔드를 더 배우고 나서 다시 돌아와야겠다. 자료의 바다에 빠져 허우적대는 절 구해주세요~ API 강의를 듣고 있었습니다. 이 번 강의는 이 전과는 다른 새로운 벽에 마주한 기분입니다. 날씨 API를 연결해서 도시 이름을 입력하면 그 곳의 온도와 날씨가 나오게 하는 것을 해보았습니다. 여기까지 재밌었습니다. 그 다음 API는 Mailchimp이었습니다. 고객이 회원가입을 하면 고객 이름, 이메일이 내 메일침에 바로 저장이 되고 내 메일을 고객 1000명에게 모두에게 한 번에 보낼 수 있다고 해서 '신기한 게 다있네 편한 세상' 이라 생각하며 강의.. 2021. 10. 18.
뉴스레터앱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.
2020.10.03] Node.js Express.js 끝 10월 3일 섹션 17 Backend Web Development 섹션 18 Node.js 섹션 19 Express.js 강의들이 끝났다. 백엔드 기초 중에 기초겠지만 새로운 용어들이 머릿속이 어지럽다. 여기서 배운 것들은 시작할 때 기본 세팅에 지나지 않겠지만 APIs를 공부하는 지금도 헷갈리다. 또 머릿속이 복잡한 이유는 얼마전에 오징어 게임을 봐서 머릿속에 오징어 게임으로 도배가 되어있기 때문이다. 장면 장면들이 다시 곱씹게 만들어서 강의에 집중이 안되기도 했다. 10월 9일 땡스기빙 연휴의 시작이다. 마트에 사람이 너무 많을 것같아 장은 다음에 보기로 했다. 오늘 다시 불안함이 엄습했다. 이 번 불안의 시작은 구글링해서 취업하는 법 글을 읽다가 시작했다. 직장을 어떻게 구했는지를 설명하는데 유데미.. 2021. 10. 10.
뉴스레터앱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.
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.
HTTP response status codes 100번 대 - hold on, something's going to happen 200번 대 - here you go, successful request code 200 OK 300번 대 - go away, there's some security involved 400번 대 - you screwed up 404: Not found 500번 대 - I screwed up HTTP 상태 코드 자세히 보기 https://developer.mozilla.org/en-US/docs/Web/HTTP/Status 틀린 주소 넣는 경우 404 status code 가 뜬다. 개발자 본인 인증 키 번호(authentication)가 틀린 경우 unauthorized가 뜬다. 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.

티스토리툴바