티스토리 뷰

sparta 웹개발 종합반 개발일지

Sparta 웹개발 종합반 5주차 1~10강

나아눙 2022. 6. 2. 12:07

01. 5주차 설치

Filezilla 설치하기

다운로드: https://filezilla-project.org/download.php

 

Download FileZilla Client for Windows (64bit x86)

Download FileZilla Client for Windows (64bit x86) The latest stable version of FileZilla Client is 3.60.1 Please select the file appropriate for your platform below. Please select your edition of FileZilla Client FileZilla FileZilla with manual FileZilla P

filezilla-project.org

가비아 가입하기 & 도메인 구입하기

접속하기 & 가입하기: https://www.gabia.com

 

웹을 넘어 클라우드로. 가비아

그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브

www.gabia.com

02. 5주차 오늘 배울 것

만들어진 프로젝트를 우리가 클라우드 환경이라고 하는 가상의 컴퓨터를 사서 그쪽에다가 우리가 만든 코드를 올려놓고  

남들이 볼수있게 열어두는 작업

03. [무비스타] - 프로젝트 세팅

flask 폴더구조 만들기

static,template,app.py

 

라이브러리 설치

flask,dbmongo,bs4,requests

 

04. [무비스타] - DB 만들기(데이터 쌓기)

API를 설계하고 만드는 것에 집중할 수 있게,

1) 사용할 데이터를 웹 스크래핑해서,

2) 데이터베이스에 저장하는 코드를 미리 작성

 

init_db.py

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbsparta


# DB에 저장할 영화인들의 출처 url을 가져옵니다.
def get_urls():
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get('https://movie.naver.com/movie/sdb/rank/rpeople.nhn', headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    trs = soup.select('#old_content > table > tbody > tr')

    urls = []
    for tr in trs:
        a = tr.select_one('td.title > a')
        if a is not None:
            base_url = 'https://movie.naver.com/'
            url = base_url + a['href']
            urls.append(url)

    return urls


# 출처 url로부터 영화인들의 사진, 이름, 최근작 정보를 가져오고 mystar 콜렉션에 저장합니다.
def insert_star(url):
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    name = soup.select_one('#content > div.article > div.mv_info_area > div.mv_info.character > h3 > a').text
    img_url = soup.select_one('#content > div.article > div.mv_info_area > div.poster > img')['src']
    recent_work = soup.select_one(
        '#content > div.article > div.mv_info_area > div.mv_info.character > dl > dd > a:nth-child(1)').text

    doc = {
        'name': name,
        'img_url': img_url,
        'recent': recent_work,
        'url': url,
        'like': 0
    }

    db.mystar.insert_one(doc)
    print('완료!', name)


# 기존 mystar 콜렉션을 삭제하고, 출처 url들을 가져온 후, 크롤링하여 DB에 저장합니다.
def insert_all():
    db.mystar.drop()  # mystar 콜렉션을 모두 지워줍니다.
    urls = get_urls()
    for url in urls:
        insert_star(url)


### 실행하기
insert_all()

 

init_db.py 파일을 실행하면 내 mongoDB의 mystar collection에 영화인 정보가 저장

 

05. [무비스타] - 뼈대 준비하기

index.html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>마이 페이보릿 무비스타 | 프론트-백엔드 연결 마지막 예제!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"/>
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <style>
            .center {
                text-align: center;
            }

            .star-list {
                width: 500px;
                margin: 20px auto 0 auto;
            }

            .star-name {
                display: inline-block;
            }

            .star-name:hover {
                text-decoration: underline;
            }

            .card {
                margin-bottom: 15px;
            }
        </style>
        <script>
            $(document).ready(function () {
                showStar();
            });

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

            function likeStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }

            function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }

        </script>
    </head>
    <body>
        <section class="hero is-warning">
            <div class="hero-body">
                <div class="container center">
                    <h1 class="title">
                        마이 페이보릿 무비스타😆
                    </h1>
                    <h2 class="subtitle">
                        순위를 매겨봅시다
                    </h2>
                </div>
            </div>
        </section>
        <div class="star-list" id="star-box">
            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img
                                        src="https://search.pstatic.net/common/?src=https%3A%2F%2Fssl.pstatic.net%2Fsstatic%2Fpeople%2Fportrait%2F201807%2F20180731143610623-6213324.jpg&type=u120_150&quality=95"
                                        alt="Placeholder image"
                                />
                            </figure>
                        </div>
                        <div class="media-content">
                            <a href="#" target="_blank" class="star-name title is-4">김다미 (좋아요: 3)</a>
                            <p class="subtitle is-6">안녕, 나의 소울메이트(가제)</p>
                        </div>
                    </div>
                </div>
                <footer class="card-footer">
                    <a href="#" onclick="likeStar('김다미')" class="card-footer-item has-text-info">
                        위로!
                        <span class="icon">
              <i class="fas fa-thumbs-up"></i>
            </span>
                    </a>
                    <a href="#" onclick="deleteStar('김다미')" class="card-footer-item has-text-danger">
                        삭제
                        <span class="icon">
              <i class="fas fa-ban"></i>
            </span>
                    </a>
                </footer>
            </div>
        </div>
    </body>
