Git Assingment

    git assingmnet를 통해 파일 관리하기

  • Sourcetree를 통해 파일 commit, push하기 
  • Issue 등록 및 관리하기 

 

1.  Git

  • git은 프로젝트의 버젼 관리 프로그램
  • 하나의 프로젝트를 협업하여 작업 단위를 나누어 작업 후 mergy하거나 작업 이력을 살펴볼 수 있다,
  • 스냅샷처럼 기존 내역과 수정 내역의 정보를 볼 수 있다.
  • 코드(Python, HTML, JavaScript, Java,...) text 파일, markdown파일(text 파일의 일종), CSV 파일 등
  • Github 은 Git 으로 된 프로젝트 저장 공간을 제공하고,Git 커뮤니티 서비스를 제공한다.
  • 프로젝트, 회사에 따라 Git만 Github만 또는 동시에 사용하기도 한다.
  • Sourcetree 설치 파일(https://product-downloads.atlassian.com/software/sourcetree/windows/ga/SourceTreeSetup-3.4.3.exe)

 

new tap > +  Create 선택
탐색(버튼)을 눌러 Git 관리 폴더(repository)를 생성한다.
[예] 버튼을 누르면 폴더에 git 이라는 숨겨진 폴더가 생성된다.
커밋할 내용이 위와 같이 '익스프로러에서 열기'만 뜬다.

 

 

 

  Point of Realization

  • : )
저작자표시

'To day I learn' 카테고리의 다른 글

TodayILearn 2023-03-24  (0) 2023.03.24
TodayILearn 2023-03-23  (0) 2023.03.24
TodayILearn 2023-03-22  (0) 2023.03.23
TodayILeaun 2023-03-21  (0) 2023.03.21
TodayILearn 2023-03-20  (0) 2023.03.20

   python post 삭제 기능 만들어보기

    스파르타 코딩클럽 웹개발 종합반 - 스파르피디아 복습

  • javascript, python 라이브러리를 이용하여 post get API 구현하기
  • post 삭제 기능 만들어보기

 

1.  

 

 

 

 

 

2.  

 

 

 

 

 

  Point of Realization

    <script>
        function open_postbox(){
            $('#posting_box').show()
        }

        function hide_postbox(){
            $('#posting_box').hide()
        }
    </script>
 
  <div class="mypost" id="postin_gbox">
 

어째서 안에 내용물은 안보여 주는 것인가.. 30분이나 고민했다.

 
아무리 해도 버튼을 눌렀을 때 posting_box 영역이 전부 열리지 않았는데, 
'_' 문제인가 싶어서 '-' bar로 변경해주었더니 정상적으로 동작했다. 

id를 정의해줄 때 어떤 규칙이 있는걸까?
검색을 해봐도 뚜렷한 해답이 나오지 않으니 책을 찾아봐야겠다.

 

영화 기록하기(버튼)을 누르면 전체 posting-box 영역이 잘 열린다.

 

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25  (0) 2023.03.25
TodayILearn 2023-03-23  (0) 2023.03.24
TodayILearn 2023-03-22  (0) 2023.03.23
TodayILeaun 2023-03-21  (0) 2023.03.21
TodayILearn 2023-03-20  (0) 2023.03.20

    POST, GET API 구현하기

    스파르타 코딩클럽 웹개발 종합반 - 복습

  • POST방식으로 
  • GET 방식으로

 

1.  

 

 

 

 

 

2.  

 

 

 

 

 

  Point of Realization

  졸려서 내일 쓸게요

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25  (0) 2023.03.25
TodayILearn 2023-03-24  (0) 2023.03.24
TodayILearn 2023-03-22  (0) 2023.03.23
TodayILeaun 2023-03-21  (0) 2023.03.21
TodayILearn 2023-03-20  (0) 2023.03.20

   팬명록 만들기

    스파르타 코딩클럽 웹개발 종합반 5차 - 팬명록 만들기 

 

1.  POST  댓글 저장하기

from flask import Flask, render_template, request, jsonify
application = app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
 
