패키지들의 의미:

1.flask: 플라스크(Flask)는 파이썬으로 웹 어플리케이션을 만드는 마이크로 웹 프레임워크입니다.

대표적으로 웹 프레임워크에는 Flask, Django, Tornado 등이 있습니다.

그럼 마이크로 프레임워크는 무엇일까요?

마이크로 프레임워크란 핵심 기능만 간결하게 유지하지만, 확장 가능한 것을 목적으로 하는 프레임워크라고 합니다.

즉, 특별한 도구나 라이브러리가 필요 없기 때문에 마이크로 프레임워크라고 부른다고 합니다. 

출처: https://forensickelly.tistory.com/entry/Python-Windows에서-Flask-설치하기 [forensic's kelly]

2.requests: python에서 요청을 모아놓는 기능.

3.pymongo:

파이썬에서는 DBMS(DataBase Management System)을 간단한 명령어로 운용할수있다.

파이썬의 Pymongo 패키지로 NoSQL 데이터베이스인 Mongo DB에 접근한다.

Mongo DB는 JSON형태로 데이터를 저장하므로 DB를 유연하게 확장 가능

파이썬 PIP를 사용하여 pymongo를 설치한다.

#Reference:

1)https://www.w3schools.com/python/python_mongodb_getstarted.asp

2)https://www.mongodb.com/

3)https://www.youtube.com/watch?v=P1Qbf3A_E6U

4.bs4:

파이썬 크롤링 크롤러 설치 python BeautifulSoup bs4

크롤링이란?

웹페이지에서 필요한 데이터를 추출하는 작업을 의미한다.

웹 크롤링을 하기 위해서는

1) pip 명령어로 BeautifulSoup 모듈을 설치하고

2) Html에 대한 기본적인 이해가 필요하며

3) CSS의 선택자에 대한 이해가 필요하다.

BeautifulSoup란?

파이썬에 추가할 수 있는 크롤링을 위한 라이브러리이다. 결국, 웹에 있는 데이터를 가져와서 추출할 경우에 사용하는 외부 라이브러리로 추가 설치가 필요하다.

파이썬 개발환경에 새로운 모듈을 설치하려면 PIP(Python Install Package)를 이용하여 쉽게 설치가 가능하다. pip3 list는 설치된 목록을 볼 수 있다. pip3 install BeautifulSoup4는 새로운 패키지를 설치하는 명령어이다. pip3 uninstall BeautifulSoup4는 설치된 패키지를 제거하는 명령어이다.

웹크롤링에 필요한 라이브러리 설치

어떠한 웹페이지에 나와 있는 목차들을 한 번에 리스트로 가져오기 위해서는 Html이나 CSS의 기술을 약간이라도 이해하고 있어야 한다. 그리고 BeautifulSoup 라이브러리 및 request 라이브러리의 도움이 필요하다.

pip install BeautifulSoup4
pip install requests

예제 코드와 같이 pip 명령어를 사용해서 필요한 모듈 및 라이브러리를 설치할 수 있다. 그리고 Anaconda python을 설치하면 이미 설치되어 있기 때문에 따로 설치할 필요가 없다.

5.Selenium: 자동화 브라우저 프로젝트

Selenium은 웹 브라우저의 자동화를 허용하고 지원하는 다양한 도구와 라이브러리를 포함하는 프로젝트입니다.

Selenium을 이용해 브라우저를 제어하고 웹스크래핑을 할 수 있습니다.

https://www.selenium.dev/ko/documentation/

파이참에서 패키지 설치하기

https://jmoon.co.kr/241

Pyjwt:

https://speakerdeck.com/junojunho/jwtwa-flask-pyjwtro-injeung-api-seobeo-mandeulgi

2년이 지났지만 아직까지도 이 질문에 대해 정확한 해법을 준사람은 없다.

확인결과 Flask패키지 설정도 되어있는 상태이고 저장된 경로에도 문제가 없다.

app.py파일이 인식되지않는것과 연관성이 있을법도 하다.

app.py파일을 생성하면 python파일이 아니라 일반 text파일로 인식된다.동시에 Flask문자에 빨간색 파도 밑줄이 생긴다.

미디어 쿼리의 기본 문법

미디어 쿼리를 작성할 때에는 필요에따라 미디어 유형과 and 또는 ,콤마 논리 연산자로 조건을 적용할 수 있다.

주:미디어 쿼리 구문은 대,소문자를 구별하지 않는다.

@media

미디어 쿼리 문법의 시작을 알리는 부분이다.

[only 또는 not]

미디어 유형

[and 또는 ,콤마]

(조건문)

{실행문}

미디어 쿼리를 적용하려면?-링크 방식

미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를 작성해서 <link></link> 태그로 CSS 파일을 연결하여 적용해야한다.미디어 쿼리를 적용하는 방법은 여러 가지가 있지만 현재는 이 방식이 가장 많이 사용되는 방식 중 하나이다.

