728x90

Sparta/스파르타코딩 웹개발 종합반 20

Node.js - 02 - API & REST API

API - API는 애플리케이션끼리 연결해주는 매개체이자 약속 -키보드로 글자를 입력하면 키보드는 우리가 작성한 글자를 컴퓨터에 전달해주는 역할을 합니다. 우리가 키보드의 키를 누르는것이 API를 호출하는것으로 볼 수 있습니다. -어떤 연인은 서로 기분이 상할것 같으면 미리 “윙크”를 하기로 약속했습니다. 대화하다 갑자기 “윙크”를 본 상대방은 기분이 나쁜것을 알아채고 은근히 기분을 풀어주려 노력합니다. 이러한 약속 또한 API라고 볼 수 있습니다. 우리가 API를 작성한다는 의미는? -웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미 REST는 “Representational State Transfer”의 줄임 말 -최대한 간단하게 설명하자면 URL, Head..

Node.js - 02 - 미들웨어 (express.js) & Routing

미들웨어 - 미들웨어를 통해 웹 서버의 요청/응답에 대해 공통적으로 관리가 가능 - 미들웨어는 서버에 부착된 기능. express.js 의 미들웨어 - urlencoded: form-urlencoded 라는 규격의 body 데이터를 손쉽게 코드에서 사용할 수 있게 도와주는 미들웨어에요! - json: JSON 이라는 규격의 body 데이터를 손쉽게 코드에서 사용할 수 있게 도와주는 미들웨어에요! ex) json 미들웨어가 없으면 우리 서버에서는 json을 사용할수없다. 미들웨어 작성하기 (express) app.use((req, res, next) => { // 필요한 코드 }); // 예제 app.use((req, res, next)=>{ console.log('미들웨어가 구현됬나?') next(); ..

Node.js - 02 - Express.js 세팅

명령어 npm init -y // package.json 설치 npm i express // express 패키지 설치 npm i // 만약 node_module을 지웠을때 재설치 node 파일이름.js // 파일 실행 ctrl + c // 서버종료 package-lock.json: 내가 설치할 패키지들의 버젼을 lock 한다. // get 이라는 http method로 "/"경로로 요청이 들어오면 실행. app.get("/",(req, res) => { res.send('hello world'); }) // 서버를 port로 켜겠다, 두번째 함수는 서버를 키고 실행할 함수 app.listen(port,() => { console.log('Server On'); })

Node.js - 01 - 생년월일을 입력받아 만 나이 계산하는 함수

생년월일을 입력받아 만 나이 계산하는 함수 //생년월일을 입력받아 만 나이 계산하는 함수 function getAge(dateOfBirth) { // 코드 작성 let today = new Date(); let birth = new Date(dateOfBirth); console.log(today) console.log(birth) let year = today.getFullYear() - birth.getFullYear(); let birthdayPassed = today.getMonth() - birth.getMonth() >= 0 && today.getDate() - birth.getDate() >= 0; console.log(birthdayPassed) if (birthdayPassed) { re..

Node.js 01 - 자바스크립트 정리

Node.js - 자바스크립트가 실행될 수 있게 도와주는 런타임 플랫폼 자바스크립트 → 언어 간단하게 말하면? 자바스크립트는 내 생각을 코드로 표현할 수 있게 도와주는 도구 Node.js → 런타임 플랫폼 간단하게 말하면? Node.js는 자바스크립트 코드를 브라우저가 아닌 곳에서도 실행할 수 있게 해주는 마법 상자 npm - Node Package Manager으로, 자바스크립트를 위한 패키지 관리자이다. 자바스크립트 런타임 환경의 Node.js의 그 Node가 맞다. npm은 세계 최대의 소프트웨어 창고로, 엄청난 수의 코드 패키지를 가지고있다. 이는 오픈소스 개발자들이 그들이 개발한 소프트웨어를 공유한다. nvm - Node Version Manager으로, Node 의 여러 버전을 사용할 때 유용..

웹개발 종합반 프로젝트 - 06 뉴스크롤링(네이버뉴스)

스크래핑 코드 Python 전과 다르게, 이번에는 DB안의 모든 news data를 날리고, 새로 넣어주고있다. from selenium import webdriver from bs4 import BeautifulSoup import time from selenium.common.exceptions import NoSuchElementException from pymongo import MongoClient import requests # 몽고 db에 저장 client = MongoClient('13.124.196.127', 27017, username="test", password="test") db = client.dbsparta_project_01_mss headers = {'User-Agent' ..

웹개발 종합반 프로젝트 - 05 진행상황&로그인&뉴스크롤링

로그인페이지, 회원가입페이지, 메인페이지, 총 3가지 페이지가 준비되었다 로그인 페이지 코드 (클라이언트) M S S My Small Space Duplication Check At Least 6 Letters of English or Numbers or Special Letters( . _ ), Maximum 15 Letters At Least 8 Letters of English or Numbers or Special Letters( !@#$%^&* ), Maximum 20 Letters Sign In Want to be a Member of MSS? Sign Up Verify Password Submit Cancel 로그인페이지 코드(서버) from pymongo import MongoClient ..

종합반 4주차 - Bulma, 로그인, 회원가입 기능

필요 패키지: Flask (서버), pymongo (DB), pyJWT(토큰생성- 로그인 후 사이트에 일정시간동안 로그인이 지속되게하는거 같은 자유이용권 같은 토큰) 파이참 기준 - 세팅에 TEMPLATE LANGUAGE 검색해서 jinja2 선택 Bulma - Bulma는 순수한 CSS 프레임워크 https://bulma.io/documentation/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and availabl..

종합반 플러스 - 3주차 - 네이버API, 셀레니움

새로배운점 python 파일을 두개를 만들고, 하나는 서버용, 다른거 하나는 스크래핑용으로 할수있다. 셀레니움은 조금 더 동적인 스크래핑을 할때 사용된다. (예: 스크롤 내리기, 버튼 누르기 등) 셀레니움은 자신에 맞는 드라이버설치가 필요하다. (구글 크롬 드라이버) 셀레니움을 이용해 http://matstar.sbs.co.kr/location.html 이 링크의 웹페이지 하단의 '더보기'라는 버튼을 10번 클릭해서 최대한 많은 데이터를 웹페이지에 보이고, 그 데이터들을 긁어오려고한다. # 크롬 드라이버를 실행 (셀레니움) driver = webdriver.Chrome('./chromedriver') url = "http://matstar.sbs.co.kr/location.html" # 드라이버에 해당 ..

웹개발 종합반 프로젝트 - 04 날씨&즐겨찾기

날씨는 도시이름을 검색하고, 최대 4개의 도시까지만 등록되게 하려고 계획했었다. 처음에는 일출/일몰, 최대/최저기온 등 모든걸 나타내고 싶었지만, 카드의 크기에 맞게 필요한 정보만 나타내게 되었다. 새로배운 내용은 ajax의 error처리 이다. 여기서는 도시이름이 검색에 안나올경우, 즉 url로 카드를 못 가져올 경우, error 처리가 된다. function addCard() { // 카드의 총 갯수를 제한한다. curCardCount++; if (curCardCount === maxCardCount + 1) { alert('The maximum number of cards is 4. ') curCardCount = 4; return } // 검색의 값을 가져오고, 값을 url의 도시이름부분에 끼워준..

728x90