</html>

 

app.py

from pymongo import MongoClient

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

client = MongoClient('localhost', 27017)
db = client.dbsparta


# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('index.html')


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


@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})


@app.route('/api/delete', methods=['POST'])
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})


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

06. [무비스타] - GET연습(보여주기)

우리가 만들 기능은 영화인 정보를 카드로 보여주기(Read)

화면에 어떤 데이터가 어떤 부분에 보여지는지 영화인 카드 화면 코드를 보며 분석

  • 영화인 이름
  • 영화인 이미지 : 이미지 src 속성
  • 좋아요 개수
  • 최근 작품 내용이 들어가는 부분

<!-- 다음 코드가 하나의 카드를 이루는 div 입니다. -->
<div class="card">
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img
            src="https://search.pstatic.net/common/?src=https%3A%2F%2Fssl.pstatic.net%2Fsstatic%2Fpeople%2Fportrait%2F201807%2F20180731143610623-6213324.jpg&type=u120_150&quality=95"
            alt="Placeholder image"
          />
        </figure>
      </div>
      <div class="media-content">
        <a href="https://movie.naver.com//movie/bi/pi/basic.nhn?st=1&code=397373" target="_blank" class="star-name title is-4">김다미 (좋아요: 3)</a>
        <p class="subtitle is-6">안녕, 나의 소울메이트(가제)</p>
      </div>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" onclick="likeStar('김다미')" class="card-footer-item has-text-info">
      위로!
      <span class="icon">
        <i class="fas fa-thumbs-up"></i>
      </span>
    </a>
    <a href="#" onclick="deleteStar('김다미')" class="card-footer-item has-text-danger">
      삭제
      <span class="icon">
        <i class="fas fa-ban"></i>
      </span>
    </a>
  </footer>
</div>

 

API 만들고 사용하기 - 영화인 조회 API (Read → GET)

만들 API

1. 조회(Read) 기능: 영화인 정보 전체를 조회

2. 좋아요(Update) 기능: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3. 삭제(Delete) 기능: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

 

만들 API 정보 정리 

A. 요청 정보 - 요청 URL= /api/list , 요청 방식 = GET - 요청 데이터 : 없음

B. 서버가 제공할 기능 : 데이터베이스에 영화인 정보를 조회(Read)하고, 영화인 정보를 응답 데이터로 보냄

C. 응답 데이터 : (JSON 형식) 'stars_list'= 영화인 정보 리스트

 

1. 클라이언트와 서버 연결 확인하기

 

app.py

@app.route('/api/list', methods=['GET'])
def show_stars():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'list 연결되었습니다!'})

 

index.html

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

 

새로고침했을 때, 'list 연결되었습니다.' 라는 메시지가 뜨면 동작

 

2. 서버부터 만들기

pymongo sort w3school 검색

API 는 약속

위에 미리 설계해 둔 API 정보

영화인 정보 전체를 조회하기 위해 서버가 받을 정보는 없다.

조건없이 모든 정보를 보여줌

따라서 서버 로직은 다음 단계로 구성

1. mystar 목록 전체를 검색합니다. ID는 제외하고 like 가 많은 순으로 정렬

2. 성공하면 success 메시지와 함께 stars_list 목록을 클라이언트에 전달

 

