My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

• on html, flask, python

SSAFY 스타트 캠프 2주차 - (1)

아래 포스트는 SSAFY 스타트 캠프의 수업내용을 정리한 글입니다.

Cloud9: web기반의 id development environment를 생성해주는 녀석

  • 일종의 작업용 컴퓨터인데 서버로 만들기에는 부족함

  • 서버 : 서빙을 다른 사용자에게 지속적으로 하는 녀석

웹서비스: URL을 받아서 서비스를 보내는 것

  • 이것을 서버가 관할함.

  • 서버가 어디있는지를 명시하는 것이 Remote Address

  • 이게 불편하므로 naver.com 과 같이 바꾸는 것을 DNS(Domain name system)이라고 함.

(일종의 주소록)
오늘 할 것 : workspace -> 브라우저를 통해서 서버작업 -> 서비스

웹이란 무엇인가

웹 : 요청 + 발송

요청 - url이라는 방식으로만 요청함.

https://www.naver.com 이라고 치면 자동으로 /을 붙여줌 : 루트의 의미

가장 기본이 되는 페이지를 보여주겠다.

https://search.naver.com?query=multicampus

  • 프로토콜(https) + 서브도메인(search) + 도메인(naver.com) + 명령(?) + 내용(query=multicampus)

플라스크

from flask import Flask
app = Flask(__name__)

@app.route("/") # 루트를 이걸로 정의하겠다!! 라는 뜻임.
def hello():
    return "Hello World!"
 
@app.route("/name")
# 비슷하게 써주는게 관례?
def name():
    return "Dong Chan"

실행 : flask run –host=0.0.0.0 –port=8080

웹사이트의 본질 = CRUD(create, read, update, delete)

: 이건 나중에 할거임(데이터베이스 지식이 있어야)

나중에 할 것 == S3(simple storage: SSD를 효율적으로 사용가능), route53(도메인)

  • 클라우드 formation(호스트 관리)

Variable routing(dynamic routing)

@app.route("/hello/<name>")
def hi(name):
    return "hello " + name + "!"

이건 Variable routing 링크

과제 : 밑에다가 /cube라는 라우트를 만들고, /cube/2 ==> 2**3을 인출해줘봐라.

@app.route("/cube/<number>")
def cube(number):
    return str(int(number)**3)

# 1. 받는건 string이므로 int로 바꿔줘야함.
# 2. int를 3제곱하라
# 3. 이걸 다시 string으로 바꿔야 출력해줄수있음.

# 코드를 줄일수있음 => 자동으로 형변환해줌.
@app.route("/cube/<int:number>")
def cube(number):
    return str(number**3)

과제1: hello -> olleh같은 문자열바꾸기

  • 2: 회문이면 true, 아니면 false
@app.route("/reverse/<string>")
def reverse(string):
    return string[::-1]
    
@app.route("/palindrome/<string>")
def palindrome(string):
    return "True" if string == string[::-1] else "False"

html

hyper text markup language : 양식을 만드는 언어

이렇게 구조화되어서 html으로 무언가를 브라우저가 아름다운 화면으로 변환해줌

두개의 파트로 구성됨 : 머리, 몸뚱아리

  • 대부분의 내용은 body에 들어감.

ctrl + / : html라인에 맞는 주석양식으로 재구성해줌.

head -> title, meta

body -> h1, h2, p, a, img, iframe(유튜브에서 공유)

<!DOCTYPE html>

<html lang="ko">
    	<!-- lang = "ko"는 언어에따라 다르게 표현하는 기능을 할 수 있음-->
    <head>
        <!-- 머리 : 상대적으로 덜 중요한 부분(문서에 대한 정보)-->
        <title>HTML 테스트</title>
        <meta charset="utf-8">
        <!-- 익스나 파폭같은녀석들이 한글을 인식하기 위해서 이걸 넣어줘야함.-->
    </head>
    <body>
        <!-- 몸통 : 중요한 부분(주요 내용)-->
        <h1>HTML 테스트</h1>
     	<!-- 가장 중요한 내용을 h1태그에 -->
        <h2>부제목</h2>
        <p>안녕하세요</p>
        <p>Hypertext Markup Language</p>
        <!-- a : 링크를 만들어 줄 수 있음-->
        <a href="http://www.naver.com">이거는 네이버로 가는 링크</a>
        <img src="이미지링크">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/dTPVMPE-DCE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
</html>

웹사이트 표준을 따르거라

웹서비스를 만들 때 중요하게 생각할 것

  • : ‘‘이게 검색이 될 때 어떻게 표시되는가??’’

  • 패스트캠퍼스와 멀티캠퍼스를 구글에서 검색해보아라.

  • -> 중요한 정보(h1태그)를 구글 크롤러가 잘 인식해서 띄워주는거임.

  • 따라서 h1태그를 남발하지 말라.

  • : SEO가 매우 중요하다(search engine optimization, 검색 엔진 최적화)

  • 그것에 입각해서 웹문서를 만드는 것이 좋은 웹이다.

구글 초기 pagerank 알고리즘

뭐가 가장 좋은 정보일까? 를 판단하는 기준

“하이퍼링크”를 통해서 우리 문서로 흘러들어오는 링크가 많이 배치된 문서.

=> 문서간의 연결성을 만들어주는 가장 기본적인 포맷 = a태그

  • href(hyper reference)

메타태그(meta)

나중에 배울거임,, 무엇을 할것인가를 설명해주는 태그

단순히 언어를 커버해주는 태그뿐만이 아님.

강의 플랫폼

edX, cousera, udacity(introduction to machine learning udacity

여기에 있는 통계학 강의도 매우 좋다고함.)

컴퓨터공학 강의 중 가장 유명한 것 : cs50

테이블 만들기

