클라이밍하는 개발자

 🥅 주간회고의 목적

1. 지난 일주일을 되돌아봄으로써 나의 현재 상태를 파악하기

- 내일배움캠프 멤버들과 비교했을땐, CSS부분은 평균 이상일 수 있지만,

  직접 코딩하고 검색해서 원하는 기능을 만들어내는 집념은 부족하다.

2. 더 나은 다음주를 만들기 위해 어떤 부분을 어떻게 채워나갈 지를 고민하는 것

- 첫 프로젝트이기에 웹개발 종합반을 통해 가볍게 복습만 한다고 생각했기에

  빠르게 완성하고나서 직접 코딩은 안하고 강의만 들었던 것을 반성해야 겠다.

  다음주부터는 강의를 듣고 나서 가벼운 기능이라도 1일 1코딩하는 버릇을 들이려 한다.

❓ 이런 질문들을 가지고 접근해보세요

1. 지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었지?

- 가장 인상깊었던 배움은 다른 사람들의 집념이었다.

  삭제, 랜덤이미지, 게시판, 검색 기능과 같이 어려운 기능을 밤새서 라도 만들려하는 집념

2. 그 배움까지 다가가는데 어떤 어려움이 있었지?

- 이론도 모르고 실행력도 부족하다는 생각이 들었다.

  아직 모르겠으면 나중에 다시 듣지 뭐~ 라는 안일한 생각이 있는데

  이해가 안된다면 적어두고 이해할때까지 계속 생각해봐야 겠다.

3. 그 과정에서 나는 무엇을 깨달았고, 어떤 감정/생각이 들었었지?

- 집념이 부족하다는 걸 깨달았고, 나는 개발자가 될 수 있을까?

  개발자 성향이 부족한 것 같아서 맘이 급해졌다.

  그래도 자격지김 가지지 않고 앞으로 많은 시간이 남아있으니

  꾸준히 노력해서 따라가야 겠다고 생각들었다.

4. 결과적으로, 현재 나의 상태는?

- 실력의 상태는 그대로겠지만, 개발자로서의 집념을 가져야 겠다는 작은 불씨는 일으킨 것 같다.

5. 이 상태에서 다음 일주일을 더 잘 보내려면 어떻게 해야 할까?

- 1일 1코딩(or 문제풀이)를 하며 깃허브에 커밋하는 버릇을 들이려 한다.

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주차 되니 문법이 길어지면서

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

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

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

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

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

공식 개강일에 앞서 기초 지식을 쌓기 위해 합격자들은

웹개발 종합반을 먼저 수강하여야 한다.

웹개발 종합반 1주차는 총 20강이며, 강의당 평균시간은 5분정도 되는 것 같다.

1주차의 주된 내용은 HTML, CSS의 기본 내용을 공부하고,

부트스트랩을 이용하여 손쉽게 나만의 사이트를 만들어본다.

그리고 자바스크립트도 기초내용만 맛보기까지 하며 숙제 제출하면 1주차 끝!

내일배움캠프를 시작하기전 1~2달정도 방황하던 시기에

생활코딩과 클래스101의 몰입코딩 강의를 들었을때와 비교하여

스파르타 코딩 웹개발 종합반의 장단점을 적자면,

장점)

강의 시간이 짧아 부담이 적다.

정말 필요한 문법만 간단하게 알려준다.

부트스트랩을 이용하여 곧바로 높은 퀄리티의 사이트를 만들 수 있다.

단점)

강의 시간이 짧아 하루 8강을 듣고 나면 시간이 남는다. ( -> 다른 강의 병행중)

필요한 문법만 알려줄뿐 해당 태그에 대한 이론은 자세히 알지 못한다. ( -> 구글링 또는 지인문의)

개인적인 후기

웹개발 종합반을 듣기전에 유명한 무료강의 [생활코딩]과 클래스101 [몰입코딩]을

듣다왔기 때문에 기초적인 지식이 있어서 1주차는 쉽게 따라갔다는 느낌이 듭니다.

만약 사전지식 없이 들었다면, 짧은 영상과 설명에

갈팡질팡하여 혼란해하지 않았을까 생각도 듭니다.

그래도 이전 강의들과 비교하자면 간결하고 실전적인 내용을

바로 코드에 적용하여 빠른 성취감을 느낄 수 있다는 것이 큰 장점이었습니다.