@app.route('/api/list', methods=['GET'])
def show_stars():
    movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
    return jsonify({'movie_stars': movie_star})

 

3. 클라이언트 만들기

API 는 약속

API를 사용할 클라이언트를 만들기

영화인 정보 전체를 조회하기 위해 서버가 받을 정보는 없다. 조건없이 모든 정보를 보여줌

따라서 클라이언트 로직은 다음 단계로 구성

1. #star_box의 내부 html 태그를 모두 삭제

2. 서버에 1) GET 방식으로, 2) /api/list 라는 주소로 stars_list를 요청

3. 서버가 돌려준 stars_list를 stars라는 변수에 저장

4. for 문을 활용하여 stars 배열의 요소를 차례대로 조회

5. stars[i] 요소의 name, url, img_url, recent, like 키 값을 활용하여 값 조회

6. 영화인 카드 코드 만들어 #star-box에 붙이기

 

function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['movie_stars']
                        for (let i = 0; i < mystars.length; i++) {
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']

                            let temp_html = `<div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img_url}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                                                            <p class="subtitle is-6">${recent}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <footer class="card-footer">
                                                    <a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
                                                        위로!
                                                        <span class="icon">
                                              <i class="fas fa-thumbs-up"></i>
                                            </span>
                                                    </a>
                                                    <a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
                                                        삭제
                                                        <span class="icon">
                                              <i class="fas fa-ban"></i>
                                            </span>
                                                    </a>
                                                </footer>
                                            </div>`
                            $('#star-box').append(temp_html)
                        }
                    }
                });
            }

 

동작 테스트 화면을 새로고침 했을 때 영화인 정보가 조회되는지 확인

07. [무비스타] - POST연습(좋아요+1)

API 만들고 사용하기 - 좋아요 API (Update → POST)

 

만들 API

1) 조회: 영화인 정보 전체를 조회

2) 좋아요: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3) 삭제: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

 

만들 API 정보 정리

 A. 요청 정보 - 요청 URL= /api/like , 요청 방식 = POST - 요청 데이터 : 영화인 이름(name_give)

B. 서버가 제공할 기능 : 영화인 이름(요청 데이터)과 일치하는 영화인 정보의 좋아요 수를 한 개 증가시켜 데이터베이스에 업데이트하고(Update), 성공했다고 응답 메세지를 보냄

C. 응답 데이터 : (JSON 형식) 'msg'='좋아요 완료!'

 

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

app.py

@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})

 

index.html

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

 

동작 테스트 '위로' 버튼을 눌렀을 때, 'like 연결되었습니다!' 내용의 alert창이 뜨면 제대로 동작

 

2) 서버부터 만들기

API 는 약속

위에 미리 설계해 둔 API 정보를 보고 만들기

영화인 카드의 좋아요 수를 증가시키기 위해 서버가 클라이언트에게 전달받아야하는 정보

- 영화인의 이름 (name_give) 따라서 서버 로직은 다음 단계로 구성

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣습니다.

2. mystar 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.

3. star의 like 에 1을 더해준 new_like 변수를 만듭니다.

4. mystar 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경합니다.

 

@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']

    target_star = db.mystar.find_one({'name': name_receive})
    current_like = target_star['like']

    new_like = current_like + 1

    db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})

    return jsonify({'msg': '좋아요 완료!'})

 

3) 클라이언트 만들기

API 는 약속

. API를 사용할 클라이언트를 만들기

좋아요 수를 증가시키기 위해 클라이언트가 전달할 정보

. - 영화인의 이름 (name_give) 따라서 클라이언트 로직은 다음 단계로 구성

1. 서버에 1) POST 방식으로,

2) /api/like 라는 url에,

3) name_give라는 이름으로 name을 전달

(참고) POST 방식이므로 data: {'name_give': name} 사용 2. '좋아요 완료!' alert 창을 띄움

3. 변경된 정보를 반영하기 위해 새로고침

 

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {name_give:name},
        success: function (response) {
            alert(response['msg']);
            window.location.reload()
        }
    });
}

 

동작 테스트 '위로' 버튼을 눌렀을 때 좋아요 수가 증가하고 영화인 카드의 순위가 변경되는지 확인

 

08. [무비스타] - POST연습(삭제하기)