<table>
        <tr>
            <td>나이</td>
            <td>24살</td>
        </tr>
        <tr>
            <td>대학교</td>
            <td>삼성대학교</td>
        </tr>
        <tr>
            <td>혈액형</td>
            <td>A형</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>이제 별로 안쓰이는 추세임</td>
        </tr>
    </table>

!하고 탭 누르면 자동으로 양식이 나옴.

아이디 이름 이메일 전화번호
       
: 타이포라는 이렇게 쉽게 가능함 아이디 이름 이메일 전화번호

CSS

cascading style sheets

이것이 우리의 브라우저를 멋지게 표현해주는 역할을 함.

<link rel="stylesheet" type="text/css" href="https://pm.pstatic.net/css/main_v181114.css"/> 
<link rel="stylesheet" type="text/css" href="https://pm.pstatic.net/css/webfont_v170623.css"/>
<link rel="stylesheet" type="text/css" href="https://ssl.pstatic.net/sstatic/search/pc/css/api_atcmp_181122.css"/>

네이버에서 이거 3개만 삭제해도 보노보노급 화면이 되어버림.

선택자, 선언블록, 특정 속성 …. ???

  1. head에 style태그를 생성
  2. 하고싶은 css식별자에 내용을 지정해주면됨!
<head>
    <style>
        div {
            color:magenta
            }
        body{
            background-color: cyan
        }
        .text{
            color:blue
        }
        #header{
            color:gold
        }
        table{
            background-color: white
        }
    </style>
</head>

id는 웹사이트에 유일한 값으로 설정하는게 관례임.

플라스크로 HTML코드 가져오기

from flask import send_file

@app.route("/profile")
def profile():
    return send_file("profile.html")

그런데 단점은 Static web임 : 항상 고정된 html파일을 보여주는것 뿐이라 한계가 있음.

=> 동적으로 html이라는 파일을 바꿔줄수있어야

=> 사용자의 요청에 대해서 그에 따른 처리를 해주기 위해서라면, html파일이 파이썬 코드로 되어있어야함.

Dynamic website

ex) 인스타그램 - 권한있는 사람만 웹사이트를 볼수있게 하고싶다.

  1. 생각할 수 있는 친구로 만들수 있는 프로그래밍 언어

  2. 그걸로 부족해서 프레임워크 필요(django, symfony, nodejs…)

    -> 그중에 우리는 flask를 쓸것이다.

-> 무식하게 파일만 서빙하는게 아니라, 템플릿 엔진(Jinja)을 이용해서

html을 동적으로 프로그래밍을 통해서 임베딩할 수 있는 방식

(렌더를 통해서 html파일을 동적으로 생성,, 동적으로 생성하기 위해 render 사용)

과제 : 로또번호를 자동으로 생성해주고싶다.

#static한 방법
@app.route("/lotto")
def lotto():
    result = str(sorted(sample(range(1,46),6)))
    return result

#html파일에 생산된 로또번호를 새겨서 보내고싶다.
#템플릿 : html파일같이 보이지만, 파이썬코드를 문서로 보낼 수 있음.

from flask import render_template
#1. templates(꼭 이 이름이어야함)의 파일을 만들기
#2. result를 (플라스크에 임베딩되있는)jinja를 이용해서 lotto.html에 새겨줌.

@app.route("/lotto")
def lotto():
    name = "Dong Chan"
    result = str(sorted(sample(range(1,46),6)))
    return render_template('lotto.html',result=result,name=name)
#3. 인자: 렌더할 html파일//템플릿에 넣어줄 변수의 이름 = 넣어줄 값

<!-- lotto.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>님이 입장하셨습니다.</h2>
    <h1>자동 생성 로또 코드</h1>
    <h2></h2>
</body>
</html>

과제 : 네이버 국내증시 코스피시세를 스크랩해서 넣어보기.

from bs4 import BeautifulSoup
import requests

@app.route("/kospi")
def kospi():
    # https://finance.naver.com/sise/에서 코스피가격 스크래핑해서 가져오기
    url = "https://finance.naver.com/sise/"
    doc = BeautifulSoup(requests.get(url).text,'html.parser')
    sise = doc.select_one('#KOSPI_now').text
    return render_template('kospi.html',sise=sise)

깃헙이 static파일을 호스팅

css의 단점: 컨텐츠를 정렬하기가 힘듬

ex) 웹페이지상에서 컨텐츠 중앙정렬

-> 그것을 혁신적으로 바꿔준 flex라는 개념이 등장(나중에할거임)

부트스트랩

https://startbootstrap.com/template-overviews/resume/

1.웹에서 빈번하게 쓰이는 component들을 만들어줌.

2.grid system(전체적인 웹의 화면을 격자로 나누는 것)을 배치할 때 활용하기쉬움.

과제: 레쥬메 파일을 우리 프로파일에 덮어씌워보기

  1. 깃헙에 그대로 올려보기

    https://pages.github.com/

  • 저장소 이름을 start6666.github.io식으로 만들어야함.

  • => 그러면 start6666.github.io에서는 내가 푸시한 코드가 그대로 받아짐.

  1. git init -> git add .

    warning: LF will be replaced by CRLF in vendor/jquery/jquery.slim.min.js. The file will have its original line endings in your working directory

    이 오류는 크게 신경안써도됨(맥에서 쓰여진 형식을 윈도우에 맞게 바꾸는것)

  2. git commit -m “…” -> git remote add origin https://github.com/start6666/start6666.github.io.git -> git push -u origin master

  • 적용시키는데 시간이 좀 걸림.

=> 이걸 나에게 맞게 바꾸기 위해서는 index파일을 바꾸면됨.

(현재는 블로그 만드느라 파괴했습니다 ㅠㅠ)

comments powered by Disqus