클라이밍하는 개발자

1주차에는 HTML , CSS , Javascript
2주차에 JQuery, Ajax

3주차 파이썬, MonggoDB

4주차 AWS, FileZilla, git bash, 가비아를 통해 도메인 연결

5주차 개인적인 후기(완강)

4주차에는 그간 배운 모든 지식을 종합하여 하나의 홈페이지를 만들었고

5주차에는 초반에 다시 한번 복습하고,

여러가지 파일과 사이트를 이용하여

도메인에 내 숙제를 연결하였다.

http://pyoja.shop/

내 사이트를 만들었다는 뿌듯함과 완강이라는 기쁨이 공존하지만

내가 직접 만들었다기보단 클론코딩이기에.......

다시 복습하고 익숙해져서

코딩은 복사해오겠지만, 내가 원하는 기능도 추가해서

진짜 나의 사이트를 만들어보고 싶다~!

3-2강

[Joint을 사용해서 Key값으로 두테이블 연결해보기]

select * from point_users
left join users
on point_users.user_id = users.user_id

[유저데이터로 Inner Join 이해해보기]

select * from users u
inner join point_users p
on u.user_id = p.user_id;

[과목별 오늘의 다짐 갯수 세어보기]

select co.title, count(co.title) as checkin_count from checkins ci
inner join courses co
on ci.course_id = co.course_id 
group by co.title

[많은 포인트를 얻은 순서대로 유저 데이터 정렬해서 보기]

select * from point_users p
inner join users u 
on p.user_id = u.user_id
order by p.point desc

[네이버 이메일 사용하는 유저의 성씨벌 주문건수 세어보기]

select u.name, count(u.name) as count_name from orders o
inner join users u
on o.user_id = u.user_id 
where u.email like '%naver.com'
group by u.name

3-3강 퀴즈

1) 결제 수단 별 유저 포인트의 평균값 구해보기

select o.payment_method, round(AVG(p.point)) from point_users p
inner join orders o 
on p.user_id = o.user_id 
group by o.payment_method

2) 결제하고 시작하지 않은 유저들을 성씨별로 세어보기

select name, count(*) as cnt_name from enrolleds e
inner join users u
on e.user_id = u.user_id 
where is_registered = 0
group by name
order by cnt_name desc

3) 과목 별로 시작하지 않은 유저들을 세어보기

select c.course_id, c.title, count(*) as cnt_notstart from courses c
inner join enrolleds e 
on c.course_id = e.course_id
where is_registered = 0
group by c.course_id

4) 웹개발, 앱개발 종합반의 week 별 체크인 수를 세어보기

select c1.title, c2.week, count(*) as cnt from checkins c2
inner join courses c1 on c2.course_id = c1.course_id
group by c1.title c2.week
order by c1.title, c2.week

5) 연습4번에서, 8월 1일 이후에 구매한 고객들만 발라내기

select c1.title, c2.week, count(*) as cnt from courses c1
inner join checkins c2 on c1.course_id = c2.course_id
inner join orders o on c2.user_id = o.user_id
where o.created_at >= '2020-08-01'
group by c1.title, c2.week
order by c1.title, c2.week

3-5강

1) Left join에서 Null값을 제외하고 뽑기

select name, count(*) from users u

left join point_users pu on u.user_id = pu.user_id

where pu.point_user_id is not NULL group by name

2) 7월10일 ~ 7월19일에 가입한 고객 중, 포인트를 가진 고객의 숫자,  전체 숫자, 그리고 비율보기

select count(point_user_id) as pnt_user_cnt,
       count(*) as tot_user_cnt,
       round(count(point_user_id)/count(*),2) as ratio
  from users u
  left join point_users pu on u.user_id = pu.user_id
 where u.created_at between '2020-07-10' and '2020-07-20'

3-6강

union all 문법

(
select '7월' as month, c.title, c2.week, count(*) as cnt from checkins c2
inner join courses c on c2.course_id = c.course_id
inner join orders o on o.user_id = c2.user_id
where o.created_at < '2020-08-01'
group by c2.course_id, c2.week
  order by c2.course_id, c2.week
)
union all
(
select '8월' as month, c.title, c2.week, count(*) as cnt from checkins c2
inner join courses c on c2.course_id = c.course_id
inner join orders o on o.user_id = c2.user_id
where o.created_at > '2020-08-01'
group by c2.course_id, c2.week
  order by c2.course_id, c2.week
)