API 만들고 사용하기 - 카드 삭제 API (Delete → POST)

만들 API

1. 조회(Read) 기능: 영화인 정보 전체를 조회

2. 좋아요(Update) 기능: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3. 삭제(Delete) 기능: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

 

정리하면, 만들 API 정보

A. 요청 정보 - 요청 URL= /api/delete , 요청 방식 = POST - 요청 데이터 : 영화인 이름(name_give)

B. 서버가 제공할 기능 : 영화인 이름(요청 데이터)와 일치하는 영화인 정보를 데이터베이스에서 삭제(Delete)하고, 성공했다고 응답 메세지를 보냄

C. 응답 데이터 : (JSON 형식) 'msg'='삭제 완료!'

 

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

app.py

@app.route('/api/delete', methods=['POST']) #/api/delete로 들어와있다.
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})

 

index.html

function deleteStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/delete',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']); #잘연결되었으면 alert으로 뜬다.
        }
    });
}

동작 테스트

'삭제' 버튼을 눌렀을 때, 'delete 연결되었습니다!' alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것

 

삭제 누르자 delete 연결되었습니다 뜸

 

2) 서버부터 만들기

API 는 약속

위에 미리 설계해 둔 API 정보

영화인 카드를 삭제하기 위해 필요한 정보

. - 영화인의 이름 (name_give) 따라서 서버 로직은 다음 단계로 구성

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣기

2. mystar 에서 delete_one으로 name이 name_receive와 일치하는 star를 제거

3. 성공하면 success 메시지를 반환

 

@app.route('/api/delete', methods=['POST'])
def delete_star():
    name_receive = request.form['name_give'] #이름을 받음
    db.mystar.delete_one({'name': name_receive}) #받은 이름을 삭제
    return jsonify({'msg': '삭제 완료!'})

 

3) 클라이언트 만들기

API 는 약속

 API를 사용할 클라이언트를 만들기

영화인 카드를 삭제하기 위해 필요한 정보

- 영화인의 이름 (name_give) 따라서 클라이언트 로직은 다음 단계로 구성

1. 서버에 1) POST 방식으로,  2) /api/delete 라는 url에, 3) name_give라는 이름으로 name을 전달

(참고) POST 방식이므로 data: {'name_give': name}

2. '삭제 완료! 안녕!' alert창 띄우기

3. 변경된 정보를 반영하기 위해 새로고침

 

function deleteStar(name) {
      $.ajax({
          type: 'POST',
          url: '/api/delete',
          data: {name_give:name}, #name_give이라는 이름을 가져가고 방금 받은 name이라는 변수 가져감
          success: function (response) {
              alert(response['msg']);
              window.location.reload() #새로고침
          }
      });
  }

삭제누른 후 msg 삭제완료가 뜬후 새로고침하여 삭제됨

 

4) 완성 확인하기

app.py

from pymongo import MongoClient

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

client = MongoClient('localhost', 27017)
db = client.dbsparta


# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('index.html')


# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
    movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
    return jsonify({'movie_stars': movie_star})


@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']

    target_star = db.mystar.find_one({'name': name_receive})
    current_like = target_star['like']

    new_like = current_like + 1

    db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})

    return jsonify({'msg': '좋아요 완료!'})


@app.route('/api/delete', methods=['POST'])
def delete_star():
    name_receive = request.form['name_give']
    db.mystar.delete_one({'name': name_receive})
    return jsonify({'msg': '삭제 완료!'})


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

