220428_내일배움캠프_TIL

웹 서비스 동작원리

• 클라이언트: 브라우저, 핸드폰(요청을 하는 쪽)

• 서버 : API라는 창구를 통해서 클라이언트와 소통(주로 요청을 받는 쪽)
  -서버는 컴퓨터의 하나의 프로그램이자 '역할'이다 (사람들도 여러가지 일을 할수있는 것처럼, 컴퓨터도 여러 가지 역할을 맡을 수 있다.! DB도 돌리고~,서버도 돌리고~ ,게임도하고~)

• API : 클라이언트와 소통하는 창구와 같은 것
  -요청에는 POST(주로 데이터를 수정), GET(주로 데이터를 가져올때) 등 여러가지 타입이있다.

• HTML, CSS ,JS
  -HTML: 뼈대, CSS: 꾸미기, JS: 동적으로 움직이게 하는 것!
  -CSS로 꾸밀 때는 이름표를 붙여주고(class="클래스 이름"), 안에 .클래스 명으로 써주기!

• JQuery
  -JQuery는 JS라이브러리로, HTML조작을 쉽게하는 도구!
  -라이브러리: 다른 사람이 만들어놓은 가져다 쓰기 좋은코드(import가 필요)
  요런식 : $('#아이디').val()

• Ajax : 서버 통신을 위해 쓰이는 통신방법
  -클라이언트에서 서버로 요청을 보내고, 요청에 대한 대답을 받아오는 코드단의 방법

ajax의 형식:

$.ajax({
    type: "GET",
    url: "요청할 URL",
    data: {},
    success: function (response) {
        // 서버가 준 데이터가 response에 담깁니다!
    }
})

• Flask: 서버를 만드는 프레임워크
  -서버를 처음부터 만드는 것은 너무 어려운 일이기에, 누군가 만들어 놓은 틀안에서 코딩하는 것!

from flask import Flask, render_template, jsonify, request
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)

위에 코드를 파일로 만들어서 붙여넣고, flask 패키지를 설치한 후
http://localhost:5000/에 들어가면 index.html 페이지를 볼수있음!(home값이 index.html이기에)

나홀로 메모장 뜯어보기

-venu폴더: 라이브러리나 패키지가 담기는 곳 (눈에는 보이지만 안보이는 친구처럼 생각하기 수정금지x)

-라이브러리를 설치

• flask
• pymongo
• bs4
• requests

-코드 살펴보기

1. 포스팅 api : url과 코멘트 작성후 기사저장에 있는 것

2. 리스팅 api : 로딩이 끝나고 카드들의 정보를 서버에서 받아와서 다시 붙여주는 것

나홀로 일기장 만들기

1. 셋팅 설정

templates폴더, static폴더 만들고 필요한 패키지를 설치해준다.

2. 순서 정하기

-1) 생김새를 먼저 만들기 - HTML+CSS
-2) 만들어야 할 기능을 파악하기 (포스팅 API, 리스팅 API)
-3) 서버-클라이언트 연결 코드 만들기
-4) 포스팅 API 만들기 (보통 저장하는 것을 먼저 만들 때가 더 편함!)
-5) 리스팅 API 만들기

3. 만들어보자!

1 ) 생김새 만들기

제목, 내용입력, 저장하기버튼 정도? 부트스트랩 이용해보자

1. 부트스트랩을 통해서 점보트론 형식을 가지고 왔다.
2. 비슷해 포스팅박스와 textarea 버튼을 가지고 왔다.
3. 카드형식 여러개 중에서 하나를 가지고 와서 복사 붙여넣어줬다
4. 점보트론형식크기가 어색해서 div class="wrap"으로 감싸주고 설정값을 주었다.
   +margin: auto;로 주면 가운데로 정렬이된다.
5. 구글폰트에서 글씨체를 가지고 왔다.
   =스타일에서 전체를 가르킬대는 전체 변화를 줄때는 *{ font: ~~} 형식으로

2 ) 지금까지 만든 HTML페이지를 서버에서 받을수있게 해보자

그래야 클라우드 시스템에서 배포했을때 다른사람들도 볼수있겠지?

from flask import Flask, render_template, jsonify, request
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)
    

기본적인 flask 코드이다. 외우기보다는 필요할때마다 가져다가 쓰자

3) 기능만들기

크게 불러오기와 저장하기 기능이 있다
불러오는것은 get이고, 저장하는것은 post일거같은데 ?

(파이참안에서도 html과 py파일에 따라서 같은 키인 주석을 눌러도 다르게 표시된다.)