이 방식은 HTML파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적이다.

http://bootstrapk.com/css/

<form>

     <div class="form-group">

           <label for="exampleInputEmail1">이메일 주소</label>

           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">

     </div>

     <div class="form-group"> <label for="exampleInputPassword1">암호</label>

           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">

     </div>

     <div class="form-group"> <label for="exampleInputFile">파일 업로드</label>

           <input type="file" id="exampleInputFile"> <p class="help-block">여기에 블록레벨 도움말 예제</p>

     </div>

     <div class="checkbox"> <label> <input type="checkbox"> 입력을 기억합니다 </label>

     </div>

            <button type="submit" class="btn btn-default">제출</button>

</form>

#Form group 과 input group 을 같이 쓰지 마세요

#Form group 과 input group 을 직접 같이 쓰면 안됩니다. 대신, input group 을 form group 내에 넣도록 하세요.

Slick Edit Pro Download 

https://www.slickedit.com/

Slick Edit Pro사용설명

https://www.youtube.com/watch?v=ow58VeCO2Yo 

부트스트랩 컴포넌트

https://getbootstrap.com/docs/4.0/components/alerts/

1주차 숙제설명:이 페이지에서 내가 필요한 코드를 붙여넣기하는 방법으로 완성한다.

                     Dropdowns 을 선택하여 사용한다.

윗 사이트에 들어가서

Sizing 내부의

<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Default</span> </div> <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> </div>                     

를 복사하여  "주문자 이름" 을 만든다.

Custom select 내부의 수량부분을 선택

<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>

를 복사하여 "수량선택" 을 만든다.

다음은 "주문자 이름" 과 같은 방법으로 2번 연속 복사하여 붙인후 "Default"를 필요한 단어로 바꾸어 입력한다.

마지막으로 button에 onclick="order() 를 입력한다.

이하 완성된 숙제 내용

homework

index.html

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">


<style>
*{font-family: 'Jua', sans-serif;}
.item-img {

width: 500px;
height: 350px;
background-color: green;

background-image: url("https://scontent-gmp1-1.xx.fbcdn.net/v/t1.6435-9/182509403_274188331070798_8926967360613139965_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=8bfeb9&_nc_ohc=9VrbTzJe8iYAX_L8ghc&_nc_ht=scontent-gmp1-1.xx&oh=a1aac32c023a507fcc8e8498880d7302&oe=60F67CF3");
background-size: cover;
background-position: center;
}

.price {
font-size: 20px;
}

.item-desc {
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}

.item-oder {
width: 500px;
}

.btn-order {
margin: auto;
width: 100px;

display: block;
}

.wrap {
width: 500px;
margin: auto;

}
</style>
<script>
function order() {
alert("주문이 완료되었습니다!");
}
</script>
</head>

<body>
<div class="wrap">
<div class="item-img">

</div>
<div class="item-desc">
<h3>블루투스 방수 이어폰을 팝니다.<span class="price">가격:50.000원/개</span></h3>
<p>수영하면서도 음악을 즐길수있는 방수 이어폰입니다.</p>
</div>
<div class="item-oder">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">수량</button>
</div>
<select class="custom-select" id="inputGroupSelect03">
<option selected>수량을 선택하세요!</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주소</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<button type="button" onclick="order() " class="btn btn-primary btn-order">주문하기</button>
</div>
</div>
</body>

</html>

논리 연산자 배우기

https://ko.javascript.info/logical-operators

Logical OR (||)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR

스파르톤 생존일지

2021.07.10.

21:00

start

체크인도 안되고 내자리가 어딘지 모르겠고...소경이 얼음 위를 걷는듯 조심조심~

사전에 캠과 마이크를 준비할걸 그랬네.휴~

22:30 부터 웹개발 종합반 퀴즈문제 다시 풀어보기

웹개발 종합반 1주차 03 Quiz_간단한 로그인 페이지 만들어보기

이미지 CSS기본 사용세트:

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;

프로그램 작성시 url 주소만 갈아끼우면 된다.

모서리를 둥글게 만드는 명령 

border-radius: 10px; 

여백을 주는 명령어:바깥여백margin-top: 20px;

                         내측여백 padding: 20px;

                         상측여백margin-top: 20px;

                         좌측여백margin-left: 20px;

혹은 이런식으로도 할수가 있다.

margin: 20px 0px 0px 30px;

즉 왼쪽으로 도는 순서는 top,right,bottom,left

또한 글 속성과 box속성이 차이를 이해하는 명령어:

글속성은 box로 강제로 묶어 준 다음에 옮겨야한다.

즉 display: block; 으로 옮겨주어야한다.

또한 상황에 따라 명찰을 2개를 붙일수도 있다.

예하면:<button class="mybtn red-font"> 로그인하기</button>

#주석처리:코딩하다가 써넣고 싶은 메모,혹은 잠간 지우고 싶은 코드 등에 사용된다.