@app.route('/')
def home():
    return render_template('index.html')
 
   # request.form을 통해 name, comment를 받고 fan db에 doc 딕셔너리 데이터를 저장한다.
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    doc = { 'name' : name_receive,
                'comment' : comment_receive }
    db.fan.insert_one(doc)
   
    return jsonify({'msg': '댓글 등록 완료!'})
 
 
if __name__ == '__main__':
   app.run()
 
  --- 로컬에서 실행할 때 ---
    app.run('0.0.0.0', port=5000, debug=True)
<script>
     /* 문서가 열리면 set_temp, show_comment 함수 실행 */
      $(document).ready(function () {
        set_temp();
        show_comment();
      });
 
   
     /* 실시간 서울 기온 함수 */
      function set_temp() {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
            let number = data['temp']
            $('#temp').text(number)
          });
      }
 
      /* 닉네임, 댓글 DB에 저장하기 */
      function save_comment() {
        let name = $('#name').val()
        let comment = $('#comment').val()
        let formData = new FormData();

        formData.append("name_give", name);
        formData.append("comment_give", comment);

        fetch('/guestbook', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
            alert(data["msg"]);
      /* 화면 Refresh */
            window.location.reload(); 
          });
      }
    </script>
<body>
    <div class="mypost">
      <div class="form-floating mb-3">
        <input type="text" class="form-control" placeholder="url" id="name" />
        <label for="floatingInput">닉네임</label>
      </div>
 
      <div class="form-floating">
        <textarea
          class="form-control"
          placeholder="Leave a comment here"
          id="comment"
          style="height: 100px"
        ></textarea>
        <label for="floatingTextarea2">응원댓글</label>
      </div>
 
      <button onclick="save_comment()" type="button" class="btn btn-dark" >
        댓글 남기기
      </button>
    </div>

 

 

2.  GET 댓글 가져오기

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_guestbook = list(db.fan.find((), {'_id' : False}))
    return jsonify({'result': all_guestbook})
 <script>
     /* 닉네임, 댓글 DB에서 불러오기 */
      function show_comment() {
        fetch('/guestbook').then((res) => res.json()).then((data) => {
      let rows = data['result']
            $('#comment-list').empty()
            rows.forEach((gst) => {
                let name = gst["name"]
                let comment = gst["comment"]
               
                let temp_html = `<div class="card">
                                <div class="card-body">
                                <blockquote class="blockquote mb-0">
                                <p>${comment}</p>
                                <footer class="blockquote-footer">${name}</footer>
                                </blockquote>
                                </div>
                                </div>`
                $('#comment-list').append(temp_html)
            });
        })
      }
</script>
 
 <body>
 <div class="mycards" id="comment-list">
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
    </div>
<body>

 

 

 

 

 

  Point of Realization

  • 웹개발 종합반 5주차까지 끝나고 AWS에 파일 업로드까지 진행했다.
  • 따라가기에 급급했던것 같은데 닉네임, 댓글까지 DB에 저장되고 Refresh되어 바로 눈에 보이니까 신기하다..!
  • frontend, backend, db 연결까지 어떻게 동작하는지 궁금했는데 일단 한꺼풀 풀어본 느낌
  • 강의만 보며 이해할때에는 이게 왜 저기서 동작한다는 거지? 했는데 부끄럽지만 따라 써보면서 해보니 이해가 됐다.
  • 언젠가 이런 시절이 있었구나 돌아보려 남긴다.

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25  (0) 2023.03.25
TodayILearn 2023-03-24  (0) 2023.03.24
TodayILearn 2023-03-23  (0) 2023.03.24
TodayILeaun 2023-03-21  (0) 2023.03.21
TodayILearn 2023-03-20  (0) 2023.03.20

   POST방식으로 데이터를 저장하고, GET 방식으로 데이터 조회하기

    스파르타 코딩클럽 웹개발 종합반 4차 - 화성 땅 구매하기 구현

  • Client에서 POST방식으로 이름(name), 주소(address), 평수(size) 데이터를 받아 Server를 통해 DB에 저장하기 
  • 화면이 Refresh되면 GET 방식으로 DB에 저장 된 데이터 표현해주기

 