• 리스팅먼저 만들기
  포스팅먼저 만드는게 편하다면서 왜 리스팅을 먼저 만들까?
  무튼..

  <script>
        $(document).ready(function () {
            listing()
        })         // 로딩이 완료되면 실행되는코드.
        function listing() {
            alert("안녕")
        }

 </script>

위에 $(document).ready 부분은 로딩되면 바로 시작되는 부분이다.

그런데

<script>
        function listing() {
            alert("안녕")
        }
        $(document).ready(function () {
            listing()
        })         // 로딩이 완료되면 실행되는코드.
</script>

listring()함수가 밑에있는데도 로딩이되고 바로 시작되길래 왜 그런가? 하는 생각이 들어서 바꿔서 해보았다. 똑같이 잘 작동한다!
이유를 찾아보니.. 자바와는 달리 함수의 호출을 먼저, 선언을 나중에 해도 된다.
자바스크립트를 잘 몰라서 그랬다.ㅋㅋ

API, GET, POST, JSON, AJAX가 용어만 정리되어있어서 제대로 머리속에 정리했다.

front에서 back에게 정보를 요청(request)하게 되는데, back은 db에서 요청에 알맞는 데이터를 프론트에게 응답(response)해야한다. 이때 front가 back에게 요청할 때 통신규칙에 맞게 요청을 해야하는데 이런 규칙에 맞는 요청을 API라고 한다. 이때 요청을 하게 되는 형식은 JSON형식인데 이것은 KEY:VALUE값이 있는 형태고 , 우리가 배우는 것은 이런 JSON형식을 약속하고있는 AJAX통신이다.

아직 완성되지 않은 리스트함수와 api이다.

listing함수에서

- 포스팅 api 만들기

1) 클라이언트와 서버 확인하기

• 위에서 확인가능!

2) 서버부터 만들기

• 클라이언트가 포스팅하는 title, content를 가져와야한다.
• 다음으로는 받은 파일들을 db로 저장해줘야한다

3) 클라이언트 만들기

• title 과 content를 서버로 넘기기

title과 content가 입력되는 곳의 id값을 보기쉽게 변경해준다.

 function posting() {
            let title = $('#title').val()
            let content = $('#content').val()
            // $('#title').val() id가 title과 content에 입력된 값을 저장
            $.ajax({
                type: "POST",
                url: "/diary",
                data: { title_give: title, content_give: content},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                    // 새로고침
                }
            })
        }

id가 title과 content로 입력되는 값을 저장해서 넘겨준다!
ajax부분에서도 data에 title_give, content_give는 서버의 형식과 맞춘다.

+메세지 띄우고 새로고침 windlow.location.reload()

4) 완성 확인하기

제대로 들어갔는지 확인하려면 로보3t로 확인가능

- 리스팅 api 만들기

1) 클라이언트 서버 확인하기

2) 서버만들기
클라이언트한테 줄 데이터가 있나? 없다
그냥 db에있는 데이터를 주기만 하면 된다!
뭘쓸까? find~머시기였는데!!

@app.route('/diary', methods=['GET'])
def show_diary():
    diaries = list(db.diary.find({}, {'_id': False}))
    return jsonify({'all_diary': diaries})

diaries라는 곳에다가 diary의 모든 값을 넣어준다
그리고 all_diray로 내려주는데
return jsonify({'all_diary': diaries}) 이부분이 좀 궁금하다 한번 알아봐야겠다.

3) 클라이언트 만들기

<script>
        function listing() {
            $.ajax({
                type: "GET",
                url: "/diary",
                data: {},
                success: function (response) {
                    let diaries = response['all_diary']
                    for (let i = 0; i < diaries.length; i++) {
                        let title = diaries[i]['title']
                        let content = diaries[i]['content']

                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${content}</p>
                                            </div>
                                        </div>`
                        $(`#card-box`).append(temp_html)

                    }

                }
            })
        }

클라이언트가 리스팅하는 부분이다. 클라이언트가 보내줄 데이터는 없고 받기만 하면 되는데
diaries를 만들어서 서버에서 response['all_diary']을 담아주었다
그리고 반복문을 통해서 title과 content의 값을 받고서 이 값을 카드에 넣어주었다.
temp_html을 선언해서 ``이라는 백틱값을 꼭 넣어주고 가져온 title과 content값이 들어가야 하는 자리에 ${} 형식으로 넣어준다.!

그리고 card컬럼스가 시작되는 div에 id값을 주고, 이 id값에 temp_html을 append해주면
입력된 데이터들이 카드형식으로 하나씩 만들어진다.
$(#card-box).append(temp_html) 기억할것!

4) 완성 확인하기

데이터와 값은 잘 들어갔고, 입력해있는 창덕궁은 지우면 사라진다.