3일차(21.09.15) TIL

<웹개발 기초 4주 & 5주>

Flask

-Flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음

-Flask 기초 : URL 나눠보기

from flask import Flask
app = Flask(__name__)

#@app.route('/) 부분을 수정해 url을 나눌 수 있음, url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안됨!
@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

 

-Flask 기본 폴더 구조

ㄴstatic 폴더 (이미지, css파일)

ㄴtemplates 폴더 (html파일)

ㄴapp.py 파일 (서버를 돌리는 파일은 통상적으로 app.py라고 씀)

 

-Flask 기초 : HTML 파일 불러오기

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

 

- Get, Post 요청 타입

    * Get : 데이터 조회(read)에 사용 ex) 영화 목록 조회,

                데이터 전달 -> URL 뒤에 물음표를 붙여 key=value로 전달 ex) google.com?q=북극곰

    * Post : 생성(Create), 변경(Update), 삭제(Delete) ex) 회원가입, 회원탈퇴, 비밀번호 수정,

                  데이터 전달 -> 바로 보이지 않는 HTML body에 key:value 형태로 전달

 

- Get, Post 요청에서 클라이언트 데이터 받는 방법

  <Get 요청 API코드>

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

 

  <Get요청 확인 ajax코드>

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

 

<Post요청 API코드>

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

 

  <Post요청 확인 Ajax코드>

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

 

- Get, Post 코드 짜는 순서 : 클라이언트와 서버 확인 -> 서버부터 만들기 -> 클라이언트 만들기 -> 완성 확인

 

AWS EC2 서버

 - SSH(Secure Shell Protocol) : 다른 컴퓨터에 접속시 사용하는 프로그램,

                                                                다른 것들 보다 상대적으로 보안이 뛰어남,  22번 포트가 열여있어야 접속 가능

 

 - AWS EC2 접속하기(맥북) : 터미널 열기 -> 내 KeyPair의 접근 권한을 바꿔주기 -> SSH로 접속하기

sudo chmod 400 받은키페어를끌어다놓기

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피

 

- 간단한 리눅스 명령어

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

python3 '파일이름' : 파이썬 파일 실행하기(python뒤에 3이 붙은건 python이 현재 3버전이라)

pip install 패키지이름 : pip로 패키지 설치

 

- AWS 포트 열어주기 : EC2에서도 자체적으로 포트를 열고/닫을 수 있음

• 80포트 : HTTP 접속을 위한 기본 포트
• 5000포트 : flask 기본포트
• 27017포트 : 외부에서 mongoDB 접속하기 위한 포트

 

- 포트포워딩(Port Forwading) : 포트 번호 없애기, http요청에서는 80포트가 기본 굳이 :80을 붙이지 않아도 자동연결

리눅스에서 기본으로 제공해주는 포트포워딩

 

  - nohup 설정하기

#원격 접속 종료시에도 서버가 계속 돌아가게 하기
nohup python app.py &

#서버종료하기 - 강제종료하는 법
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]

 

og태그

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />

 

 

<웹개발 기초 완강 회고록>

3일만에 웹개발 기초 2번째 완강 성공! 3일간 몰아서 듣는다고 힘들었지만 다 듣고 나니 뿌듯하다. 그치만 2번 들은 지금도 여전히 헷갈리는 것들 투성이ㅠㅠㅠㅠ 계속 하다보면 언젠간 다 이해되는 날이 오겠지......