1주차에는 HTML , CSS , Javascript
2주차에 JQuery, Ajax

3주차 파이썬, MonggoDB

4주차 Flask와 연결하기

이제 지금까지 배웠던걸 모두 종합하여

하나의 홈페이지를 만들기 시작했다!

4주차 개인적인 후기

4주차는 1~3주차에서 배운 모든걸을 종합하여

하나의 홈페이지를 만드는 시간이었다.

팬사이트를 만들었다면 이제 댓글과 닉네임을 적고,

바로 반영되도록 만드는 과정까지 만들었다.

4주차는 다른때보다 복습을 더 많이했고,

직접 코딩하진 못했지만 기록한 코드를 토대로

유추하여 퀴즈도 완성하였다.

이제 5주차엔 도메인 연결해서 다른사람들에게도

나의 사이트를 보여주는 시간이 될 것 같아서 기대가 된다.

app.py

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

from pymongo import MongoClient
client = MongoClient('mongodb+srv://text:sparta@cluster0.tvnfddc.mongodb.net/Cluster0?retryWrites=true&w=majority')
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():
    homework_list = list(db.homework.find({}, {'_id': False}))
    return jsonify({'homework': homework_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://mblogthumb-phinf.pstatic.net/MjAyMTEyMzBfMjU3/MDAxNjQwODIzNTM5ODU4.4N5iYjgtyzTpiKCe5RlPuNM5aRqP-rxu8Lv4M7PIYy8g.FYFlO1cup4cXoyBEgOtSEWpw_baR76D5h_JwiJdCQyIg.JPEG.letis_make_idea/asdasd.jpg?type=w800');
            background-position: center 30%;
            background-size: cover;

            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(){
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['homework']
                    for ( 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>🎻릴러말즈 팬사이트🎻</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-2강

[성씨별 회원수를 Group by로 쉽게 구해보기]

select name, count(*) from users
group by name;

[users 테이블 전체 불러오기]

select * from users;

[users 테이블에서 '신'씨를 가진 데이터만 불러와서 개수 살펴보기]

select * from users 
where name = "신**";

[group by를 사용해서 '신'씨를 가진 데이터가 몇 개인지 살펴보기]

select name, count(*) fro[m users
group by name;

2-3강

[주차별 '오늘의 다짐' 개수 구하기]

select week, count(*) from checkins
group by week;

[주차별 '오늘의 다짐'의 좋아요 최소,최대,평균,합계값 구하기]

select week, min(likes) from checkins
group by week;

select week, max(likes) from checkins
group by week;

select week, avg(likes) from checkins
group by week;

select week, sum(likes) from checkins
group by week;

[원본 쿼리 살펴보기]

select name, count(*) from users
group by name;

[결과의 개수 오름차순으로 정렬해보기]

select name, count(*) from users
group by name
order by count(*);

[결과의 개수 내림차순으로 정렬해보기]

select name, count(*) from users
group by name
order by count(*) desc;

2-4강

없음

2-5강

쿼리 작성하는 꿀팁!

1) show tables로 어떤 테이블이 있는지 살펴보기

2) 제일 원하는 정보가 있을 것 같은 테이블에 select * from 테이블명 limit 10 쿼리 날려보기

3) 원하는 정보가 없으면 다른 테이블에도 2)를 해보기

4) 테이블을 찾았다! 범주를 나눠서 보고싶은 필드를 찾기

5) 범주별로 통계를 보고싶은 필드를 찾기

6) SQL 쿼리 작성하기!

개인적인 후기

백앤드에 대한 기초 지식을 쌓기 위해서 SQL을 신청하였다.

1주차는 정말 간단한 문법을 공부하면서 실습하였고,

짧은 영상으로 부담이 없었다.

select * from orders

where email like '%naver.com' 과 같은 간단한 문제를 반복해서 풀다보니

자신감도 생기고 아직은 잘 따라가서 다행이라는 생각이 든다.

2주차 정도까진 괜찮았는데

3~4주차 되니 문법이 길어지면서

생각을 요하는 문제가 많아져서 조금 따라가기 힘들었다...

열심히 따라서 코딩했지만 다른 공부가 우선 필요하다고

생각하고 대충넘겼다.....

문법은 어느정도 정리했고 익숙해졌으니,

다음에 다시 복습해야겠다!