Loading [MathJax]/jax/output/CommonHTML/jax.js

HTML

 

태그

<div>구역</div>
<p>문단</p>
<h1>제목</h1>
<h2>소제목</h2>
<h3>h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아진다. </h3>
<a href="https://spartacodingclub.kr/"> 하이퍼링크 </a>    >>> href는 속성
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/logo_teamsparta.png" width="300"/>   >>> src는 속성
<input type="text">
<button>버튼입니다.</button>

 

선택자의 역할을 하는 class 와 id

1) 단 하나만 존재하는 요소를 표현하기 위한 방법 → id

2) 비슷한 종류의 요소를 묶어놓는 방법 → class

 

CSS

1) class로 이름표 달아주기

<h1 class="maintitle">제목</h1>

2) id로 이름표 달아주기

<h1 id="title">제목</h1>

3) 꾸며주기

<style></style> 부분에 이 부분을 넣어주면 된다.

.mytitle {
	color: blue;
}

4) 꾸며주기 (id로 잡힌 부분은 앞에 #을 붙여준다.)

#myuniquetitle {
	color: blue;
}

 

 

Github

1. 회원가입

2. 아래 빨간색 네모칸으로 되어 있는 New 버튼 클릭

3. Repository name에 자신이 원하는 이름 적고 밑에 Create repository 클릭

4. 파일을 새로 생성하거나 업로드하면 된다. (나는 만든 파일이 있어서 업로드 하겠다.)

5. choose your files 를 선택해서 자신의 파일을 옮겨주고 스크롤바를 내리면 commit changes 초록색 버튼이 있는데 그걸 클릭해주면 된다.

여기서 주의해야 할 점!!

html 파일을 불러올 때는 반드시 index.html로 가져와서 업로드해야한다.

 

6. 그리고 settings 클릭 

7. 그리고 pages 클릭

8. none을 클릭하고 main으로 바꾸고 save 클릭한다. 이렇게 하면 자신이 만든 웹페이지가 만들어지고 있다는 표시가 뜨는데, 조금만 기다려보자.

9. 조금만 기다렸다가 F5를 누르면 저렇게 내 웹페이지가 생성되었다고 뜬다.

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (주석, 파일분리, 부트스트랩)  (0) 2023.03.07
웹개발 1주차 복습 (폰트 적용)  (0) 2023.03.05
웹개발 1주차 복습 (CSS)  (1) 2023.03.05
웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (2)  (0) 2023.02.13

주석

> ctrl(또는 command) + / (슬래시)

> 언제 사용하나

 1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 사용

 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용 / 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다.

 

파일분리

> <style> ~ </style> 부분이 너무 길어지면, 보기가 어렵다.

> 지금은 그다지 길지는 않지만 나중에 필요할 거 같으니 알아두자.

빨간색 네모칸이 style 부분인데 이 부분을 잘라낸다.

그리고 

파일을 하나 만들건데, 이름은 style.css로 한다.

style.css에 잘라낸 파일을 넣는다. 그렇게 잘했다면 

위와 같이 나온다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

위와 같은 코드를 넣는다.

이렇게 하면 결과는??? 

저번에 했던 거와 똑같이 나온다.

 

부트스트랩 

> 예쁜 CSS를 미리 모아둔 것

> https://getbootstrap.com/docs/5.0/components/buttons/

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

이 사이트에 들어가면 잘 만들어진 CSS 요소들을 사용할 수 있다. 

어떻게 하느냐 하면

클릭해서 들어가면 

이런 화면이 뜬다. 

여기서 저 이모티콘이 있는 곳을 보면 Examples 라고 되어있고 밑에 

<button type="button" class="btn btn-primary">Primary</button>

이런 형식으로 되어있는 코드들이 보일 것이다.

이 코드를 <body></body> 부분에 넣으면

이런 식으로 되는데

여기서 위에서 첫 번째 빨간색 네모칸이 바로 남이 만들어놓은 CSS코드를 가지고 오는 부분이다.

