4주차 웹개발 개발일지

실제 DB데이터가 사용된 페이지

mongoDB 내 데이터

드디어 소기의 성과를 얻었다. 이제 홈페이지 다운 홈페이지가 되어가는 중이다.

강의 들으며 만드는 간단한 페이지지만 내 손으로 만들어 간다는 것이 의미가 있다.

 

1주 차에서 4주 차까지 많은 변화가 있었고 웹 개발에서는 db를 사용한다던가 api를 만들고 그걸 홈페이지처럼 적용할 수 있다는 것이 현재까지의 결과다.

 

프로젝트 세팅 순서 기록

1. 프로젝트 세팅 (기본 구조, 필요한 파일 생성 등)
2. api 설계 (필요한 기능설계)
3. 조각 기능 구현 (구현 전 필요한 기능 요약해서 미리 구현)
4. 뼈대 준비 (클라이언트-서버 간 연결 상태 등 확인)
5. 실제 post연습
6. 실제 get연습
7. 구현 및 조정

api 구현을 위한 flask

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

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

## GET API 역할을 하는 부분
@app.route('/memo', methods=['GET'])
def listing():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg':'GET 연결되었습니다!'})

## POST API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결되었습니다!'})

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

##기본구조
##static 폴더 (이미지, css파일 넣기)
##templates 폴더 (html파일)
##app.py 파일 (메인파일)

html 파일에서 api 접속

function post() {
	$.ajax({
		type: "POST",
		url: "/review",
		data: {sample_give:'샘플데이터'},
		success: function (response) {
			alert(response["msg"]);
			window.location.reload();
		}
	})
}

function get() {
	$.ajax({
		type: "GET",
		url: "/review?sample_give=샘플데이터",
		data: {},
		success: function (response) {
			alert(response["msg"]);
		}
	})
}

 

 

추가

카카오톡 등 링크를 받으면 페이지 이미지, 제목, 설명이 나오게 하기 위한 방법

##메타태그를 이용한 방법
<meta property=og:title>
## 위와같이 메타태그에 og를 이용해서 내용을 넣어준다.

##가져올때
('meta[property="og:title"]')
## 위와같은 방법으로 가져 올 수 있다.