주석처리란:사람은 읽고 싶은데 컴퓨터는 읽지마~!

주석처리하는 모양은 CSS,HTML 각자가 다르다.

#CSS부분은 파일로 분리할 수 도 있다.

*부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)

대표적 color link example:

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

또한 Card columns에서 필요한 카드를 갖다 쓸수도 있다.

7월11일 

am: 02:20

10. Quiz_함께 만든 페이지를 발전시켜보세요!

am:03:35

10Quiz_나홀로 메모장의 포스팅박스를 완성하기!

am:04:00

12. Javascript 맛보기

자바스크립트는 유일하게 프라우저가 알아듣는 코드다.

#중간 휴식: 비빔냉면 한사발 만들어 먹고~."수염이 석자라도 먹어야 양반"

개발자 도구 사용하는 방법

개발자 도구를 이용하여 프로그램 작성시 중간중간 확인가능하고 확인시 발생하는 에러를 그때그때 수정할수가있다,

Javascript 기초문법 배우기

변수이름을 지정할때에는 남이 봐도 알아보기 쉽게 짓는다.

#종류[편집]

• 2.1. 소괄호 ( )[편집] Parenthesis. 문장에서 가장 많이 사용되는 괄호. ...
• 2.2. 중괄호 { }[편집] Brace. 은(는) 여기로 연결됩니다. ...
• 2.3. 대괄호 [ ][편집] Bracket. ...
• 2.4. 홑화살괄호 〈 〉[편집] 국립국어원의 설명

#가지고 올때에는 대괄호,선언 할때에는 중괄호를 사용한다.

#딕셔널과 리스트가 서로서로가 요소로 씌일 수 있다.

am:5:30 문법 뽀개기

14. Javascript 기초 문법 배우기(2)

예제:

9시간 스파르톤(마라톤)은 지정된 시간내에 높은 효율을 낼수있는 아주 좋은 계기로 되었고

퀴즈를 맞추는 시간을 제외한 시간들은 정말로 짜릿한 긴장감과 더불어 키보드 버튼을 두두리는 소리만 들릴뿐이었습니다.이런 기회를 자주 가짐으로서 학원들 사이의 우애를 더욱 돈독히 하는 계기로 되었으면합니다.

모두들 수고 많으셨습니다.

다음 예제:

조건문:if

설명:

let age = 24를 허락해놓고

만약에 (if) 나이가(age) 24보다 크면 "성인입니다"를 띄워주고 다르면(else) "청소년입니다"를 띄워준다.

즉 앞에서 24세를 선언해놓고 질문했기때문에 결과는 "성인입니다"를 띄워준다.

만약에 20세를 허락해 놓고 질문 하면 "청소년입니다"를 추출한다.

또다른 예문:

여기에서 if (age > 20 && sex == '남성') {
    console.log('성인 남성입니다.')
} else {
    console.log('청소년입니다.')
}

설명:나이가 20보다 크고 성별이 남성이면

결과: 성인남성입니다,

또는

if (age > 20 || sex == '남성') {
    console.log('성인 남성입니다.')
} else {
    console.log('청소년입니다.')
}

# 논리 연산자 배우기 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR

여기에서 else if 중복 사용이 가능하다.

반복문

딕셔너리들을 모아둔 리스트를 돌면서 필요에 맞는 딕셔너리를 if 문으로 찍어준다.

example:서울시 미세먼지 현황 list

우선 SpartaCodingClub Slack으로 튜터님들께 질문을 드리고 출근했다.일하면서도 왜 그런지?고민도 많이 했는데

오후 3시쯤 되어 내가 다운로드한 크롬 버전과 실제 컴퓨터에 설치된 크롬 버전이 같지않을 경우 이런 현상이 나지 않을까하는 의심도 했었다.퇴근하여 컴퓨터를 켰더니 과연 튜터님의 답안도 내 생각과 같은 내용이었다.

튜터님의 올린 순서대로 해보니 크롬이 열렸다.

튜터님들이 끝까지 책임감을 갖고 문제가 해결될때까지 답변주시는 정신에 탄복된다.

크롬 브라우저 버전 확인하기

chrome://settings/help

여기에서 크롬의 최신 버전을 확인할수 있다.

크롬 드라이버 다운로드 링크

https://chromedriver.storage.googleapis.com/index.html

제일 하단에 최신 버전 파일을 선택하고 chromedriver_win32.zip 을 클릭하면압축파일이 다운로드된다.

다운로드된 압축파일을 풀고 chromedriver 파일을 Ctrl+c 를 눌러서 파일을 복사한후 pytharm으로 가서  projiect03폴더를 선택한후 Ctrl+v를 누른다.그러면 복사할거냐 하는 문의 창이 뜨는데 OK를 눌러주면 된다.

반드시 prac_scraping.py파일과 같은 폴드내에 있어야한다.