app.py

@app.route('/board', methods=['GET'])
def boarding():
    # 1. DB 모든 값 가져오기
    reviews = list(db.reviews.find({}, {'_id': 0}))
    # 2. 성공여부 및 상품목록 보여주기
    return jsonify({'result': 'success', 'reviews': reviews})

desc.html

        function showBoard() {
            $.ajax({
                type: "GET",
                url: "/board",
                data: {},
                success: function (response) {
                    if (response["result"] == "success") {
                        let reviews = response["reviews"];
                        for (let i = 0; i < reviews.length; i++) {
                            makeCard(reviews[i]["nickname"], reviews[i]["comment"]);
                        }
                    } else {
                        alert("상품을 받아오지 못했습니다.")
                    }
                }
            })
        }

        function makeCard(nickname, comment) {
            let tempHtml = `<tr>
                    <td>${nickname}</td>
                    <td>${comment}</td>
                </tr>`
            $("#board").append(tempHtml);
        }

얘도 밖으로 튕겨지네 .......

app.py

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient

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


## HTML을 주는 부분
@app.route('/')
def home():
    return render_template('desc.html')

## API 역할을 하는 부분
@app.route('/board', methods=['POST'])
def boardsaving():
    # # (1) nickname_receive로 닉네임 가져오기
    nickname_receive = request.form['nickname_give']
    # (2) comment_receive로 후기 가져오기
    comment_receive = request.form['comment_give']

    # DB에 삽입 할 자료
    review = {
        'nickname': nickname_receive,
        'comment': comment_receive,
    }
    # reviews에 review 저장하기
    db.reviews.insert_one(review)

    # 성공 여부 확인 및 메시지 출력
    return jsonify({'result': 'success', 'msg': '후기 등록 완료'})


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

desc.html

function makeReview() {
            // 1. 게시판에 입력된 닉네임 후기 가져오기
            let nickname = $("#nickname").val();
            let comment = $("#comment").val();

            // 2. 닉네임 후기  중 하나라도 입력안한게 있으면 alert 보여주기
            if (nickname == "") {
                alert("닉네임을 입력해주세요.");
                $("#nickname").focus();
                return;
            } else if (comment == "") {
                alert("후기를 입력해주세요.");
                $("#comment").focus();
                return;
            }

            // 3. POST /product 에 저장(create)요청

            $.ajax({
                type: "POST",
                url: "/board",
                data: {nickname_give: nickname, comment_give: comment},
                success: function (response) { // 성공하면
                    if (response["result"] == "success") {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                }
            })
        }

app.py

@app.route('/product', methods=['GET'])
def listing():
    # 1. DB 모든 값 가져오기 
    goods = list(db.goods.find({}, {'_id':0}))
    # 2. 성공여부 및 상품목록 보여주기
    return jsonify({'result': 'success', 'goods': goods})

cosmetic.html

function showProduct() {
            $.ajax({
                type: "GET",
                url: "/product",
                data: {},
                success: function (response) {
                    if (response["result"] == "success") {
                        let goods = response["goods"];
                        for (let i = 0; i < goods.length; i++) {
                            makeCard(goods[i]["img"], goods[i]["name"], goods[i]["price"]);
                        }
                    } else {
                        alert("상품을 받아오지 못했습니다.")
                    }
                }
            })
        }

        function makeCard(img, name, price) {
            let tempHtml = `${img}
                <h4>${name}</h4>
                <p><strong>${price}</strong></p>`;
            $("#cards-box").append(tempHtml);
        }

1차 오류: GET이 화면에 나오기는 하는데... CSS가 전혀 안먹히는 채로 나오는 것 같다.

@app.route('/product', methods=['POST'])
def saving():

    # (1) img_receive로 추천하는 제품 이미지 가져오기
        img_receive = request.form['product_img']

        # (2) name_receive로 추천하는 제품 이름 가져오기
        name_receive = request.form['product_name']

        # (3) price_receive로 추천하는 제품 이름 가져오기
        price_receive = request.form['product_price']

    # DB에 삽입 할 자료
        item={
            'img' : img_receive,
            'name' : name_receive,
            'price' : price_receive
        }
        # items에 item 저장하기
        db.items.insert_one(item)

        #성공 여부 확인 및 메시지 출력

    return jsonify({'result': 'success', 'msg':'추천 등록 완료'})

불안하게 return 부분에서 빨간 밑줄이 쭈욱 그어졌다...

오류 파티(app.py 실행 중)

1차 오류 : IndentationError: unindent does not match any outer indentation level =>들여쓰기 오류로 자동 줄 정렬 사용

2차 오류 SyntaxError: 'return' outside function => 자동 줄 맞춤 했더니 return이 밖으로 나가버림.. 탭키로 다시 들여쓰기

해결!!

오류 파티(cosmetic.html 실행 중)

1차 오류 : ~ 작성할 때도 아 이 부분이 이게 맞나 싶었던 부분이 결국 오류가 나는구나.

진행하려고 했던 화면 위 화면에서 추천하기 버튼을 클릭 시 입력 내용이 DB에 저장. input 박스에 저장하려는 id->name, price 주었음. 하면서 이건 어떡하지 라고 했던 부분이 이미지 업로드 부분인데 여기서 이걸 서버에 어떻게 저장하나 어디에 id를 줘야하나 하다가 똑같이 input 박스에 id->img를 주고 서버에 저장하려 했는데 결국 오류가 남....

<div class="file_input">
    <input type="text" readonly="readonly" id="img">
       <label> 이미지 업로드
       <input type="file" onchange="javascript:document.getElementById('file_route').value=this.value">
                </label>
            </div>

이미지 업로드 input 박스에 변화가 없음

그래도 한 공간이 빌 시 출력 되도록 하는 alert이 출력되는거로 아 ... 완전 망하진 않았구나 살짝 위안을 받음.

2차 오류: (↓HTML 부분)

파일 input에 id를 모두 img 로 변경했지만.. 정상이라면 '추천 등록 완료' 라는 메시지가 떠야하지만 아무런 반응이 없다...

console 창에 뜨는 오류

Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)