index.html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>마이 페이보릿 무비스타 | 프론트-백엔드 연결 마지막 예제!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"/>
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <style>
            .center {
                text-align: center;
            }

            .star-list {
                width: 500px;
                margin: 20px auto 0 auto;
            }

            .star-name {
                display: inline-block;
            }

            .star-name:hover {
                text-decoration: underline;
            }

            .card {
                margin-bottom: 15px;
            }
        </style>
        <script>
            $(document).ready(function () {
                showStar();
            });

            function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['movie_stars']
                        for (let i = 0; i < mystars.length; i++) {
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']

                            let temp_html = `<div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img_url}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                                                            <p class="subtitle is-6">${recent}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <footer class="card-footer">
                                                    <a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
                                                        위로!
                                                        <span class="icon">
                                              <i class="fas fa-thumbs-up"></i>
                                            </span>
                                                    </a>
                                                    <a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
                                                        삭제
                                                        <span class="icon">
                                              <i class="fas fa-ban"></i>
                                            </span>
                                                    </a>
                                                </footer>
                                            </div>`
                            $('#star-box').append(temp_html)
                        }
                    }
                });
            }

            function likeStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {name_give:name},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload()
                    }
                });
            }

            function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {name_give:name},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload()
                    }
                });
            }

        </script>
    </head>
    <body>
        <section class="hero is-warning">
            <div class="hero-body">
                <div class="container center">
                    <h1 class="title">
                        마이 페이보릿 무비스타😆
                    </h1>
                    <h2 class="subtitle">
                        순위를 매겨봅시다
                    </h2>
                </div>
            </div>
        </section>
        <div class="star-list" id="star-box">
        </div>
    </body>
</html>

09. 내 프로젝트를 서버에 올리기

서버의 역할

클라이언트 주로 브라우저가 요청을 하면 브라우저한테 그릴것을 주거나 뒤에서 Ajax로 요청을 하면 

Ajax에 답변으로 데이터를 주거나 뭔가를 주는 행위

이 가운데에서 클라이언트들의 요청을 받는 행위를 한다.

 

  • 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행
  • 언제나 요청에 응답하려면,
  1. 컴퓨터가 항상 켜져있고 프로그램이 실행
  2. 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근.
  • 서버는 그냥 컴퓨터 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있어요.
  • 우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 겁니다.
  • IP 주소와 포트

사실 우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있음

우리가 아는 URL 은 우리가 알아보기 쉽게 하는 등의 이유로 IP 주소를 알파벳으로 바꾼것이다.

이렇게 변환해주는 시스템을 DNS

  • IP 주소(줄여서 IP)
  • : 컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호 서버는 하나의 주소를 가지고 있다.
  • 포트(port)
  • : 하나의 IP에 여러 포트가 있다. 하나의 포트에 하나의 프로그램을 실행

10. AWS 서버 구매하기

컴퓨터 한대한대를 인스터스라고 한다.

우리가 인스턴스를 사는 것이다.

 

리눅스 os(operating system) 운영체제

오픈소스(무료)

리눅스 그중에서 Ubuntu를 사용 

 

EC2 서버 구매하기

 

AWS EC2 서버 사기

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 

 

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2

 

ap-northeast-2.console.aws.amazon.com

Amazon machine image(AMI)

Ubuntu server 18.04 LTS(HVN) 택

 

인스턴스 유형

t2.micro

 

키페어 #우리가 컴퓨터를 샀고 원격 접속해가지고 그거를 조작하고 거기다 뭐 깔고 실행하고 한다. 그때 그 컴퓨터에 원격접속하러 들어갈수 있는 키이다.

spartakeypair

 

EC2 서버 종료하는 방법 (1년 후 자동결제 방지!)

1년동안 지금 만든 t2.micro 사이즈에 인스턴스에 대해서 하나 계속 킬수 있다.

수업이 끝나면 인스턴스 종료를 누르면 끝이난다.

인스턴스 중지는 컴퓨터를 잠깐 꺼두는거고 

재부팅은 컴퓨터 재부팅하는 거고 

인스턴스 종료는 컴퓨터를 다시 반납하는 것이다.

 

이 컴퓨터에 우리가 원격접속한다.

git.bash 실행

ssh -i 키페어 ubuntu@퍼블릭주소 입력

 

unbuntu@ip~ 나오면 원격접속 해있는것이다.

 

[가장 많이 쓰는 몇 가지 명령어]

리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나옴

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

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

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

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

'sparta 웹개발 종합반 개발일지' 카테고리의 다른 글

Sparta 웹개발 종합반 5주차 11~19강 +숙제  (0) 2022.06.03
Sparta 웹개발 종합반 4주차 10~16강 +숙제  (0) 2022.06.02
Sparta 웹개발 종합반 4주차 1~9강  (0) 2022.05.22
Sparta 웹개발 종합반 3주차 10~15강+숙제  (0) 2022.05.21
Sparta 웹개발 종합반 3주차 1~9강  (0) 2022.05.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함