캐나다 개발자

프로젝트의 메인 부분에서 오른쪽에는 뉴스 API를 가져와서 총 4가지의 뉴스를 보여주려고 했다. 처음 세운 계획은 아래와 같다 - 틀 만들기 - 카드 만들고 카드에 뉴스 api 가져오기 - 뉴스 업데이트는 어떻게? - 뉴스는 시간마다 업데이트 주고싶은데 db가 필요할까? 먼저 틀을 만들었다. 처음에는 Bootstrap에서 가져오려 했으나, Card가 마음에 들지않고, 수정을 많이해야 했기때문에 그냥 처음부터 만들었다. 아래 코드는 Ajax로 API를 받아오는거까지 같이있다. ${source} ${published_at.substring(0, 10)} ${title} ${description} author: ${author} CSS는 아래와 같다. 새로 배운 CSS는 ellipsis를 사용해서 문자열이 일..

프로젝터의 헤더에는 날짜, 명언, 인사말이 들어간다. 처음에 세운 목표는 아래와 같다. - 틀만들기 - 날짜: js Date -> setinterval 함수로 매초마다 실행시켜서 시간 변화주기 - 로그인인사: 로그인 기능을 만든 후 다시 생각하기. - 짧은명언: api가져와서 db 넣고 랜덤뽑아주기 - 틀: 명언나오고 아래에 (author) - 파이썬 flask로 서버 post -> quote_give, author_give 만들다 보니, JQuery를 쓰기 때문에 SetInterval() 을 사용하지 않아도 되는걸 알았다. - 연/월/일 얻어오는 함수 // When Load the Window $(document).ready(function () { getDate(); }); // Date for He..

Python Flask 를 이용해서 서버를 만들고 데이터를 Mongo DB에 넣는다(Robo 3T) 1. HTML, CSS, JS 로 기본 틀을 구축 2. Python 파일에서 Flask로 서버를 구축 3. 서버(python) 과 클라이언트(html) 연결 코드를 만든다 - POST, GET - POST 할때는 DB에 POST했다가 GET 할때는 다시 DB에서 GET 해서 정보를 보여준다. ** 여기까지는 배운 내용. 4. 파일 업로드를 만들 예정 - 역시 틀부터 잡아야 함 - Static 폴더가 image를 관리하는 폴더 - 이미지 파일이므로 img 태그를 이용해서 태그르 하나 만든다 - src 는 static 폴더에 아무 이미지나 넣어두고 주소를 준다. - 부트스트랩에서 파일업로드 관련 코드 Choo..

My Small Space 평소에 자주 들어가던 링크를 한군데에 모아놓고, 할일을 관리해 주는 나만의 작은 공간 입니다. 인터넷 브라우저 시작시 뜨는 창으로 서비스 할 예정입니다. 로그인 기능 이름만 적고 로그인? 비밀번호? 구글? -> 아직 고민중 입니다. 1. 헤더 • JS Date로 현재 날짜 구현 • Login을 구현해서 환영인사에 AAA대신 이름추가 • - local storage? 혹은 DB? -> 질문할 내용 •짧은 명언 • - https://api.adviceslip.com/#top 여기서 api 가져오기 2. 도시 별 날씨 • 검색 추가 삭제 기능은 HTML의 form 태그 사용 •검색 input에 required, max length 추가 •Maximum cards 를 4로 정해서, 카..

서버는 특수한 컴퓨터다? No! 🙅 서버는 컴퓨터의 '역할' 이라고 했어요. 사람도 투 잡을 할 수 있는 것처럼, 컴퓨터도 여러 역할을 맡을 수 있죠. DB도 돌리고, 서버도 돌리고, 게임도 하고! 서버는 요청을 받으면 HTML+CSS+JavaScript 파일을 주기도 하고, JSON 형식으로 데이터를 주기도 하지요! JSON 형식으로 생긴 데이터 예시 💡 이거, 기억나세요? 서울시 미세먼지 데이터! 타고→타고 들어가서 값 가져오기! API란? 서버가 요청을 받게 위해 뚫어놓은 '창구'라고 했습니다. 요청에는 POST(주로 데이터를 수정할 때), GET(주로 데이터를 가져올 때) 요청 등 여러가지 타입이 있다고 했죠! HTML, CSS, JS는 각각 어떤 역할을 하죠? HTML은 뼈대 / CSS는 꾸미기..

AWS 에서 인스턴스 시작 Keycode 를 다운받아서 보관. Git Bash 실행 ssh 키코드다운받은거 드래그해서 넣기 ubuntu@aws의 퍼블릭 IPv4 주소 ex)ssh -i/c/Users/kevin/Desktop/WEB/keycode.pem ubuntu@xx.xxx.xxx.xxx Git bash 설치할거 ############# 설 치 ################ 명령내릴때 python3라고 안치고, python이라고 치고 명령 내리기 # python3 -> python sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10 패키지를 설치할때 필요한거. (flast, pymongo 등) # pip3 -> pi..

Flask - Flask 란 파이썬을 기반으로 작성된 마이크로 웹 프레임워크(framework) 중 하나 - 쉬운 만큼 단점도 있는데 그중 하나는 보안 부분에서 비교적 취약 - 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다. 프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 3분 요리/소스 세트라고 생각하면 되겠습니다! 웹 프레임워크(Web Framework)란? - 웹 프레임워크란 동적인 웹 페이지나 웹 애플리케이션 등을 개발할 때 발생하는 어려움을 줄여주는 일종의 '틀' Pakage 설치 - flask 프로젝트 폴더 안에, - static 폴더 (이미지, css파일을 넣어둡니다) - templates 폴더 (html파..

Python, MongoDB Python 패키지 설치 - requests request 패키지는 가장 많이 사용하는 라이브러리중 하나이며 request를 이용하면 쉽게 http 요청을 보낼수 있습니다. (HTML 문서에 담긴 내용을 가져 오도록 request(요청) 해야 한다) - bs4 HTML 문서를 탐색해서 원하는 부분만 쉽게 뽑아낼 수 있는 파이썬 라이브러리 BeautifulSoup 웹크롤링 (웹 스크래핑) 기본 코드 import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrom..

Javascript / JQuery / Ajax JQuery를 이용해 Javascript를 html로 쉽게 제어 Ajax를 이용해 서버에 데이터를 요청하고 받기 JQuery 추가 코드 Javascript - 데이터 스플릿 여러개 할때 answer.split('@')[1].split('.')[0] JQuery HTML 데이터를 자료형에 넣을때( ` ` 안에 넣어야함) let temp_html = `${answer}`; - 데이터 가져오기 $('#id입력').val(); - 데이터 보내기 $('#id입력').val('데이터 입력'); - 데이터를 추가하기 $('id입력').append(변수혹은 띄울 데이터 입력); - 데이터를 비우기 $('#names-q3').empty(); 크롬 익스텐션 JSONView ..

HTML/CSS/JS(기초) 부트스트랩(CSS) https://getbootstrap.com/docs/5.0/components/card/ 부트스트랩 & JQuery 추가하는 코드 구글폰트 // style 파트에 추가 * { font-family: 'Gowun Dodum', sans-serif; } CSS 배경이미지 어둡게 size와 position은 배경이미지를 항상 따라다닌다고 생각하기 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(""); background-size: cover; background-position: center; CSS Display: flex 이렇게 4줄도 콤보 displa..