오늘 드디어 사전스터디의 토이프로젝트를 기획하는 미팅을 가졌습니다. 각자 아이디어를 공유하고 무슨 기능을 넣을까를 고민하는 시간이었습니다. 결론부터 말하자면, 결론이 안나서 각자 아이디어를 구체화해서 내일 오전에 공유하기로 했습니다. 큰 틀은 만들었는데 얼마나 디테일하게 많이 구현해야 할지는 못정했습니다. 와이어프레임을 만드는 Basalmiq이라는 툴을 알게 되어서 내일 오전 미팅 대비하여 간단히 만들어 보았습니다. 

 

웹개발 종합반 내용을 바탕으로 한 아이디어 입니다.

 

1. 토이프로젝트: 맛집 공유하자🙆‍♀️

  • 한줄 요약: 맛집 정보와 후기를 한눈에!
  • 상세설명: 맛집 정보를 등록하고 후기를 쓸 수 있고 가고 싶은 곳을 저장하고 갔다 온 곳을 체크할 수 있는 웹사이트

2. 페이지 별 와이어프레임

로그인 페이지

  • 로그인 페이지
  • SNS (카카오톡, 네이버) 로그인 가능하다면 구현?

 

메인 페이지: 맛집 공유하기

  • 스파르타피디아처럼 네이버 지도에서 장소 url 입력, 맛 별점 선택, 분위기 별점 선택, 상황 선택, 코멘트 남기기
  • .append(temp_html) 를 사용해 밑에 붙이기
  • '내 맛집에 추가하기'로 '내 맛집 리스트'에 추가하기

 

상세페이지

  • 식당 정보 상세페이지
  • 최초 등록자의 후기가 나옴
  • 아래에 추가 후기를 이미지와 함께 등록할 수 있음

 

내 맛집 리스트

  • 내가 추가한 맛집들을 볼 수 있는 페이지
  • 리뷰 보기를 통해 상세 페이지로 이동
  • 식당정보: 식당 이름, 음식종류, 위치(ㅇㅇ시 ㅇㅇ구) 
  • 체크박스에 갔다온 곳 표시하기

 

 

 

가능할지는 모르겠지만 제가 할 수 있다고 생각하는 범위의 프로젝트를 구상해봤습니다. 여기서 웹개발종합반에서 안배운거라면 로그인 페이지 만들기와 이미지 업로드, 개인만 볼 수 있는 페이지 만들기 정도가 있습니다.

 

네이버 지도에서 식당 정보를 크롤링 하는 건 Beautifulsoup을 사용해서 해봤는데 가능했습니다. 

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 4주차 Flask meta tags  (0) 2022.10.20
2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB  (0) 2022.10.19
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON  (0) 2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18

개발자가 된 핏짜 로고(?)를 만들어보았습니다.

Real estate developer가 되려다가 web developer가 되버렸네요.

돈 많이 벌면 부동산 개발도 언젠간 할 수 있겠죠.

 

유튜브도 내일쯤 업로드 해야겠어요. 

오늘까지 2회차 수강 끝내는 게 목표입니다 :)

 

개발자가 된 핏짜

Flask

  • Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음.
  • 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있음
  • html 파일을 가져와서 실행 : render_template
from flask import Flask, render_template
app = Flask(__name__)

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

meta 태그

  • <head></head> 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그

 

 

1회차일때 안되던 '화성땅 공동구매'를 성공했습니다.

처음과 마찬가지로 코드는 정상인데

KeyError가 떴습니다.

 

도대체 뭘 잘못친걸까 하고 검색을 해봤는데 답이 안나와서

새로 고침 몇 번 하니까 그냥 되더라고요.

 

껐다가 키면 된다가 여기서도 통하네요.

 

 

 

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

사전스터디 토이프로젝트 기획하기 맛집 공유 웹사이트  (0) 2022.10.26
2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB  (0) 2022.10.19
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON  (0) 2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18

Python

함수

def sum(a,b):
    print('더하자!')
    return a+b
result = sum(1,2)
print(result)

조건문

def is_adult(age):
    if age >20:
        print('성인입니다')
    else:
        print('청소년입니다')

is_adult(13)

 

반복문

  • 파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태
fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

count = 0
for fruit in fruits:
    if fruit == '사과':
        count +=1

print(count)
people = [{'name': 'bob', 'age': 20},
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},
          {'name': 'smith', 'age': 17},
          {'name': 'ben', 'age': 27}]

for person in people:
    if person['age']>20:
        print(person['name'])

파이썬 패키지(package)

  • Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위
  • 패키지의 묶음을 라이브러리
  • 패키지 설치 = 외부 라이브러리 설치
  • 패키지 불러오는 법 import 
import requests # requests 라이브러리 설치 필요

 

가상환경 (virtual environment)

  • 프로젝트별로 패키지들을 담을 공구함
  • 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경
  • venv 폴더임

 

beutifulsoup4

  • bs4 패키지 설치
  • 해당 url html을 가져올수 있음
  • headers
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.naver?sel=pnt&date=20210829',headers=headers)

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

 

Database

  • RDBMS(SQL):
  • 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사
  • 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려움
  • 그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이
  • ex) MS-SQL, My-SQL 등

 

  • No-SQL: 딕셔너리 형태로 데이터를 저장해두는 DB
  • 데이터 하나 하나 마다 같은 값들을 가질 필요가 없음
  • 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있음 ex) MongoDB

MongoBD

  • 접속 패키지: pymongo, dnspython
from pymongo import MongoClient
import certifi

ca = certifi.where();

client = MongoClient(mongoDB URL넣기)
db = client.dbsparta
# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

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

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

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

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

 

기타

  • 앞에서 두 글자만 끊기! text[0:2]
  • 여백 지우기 -> strip()
저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

사전스터디 토이프로젝트 기획하기 맛집 공유 웹사이트  (0) 2022.10.26
2회차 웹개발 종합반 4주차 Flask meta tags  (0) 2022.10.20
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON  (0) 2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18

jQuery를 이용해 Javascript로 HTML을 제어하고,

Ajax를 이용해 다시 서버에 데이터를 요청하고 받아봅니다.

 

JQuery 

  • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것; 라이브러리
  • jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드
  • 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것
  • 쓰기 전에 "import" -> 아래 코드 참조
  • <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></head>
  • JavaScript : document.getElementById("element").style.display = "none";
  • = JQuery: $('#element').hide();
  • css는 class 사용하듯이 JQuery는 id를 사용함

 

서버-클라이언트 통신 이해하기

  • Jsonview 설치
  • GET → 통상적으로! 데이터 조회(Read)를 요청할 때
  • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  • GET 방식으로 데이터를 전달하는 방법
  • ? : 여기서부터 전달할 데이터가 작성된다는 의미
  • & : 전달할 데이터가 더 있다는 뜻
  • 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
  • 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다! q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
  • 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속


Ajax

  • Ajax는 jQuery를 import한 페이지에서만 동작 가능
  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
  • 로딩 후 호출하기:
  • $(document).ready(function(){ alert('다 로딩됐다!') });

 

이번 숙제는 1분도 안걸렸습니다.

 

확실히 한 번 더 듣는 보람이 있습니다.

 

 

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 4주차 Flask meta tags  (0) 2022.10.20
2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB  (0) 2022.10.19
2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14

2회차에서는 노트 필기를 좀 하면서 개념정리를 하려고 합니다.

1회차에서는 복붙하면서 따라가기에 급급했다면 2회차에는 정리를 할 수 있는 여유가 생겼습니다.

배운 것들을 tistory 블로그에도 적용하면서 써보도록 하겠습니다. 

css

Cascading Style Sheet

  • background-color: green;
  • width: 300px;
  • height: 200px;
  • color: white;
  • text-align: center;
  • background-image: url("");
  • background-position: center;
  • background-size: cover;
  • border-radius: 10px; 
  • padding (들여쓰기)
  • padding-top: 40px;
  • margin (여백)
  • margin: auto; (상하좌우 최대한 밀기)

 

구글 폰트 가져오기

  • https://fonts.google.com/?subset=korean
  • font 고르기 -> select this style -> 세번째 링크 복사 -> <title> 밑에 붙여넣기
  • CSS rules to specify families 복사 -> <style> 밑에 *{붙여넣기}

