Frontend

로컬 개발환경이란? 우리는 컴퓨터가 한 대 이다. 그래서 같은 컴퓨터에다 서버도 만들고, 요청도 해야한다. 즉, 클라이언트 = 서버가 되는 것이다. 이것을 바로 "로컬 개발환경"이라고 한다. 그림으로 보면, 대략 이러하다. Flask 시작하기 - 서버만들기 Flask 프레임워크란 서버를 구동시켜주는 편한 코드 모음이다. 이 Flask란 프레임워크를 이용한다면 서버를 구동하기위해 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다. 서버를 직접 만드는 개발자는 드물정도로 힘든 일이기에 서버를 구동하려면 보통 이러한 프레임워크를 이용한다. Flask 기초: URL 나눠보기 -> @app.route('/) 부분을 수정해서 URL을 나눌 수 있다. -> /mypage http://localhost:5000과 http..

프로젝트 세팅 크롤링을 하기위한 [requests, bs4]패키지 설치하기 웹스크래핑 결과 저장하기 import requests from bs4 import BeautifulSoup from pymongo import MongoClient import certifi ca = certifi.where() #test와 sparta는 개인이 mongoDB에 설정하는 영역이다. client = MongoClient('mongodb+srv://test:sparta@cluster0.euhwlug.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca) db = client.dbsparta # URL을 읽어서 HTML를 받아오고, headers = {'User-Agent'..

1. pymongo 설치 pymongo 라이브러리의 역할 예를 들어, MS Excel를 파이썬으로 조작하려면, 특별한 라이브러리가 필요하지 않을까? 마찬가지로, mongoDB 라는 프로그램을 파이썬으로 조작하려면, 특별한 라이브러리, pymongo가 필요하다. pumongo 기본 코드 from pymongo import MongoClient client = MongoClient('여기에 URL 입력') db = client.dbsparta 데이터 넣기 doc = { 'name':'bob', 'age':27 } db.users.insert_one(doc) 2. pymongo로 DB조작하기 1. mongoDB와 연결하기 #mongoDB와 연결하는 pymongo 명령어 from pymongo import Mo..

오늘은 프로젝트를 위해 어제 피그마로 작성한 와이어프레임을 직접 코드로 구현하는 작업을 했다. 나는 기초가 탄탄해야 생각을 코드로 옮기는 실력도 일취월장할것이라는 생각하에 지금껏 Down-Top방식의 공부를 해왔었다. 즉, 마크업언어와 프로그램언어는 대부분 이론공부, 문법공부를 위주로 해왔었는데.. 이렇게 간단해보이는 화면조차 코드로 직접 구현하려니 꽤나 신경쓸 것이 많다는 것을 느끼며 지금까지의 공부과정에 개선이 필요하다고 느꼈다. 오늘 공부를 통해 느낀점은 이러하다. 이론을 위한 이론공부는 개발자에게 적합하지 않다. 비효율적이다. 프로그래밍 실력을 향상시키려면 일단 구현할 것을 토대로 어떤 기능을 추가해하는지, 어떻게 작성해야하는지 찾고 바로 '그' 부분을 공부하는 Top-Down방식의 공부를 지향해..

1. 크롤링 기본 세팅 크롤링을 하기위한 조건 1. html 가져오기2. html내에서 찾고자 하는 정보를 추출한다. 이때 *BeutifulSoup패키지를 통해 가져온 html을 파싱용이하게 만들어준다. (BeutifulSoup패키지란 html주소에서 html내용을 검색하기 용이한 상태로 만들어주는 라이브러리이다.) import requests from bs4 import BeautifulSoup #headers는 코드가 아닌 클라이언트(브라우저)가 콜을 날리는 것처럼 해주는 역할 headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86..

1. 모든 구의 IDEX_MVL 값을 찍어주자! import requests #requests라는 라이브러리를 쓰기위한 선언(requests 라이브러리 설치한 상황에서) r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair') rjson = r.json() gus = rjson['RealtimeCityAir']['row'] for gu in gus: print(gu['MSRSTE_NM'], gu['IDEX_MVL']) 2. IDEX_MVL 값이 60 미만인 구만 찍어주자! import requests #requests라는 라이브러리를 쓰기위한 선언(requests 라이브러리 설치한 상황에서) r = requests.get('http://s..

미니프로젝트 시작 우리 팀을 소개할 수 있고, 우리만의 이야기를 담을 수 있는 ”팀 소개 웹페이지”를 제작해보는 것이 첫 프로젝트이다. 미니프로젝트 와이어프레임 구상 '피그마'라는 웹사이트를 통해 와이어프레임을 구현해보았다. 첫째: 전체의 팀원과 간략한 팀의 소개가 적힌 페이지 둘째: 개별 팀원의 TMI가 담긴 페이지 개발해야 하는 기능들 API설계 튜터님 피드백 팀원 각각의 정보들을 직접 html문서내에 퍼블리싱 해도 되고, DB에 넣어도 된다고 하셨다. 선택의 문제이다. 와이어프레임같은 기획단계에서도 최대한 완성과 가깝게 제작해둘 것! 그래야 개발단계에서의 고민이 줄어든다고 하셨다. 방명록 작성버튼을 이왕 만들거라면 와이어프레임에도 구현해놓을 것. 방명록의 구획을 나눌 것이라면 와이어프레임에서도 미리..

데이터타입 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수와 실수 구분 없이 숫자 하나의 타입만 존재한다. 문자열 타입 문자열 불리언 타입 논리적 참(true)과 거짓(false) undefined 타입 선언된 변수(let,const, var)에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된 7번째 데이터 타입 객체 타입 객체, 함수, 배열 숫자 타입 JavaScript언어는 ECMAScript 사양에 따르면 숫자 타입 2의 값은 배정밀..