1.  New Project 생성 후 POST 방식으로 API를 만들고 사용하기

  1) '2.mars' 폴더 생성
  2) VS Code > 확장으로 이동하여 python 설치
      사전에 python git-bash, python 3.8.6.exe 설치 필요!
  3) 2.mars 폴더에 app.py 파일 생성하기
  4) 새 터미널 추가 > 'python -m venv venv' + Enter
  5) 인터프리터 : 3.8.6(venv':venv) 선택하기
  6) 기존 터미널 종료 후 새 터미널 열어서 (venv)가 나오는지 확인하기
  7) 라이브러리 설치
     ① pip install pymongo : DB 연결(저장/한개 찾기/바꾸기/지우기)
     ② pip install requests 
     ③ pip install flask

  8) API를 만들고 사용하기
    Client에서 저장한 '이름(name)', '주소(adress)', '평수(size)' 저장하기 (Creat → POST방식)
     ① 데이터 명세
        - 요청정보 : URL = /mars
        - 요청방식 : POST(데이터 생성 방식)
        - Client가 fetch를 통해  데이터를 주고, Server가 flask를 통해 → client에게 mesage를 보냄

 

     ② Client와 Server 연결 확인하기

       ▼ Server Code - app.py 

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.mars.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

 - /mars를 통해 POST 방식으로 데이터를 보낸다.
 - name, address, size를 name_re, address_re, size_re 변수에 담고 이것을 doc 딕셔너리에 저장 > mars DB에 저장한다.

   insert_one() 메서드

이것은 MongoDB의 컬렉션 또는 데이터베이스 내에 단일 항목을 삽입 할 수있는 방법입니다. 컬렉션이 없는 경우 이 메서드는 새 컬렉션을 만들고 이 컬렉션에 데이터를 삽입합니다. 사전을 컬렉션에 삽입하려는 문서의 각 필드 이름과 값을 포함하는 매개 변수로 사용합니다.
이 메서드는 삽입된 문서의 ID를 보유하는 "_id" 필드가 있는 "~pymongo.results.InsertOneResult" 클래스의 인스턴스를 반환합니다. 문서에 "_id"필드가 지정되지 않은 경우 MongoDB는 "_id"필드를 추가하고 삽입하기 전에 문서에 고유 한 개체 ID를 할당합니다.

 [참고링크] 파이썬 몽고DB – insert_one 쿼리
 [참고링크] Pymongo에서 insert(), insertOne() 및 insertMany()의 차이점

       ▼ Client Code - index.html

    <script>
        fetch('/mars', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }
    </script>

        - Client가 fetch를 통해  데이터를 주고, Server가 flask를 통해 → client에게 mesage를 보냄
        - window.location.reload();를 통해 화면 새로고침

     

     ③ Server 만들기(DB연결)
        - pymongo import 한다. 

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')
db = client.dbspart

 

   ④ Client 만들기
      - input의 값을 가지고 오기
      - name, address, size 정보를 FormData에 넣고 보내준다.

 