해결. give_ 부분들을 모두 실수를 했었다.

app.py

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

@app.route('/product', methods=['POST'])
def saving():
    return jsonify({'result': 'success', 'msg':'POST 연결'})

cosmetic.html 과 연결 할 예정

(해당 페이지는 상품 리스트를 보여주며, modal 기능의 버튼을 이용하여 상품 추천하기를 POST 할 예정입니다.)

잘 연결 됐는지 확인하기 위해서 성공 시 'POST 연결' alert 출력

cosmetic.html

function postProduct() {
   $.ajax({
          type: "POST",
          url: "/product",
          data: {},
          success: function (response) { // 성공하면
                if (response["result"] == "success") {
                  alert(response["msg"]);
                    }
                }
            })
        }

=> 연결 실패... console 창을 보니 Uncaught ReferenceError: $ is not defined 오류가 뜸

제이쿼리 js 로딩 실패로 생각됨...

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>

head 부분 상단에 위 코드 작성 후 정상적으로 연결 완료 확인!!!

(웹개발 3주차 강의자료 참고)

파이참 실행 시 requests 패키지 추가 (크롤링)

(pyCharm 실행 - File - Setting - project : - Pycharm Interpreter 내 + requests 검색)

import requests #py파일 상단 입력

파이참 실행 시 bs4 패키지 추가

bs4 설치 => beautifulsoup4 약자 (pyCharm 실행 - File - Setting - project : - Pycharm Interpreter 내 + bs4 검색)

후 파일썬 파일 생성 후 아래 크롤링 기본셋팅

import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
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/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

#############################
코딩 시작

파이참 실행 시 pymongo 패키지 추가 (DB저장)

(pyCharm 실행 - File - Setting - project : - Pycharm Interpreter 내 + pymongo 검색)