주석 달기

  • command + /
  • 1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
  • 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
  • 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요.
  • 즉, 개발자 본인 또는 동료를 위해 붙여두는 것!

부트스트랩 (css 꾸러미)

 

 

가운데로 위치하기

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

마우스 올렸을 때 스타일 변경 hover

.mytitle > button:hover {
  border: 2px solid white;
}

 

이미지 어둡게 하기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("이미지url넣기")

JavaScript

  • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
  • <script></script>
  • 검사 -> Console 
  • let 으로 변수를 선언
  • .push. -> 추가
  • .length -> 리스트의 길이 구하기
  • '나눗셈의나머지'를 구하고 싶은 경우 let a = 20 let b = 7 a % b = 6
  • .split('나누는기준문자') -> 특정문자로 문자열 나누기

 

1주차 숙제

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
  <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
  <style>
    *{font-family: 'Poor Story', cursive;}
    .mytitle{
      color: white;
      width: 100%;
      height: 250px;

      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
      background-position: center;
      background-size: cover;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
      padding: 20px;
    }
    .box > button {
      margin-top: 10px;
    }
    .card {
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
    }
  </style>
</head>

<body>
    <div class="mytitle">
      <h1>선셋 팬명록</h1>
    </div>
    <div class="box">
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
      </div>
      <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
      </div>
     <button type="button" class="btn btn-dark">응원 남기기</button>

    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
</body>

</html>
저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB  (0) 2022.10.19
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup  (1) 2022.10.12

어제 사실은 드디어 완강했습니다.

카카오사태로 인해 티스토리 블로그도 먹통이 되었다가 어제 저녁부터 정상화가 된 것 같습니다.

 

5주차에 배운 것은

  • 서버 연결
  • AWS 연결
  • 인바운드 규칙 설정
  • 도메인 연결
  • nohup 사용해서 컴퓨터가 꺼져도 계속 서버 열어놓기
  • 터미널 사용 -> Filezilla -> aws 서버 컴퓨터 접속
  • og image, title, description 설정하기 / 카카오 캐쉬 지우는 법

중간에 여러 실수가 있었지만 최종적으로는 잘 해냈고 원하는 결과물을 만들었습니다.

2회독할때는 좀 더 능숙하게 할 수 있을 것 같습니다.

두번 들으라는 이유를 알 것 같아요. 

 

아래는 제가 5주차에 서버 연결까지 완료해서 어디에서나 접속할 수 있는 Dwayne Johnson 팬명록입니다.

친구들한테 자랑하라고 하셔서 친구들이 남긴 메세지도 볼 수 있습니다.

 

 

Dwayne Johnson 팬명록

응원 한마디 남기고 가세요!

pizzalover.shop

 

다시 처음 1강부터 들으러 갑니다.

토요일에 본격 사전스터디 미팅이 있는데 그 때까지 2회독 완료가 목표입니다

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON  (0) 2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup  (1) 2022.10.12
비전공자 개발자 도전기 2주차 웹개발  (0) 2022.10.09

일단 이해는 안되서

주말에 다시 파야겠습니다.

 

강의 들으면서 따라할 때는 하는데

숙제가 어렵네요.

분명히 답지랑 다른게 없어보이는데

왜 안될까요?

 

그래서 복붙했더니 또 됩니다.

이해가 안됩니다.

 

왜 2~3번 들으라고 하는 지 알거 같아요.

 

아래는 이번주차 숙제입니다.

팬명록에 기능추가하고 데이터를 서버에 저장합니다.

서버는 잘했는데 html에서 막히다니 저는 프론트는 안될건가봐요..?

 

일단 5주차까지 얼른 듣고 다시 복습해야겠습니다...

요즘 stanford 유튜브에서 하는 computer science 105 를 듣고 있습니다.

이진법이랑 픽셀이랑 아날로그를 디지털화 하는 법까지 여러가지 내용이 흥미롭습니다.

app.py

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

from pymongo import MongoClient
import certifi

ca = certifi.where();