function save_order() {
        let name = $("#name").val();
        let address = $("#address").val();
        let size = $("#size").val();

        let formData = new FormData();
        formData.append("name_give", name);
        formData.append("address_give", address);
        formData.append("size_give", size);

        fetch('/mars', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }

 

 

2.  

 

 

 

  Point of Realization

 

  • localhost:5000을 입력했는데, 열리지 않았다. 
  • 뭐지.. 뭘 잘못한거지 당황했는데, 완성 코드와 전체 코드를 다 비교해봐도 전혀 다른게 없었다.
  • TemplateNotFoud를 검색했더니 나와 같은 사람들이 엄청 많은 것 같다 ㅎㅎ

 

  • 오타를 조심하자.. 지나간 자리도 다시 잘 보자 ㅎㅎ
저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25  (0) 2023.03.25
TodayILearn 2023-03-24  (0) 2023.03.24
TodayILearn 2023-03-23  (0) 2023.03.24
TodayILearn 2023-03-22  (0) 2023.03.23
TodayILearn 2023-03-20  (0) 2023.03.20

   Frontend와 Backend 연결하기

    스파르타 코딩클럽 웹개발 종합반 4차 - Flask로 본격 API 만들기

  • GET : 통상적으로 데이터를 조회(Read)할 때 사용한다.
  • POST : 통상적으로 데이터 생성(Creat), 수정(Update), 삭제(Delete) 할 때 사용한다.

 

1. GET 방식으로 Client에서 데이터 받기

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

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


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


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

 ① GET으로 데이터를 요청하기위해 render_template 뒤에  request , jsonify 를 붙인다.

 ② @app.route('/test', methods=['GET'])

     GET 요청으로 /test라는 창구로 들어온다.

 ③ request.args.get('title_give') 가져온 것을 title_receive 변수에 넣는다.

 ④ 그리고 개발자가 알 수 있게 print(title_receive) 하자.

 ⑤ return jsonify({'result':'success', 'msg': '이 요청은 GET!'})  결과는 success, masage는 '이 요청은 GET!'하자

 

index.html
    <script>
        function hey() {
            fetch("/test").then(res => res.json()).then(data => {
                console.log(data)
            })
        }

    </script>

fetch를 통해 데이터가 들어오는 것을 확인해보자.

 ① "/test"로 받아서 data를 console에 찍자.

 

 

localhost:5000으로 이동해서 버튼을 눌러보자.

버튼을 누르면 object가 생성되고 그 안에 python에서 return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) 결과가 console 창에 찍히게 되는 것이다.

 

 

 

2.   POST 방식으로 Client에서 데이터 받기 

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

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


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


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

 ① 버튼을 누르면 hey() 함수가 실행되면서 formData에 쌓인다.

 ② formData 데이터는 POST형식으로 담아 "/test"에 보낸다

 ③ fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {

                console.log(data)

 ④ app.py의 'title_give' 데이터 꾸러미를 보내면

 ⑤ title_receive = request.form['title_give']

   'title_give'는 '블랙펜서가 되고,

 ⑥ 'title_give' 는 title_receive니까 print(title_receive) 하면 '블랙펜서'가 파이썬 터미널에 뜬다.

 ⑦ 그리고 다 끝났으니까 return jsonify({'result':'success', 'msg': '이 요청은 POST!'}) 처리한다. 
 ⑧ 이후에 'result':'success', 'msg': '이 요청은 POST!' 가 data 에 담기고 console.log(data) 처리를 한다.

index.html
    <script>
        function hey() {
            let formData = new FormData();
            formData.append("title_give", "블랙팬서");

            fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
                console.log(data)
            })
        }

    </script>

 

  Point of Realization

  Flask 설치부터 GET, POST 방식으로 Frontend와 Backend의 데이터 흐름에 대해 배웠다.
  Frontend와 Backend로 데이터가 흘러가는 방식이 생소해 여러번 강의를 돌려서 들었는데, 그래도 헷갈리는 부분이 존재한다.

  전체 4주차 강의를 모두 듣고 여러번 반복해서 이해가 필요할 것 같다.

 

  무엇보다 개발을 배워보고싶었던 궁극적인 목표인 Frontend에서 데이터를 받아서 Backend에 어떻게 쌓이는지? 에 대한

  궁금증이 한꺼풀 벗겨지는 것 같아서 흥미롭다. 

  

  Backend에 쌓인 데이터가 DB에 처리되는 것 까지 얼른 배워야 겠다 : )

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25  (0) 2023.03.25
TodayILearn 2023-03-24  (0) 2023.03.24
TodayILearn 2023-03-23  (0) 2023.03.24
TodayILearn 2023-03-22  (0) 2023.03.23
TodayILeaun 2023-03-21  (0) 2023.03.21

+ Recent posts

티스토리툴바