from pymongo import MongoClient           # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
client = MongoClient('localhost', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta                      # 'dbsparta'라는 이름의 db를 만듭니다.

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

파이참 실행 시 flask 패키지 추가 (DB저장)

(pyCharm 실행 - File - Setting - project : - Pycharm Interpreter 내 + flask 검색)

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

## URL 별로 함수명이 같거나,
## route('/') 등의 주h소가 같으면 안됩니다.

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

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

Flask 기본 파일 구조 (1) static -> 디렉토리 (이미지, CSS 파일) (2) templates -> 디렉토리 (html 파일) (3) app.py -> 파이썬 파일

11월 19일

제품 리스트 업데이트 완료

<div class="card">
    <!-- 각 카드 헤더 -->
    <div class="card-header-one">
        <div class="card-header-text">
            추천
        </div>
    </div>
    <!-- 각 카드 바디 헤더 -->
    <div class="card-body-header">

        <h2>록시땅 핸드크림</h2>
        <p class="card-body-hashtag">#겨울 #기본템 #메이커</p>
        <p>
            선물 중의 제일 기본 아이템!
            핸드크림이라고 모두 같은 핸드크림이아니다.
            '록시땅' 이름 하나로 주는 사람 체면도 살리고
            받는 사람도 훈훈해지는 마법의 핸드크림
        </p>
        <a class="btn btn-outline-danger" href="birthdaymore.html" role="button">자세히 보기</a>
    </div>
</div>

카드 한 개의 html 내용

    /* card 공통 */
    .card-header-text {
        background-color: #fa2414 ;
        color: #FFF ;
        font-weight: bold ;
        text-align: center ;
        float: right;
        margin: 15px 15px 15px 15px;
        border-radius: 50%;
        font-weight: bold;
        padding: 10px 10px 10px 10px;
        line-height: 30px;
    }

    .card-body-header{
        margin: 10px 20px 0px 20px;
    }

    .card-body-hashtag {
        color: #2478ff;
    }

    .btn btn-outline-danger{
    margin: 0 auto;
    }

    .card {
        height: 400px;
        width: 350px;
        border-radius: 15px;
        display: inline-block;
        margin-top: 30px;
        margin-left: 30px;
        margin-bottom: 30px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 
        rgba(0, 0, 0, 0.19);
        overflow: hidden;
        /* float: left; */
        }

     /* card1 */
    .card-header-one{
        width: 100%;
        height: 300px;
        background-image: url("img/handcream.jpg");
        background-size: 100% 280px;
        background-repeat: no-repeat;
    }

    .card:hover .card-header-one  {
        opacity: 0.8;
        height: 100px;
    }

overflow: hidden; 사용으로 내용을 숨겼다가 마우스를 올렸을 때 공개하는 거로 작성 각 제품 자세히 보기 클릭 시 해당 기능을 삭제하고 hight를 늘려서 전체 내용을 보이게 할 생각

11월 19일 문제점 : 화면 비율 조정 시 그대로 작아지는게 아니라 이미지들의 가운데 정렬 위치가 변경이 됨

간단 후기 작성 및 게시판 만들기

자세히 보기 클릭 시 보여 줄 간단 후기 작성 화면과 후기 게시판 목록 float: left; 으로 옆으로 착착! 보여줄 예정!

최종 프론트엔드 화면

11월 13일

처음 화면 구상을 했을 때는 홈 메뉴를 생각하지 않았다. 그런데 처음 화면들어가서 바로 생일선물 화면을 보여주기엔 다른 메뉴들을 너무 차별하는 것 같아서 홈화면을 보여준 후 메뉴들을 클릭하도록 하는게 낫겠다라는 생각을 했다.

그래서 생각한게, '홈 화면에서 선물 관련 이미지들을 슬라이드쇼로 보여주자.' 그래서 부트스트랩에서 이미지 슬라이드 관련 소스를 찾아봤다.

부트스트랩_Carousel

위 페이지 내 'With indicators'를 사용하기로 결정.

<!--그림슬라이드 출처 : 부트스트랩-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="img/birthday.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/xmas.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/gift.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

이렇게 작성 img src="..." 부분은 이미지 주소 복사 시 화면이 너무 깨져서, 따로 이미지 경로를 만들고 이미지 저장해서 붙여넣었다.

일러스트 무료저작권 사이트

11월 13일 문제점 : 캐러셀 이미지의 세로 높이가 너무 길어 이미지를 한눈에 보기 힘들다. 11월 16일 해결

11월 16일

캐러셀 이미지 슬라이드 높이를 조정해보기로 했다. 스타일 태그 내에서 아래 코드를 추가.

     <style>
     /* 캐러셀(이미지슬라이드) 이미지 크기변경 */
      .carousel-inner{
        width:auto;
        height:790px; /* 이미지 높이 변경 */
      }
      .carousel-item{
        width: auto;
        height:100%;
      }
      .d-block {
        display:block;
        width: auto;
        height: 100%;
      }
      </style>

이 정도 크기로 만족!

서브화면 카드 이미지 만들기

11월 13일

부트스트랩 내 카드 소스를 활용해보기로 했다.

11월 13일 문제점 : 부트스트랩 기본 카드 정렬이 마음에 안 든다.

11월 17일

부트스트랩으로 작성한 카드의 모양이 마음에 안들어서 직접 만들기로했다. (폭풍 구글링...)

html 코드

<div class="card">
        <!-- 각 카드 헤더 -->
        <div class="card-header">
            <div class="card-header-text">
                HOT
            </div>
        </div>
        <!--  카드 바디 헤더 -->
        <div class="card-body-header">
            <img src="">
            <h1>록시땅 핸드크림</h1>
            <p class="card-body-hashtag">#겨울 #기본템 #메이커</p>
            <p>
                선물 중의 제일 기본 아이템!
                핸드크림이라고 모두 같은 핸드크림이아니다.
                '록시땅' 이름 하나로 주는 사람 체면도 살리고
                받는 사람도 훈훈해지는 마법의 핸드크림
            </p>
            <button type="button" class="btn btn-outline-danger">자세히 보기</button>
        </div>
    </div>

위 카드를 총 10 개 정도 보이게 할 생각

CSS코드

<style>
.cards {
              background: #f6f0fa;
              /* border: 1px solid #ffffff; */
              padding: 10px;
              margin: 0 auto;
              overflow: hidden; /* float 속성인식 */

            }

        .card {
            height: 400px;
            width: 350px;
            border-radius: 15px;
            display: inline;
            margin-top: 30px;
            margin-left: 30px;
            margin-bottom: 30px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            overflow: hidden;
            float: left;
            }

        .card-header{
            width: 100%;
            height: 270px;
        }

        .card:hover .card-header  {
            opacity: 0.8;
            height: 100px;
        }

        .card-header-text {
            background-color: #fa2414 ;
            color: #FFF ;
            font-weight: bold ;
            text-align: center ;
            float: right;
            margin: 15px 15px 15px 15px;
            border-radius: 50%;
            font-weight: bold;
            padding: 10px 10px 10px 10px;
            line-height: 30px;
        }

        .card-body-header{
            margin: 10px 20px 0px 20px;
        }


        .card-body-hashtag {
            color: #2478ff;
        }

        .btn btn-outline-danger{
        margin: 0 auto;
        }

    </style>

11월 17일 문제점 : card 내 이미지 위치 실패 / cards의 가운데 정렬 실패 11월 18일 card 이미지 위치 수정 11월 19일 cards margin-left 설정으로 수정

메인페이지 만들어보기

11월 12일

웹 개발 3주차를 완강하고, 4주차의 서버를 들어가기 전에 메인페이지를 만들어보기로 했다. 처음에 만들었던 화면 친구한테 보여주자마자 까였다. 옥색은 뭐냐, Present 밑에 한글은 왜 썼냐. 하필 그 때 친구가 인터넷쇼핑몰을 구경 중이라 더 처참하게 비교당했다. 친구가 이렇게 디자인하라고 보내줬던 사진...... 열심히 따라했지만 결과 .. 열심히 구글링하고 부트스트랩보면서 수정해나가도록 하자.

<!DOCTYPE html>
<html lang="en">
<head> <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>Present,Present</title>

스파르타 온라인 웹개발 1주차 7강 부트스트랩 시작 템플릿 부트스트랩 컴포넌트 링크

   <style>
/*상단 연노란색 P 부분*/
  .header_point{
            color:#fff29a;
            font-size: 60px;
             }
/*상단 연회색 present, present 부분*/
  .header {
              padding: 5px;
              text-align: center;
              background: #d7d0e3;
              color: #a7a7a7;
              font-size: 30px;
            }
  </style>
</head>
<body>

<!--상단-->
<div class="header">
    <h1 class="header_point">P</h1>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p>Present, Present</p>
</div>

nav 만들기

위처럼 세로로 쫘르륵 만들어진다.

ul {
          list-style-type: none;
          margin: 0;
          padding:0;
          overflow: hidden;
          background-color: #ffffff;
          text-align: center;
        }

        li {
          display: inline-block; /*카테고리 가로정렬 */
        }

        li a {
          display: block;
          color: #2f2a38;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
        }

        li a:hover:not(.active) {
          background-color: #e7e4ec; /* 메뉴에 마우스 올렸을 때 색상 변화 */
          text-decoration:none; /* 메뉴에 마우스 올렸을 때 링크 밑줄 없애기*/
          color:#8b79ae; /* 메뉴에 마우스 올렸을 때 글자 색 */
        }


       li a:hover{
          background-color: b1a4c9; /* 메뉴에 마우스 올렸을 때 색상 변화 */
          text-decoration:none; /* 메뉴에 마우스 올렸을 때 링크 밑줄 없애기*/
          color:#8b79ae; /* 메뉴에 마우스 올렸을 때 글자 색 */
        }

        .active {
          background-color: #b1a4c9; /*활성화(보고있는페이지) 메뉴 색 */
          text-decoration:none; /* 메뉴에 마우스 올렸을 때 링크 밑줄 없애기*/
        }

이렇게 스타일을 수정하면, 마우스 올렸을 때, 클릭했을 때 메뉴 모양 바뀌고 가로로 변경 가능하다.

평소 친구들 생일 선물 고를 때 '카카오톡 - 선물하기' 기능을 자주 쓴다. 사용하는 이유는 2만원대 / 3만원대 / 4만원대 / 5만원대 금액 별로 나눠져있으며, 정말 선물로 괜찮은 아이템들이 알아서 목록이 있어, 선택하여 구매만 하면 되기 때문이다. 하지만, '카카오톡 선물하기' 기능이 모바일에서만 지원이 가능하며, 최저가가 아니라는 단점이 있다. 그래서 가끔 선물하기에서 괜찮은 선물용 목록만 보고, 네이버에서 최저가를 다시 검색할 때가 있다.(내 기준) 프로젝트 겸사 해서, 아이템을 클릭하면 자동으로 최저가 사이트로 이동하게 되는 게 편할 것 같아서..... 해보기로 했다.

처음엔 카테고리를 2만원대 / 3만원대 / 4만원대 / 5만원대 식으로 정리할까 하다가, 생각해보니 최저가를 목적으로 하게 되면, 위 금액이 매번 달라질 수 있을 것 같다는 생각이 들었다.

그래서, 선물 용도에 따라 구분만 하기로 변경 (선물 카테고리는 고정 / 카테고리 내 리스트도 내 기준을 괜찮은 선물을 골라 고정.)

(+) 생각해보니 그럼 금액과 아이템 이름을 같이 쓰는게 의미없다. 내가 만드는 목적은 괜찮은 선물용 목록과 해당 아이템의 당일 최저가를 알고 싶은 것 뿐이니까 상관없을까 ...?

2. 화면 구상 :

메인화면

넣고 싶은 기능

메인화면 아이템 자세히 보기 클릭 시 -> 추천 이유 전체 표시와 리뷰 작성 공간 표시

각 카테고리 메인화면 오른쪽에 사람들 추천 비추천 표시 랭킹을 보여주고 싶음.

3. 개발해야 하는 기능들 :

(1) 메인 화면 html/css 설계

(2) API 설계

상품 API 설계

리스팅 API - 저장 카드 읽기 (Read) (1) 요청 방식 = GET 요청 데이터 없음 (2) 서버가 제공 할 기능

• DB에 저장돼있는 상품명, 이미지, 추천 이유, URL 정보 가져오기

포스팅 API - 카드 생성 (Create) (1) 요청방식 = POST 요청 데이터 : URL, 추천 이유 (2) 서버가 제공 할 기능

• URL의 meta 태그 정보를 바탕으로 상품명, 이미지 스크래핑
• 상품명, 이미지, URL, 추천 이유 정보를 모두 DB 저장

게시판 API 설계

리스팅 API - 저장 게시글 읽기 (Read) (1) 요청 방식 = GET 요청 데이터 없음 (2) 서버가 제공 할 기능

• DB에 저장돼있는 넘버, 간단 후기, 닉네임 가져오기

포스팅 API - 게시글 생성 (Create) (1) 요청방식 = POST 요청 데이터 : 닉네임, 간단 후기 (2) 서버가 제공 할 기능

• 닉네임, 간단 후기 정보를 모두 DB 저장

4. 프로젝트에 필요한 데이터 소스 :

(1) 카카오 선물하기 선물 리스트 (2) 네이버에서 검색 후 뜨는 쇼핑 최저가 리스트 순