그리고 두 번째 빨간색 네모칸이 앞서 말한 코드이다.

그래서 결과물을 보면 

이런 식으로 나온다. 

 

'웹 > 웹개발 종합반' 카테고리의 다른 글

html css 기본 + github 사용  (2) 2023.03.09
웹개발 1주차 복습 (폰트 적용)  (0) 2023.03.05
웹개발 1주차 복습 (CSS)  (1) 2023.03.05
웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (2)  (0) 2023.02.13

구글 폰트 적용하는 방법

 

이건 앞에서 했던 거에 비하면 굉장히 쉽다.

 

구글 폰트에 들어가서 

자신이 마음에 드는 폰트를 하나 고른다.

그리고 

그림에서 보는 바와 같이 

1번을 클릭하고 2번을 복사해서 html의 style 부분에다가 붙여준다.

하지만 이것만 한다고 해서 웹사이트의 폰트가 바뀌지 않는다. 

Use on the web 이라고 적혀있는 부분에서 스크롤바를 내리면 

동그라미 친 부분을 복사하고 

붙여주면 된다.

<!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">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gugi&family=Hahmlet:wght@400;500;600;700&family=Nanum+Brush+Script&display=swap');

        * {
            font-family: 'Gugi', cursive;
            font-family: 'Hahmlet', serif;
            font-family: 'Nanum Brush Script', cursive;
        }

        .mytitle {
            background-color: green;

            width: 300px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding: 30px 0px 0px 0px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }

        .wrap {
            width: 300px;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력하세요</h5>
        </div>
        <p>ID : <input type="text" /></p>
        <p>PW : <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

여기서 style 부분을 유심히 살펴보면 복붙하라고 한 부분이 보일거다.

근데 여기서 *{} 이렇게 돼있는 곳이 보일텐데

이건 폰트를 전체에 적용한다는 뜻이다.

그리고 코딩에서 *이 등장하면 모두 다 라는 뜻이니깐 참고하자.

 

그냥 부분 적용하고 싶으면 

*{} 대신 .mytitle{} 치고 {} 안에 *{}의 {} 안에 넣을려고 했던 걸 넣으면 된다.

말이 어렵다. 그냥 보자.

<!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">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gugi&family=Hahmlet:wght@400;500;600;700&family=Nanum+Brush+Script&display=swap');


        .mytitle {
            background-color: green;

            width: 300px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding: 30px 0px 0px 0px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;

            font-family: 'Gugi', cursive;
            font-family: 'Hahmlet', serif;
            font-family: 'Nanum Brush Script', cursive;
        }

        .wrap {
            width: 300px;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력하세요</h5>
        </div>
        <p>ID : <input type="text" /></p>
        <p>PW : <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

위의 사진과 아래 사진을 비교하면 확실히 차이가 난다.

'웹 > 웹개발 종합반' 카테고리의 다른 글

html css 기본 + github 사용  (2) 2023.03.09
웹개발 1주차 복습 (주석, 파일분리, 부트스트랩)  (0) 2023.03.07
웹개발 1주차 복습 (CSS)  (1) 2023.03.05
웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (2)  (0) 2023.02.13

HTML 부모-자식 구조 살펴보기 

> 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">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <button>나는 버튼 1</button>
        </div>
        <div>
            <button>나는 버튼 2</button>
        </div>
    </div>
</body>
</html>

여기서 복습! 

head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.

head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 걸 담는 것이다.

 

이렇게 해서 저 코드를 통해  open with live server 를 클릭해서 구현하면 

이런 식으로 나온다.

 

CSS의 기초

CSS는 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mytitle {

        }
        .mybtn {

        }
		.mytxt {

        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text"/></p>
    <p class="mytxt">PW: <input type="text"/></p>
    <button class="mybtn">로그인하기</button>
</body>
</html>

이 코드를 보면 head 부분에 style이 들어간 것이 보인다.

style 안에는 .my~~ 이런 식으로 적혀있는데 클래스로 내가 무엇을 바꿀 것인지 지정해주는 것이다.

밑에 body에 class로 어떻게 지정되어 있는지 보이는 데 이걸 head 부분에 가서 바꿔주는 것이다.

mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭 기억하자.

그래서 조금 꾸며보도록 하자. 그리고 박스는 div다!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mytitle {
            color: red;
            font-size: 40px;
        }
        .mybtn {
            font-size: 12px;
            color: white;
            background-color: green;
        }
		.mytxt {
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text"/></p>
    <p class="mytxt">PW: <input type="text"/></p>
    <button class="mybtn">로그인하기</button>
</body>
</html>

여기서 ; 이 표시는 필수.

이렇게 하면 아래와 같이 나온다.

 

CSS에 대해 더 알아보자.

margin, padding

> margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다.

> margin의 방향은 위 오른쪽 아래 왼쪽 즉, 시계방향이다.

 

text-align

> 텍스트의 정렬 방향

>  left : 왼쪽 정렬  / right : 오른쪽 정렬 / center: 중앙 정렬 / justify: 양쪽 정렬

<html>
<head>
<style>
	#box1 { text-align: right; }
	#box2 { text-align: left; }
	#box3 { text-align: center; }
</style>
</head>
<body>
	<div id="box1">오른쪽 정렬</div>
	<div id="box2">왼쪽 정렬</div>
	<div id="box3">중앙 정렬</div>
</body>
</html>

이렇게 해서 결과를 보면

 

border-radius

> 테두리를 둥글게 만드는 속성이다.

> 사용하는 방법은 크게 3가지로 볼 수 있다.

> 예 : boder-radius: 10px / 50% / 20px 0px 30px 10px 

 

10px 로 할 때 

사각형의 모서리들이 정갈하게 나있는 걸 확인할 수 있다.

 

50%로 할 때

원에 가까운 형태를 확인할 수 있다.

 

20px 0px 30px 10px 로 할 때(왼쪽-위 부터 시계 방향)

 

이렇게 해서 로그인 화면을 만들면

<!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">
    <title>Document</title>
    <style>
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding: 30px 0px 0px 0px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
        .mybtn {
            margin: 20px 20px 20px 20px;
        }

    </style>
</head>

<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력하세요</h5>
    </div>
    <p>ID : <input type="text" /></p>
    <p>PW : <input type="text" /></p>
    <button class="mybtn">로그인하기</button>
</body>

</html>

이렇게 나온다.

근데 저 로그인 화면을 웹페이지 중앙에 옮기고 싶다.

 

그럴려면 저 로그인 페이지를 포함한 요소들을 <div></div>로 감싸주고

.wrap {
            width: 300px;
            margin: 20px auto 0px auto;
        }

이런 식으로 코드를 짜주면 된다.

margin: 20px auto 0px auto;

위로는 20px 떨어트리고 오른쪽으로 쭉 밀어주고 밑으로는 띄울 필요없고 왼쪽으로 쭉밀어라 라는 뜻이다.

해서 결과물은 

참고로 이 모든 내용은 스파르타 코딩클럽에서 자세히 배울 수 있다.

복습도 스파르타 코딩클럽에서 하는 웹개발 종합반에서 배웠던 걸 기반으로 하고 있다. 

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (주석, 파일분리, 부트스트랩)  (0) 2023.03.07
웹개발 1주차 복습 (폰트 적용)  (0) 2023.03.05
웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (2)  (0) 2023.02.13
웹개발 4주차 (1)  (0) 2023.02.12

웹 브라우저 원리

 

브라우저는 서버에서 미리 준비해둔 걸 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할을 한다.

요청을 보내고 받은 HTML 파일을 그려주는 거.

 

우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려준다.

 

예 : https://naver.com/

> 여기서 naver.com이라는 이름의 서버에 있는 / 라는 곳에 요청을 보낸 거다.

> 네이버에서 요청을 보냈으니깐 그에 대한 대답으로 네이버 홈에 해당하는 HTML 파일을 준 거다.

 

그런데 항상 HTML 파일로 내려주는 건 또 아니다.

데이터만 내려줄 때가 더 많다. 

만약 우리가 영화 티켓을 예매하고 있는 상황에서 좌석이 실시간으로 매진 될 때마다 페이지가 새로고침되면 예약하기 어렵지 않을까? 그래서 데이터만 받아서 갈아끼우는 식으로 작동하게 함.

 

실제로 많은 웹서비스에서 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아끼워준다. 데이터만 내려올 경우 JSON 형식으로 받을 수 있다. (JSON은 나중에 배운다.)

 

 

HTML,CSS의 기본

 

HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드. 웹의 전반을 HTML을 통해서 작성할 수 있다. 

CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 꾸며주는 코드이다.

HTML 내 style 속성으로 꾸미기를 할 수 있긴 하지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었다. HTML 코드 내에 CSS 파일을 불러와서 적용한다. 

HTML은 뼈대, CSS는 꾸미기

 

html:5를 vs code의  ~.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">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

여기서 보면 head 부분과 body 부분이 보이는 데 

head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.

head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 걸 담는 것이다.

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

div는 구역

p는 문단

h1은 제목을 나타내느 태그

h2는 소제목

hr 태그는 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용한다. 

..

직접 보면서 하는게 낫겠다.

위의 사진과 코드 블럭을 비교하면 될 거 같다.

 

그런데 코드가 난잡하면 보기도 힘드니깐

Shift + Alt + F 로 정리해주면서 하자. (Windows 만 해당/ Mac은 Shift + Option + F)

 

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (폰트 적용)  (0) 2023.03.05
웹개발 1주차 복습 (CSS)  (1) 2023.03.05
웹개발 4주차 (2)  (0) 2023.02.13
웹개발 4주차 (1)  (0) 2023.02.12
웹개발 이거 다 끝나면  (1) 2023.02.10

순서 

1. 데이터 명세

2. 클라이언트와 서버 확인하기

3. 서버부터 만들기

4. 클라이언트 만들기

5. 완성 확인하기

 

여기서 서버 먼저 만드는 게 중요

 

이제 뭔가 이해가 된다

 

html 

function posting() {
            let url = $('#url').val()
            let comment = $('#comment').val()
            let star = $('#star').val()

            let formData = new FormData()
            formData.append('url_give', url)
            formData.append('comment_give', comment)
            formData.append('star_give', star)

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

프론트엔드에서 자료를 차곡차곡 모아서 백엔드(서버)로 보내줌.

어떻게??

위에 있는 함수를 가지고 설명하면 

변수들을 val로 문자열로 바꿔줌.

그 상태에서 데이터를 모아서 py로 보내줌.

 

py

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    star_receive = request.form['star_give']

    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_receive, headers=headers)

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

    ogimage = soup.select_one('meta[property="og:image"]')['content']
    ogtitle = soup.select_one('meta[property="og:title"]')['content']
    ogdesc = soup.select_one('meta[property="og:description"]')['content']


    doc = {
        'image':ogimage,
        'title':ogtitle,
        'desc':ogdesc,
        'comment':comment_receive,
        'star':star_receive
    }

    db.movies.insert_one(doc)

    return jsonify({'msg':'포스팅 완료!'})

보내주면 ..._receive 들이 받아주고 그 받은 데이터들을

내가 입맛에 맞게 조절하는 거

크롤링도 들어갔는데 BeautifulSoup 이걸로 된거임.

그래서 soup.select_one 으로 내가 설정한 변수들에다가 넣어주고

그 변수들을 document로 해놓고

mongodb에 넣어줌.

그러고 난 다음 브라우저에 포스팅 완료라는 메시지가 뜰거임.

 

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

 

 그런데 마지막으로 여기 fetch로 서버에서 html로 연결해서

data의 msg가 여기로 뜨는거임.

 

 

그 다음 클라이언트

 

html

function listing() {
            fetch('/movie').then((res) => res.json()).then((data) => {
                let rows = data ['result']
                $('#cards-box').empty()
                rows.forEach((a)=>{
                    let comment = a['comment']
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let star = a['star']

                    let star_repeat = '⭐'.repeat(star)

                    let temp_html = `<div class="col">
                                        <div class="card h-100">
                                            <img src="${image}"
                                                class="card-img-top">
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${desc}</p>
                                                <p>${star_repeat}</p>
                                                <p class="mycomment">${comment}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards-box').append(temp_html)
                })
            })
        }
이 저장한 걸 보여주는 건 이해하는 데 어려움이 없음.
밑에 서버에서 result 값을 all_movies 라고 정해주면 
console 로 확인
그러고 확인했을 때 리스트로 뜨면 아 이거 반복문으로 돌려주고싶다.
생각하면 굿
그전에 기존에 있던 cards-box들 다 없애주고
그리고 변수들 잡아줌.
그러고 
사용자가 원하는 이미지, 제목, 설명 이런 거 넣을 수 있도록 함.
 
 
py
@app.route("/movie", methods=["GET"])
def movie_get():
    all_movies = list(db.movies.find({},{'_id':False}))
    return jsonify({'result':all_movies})

 

결론

 

이제는 뭔가 알 거 같은데

내가 뭔가를 만들라고 하면 힘들 거 같다.

그래도 알아 가는 거 같아서 

뭐 괜춘

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (CSS)  (1) 2023.03.05
웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (1)  (0) 2023.02.12
웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
PYTHON
 
from flask import Flask, render_template, request, jsonify
app = Flask(__name__) 
# flask 서버

from pymongo import MongoClient
import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:test@cluster0.v7fcneo.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
#MongoDB에서 데이터 사용하기 위한 준비

@app.route('/')
def home():
   return render_template('index.html')
#Html 파일 불러오기

@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': '주문 완료!'})
#POST 요청 방식 : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청

@app.route("/mars", methods=["GET"])
def mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result':mars_data})
#GET 요청 방식 : 통상적으로 데이터 조회(Read)를 요청

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

 

HTML

$(document).ready(function () {
            show_order();
        });
        function show_order() {
            $("#order-box").empty();
            fetch('/mars').then((res) => res.json()).then((data) => {
                let rows = data['result']
                rows.forEach((a) => {
                    let name = a["name"];
                    let address = a["address"];
                    let size = a["size"];

                    let temp_html = `<tr>
                        <td>${name}</td>
                        <td>${address}</td>
                        <td>${size}</td>
                      </tr>`;
                    $("#order-box").append(temp_html);
                });
            });
        }
        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) => {
                console.log(data);
                alert(data["msg"]);
                window.location.reload();
            });
        }
 
이거 부분만 해석(show_order, save_order)
프론트엔드가 Html 이고 백엔드가 py임.
지금 프론트엔드랑 백엔드가 어떻게 연결되는지는 
@app.route('/')
def home():
   return render_template('index.html')
이걸로 설명 가능
 
근데 show_order부터 차근차근히 보면 
#order-box 
에 있는 자료들 다 없애라. empty
그 다음에 fetch로 연결 어디에? /mars에
거기서 rows를 data의 result값으로 잡을 건데 이게 어디있던거냐 하면 
@app.route("/mars", methods=["GET"])
def mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result':mars_data})
여기 있음.
여기서는 result 값이 mars라는 데이터베이스의 모든 값임.
 
다시 Html로 돌아가서 
rows 반복문으로 돌림. 
변수잡고
#order-box 
여기에 있는 값들은 없어진 상태에서 append를 통해서 추가됨. 
 
그 다음 save_order
이건 fetch부터 보는게 더 쉬운 거 같음. 
Html 에서 mars 불러라 
해서 서버의 post 형식의 mars 부르면 
 let formData = new FormData();
            formData.append("name_give", name);
            formData.append("address_give", address);
            formData.append("size_give", size);

여기 html에 있는 "....._give" 이런 친구들이

서버에 있는지 확인 

@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': '주문 완료!'})

그래서 저 '..._receive' 친구들 딕셔너리 행태로 저장하고

mars의 데이터 베이스에다가 추가

그러고 사용자가 볼 수 있는 주문완료라는 메시지 전달

 

 

이 게시물은 오로지 작성자가 잘 알아볼 수 있게 만들어진 거라서 

다음 번에 복습할 때 다른 사람들도 보기 좋게 만들어 보겠습니다... ㅎㅎ

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (2)  (0) 2023.02.13
웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04

블로그부터 꾸미고 싶다.

아까 블로그 관리 들어가니깐 

Html이랑 CSS 내가 하고 싶은 대로 바꿀 수 있는 거 같던데

 

흠.. 그 정도가 될려면 더 해야겠지

파이팅

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 4주차 (2)  (0) 2023.02.13
웹개발 4주차 (1)  (0) 2023.02.12
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 2주차 (1)  (0) 2023.02.03

requests는 요청하는 것

beautifulsoup은 솎아내는 것

 

파이썬은 백엔드 (오늘 처음 알았음.)

 

파이썬 기본 문법은 워낙 많이해서 그냥 술술 지나갔다.

 

가상환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경

 

웹스크래핑(크롤링)

밑에 이거 터미널에 입력해서 설치해줘야 함. 
pip install bs4
 
이번 주차는 생각보다 쉬워서
어려웠던 게 없던 거 같음.
 
나중에 복습을 좀 더 꼼꼼하게 해야할 듯?

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 4주차 (1)  (0) 2023.02.12
웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 2주차 (1)  (0) 2023.02.03
웹개발 종합반 1주차  (0) 2023.01.30

어렵네

 

오늘 배운 거

1. 

fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a['MSRSTE_NM'],a['IDEX_MVL'])
            })
        })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

 

2. 

 

fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                   
                    let temp_html =
                    if (gu_mise > 40) {
                        temp_html = `<li class = "bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                })
            })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

근데 그 전에 이미 있었던 names-q1 의 정보들은 반복문 돌리기 전에 삭제

그리고 반복문 돌리는데 

변수 각각 설정해주고

temp_html에는 빈 곳으로 만들어준다.

그리고 gu_mise가 40보다 넘으면 

출력되는 값들이 빨간색이 되도록 하고 아니면 말고

근데 이것들은 names-q1 의 정보 뒤에 추가되어 온다.

 

3. 

fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                let rows = data['getStationList']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']

                    let temp_html =

                    if (bike < 5) {
                        temp_html = `<tr class = "red">
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    } else {
                        temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    }
                    $('#names-q1').append(temp_html)              
                })
            })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

근데 그 전에 이미 있었던 names-q1 의 정보들은 반복문 돌리기 전에 삭제

그리고 반복문 돌리는데 

변수 각각 설정해주고

temp_html에는 빈 곳으로 만들어준다.

그리고 2번이랑 똑같이 해석해주면 된다.

 

JQuery는 반복문 돌면서 URL에 있는 데이터들을 다 해주는거임.

 

어려웠던 거

 

1주차 퀴즈는 바로바로 풀었는데 2주차 퀴즈는 바로 못 푼 거 보면 잘 못하는 거 같습니다.

fetch도 한 5번 정도 보니깐 알겠던데..

해석도 저게 다 맞는지도 모르겠고 이거 참..

 

결론

 

열심히 하면 된다!

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (1)  (0) 2023.02.03
웹개발 종합반 1주차  (0) 2023.01.30
2023 버킷리스트  (0) 2023.01.30

+ Recent posts

티스토리툴바