client = MongoClient('mongodb+srv://test:sparta@cluster0.pdkl25u.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

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

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name': name_receive,
        'comment': comment_receive
    }

    db.homework.insert_one(doc)

    return jsonify({'msg':'응원 완료!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({},{'_id':False}))
    return jsonify({'comments':comment_list})


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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>초미니홈피 - 팬명록</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://funshop1.akamaized.net/abroad/034/17285/UA%20True%20Wireless%20Flash%20X%20Project%20Rock%20Edition%201_0.jpg');
            background-position: center;
            background-size: contain;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function(){
            set_temp()
            show_comment()
        });
        function set_temp(){
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }
        function save_comment(){
            let name = $('#name').val()
            let comment = $('#comment').val()
            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {'name_give':name, 'comment_give':comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }
       function show_comment() {
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['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>
</head>
<body>
    <div class="mypic">
        <h1>Dwayne Johnson 팬명록</h1>
        <p>현재기온: <span id="temp">36</span>도</p>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <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>
    <div class="mycards" id="comment-list">

    </div>
</body>
</html>

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup  (1) 2022.10.12
비전공자 개발자 도전기 2주차 웹개발  (0) 2022.10.09
비전공자 개발자 도전기 1주차 웹개발  (1) 2022.10.08

3주차 웹개발 강의는 

Python과 MongoDB를 다루는 연습을 했습니다.

Python으로 코드를 쳐서 MongoDB에 데이타를 업데이트했습니다.

 

처음에 MongoDB에 업데이트가 안되고 계속 오류가 났었습니다.

[SSL: CERTIFICATE_VERIFY_FAILED]

 

이런 오류가 났었는데

열심히 구글링한 결과

 

certifi라는 패키지를 설치하고

from pymongo import MongoClient
import certifi

ca = certifi.where();

client = MongoClient('내MongoDB주소', tlsCAFile=ca)
db = client.dbsparta

위의 코드를 삽입하니 실행이 되었습니다.

 

뭐가 틀렸는지 눈빠지게 보다가 선생님과 다른 코드는 없는 걸로 확인하고 뒤늦게 구글링해서 오류의 원인을 찾아냈습니다.

 

모니터 받힘대와 무선 키보드를 구매해야할 것 같습니다.

일단 새로운 맥북은 핑핑 잘돌아갑니다. 

 

249만원 짜리 맥북을 위한 케이스도 사야겠습니다. 

벌써 매몰비용만 600만원이 넘어갑니다.

거의 국내대학 한학기 등록금.

 

아직까지 수업은 흥미롭고 재미있습니다.

 

 

아래는 3주차 과제로 진행한 지니 뮤직 차트 크롤링하는 코드입니다.

 

카피 하고 싶은 부분에 대고

검사 > copy > copy selector 

 

soup.select('')를 이용해서 크롤링을 해옵니다.

import requests
from bs4 import BeautifulSoup


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://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

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

#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number
#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.title.ellipsis
#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis

music = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for genie in music:
    rank = genie.select_one('td.number').text[0:2].strip()
    title = genie.select_one('td.info > a.title.ellipsis').text.strip()
    artist = genie.select_one('td.info > a.artist.ellipsis').text.strip()
    print(rank, title, artist)

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14
비전공자 개발자 도전기 2주차 웹개발  (0) 2022.10.09
비전공자 개발자 도전기 1주차 웹개발  (1) 2022.10.08

말은 2주차이지만

공부한지 2일차입니다.

 

웹개발 종합반 강의를 듣고 있는데 5주짜리 강의지만 1주당 강의 길이는 1시간 정도 입니다.

11월에 부트캠프가 본격적으로 시작하기 전에 웹개발 종합반 강의를 3회 반복 수강할 예정입니다.

 

2주차 강의에서는 

JQuery

Ajax를 배웠습니다.

 

가끔 왜 안되지 하고 보면 점 하나를 놓쳤거나 오타가 있었습니다.

좀 더 꼼꼼하게 봐야할 것 같습니다.

그래도 아직까지는 수업 따라가기가 어렵지는 않습니다.

 

아래는 이번 주차 숙제입니다.

1주차에 만들었던 팬명록에 현재 기온을 실시간으로 업데이트 할 수 있는 기능을 추가했습니다.

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

  <style>
     * {
            font-family: 'Gowun Dodum', sans-serif;
        }
    .mytitle {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://funshop1.akamaized.net/abroad/034/17285/UA%20True%20Wireless%20Flash%20X%20Project%20Rock%20Edition%201_0.jpg');
            background-position: center;
            background-size: contain;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }
    .mypost > button {
      margin-top: 20px;
    }
    .card {
      width: 95%;
      max-width: 500px;
      margin: 10px auto 0px auto;
      padding: 20px;
      box-shadow: 0px 0px 3px 0px gray;
    }
  </style>
  <script>
    $(document).ready(function () {
      $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
         let temp = response['temp']
          $('#temp').text(temp)

        }
      })
    });

  </script>
</head>

<body>
    <div class="mytitle">
      <h1>Dwayne Johnson 팬명록</h1>
      <p>현재기온 : <span id="temp">00.0</span>도</p>
    </div>
    <div class="mypost">
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
      </div>
      <div class="form-floating">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                          style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
      </div>
      <button type="button" class="btn btn-dark">응원 남기기</button>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>The rock rocks!</p>
          <footer class="blockquote-footer">이지농
        </blockquote>
      </div>
    </div>


<div class="card">
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>The rock rocks!</p>
      <footer class="blockquote-footer">이지농
    </blockquote>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>The rock rocks!</p>
      <footer class="blockquote-footer">이지농
    </blockquote>
  </div>
</div>


</body>

</html>

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup  (1) 2022.10.12
비전공자 개발자 도전기 1주차 웹개발  (1) 2022.10.08

온라인 부트캠프 사전 강의

1주차 과제를 끝냈습니다.

온라인을 할지 오프라인을 할지 고민이 많았는데

결국에는 온라인을 선택했고

맥북프로를 살질 맥북 에어를 살지 고민했는데

결국 맥북프로 14인치를 샀습니다.

 

확실히 2015년 버전 맥북에어보다는 프로그램로딩 속도도 그렇고 화질도 그렇고 음량도 굉장히 좋습니다.

단지 키보드 소리가 거슬리는데

키보드랑 모니터 받힘대랑 여러가지 살 아이템들이 많습니다.

 

어제랑 오늘 웹개발 종합반 1주차 강의를 들었고 아래는 강의 과제입니다.

간단하게 css와 html을 활용해서

팬명록이라는 것을 만들었습니다.

 

부스트스랩이라는 사이트에서 복붙을해와서 꾸미기를 했습니다.

 

html은 뼈대

css는 꾸미기라는 개념을 익혔습니다.

 

아직까지는 쉽고 따라갈만한데

얼마나 더 어려워질지 궁금합니다.

 

Javascript 함수를 맛보기를 보여주셨는데

엑셀 함수를 알아서 괜찮습니다.

 

확실히 이과생들이 유리한 과목 같습니다.

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

  <style>
     * {
            font-family: 'Gowun Dodum', sans-serif;
        }
    .mytitle {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://funshop1.akamaized.net/abroad/034/17285/UA%20True%20Wireless%20Flash%20X%20Project%20Rock%20Edition%201_0.jpg');
            background-position: center;
            background-size: contain;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }
    .mypost > button {
      margin-top: 20px;
    }
    .card {
      width: 95%;
      max-width: 500px;
      margin: 10px auto 0px auto;
      padding: 20px;
      box-shadow: 0px 0px 3px 0px gray;
    }
  </style>
</head>

<body>
<div class="mytitle">
  <h1>Dwayne Johnson 팬명록</h1>
</div>
<div class="mypost">
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">닉네임</label>
  </div>
  <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
    <label for="floatingTextarea2">응원댓글</label>
  </div>
  <button type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="card">
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>The rock rocks!</p>
      <footer class="blockquote-footer">이지농
    </blockquote>
  </div>
</div>


<div class="card">
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>The rock rocks!</p>
      <footer class="blockquote-footer">이지농
    </blockquote>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>The rock rocks!</p>
      <footer class="blockquote-footer">이지농
    </blockquote>
  </div>
</div>


</body>

</html>

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 1주차 css html JavaScript  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup  (1) 2022.10.12
비전공자 개발자 도전기 2주차 웹개발  (0) 2022.10.09

+ Recent posts

티스토리툴바