waterlily_0101.log

[개인정보처리방침]

Thu, 28 Jul 2022 07:31:17 GMT

< Hi >('https://velog.io/@waterlily_0101'이하 'Hi')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다.

○ 이 개인정보처리방침은 2022년 7월 28부터 적용됩니다.

제1조(개인정보의 처리 목적)

< Hi >('https://velog.io/@waterlily_0101'이하 'Hi')은(는) 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다.

홈페이지 회원가입 및 관리

회원 가입의사 확인 목적으로 개인정보를 처리합니다.

제2조(개인정보의 처리 및 보유 기간)

① < Hi >은(는) 법령에 따른 개인정보 보유·이용기간 또는 정보주체로부터 개인정보를 수집 시에 동의받은 개인정보 보유·이용기간 내에서 개인정보를 처리·보유합니다.

② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다.

1.<홈페이지 회원가입 및 관리> <홈페이지 회원가입 및 관리>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<지체없이 파기>까지 위 이용목적을 위하여 보유.이용됩니다. 보유근거 : 서비스 이용 동의 관련법령 : 예외사유 :

제3조(처리하는 개인정보의 항목)

① < Hi >은(는) 다음의 개인정보 항목을 처리하고 있습니다.

1< 홈페이지 회원가입 및 관리 > 필수항목 : 이메일, 서비스 이용 기록, 접속 로그, 접속 IP 정보 선택항목 :

제4조(개인정보의 제3자 제공에 관한 사항)

① < Hi >은(는) 개인정보를 제1조(개인정보의 처리 목적)에서 명시한 범위 내에서만 처리하며, 정보주체의 동의, 법률의 특별한 규정 등 「개인정보 보호법」 제17조 및 제18조에 해당하는 경우에만 개인정보를 제3자에게 제공합니다.

② < Hi >은(는) 다음과 같이 개인정보를 제3자에게 제공하고 있습니다.

< Google Firebase > 개인정보를 제공받는 자 : Google Firebase 제공받는 자의 개인정보 이용목적 : 이메일, 서비스 이용 기록, 접속 로그, 접속 IP 정보 제공받는 자의 보유.이용기간: 지체없이 파기

제5조(개인정보의 파기절차 및 파기방법)

① < Hi > 은(는) 개인정보 보유기간의 경과, 처리목적 달성 등 개인정보가 불필요하게 되었을 때에는 지체없이 해당 개인정보를 파기합니다.

② 정보주체로부터 동의받은 개인정보 보유기간이 경과하거나 처리목적이 달성되었음에도 불구하고 다른 법령에 따라 개인정보를 계속 보존하여야 하는 경우에는, 해당 개인정보를 별도의 데이터베이스(DB)로 옮기거나 보관장소를 달리하여 보존합니다.

법령 근거 :
보존하는 개인정보 항목 : 계좌정보, 거래날짜

③ 개인정보 파기의 절차 및 방법은 다음과 같습니다.

파기절차 < Hi > 은(는) 파기 사유가 발생한 개인정보를 선정하고, < Hi > 의 개인정보 보호책임자의 승인을 받아 개인정보를 파기합니다.
파기방법

전자적 파일 형태의 정보는 기록을 재생할 수 없는 기술적 방법을 사용합니다

제6조(정보주체와 법정대리인의 권리·의무 및 그 행사방법에 관한 사항)

① 정보주체는 Hi에 대해 언제든지 개인정보 열람·정정·삭제·처리정지 요구 등의 권리를 행사할 수 있습니다.

② 제1항에 따른 권리 행사는Hi에 대해 「개인정보 보호법」 시행령 제41조제1항에 따라 서면, 전자우편, 모사전송(FAX) 등을 통하여 하실 수 있으며 Hi은(는) 이에 대해 지체 없이 조치하겠습니다.

③ 제1항에 따른 권리 행사는 정보주체의 법정대리인이나 위임을 받은 자 등 대리인을 통하여 하실 수 있습니다.이 경우 “개인정보 처리 방법에 관한 고시(제2020-7호)” 별지 제11호 서식에 따른 위임장을 제출하셔야 합니다.

④ 개인정보 열람 및 처리정지 요구는 「개인정보 보호법」 제35조 제4항, 제37조 제2항에 의하여 정보주체의 권리가 제한 될 수 있습니다.

⑤ 개인정보의 정정 및 삭제 요구는 다른 법령에서 그 개인정보가 수집 대상으로 명시되어 있는 경우에는 그 삭제를 요구할 수 없습니다.

⑥ Hi은(는) 정보주체 권리에 따른 열람의 요구, 정정·삭제의 요구, 처리정지의 요구 시 열람 등 요구를 한 자가 본인이거나 정당한 대리인인지를 확인합니다.

제7조(개인정보의 안전성 확보조치에 관한 사항)

< Hi >은(는) 개인정보의 안전성 확보를 위해 다음과 같은 조치를 취하고 있습니다.

정기적인 자체 감사 실시 개인정보 취급 관련 안정성 확보를 위해 정기적(분기 1회)으로 자체 감사를 실시하고 있습니다.

제8조(개인정보를 자동으로 수집하는 장치의 설치·운영 및 그 거부에 관한 사항)

Hi 은(는) 정보주체의 이용정보를 저장하고 수시로 불러오는 ‘쿠키(cookie)’를 사용하지 않습니다.

제9조 (개인정보 보호책임자에 관한 사항)

① Hi 은(는) 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.

▶ 개인정보 보호책임자 성명 :김문선 직책 :개발자 직급 :개발자 연락처 :01020600637, msun0637@gmail.com, ※ 개인정보 보호 담당부서로 연결됩니다.

▶ 개인정보 보호 담당부서 부서명 : 담당자 : 연락처 :, , ② 정보주체께서는 Hi 의 서비스(또는 사업)을 이용하시면서 발생한 모든 개인정보 보호 관련 문의, 불만처리, 피해구제 등에 관한 사항을 개인정보 보호책임자 및 담당부서로 문의하실 수 있습니다. Hi 은(는) 정보주체의 문의에 대해 지체 없이 답변 및 처리해드릴 것입니다.

제10조(개인정보의 열람청구를 접수·처리하는 부서) 정보주체는 ｢개인정보 보호법｣ 제35조에 따른 개인정보의 열람 청구를 아래의 부서에 할 수 있습니다. < Hi >은(는) 정보주체의 개인정보 열람청구가 신속하게 처리되도록 노력하겠습니다.

▶ 개인정보 열람청구 접수·처리 부서 부서명 : 담당자 : 연락처 : , ,

제11조(정보주체의 권익침해에 대한 구제방법)

정보주체는 개인정보침해로 인한 구제를 받기 위하여 개인정보분쟁조정위원회, 한국인터넷진흥원 개인정보침해신고센터 등에 분쟁해결이나 상담 등을 신청할 수 있습니다. 이 밖에 기타 개인정보침해의 신고, 상담에 대하여는 아래의 기관에 문의하시기 바랍니다.

개인정보분쟁조정위원회 : (국번없이) 1833-6972 (www.kopico.go.kr)
개인정보침해신고센터 : (국번없이) 118 (privacy.kisa.or.kr)
대검찰청 : (국번없이) 1301 (www.spo.go.kr)
경찰청 : (국번없이) 182 (ecrm.cyber.go.kr)

「개인정보보호법」제35조(개인정보의 열람), 제36조(개인정보의 정정·삭제), 제37조(개인정보의 처리정지 등)의 규정에 의한 요구에 대 하여 공공기관의 장이 행한 처분 또는 부작위로 인하여 권리 또는 이익의 침해를 받은 자는 행정심판법이 정하는 바에 따라 행정심판을 청구할 수 있습니다.

※ 행정심판에 대해 자세한 사항은 중앙행정심판위원회(www.simpan.go.kr) 홈페이지를 참고하시기 바랍니다.

제12조(개인정보 처리방침 변경)

① 이 개인정보처리방침은 2022년 7월 28부터 적용됩니다.

[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 개발일지(3)

Tue, 26 Oct 2021 06:22:15 GMT

FaceTheNew

1. 서버

[DB 쌓기 전 코드]

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.dbfacethenew


# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('mainhome.html')

@app.route('/aboutfacethenew')
def getaboutfacethenew():
    return render_template('aboutfacethenew.html')

@app.route('/requireddocs')
def getrequireddocs():
    return render_template('requireddocs.html')

@app.route('/searchunivs')
def getsearchunivs():
    return render_template('searchunivs.html')

@app.route('/lifehack')
def getlifehack():
    return render_template('lifehack.html')


# API 역할을 하는 부분
@app.route('/chooseunivname', methods=['GET'])
def choose():
    univ_name = list(db.searchunivs.find({}, {'_id': False, 'formControlContinent': False, 'formControlNation': False, 'formControlUniv': False, 'UnivLocation': False, 'UnivOfficeTelNum': False, 'UnivContactEmail': False, 'UnivWebsite': False}))
    return jsonify({'choose_univ_name': univ_name})

@app.route('/searchunivinfo', methods=['GET'])
def listing():
    univinfo = list(db.searchunivs.find({}, {'_id': False, 'formControlContinent': False, 'formControlNation': False, 'formControlUniv': False}))
    return jsonify({'each_univinfo': univinfo})


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

2. HTML : '파견 대학 검색' page

[DB 쌓기 전 코드]



    
        
        
        
        FaceTheNew : 파견 대학 검색

        

        

        
        
        

        

        

        
    
    
        
            
        

        
            
            
            
            
        

        
            ◦ 파견 대학 검색

            
                파견 대학 검색
                
                
                
                
            

            

            
                
            

            
                
                    
                    
                    
                

                
                    학교 유형:  사립/공립          
                        학교 규모:  S/M/L/XL          
                        재적학생수:  00명          
                        취업률:  00%          
                        Exam Type:  TOEFL, IELTS          
                        QS World University Ranking:  00등
                

                
                    ◦ 학교 소개
                    학교 소개입니다.



                    ◦ 설치 학과
                    설치 학과는 00입니다.



                    ◦ Study Duration
                    학기 기간입니다.



                    ◦ Requirement
                    - GPA
                    000
                    - Language Proficiency:
                    000

3. 할 것

✅ 검색 대학 DB 쌓기 ✅ messagebox 부분 한 PART로 코드 짜기

[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 개발일지(2)

Sat, 23 Oct 2021 10:01:21 GMT

FaceTheNew

1. 서버

[미완 코드]

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.dbfacethenew


# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('mainhome.html')

@app.route('/aboutfacethenew')
def getaboutfacethenew():
    return render_template('aboutfacethenew.html')

@app.route('/requireddocs')
def getrequireddocs():
    return render_template('requireddocs.html')

@app.route('/searchunivs')
def getsearchunivs():
    return render_template('searchunivs.html')

@app.route('/lifehack')
def getlifehack():
    return render_template('lifehack.html')


# API 역할을 하는 부분
@app.route('/searchunivsinfo', methods=['GET'])
def listing():
    univsinfo = list(db.searchunivs.find({}, {'_id': False, 'formControlContinent': False, 'formControlNation': False, 'formControlUniv': False}))
    return jsonify({'all_univsinfo': univsinfo})


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

2. '파견 대학 검색' page

[미완 코드]



    
        
        
        
        FaceTheNew : 파견 대학 검색

        

        
        
        

        

        

        
    
    
        
            
        

        
            
            
            
            
        

        
            ◦ 파견 대학 검색

            
                파견 대학 검색
                
                
                
                
            

            
                
            

            
                
                    
                    
                        ◦ University Name
      대학교 이름
                    
                    
                        ◦ Location
      대학교 위치
                    
                    
                        ◦ Office Telephone Number
      대학교 전화번호
                        
                        ◦ Contact Email
      대학교 이메일
                        
                        ◦ Website
      대학교 웹사이트
                        
                    
                    
                

                
                    학교 유형:  사립/공립          
                        학교 규모:  S/M/L/XL          
                        재적학생수:  00명          
                        취업률:  00%          
                        Exam Type:  TOEFL, IELTS          
                        QS World University Ranking:  00등
                

                
                    ◦ 학교 소개
                    학교 소개입니다.



                    ◦ 설치 학과
                    설치 학과는 00입니다.



                    ◦ Study Duration
                    학기 기간입니다.



                    ◦ Requirement
                    - GPA
                    000
                    - Language Proficiency:
                    000

[문제점]

✅ 버튼(onclick="SearchUniv()")을 누르면 클라이언트가 선택한 대학의 정보를 Robo 3T에 저장되어 있는 searchunivs라는 collections에서 data를 가져와야 한다. 그런데 안 가져와져서 script에 작성한 function SearchUniv() 코드를 지우고 다시 처음부터 짜봤다. 일단 선택된 학교의 정보 말고, 모든 학교의 data를 가져오게끔 코드를 짜보았는데 success가 반응을 안 한다.

[모든 대학 정보를 db에서 가져오는 코드]



    
        
        
        
        FaceTheNew : 파견 대학 검색

        

        

        
        
        

        

        

        
    
    
        
            
        

        
            
            
            
            
        

        
            ◦ 파견 대학 검색

            
                파견 대학 검색
                
                
                
                
            

            

            
                
            

            
                
                    
                    
                    
                

                
                    학교 유형:  사립/공립          
                        학교 규모:  S/M/L/XL          
                        재적학생수:  00명          
                        취업률:  00%          
                        Exam Type:  TOEFL, IELTS          
                        QS World University Ranking:  00등
                

                
                    ◦ 학교 소개
                    학교 소개입니다.



                    ◦ 설치 학과
                    설치 학과는 00입니다.



                    ◦ Study Duration
                    학기 기간입니다.



                    ◦ Requirement
                    - GPA
                    000
                    - Language Proficiency:
                    000

[한 것]

✅ selectbox에서 선택한 대학 이름을 console창에 뜨게 했다. ✅ 모든 대학 정보를 DB에서 가져오게 했다.

[할 것]

✅ 선택한 대학 이름을 서버로 보내고, 서버에서는 전달받은 대학 이름으로 DB에서 조회해야 한다. ✅ 대학 이름을 받으면 그 대학 이름만 정보 반환하는 용도의 API를 하나 만들어야 한다.

[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 개발일지(1)

Sat, 16 Oct 2021 09:40:14 GMT

FaceTheNew

1. Main Home

[완성 코드]




    
    
    
    FaceTheNew

    

    
    
    

    

    


    
        
        
            
            
            
            
        
        - 교환학생을 위한 정보 공유 웹서비스입니다 -

2. 'FaceTheNew 소개' page

[완성 코드]




    
    
    
    FaceTheNew 소개

    

    
    
    

    

    


    
        
    

    
        
        
        
        
    

    ◦ FaceTheNew 소개

    
        FaceTheNew는 교환학생을 준비 중인, 경험 중인, 경험한 학생들을 위한 정보 공유 웹서비스입니다.

        


        💡 FaceTheNew는 교환학생을 준비하고 있는 학생들에게 필요한 정보를 공유하고자 만든 공간입니다.

        교환학생을 가기 위해 준비해야 할 것들이 참 많습니다.

            영어 성적은 기본이고, 교환학생 합격 후에 더 바빠집니다.

            새로운 환경에서 길게는 1년 동안 생활해야 하기 때문에 꼼꼼히 확인해야 할 것들이 많습니다.

            교환학생을 가서 마주할 익숙지 않을 수많은 새로움들과 좀 더 쉽게 친해지기 위해

            준비하고 알아야 할 정보들을 FaceTheNew에서 정리해드리고자 합니다.

            FaceTheNew가 교환학생을 시작하는 학생들에게 안전범퍼가 되길 바랍니다.

        


        💡 FaceTheNew는 교환학생을 현재 경험 중인 학생들에게 필요한 정보를 공유하고자 만든 공간입니다.

        교환학생을 가면 지금까지 살아온 환경과 다른 문화와 마주합니다.

            그 과정에서 수많은 새로움과 부딪힙니다.

            그 새로움을 자신의 것으로 만드는 과정에서 익숙하지 않았던 것들과 친해집니다.

            그 가운데 FaceTheNew가 교환학생으로 외국에 가 있는 학생들에게 한숨 돌릴 수 있는 쉼터가 되길 바랍니다.

        


        💡 FaceTheNew는 교환학생을 경험한 학생들이 교환학생을 통해 배운 것들을 나눌 수 있는 공간입니다.

        익숙하지 않은 환경에서 마주한 새로움은 많은 것을 배울 수 있게 해줍니다.

            그 과정에서 쌓인 경험치는 삶을 대하는 자세에서, 세상을 바라보는 새로운 시각에서 나타납니다.

            FaceTheNew는 여러분들이 마주한 새로움이 궁금합니다.

            여러분들이 배우고 느낀 새로운 시각이 궁급합니다.

            FaceTheNew가 그 새로움들을 공유하는 공간이 되길 바랍니다.

3. '교환학생 지원 서류' page

[완성 코드]




    
    
    
    FaceTheNew : 교환학생 지원 서류

    

    
    
    

    

    


    
        
    

    
        
        
        
        
    

    ◦ 교환학생 지원시 필요한 공통 서류

    
        * 중앙대학교 교환학생 서류양식 기준입니다.

        1. Learning Agreement

        - 대부분의 경우 상대교에서 제공하는 양식이 있습니다. 상대교 양식대로 작성해 제출해야 합니다.

        2. 교환학생 과목이수계획서(전공)

        3. 교환학생 과목이수계획서(자유선택)

        - syllabus 혹은 course list를 준비하여 이수할 과목들의 과목명, 학기, 학점이 적혀진 증거자료를 필수적으로 구비해야 합니다.

                                    - "수학기간" 란에는 "정확한 파견 연도 및 학기"를 적어야 합니다.

        4. 개인정보 수집ㆍ이용 동의서

        5. 고유식별정보 수집ㆍ이용 동의서

        6. 안전 관련 서약서

    

    ◦ 국가별 교환학생 지원시 필요한 필수 서류

    
        국가별 필수 지원 서류
        
        
        
    

    
        가나다라마바사

            가나다라마바사

            가나다라마바사

            가나다라마바사

            가나다라마바사

            가나다라마바사

            가나다라마바사

[To do list]

✅ '국가별 교환학생 지원시 필요한 필수 서류' 부분 db 생성하기 ✅ 동적 select box 코드 작성하기 ✅ 동적 select box와 db 연결하기 ✅ 서버 만들기

4. '파견 대학 검색' page

[완성 코드]




    
    
    
    FaceTheNew : 파견 대학 검색

    

    
    
    

    

    

    


    
        
    

    
        
        
        
        
    

    ◦ 파견 대학 검색

    
        파견 대학 검색
        
        
        
        
    

    
        
    

    
        
            
                
                    ◦ University Name
      대학교 이름
                
                
                    ◦ Location
      대학교 위치
                
                
                    ◦ Office Telephone Number
      대학교 전화번호
                    ◦ Contact Email
      대학교 이메일
                    ◦ Website
      대학교 웹사이트
                
            
        

        
            학교 유형:  사립/공립          
                학교 규모:  S/M/L/XL          
                재적학생수:  00명          
                취업률:  00%          
                Exam Type:  TOEFL, IELTS          
                QS World University Ranking:  00등
        

        
            ◦ 학교 소개
            학교 소개입니다.



            ◦ 설치 학과
            설치 학과는 00입니다.



            ◦ Study Duration
            학기 기간입니다.



            ◦ Requirement
            - GPA
            000
            - Language Proficiency:
            000

[To do list]

✅ '파견 대학' 부분 db 생성하기 ✅ 동적 select box 코드 작성하기 ✅ 동적 select box와 db 연결하기 ✅ 서버 만들기

5. 교환학생 학교생활 Tip

[To do list]

✅ HTML 만들기

[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 기획안

Tue, 05 Oct 2021 13:35:10 GMT

FaceTheNew 기획안

1. Web Service : "FaceTheNew"

✅ 프로젝트 시작 이유

교환학생을 준비하면서 관련 정보를 얻기위해 구글링을 하거나 멘토링에 참여했었다. 그 과정에서 외국의 파견교에 가기 위해 준비해야 하는것들 뿐만 아니라 실제로 교환학생 생활을 경험한 학생들로부터 학교생활 + 현지생활의 전반의 유용한 tip들을 알 수 있었다.

그런데 이 유익한 정보들이 혼재되어 있어서 관련 data들을 검색하고, 필요없거나 중복되는 정보들을 삭제하고, 이것들을 다시 정리하는데 많은 시간을 할애해야 했다. 그래서 교환학생 관련 정보를 찾는 학생들이 이 data들을 좀 더 빠르고 효율적으로 connect하고, 산재되어 있는 data들을 직관적으로 찾아볼 수 있는 웹서비스를 개발하고 싶어졌다.

✅ 웹서비스 이름을 "FaceTheNew"이라고 정한 이유

내가 교환학생을 가고자 하는 이유는 익숙하지 않은 공간에서 새로움에 부딪히는 경험을 하고 싶기 때문이다. 교환학생을 가게 되면 지금까지 살아온 환경과 다른 문화와 마주하게 될 것이다. 그 과정에서 삶을 대하는 새로운 경험치가 쌓일 것이다. 나는 이 '새로운 경험치'를 "FaceTheNew"를 통해 공유하고 싶다. 그렇게 "FaceTheNew"가 교환학생을 경험하게 될, 또는 경험 중인, 혹은 경험한 학생들의 이야기로 가득차는 place가 되길 바란다.

2. Project Layout

① Main Home

② 'FaceTheNew 소개' page

③ '국가별 필수 지원 서류' page

④ '파견 대학 검색' Home

⑤ '파견 대학 검색' 결과 page

⑥ '교환학생 학교생활 Tip' page

3. Data Sauce

QS World University Rankings 2022

https://www.topuniversities.com/university-rankings/world-university-rankings/2022

Office of International Affairs, Chung-Ang University

교환학생 상대교 정보 https://oia.cau.ac.kr/bbs/board.php?tbl=k_bbs34

✈🌍🌎🌏🗺🧭

211003 개발일지

Sun, 03 Oct 2021 14:48:37 GMT

🎯원페이지쇼핑몰 업로드하기🎯

1. 원페이지쇼핑몰 업로드하기

1-1) Robo3T를 이용해서, "내 컴퓨터에서" → "서버에 있는 mongoDB"에 접속하기

💻 좌측 상단 File 아래에 위치한 아이콘(컴퓨터모양) 클릭 ↓ Create 클릭 ↓ 접속 정보 세팅하기 ↓ 상단 Authentication 탭 클릭

① Perform authentication 체크박스 클릭 ② 생성한 계정의 아이디와 비밀번호 입력 후, save 클릭

1-2) 원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드하기

그 전에! MongoDB 접속 세팅을 바꿔주기

💡 AWS의 MongoDB에 아이디와 비밀번호를 추가했으니, 내 pymongo에도 아이디와 비밀번호를 입력해주어야 한다. 그래야 pymongo가 올바르게 DB에 접근할 수 있다.

app.py 파일을 열어서, 아래처럼 가운데 한 줄을 바꿔주기!!

pymongo 계정 접속

client = MongoClient('mongodb://test:test@localhost', 27017)
filezilla에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드한다.

1-3) 완성본을 실행해보기

실행하려고 시도하기
```
# home 디렉토리로 이동
cd ~
```

해당 폴더로 이동해서 아래 코드를 실행합니다.

python app.py

- 에러가 난다. 패키지를 설치하지 않았기 때문이다.

설치하기

pip install pymongo

- 다시 실행해본다.

python app.py


### 1-4) 접속해보기
- 브라우저에서 접속하기

http://내AWS아이피:5000/





## 2. 포트포워딩
### 2-1) 포트 번호를 떼고 접속해보기

http://내AWS아이피/


### 2-2) 포트 번호 없애기 - 기본 개념
> - 지금은 5000포트에서 웹 서비스가 실행되고 있다. 그래서 매번 `:5000` 이라고 뒤에 붙여줘야 한다.
- http 요청에서는 80포트가 기본이기 때문에, 굳이 `:80`을 붙이지 않아도 자동으로 연결이 된다.
- 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워
딩(port forwarding)을 사용해야 한다.
- 리눅스에서 기본으로 제공해주는 포트포워딩을 사용하면 된다.




## 3. nohup 설정하기
### 3-1) SSH 접속을 끊어도 서버가 계속 돌게 하기
- 현재 상황
: Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않고 있다.
🎯 그러나 원격접속을 끊어도, 서버는 계속 동작해야 하는데..

- 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기

아래의 명령어로 실행하면 된다

nohup python app.py &


- 서버 종료하기 - 강제종료하는 방법

아래 명령어로 미리 pid 값(프로세스 번호)을 본다

ps -ef | grep 'app.py'

아래 명령어로 특정 프로세스를 죽인다

kill -9 [pid값]


- 다시 켜기

nohup python app.py &


### 3-2) SSH 접속을 종료한 뒤, 접속해보기
- 브라우저에서 접속하기

http://내AWS아이피/





## 4. 도메인 구입하기
### 4-1) 도메인 구입/연결
- 도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것이다. 한국 또는 글로벌 업체 어디든 상관 없지만, 한국의 '가비아'라는 회사에서 구입해보겠다.
> ##### 가비아 링크: https://my.gabia.com/service#/

### 4-2) 구입 후 우측상단에 위치한 'My가비아' 클릭
> ##### ↓ DNS 관리툴 클릭
##### ↓ 도메인 연결 클릭
##### ↓ DNS 설정 클릭
##### ↓ 호스트 이름에 @, IP주소에 IP주소를 입력

### 4-3) 10분 정도 기다리기
- 네임서버에 내 도메인-IP가 매칭되는 시간이 필요하다.

### 4-4) IP주소로 접근해보기
- 내 IP주소로 지금 flask 서버가 잘 도고 있는지 먼저 확인해본다.

http://내AWS아이피/

- 약간의 시간을 가진 후, 내 도메인으로 접근하면, 접속이 된다.

http://내도메인/





## 5. og 태그
### 5-1) og 태그 만들기
- 나홀로메모장에서 배웠던 `og:image`, `og:title`, `og:description` 태그
> ##### 💡 내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록, 미리 꾸며보기

- `static` 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 `~` 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있다.
> ##### ① "내 사이트의 제목" 입력하기
> ##### ② "보고 있는 페이지의 내용 요약" 입력하기
> ##### ③ 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
> ##### (사이즈 800*400인 이미지를 구글에서 검색!)

- og태그 넣기

``` *** > #### 💡 참고! 이미지를 바꿨는데 이전 ogimage가 그대로 나오는 경우 → 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문에 그렇다. 그러므로 아래 링크에 들어 og 태그 초기화를 해주어야 한다. ##### ✅ 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/ ##### ✅ 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

211002 개발일지

Sat, 02 Oct 2021 10:15:52 GMT

프로젝트 서버에 올리는 방법

1. "웹서비스 런칭"에 필요한 개념 소개

📍 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줄 것이다.

📍 언제나 요청에 응답하려면,

① 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,

② 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.

📍 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있다.

📍 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 것이다.

우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있다. 우리가 아는 URL 은 우리가 알아보기 쉽게하는 등의 이유로 IP 주소를 알파벳으로 바꾼 것이다. 이렇게 변환해주는 시스템을 DNS 라고 한다.

EX)

URL = http://google.com

↓ DNS (Domain Name System)

IP = http://172.217.25.14:80

(여기서 Port = :80에 해당)

✅ IP 주소 (줄여서 IP)

: 컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소라고 생각하면 된다. 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호이다. 서버는 하나의 주소를 가지고 있다.

✅ 포트(port)

: 하나의 IP에 여러 포트가 있다. 하나의 포트에 하나의 프로그램을 실행시킬 수 있다.

2. AWS 서버 구매하기

2-1) AWS EC2 서버 구매하기

EC2 콘솔페이지

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2

2-2) AWS EC2 서버 종료하는 방법 (1년 후 자동결제 방지!)

중지 또는 종료하는 법. 무료 기간(1년) 후 결제가 되기 전에, 이렇게 종료하기!!

✔ 대상 인스턴스에 마우스 우클릭 → '인스턴스 상태' 클릭

✔ 중지 또는 종료 중 하나를 클릭하면 명령을 실행한다.

2-3) AWS EC2에 접속하기

(1) SSH (Secure Shell Protocol)

다른 컴퓨터에 접속할 때 쓰는 프로그램이다. 다른 것들 보다 보안이 상대적으로 뛰어나다.
접속할 컴퓨터에 22번 포트가 열려있어야 접속 가능하다. AWS EC2의 경우, 이미 22번 포트가 열려있다.

(2) AWS EC2에 접속하기

Window에는 SSH가 없으므로, git bash라는 프로그램을 이용!!

- git bash를 실행하고, 아래를 입력하기

ssh -i 받은키페어를끌어다놓기 ubuntu@AWX에적힌내아이피

- EX) 아래와 비슷한 생김새!

ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20

- Key fingerprint 관련 메시지가 나올 경우 Yes 입력하기

- git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊어주기

2-4) 간단한 리눅스 명령어

리눅스는 윈도우 같지 않아서, '쉘 명령어'를 통해 OS를 조작한다. (일종의 마우스 역할)

<가장 많이 쓰는 명령어>

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.

sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

💡 TIP. 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나온다.

3. 서버 세팅하기

3-1) filezilla를 이용해서, 간단한 python 파일을 올려보자.

1st. 서버에 업로드 할 간단한 파일을 다운로드한다.

EX) test.py https://s3-us-west-2.amazonaws.com/secure.notion-static.com/593aa12f-0c0440dc-957340e1b6

아주 간단하게, 이 정도만 적어보자.

그리고 적당한 곳에 파일을 저장해보자.

print('hello sparta!!')

2nd. filezilla 실행 후, File 클릭 → New Site 클릭 → 파일 제목 `myec2` 입력

3rd. 정보들을 입력하고, OK 누르면 서버의 파일들을 볼 수 있다.

(HOST: 내 EC2서버의 IP // User: ubuntu로 입력)

4th. 마우스로 드래그 해서 파일을 업로드/다운로드하면 된다.

3-2) 파이썬 파일 실행해보기

EC2 콘솔창에서 아래와 같이 입력하기

home 디렉토리로 이동

cd ~

실행. 콘솔창에 hellow world!가 뜨는 것을 확인 할 수 있다.

python3 test.py

3-3) 서버 환경 통일하기

💡 지금 막! 컴퓨터를 구매한 상태이기 때문에 여기에 `업그레이드, DB설치, 명령어 통일 등의 세팅`을 해줘야 본격적으로 이용할 때 편리하다.

EC2 한방에 세팅하기 https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d3623fe88b1745d1-bb70304e88dfb537/initial_ec2.sh

✔ filezilla로 업로드하고, git bash(또는 터미널)에서 아래 코드를 차례대로 입력해주기

✔ 3분 정도 기다리면 모든 세팅이 완료된다.

sudo chmod 755 initial_ec2.sh ./initial_ec2.sh

3-4) 다시, 파이썬 파일을 실행해보기

💡 이제, `python` 이라고 입력해도 가능!

python test.py

4. 서버 환경 세팅 - [한 걸음 더]

4-1) 한국시간 세팅

- EC2 컴퓨터의 시간대를 한국으로 맞추는 명령어

sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

4-2) 파이썬 (python3 → python)

- python3 명령어를 python으로 사용할 수 있게 하는 명령어

sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

4-3) pip (pip3 → pip)

1) pip3 설치

2) pip3 명령어를 pip으로 사용할 수 있게 하는 명령어

* 한 줄 씩 복사 붙여넣기!

pip3 설치

sudo apt-get update sudo apt-get install -y python3-pip

pip3 대신 pip라고 입력하기 위한 명령어

sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

4-4) mongoDB 설치

(1) mongoDB 설치 코드

wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -


> ```
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /e

sudo apt-get update

sudo apt-get install -y mongodb-org

(2) mongoDB 실행하기

✔ 실행. 아무 반응이 없으면, 잘 실행된 것!

✔ 리눅스는 보통 잘 되면 아무것도 안나온다.

sudo service mongod start

(3) mongoDB 접속 계정 생성하기

mongoDB를 외부에 열어주기 전에, 접속에 필요한 아이디와 비밀번호를 세팅해보자!! (설정 안 하면 누구나 DB정보를 볼 수 있다는...)

mongo
좌측에 > 표시가 나오면 성공적으로 MongoDB에 접속한 것이다!
다음 명령어를 순차적으로 입력하기 (test, test 자리에 내가 넣고 싶은 아이디/비밀번호를 넣으면 된다.(영어로))

✔ admin으로 계정 바꾸기

use admin;

✔ 계정 생성하기

db.createUser({user: "test", pwd: "test", roles:["root"]});
그 후

✔ 나오기

exit

✔ MongoDB 재시작

sudo service mongod restart

(4) mongoDB를 외부에 열어주기

💡 mongoDB는 디폴트로 내부에서만 접속을 허용하고 있다. 이 작업은 외부에서 접근이 가능하도록 잠금을 풀어는 것이다.

리눅스 자체 에디터(고급 메모장 정도로 생각!)인 Vimn이 등장한다.
a를 눌러야 입력 모드가 되고, :wq를 눌러야 저장하고 나올 수 있다.

sudo vi /etc/mongod.conf

sudo: 관리자(SuperUser) 권한으로 다음을 실행

=> "관리자 권한으로 /etc 폴더 아래 mongod.conf 파일을 Vim으로 켜줘!"라는 뜻
위 멸영어 실행 후, 아래 방향 화살 키 누르기

입력 모드 전환 a

bindIp: 내용을 0.0.0.0으로
security: 내용을 authorization: enabled로 바꾸기

내용 저장하고 에디터 종료하기. esc 누르고 다음 입력.

:wq

재시작

sudo service mongod restart

(5) Robo3T를 이용해서, "내 컴퓨터에서" → "서버에 있는 mongoDB"에 접속하기

💻 좌측 상단 File 아래에 위치한 아이콘(컴퓨터모양) 클릭 ↓ Create 클릭 ↓ 접속 정보 세팅하기 ↓ 상단 Authentication 탭 클릭

① Perform authentication 체크박스 클릭 ② 생성한 계정의 아이디와 비밀번호 입력 후, save 클릭

4-5) 포트포워딩 (80포트 → 5000포트)

- 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

5. Flask 서버 실행해보기

5-1) 기초적인 flask 서버 파일 만들기

app.py 파일 준비

from flask import Flask
app = Flask(__name__)

@app.route('/') def home(): return 'This is Home!'

if name == 'main': app.run('0.0.0.0', port=5000, debug=True)

- filezilla를 통해 EC2에 업로드한 다음, 실행해보기

실행

python app.py

🎯 실행시키면, 'flask 패키지가 없다'는 에러가 난다. 패키지를 설치해야 한다.

### 5-2) pip로 패키지 설치하기
> ##### 💡 file → setting → ..에서 `+` 버튼 누르고 설치했던 작업을, 명령어로 해야한다.
`pip install flask`


### 5-3) 다시 flask 서버를 실행해보기
- 아래 명령어로 flask 서버를 실행한다.

python app.py

- 서버 실행이 되면, 크롬에서 접속을 해본다.
✔ 크롬 브라우저 창에 아래와 같이 입력한다.

http://[내 EC2 IP]:5000/

``` 🎯 아직 작동하지 않는다. AWS에서 약간의 설정이 더 필요하다.

6. AWS에서 포트 열어주기

6-1) AWS에서 5000포트 열어주기

- EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도, AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있다.

→ 그래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 한다.

💻 일단, EC2 관리 콘솔로 들어간다. 그리고 보안그룹(영문: Security Group)을 눌러 들어간다.

↓ 해당 보안그룹을 클릭한다.

↓ Edit inbound rules를 선택한다.

↓ 아래 세 가지 포트를 추가한다.

① 80포트: HTTP 접속을 위한 기본포트

② 5000포트: flask 기본포트

③ 27017포트: 외부에서 mongoDB 접속을 하기 위한 포트

6-2) 다시 접속해보기!!

http://내아이피:5000 → 잘 작동하는 것을 확인할 수 있다.
이제 app.py 파일을 수정하고, 다듬어서 올리면 진짜 프로젝트가 된다.

210926 개발일지

Sun, 26 Sep 2021 12:25:38 GMT

1. Flask시작하기 - 서버만들기

1-1) Flask 패키지 설치하기

✅ 윈도우

좌상단File → setting → Python interpreter → Python interpreter 화면에서 + 버튼 누르기 → Flask 검색 → Install package 클릭

1-2) Flask 기초 : 기본 실행

Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. (서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다.)
app.py 파일을 만들어 아래 코드를 붙여넣는다. (통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓는다!)

✅ flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return 'This is Home!'

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

2. Flask시작하기 - HTML 파일 주기

2-1) Flask 기초 : 기본 폴더구조

Flask 서버를 만들 때는 항!상! 프로젝트 폴더 안에, 아래 세 개를 만들고 시작하기!!!

① static 폴더 : 이미지, css파일을 넣어둔다. ② templates 폴더 : html파일을 넣어둔다. ③ app.py 파일
venv은 실제로 보이지만, 안 보인다고 생각하기

2-2) Flask 기초 : HTML 파일 불러오기

templates 폴더는 HTML 파일을 담아두고, 불러오는 역할을 한다!

(1) 간단한 index.html 파일을 templates 안에 만들기

✅ index.html 예제코드




    
    
    
    Document


    서버를 만들었다!

(2) html 파일 불러오기

flask 내장함수 render_template 이용하기!!!

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

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

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

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

3. Flask시작하기 - API 만들기

3-1) GET, POST 방식

✅ GET

데이터 조회(Read)를 요청할 때 EX) 영화 목록 조회

데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달 EX) 예: google.com?q=북극곰

✅ POST

데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 EX) 회원가입, 회원탈퇴, 비밀번호 수정

데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

3-2) GET, POST 요청에서 클라이언트의 데이터를 얻는 방법

예를 들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고왔다고 해보자.
받은 값을 개발자가 볼 수 있게 print로 찍어볼 수 있게 했다.

✅ GET 요청 API코드

@app.route('/test', methods=['GET'])
def test_get():
    title_receive = request.args.get('title_give')
    print(title_receive)
    return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

✅ GET 요청 확인 Ajax코드

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
        console.log(response)
    }
})

✅ POST 요청 API코드

@app.route('/test', methods=['POST'])
def test_post():
     title_receive = request.form['title_give']
     print(title_receive)
     return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

✅ POST 요청 확인 Ajax코드

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
        console.log(response)
    }
})

[SpartaCodingClub] 힙한취미코딩 개발일지 (2)

Fri, 17 Sep 2021 18:42:03 GMT

🎈힙한취미코딩 이벤트 URL

https://spartacodingclub.kr/hip?utm_source=kakao_plusfriend&utm_medium=crm&utm_campaign=%EC%98%A8%EB%9D%BC%EC%9D%B8&utm_content=%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%94%8C%EC%B9%9C%EC%A0%84%EC%88%98&utm_term=%EA%B2%BD%ED%92%88%EA%B0%95%EC%A1%B0_210913

🎈 미션 완성 작품 URL

https://xmas.spartacodingclub.kr/CkpnCWKzT1Fb/xmas.html

[힙한취미코딩 2일차 _MISSION_]

🎯나만의 Invitation Card 만들어보기!🎯

📍 1. 카드 봉투 HTML 만들기

1-1) 새로운 HTML 파일 만들기

이름은 xmas.html

💡 html:5 입력후 tab을 누르면 템플릿이 자동 완성 된다!!

1-2) 배경색 바꾸기

회색빛이 섞인 진청록색: #264C59

💡 배경색은 자신이 원하는 color 'pick'하면 된다!!

1-3) 카드 봉투 이미지 가운데에 놓기

✅ 카드 봉투 이미지 URL

https://media.istockphoto.com/vectors/mail-customer-service-icon-vector-id1152903919?k=20&m=1152903919&s=612x612&w=0&h=fSfMK-4dtkcHuujrDXk2mMZrQnl9QC6CHpeaL9jsRIk=

✅ 태그 안의 2021 MS's Online Piano Recital Invitation Card LET'S OPEN IT! We invite medical workers to '2021 MS's Online Piano Recital' To. All Medical Workers We would like to express our gratitude to the medical personnel who are struggling more than anyone else to save COVID-19 patients and doing all they can to flatten the coronavirus. We wish for the medical staffs who are working hard even at this moment for human life to get a rest time through our online piano recital for a while. Sincerely, we are very appreciative of their efforts. From. MS

나에게 힙한취미코딩 이벤트는 웹개발종합반에서 아직 다루지 않은 것들을 미리 쉽게 접해볼 수 있는 기회였다. 직접 웹페이지를 만들고 배포까지 해보니 너무 뿌뜻했다. 특히 모바일 버전 코드를 다시 짜보는 프로그래밍 과정이 되게 재밌었다. `@media screen and (max-width: 760px)` 코드를 사용해서 모바일 버전 코드를 따로 변경했는데, 어떻게 모바일 버전으로 웹페이지가 만들어지고 수정되는지 배울 수 있었다. 그리고 공유 기초 작업을 위해 og 태그와 favicon 넣는 것까지 해봤는데 이 부분이 너무 신기했다. 이렇게 코드를 하나하나씩 쌓아가니까 완성도 있는 웹페이지를 완성할 수 있었다. 이번 경험이 앞으로 웹페이지를 개발할 때 정말 큰 도움이 될 것 같다.

[SpartaCodingClub] 힙한취미코딩 개발일지 (1)

Fri, 17 Sep 2021 18:28:50 GMT

🎈힙한취미코딩 이벤트 URL

https://spartacodingclub.kr/hip?utm_source=kakao_plusfriend&utm_medium=crm&utm_campaign=%EC%98%A8%EB%9D%BC%EC%9D%B8&utm_content=%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%94%8C%EC%B9%9C%EC%A0%84%EC%88%98&utm_term=%EA%B2%BD%ED%92%88%EA%B0%95%EC%A1%B0_210913

[힙한취미코딩 1일차 _MISSION_]

🎯간단한 로그인 페이지 만들어보기!🎯

1. HTML?? CSS??

로그인 페이지를 만들기 전에 HTML과 CSS가 각각 무엇이고 어떤 역할을 하는지 배웠다.

📚 HTML = 뼈대, CSS = 꾸미기!!

HTML은 '구역과 텍스트를 나타내는 코드'이고, CSS는 '잡은 구역을 꾸며주는 것'이다.

💡 HTML 코드 내에 CSS 파일을 불러와서 적용한다!!

1-1) HTML 기초

HTML은 크게 head와 body로 구성되어 있다.

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

💡 head 안에 들어가는 대표적인 요소로 meta, title, link, style, script 등이 있다!!

Visual Studio Code에서 HTML 파일을 만들어 거기에 html:5을 쓰고 enter를 누르면 아래와 같이 나온다.




    
    
    
    Document


    ...

1-2) CSS 기초

📚 CSS 사용방법

~ 안에 로 공간을 만들어 작성하기!!!

class를 가리킬 때는 꼭!! 반드시!! .아무거나이름 {...} 형태로 써주기!!!
EX) mytitle이라는 class를 가리킬 때, .mytitle {...} 형태로!!!

📚 오늘 배운 CSS

✅ 배경관련

① background-color ② background-image ③ background-size

*** 위 3개는 항상 붙어 다닌다.

✅ 사이즈

① width ② height

✅ 폰트

① font-size ② font-weight ③ font-famliy ④ color

✅ 간격

① margin ② padding

💡 margin은 바깥쪽 여백을, padding은 내 안쪽 여백을 조정해준다.

✅ 추가로 자주 쓰이는 CSS

① border-radius

2. 간단한 로그인 페이지 만들기

이제 본격적으로 '로그인 페이지'를 만들어보도록 하겠다.🚩

📍 1st. Visual Studio Code에서 HTML 파일 만들기

login.html 이라는 파일을 하나 만든다.

💡 파일명에 꼭!! .html이 포함하기!!!

📍 2nd. "html:5"로 HTML 기본 뼈대 가져오기

Document ... ```

📍 3rd. `~` 안의 `~` 사이에 있는 'Document' 지우고, '로그인페이지'라고 쓰기

로그인페이지 ... ```

📍 4th. CSS를 활용하여 로그인 페이지 '제목' 브라우저에 띄우기

태그는 제목을 나타내는 태그이다.

태그도 비중은 작지만 역할이 있다.


  로그인 페이지
  아이디, 비밀번호를 입력해주세요

📍 5th. ID와 PASSWORD 입력할 칸 만들기

코드를 사용하면 text를 입력할 칸을 만들 수 있다.

로그인 페이지

아이디, 비밀번호를 입력해주세요

ID:

PW:

```

📍 6th. 로그인하기 버튼 만들기

버튼을 만들고 싶다면,


    로그인 페이지
    아이디, 비밀번호를 입력해주세요
    ID: 
    PW:

📍 7th. Background 이미지 삽입하기

태그 사이에
태그를 만든다.

에 "mytitle"라는 class를 입력한다.


  
      로그인 페이지
      아이디, 비밀번호를 입력해주세요
  
  ID: 
  PW:

태그 사이에

📍 8th. 정중앙으로 옮기기

태그 사이에
태그를 만든다.
에 "wrap"라는 class를 입력한다.
각 코드를 하나씩 중앙으로 옮기는 것보다 하나의 묶음으로 만들어서 옮기는 것이 더 효율적. 그래서
코드를 만든 것임.
  
      
          로그인 페이지
          아이디, 비밀번호를 입력해주세요
      
      ID: 
      PW: 
      
  
"wrap" class가 자리를 얼마나 차지하고 있는지를 확인하기 위해 background-color: green; 코드를 사용한다.
background-color: green; 코드를 통해 확인한 크기를 줄이기 위해 width를 사용했다.
margin: auto;에서 auto는 좌우의 바깥 여백을 똑같이 배분하는 역할을 한다. 그래서 이 코드를 사용하면 브라우저 화면 중앙에 위치하게 된다.
   
📍 9th. '로그인하기' button 크기, 색 바꾸기
    
        
            로그인 페이지
            아이디, 비밀번호를 입력해주세요
        
        ID: 
        PW: 
        
    
width와 height를 이용해 버튼의 가로, 세로 길이를 조절했다.
border-radius를 이용해 button 모서리를 덜각지게 만들었다.
  
📍 10th. 폰트 입히기

먼저 구글웹에서 마음에 드는 폰트를 click한다.

[ + Select this style ]을 click한다.

link를 복사해서 ~ 사이 </code> 태그 아래에 넣는다.</li> <li>CSS를 복사해서 <code><style> ~ </style></code> 사이에 넣는다. 이때 주의할 점은, <code>*</code>의 의미는 모든 태그에 폰트스타일을 다 먹이겠다는 뜻이다.<pre><code><head> <meta charset="UTF-8"> <title>로그인페이지

3. 로그인 페이지 완성 🏆

<완성 코드>
    
    로그인페이지

    
    

    


    
        
            로그인 페이지
            아이디, 비밀번호를 입력해주세요
        
        ID: 
        PW: 
        
    
웹개발 종합반에서 배웠던 내용을 힙한취미코딩 이벤트를 통해 다시 한번 더 복습하는 시간을 가질 수 있어서 너무 좋았다. 배웠던 것을 반복해서 한번 더 되새기니 더 꼼꼼하게 머리에 새길수 있어서 매우 유익한 시간이었다.( •̀ .̫ •́ )✧

210917 개발일지

Fri, 17 Sep 2021 12:33:24 GMT

🎯지니뮤직의 1~50위 곡 스크래핑🎯

✅ 지니뮤직 사이트

https://www.genie.co.kr/chart/top200?ditc=D&ymd=20200403&hh=23&rtm=N&pg=1

✅ 순위/ 곡 제목/ 가수를 스크래핑 하기

힌트: 순위와 곡제목이 깔끔하게 나오지 않을 때(EX) 옆에 여백이 있다던가, 다른 글씨도 나온다던가...), 파이썬 내장 함수인 scrip() 사용하기

📍 1st. 크롤링 기본 세팅

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=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers)

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

# 코딩 시작

📍 2nd. select를 이용해서, trs을 불러오기

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

📍 3rd. trs 반복문 돌리기

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

📍 4th. 순위/ 곡 제목/ 가수 print 하기

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

태그 안의 텍스트를 찍고 싶을 땐 → 태그.text

태그 안의 속성을 찍고 싶을 땐 → 태그.['속성']

.strip()은 '문자열' 또는 '공백'을 제거해준다.

<'문자열 인덱싱(슬라이싱)'>

파이썬에서는 ‘슬라이싱(slice)’이라는 기능을 제공하는데, 다음과 같이 가져오고 싶은 문자열의 범위를 지정하면 된다.
위 코드를 보면 [0:2]라는 표현을 사용했다.
[ ]는 슬라이싱할 범위를 지정할 때 사용하는 기호이다.
0은 시작 위치를, 2는 끝 위치를 의미한다.
시작과 끝을 구분하기 위해 그 사이에 콜론(:)을 사용한다.

🏆지니뮤직의 1~50위 곡 스크래핑 완성🏆

<완성 코드>

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=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers)

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

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

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

210916 개발일지

Thu, 16 Sep 2021 08:34:31 GMT

1. Python

1-1) 파이썬 기초 문법

(1) 변수 & 기본연산

a = 3 # 3을 a에 넣는다
b = a # a를 b에 넣는다
a = a + 1 # a+1을 다시 a에 넣는다

num1 = a*b # a*b의 값을 num1이라는 변수에 넣는다
num2 = 99 # 99의 값을 num2이라는 변수에 넣는다

'변수 이름'은 마음대로 지을 수 있다!!

(2) 자료형

① 숫자, 문자형

name = 'bob' # 변수로 '문자열' 가능,
num = 12 # '숫자'도 가능,
is_number = True # 'True' 또는 'False' → 'Boolean 형'도 가능

그리고 List와 Dictionary 도 가능!!

② List 형 (Javascript의 배열형과 동일)

a_list = []
a_list.append(1) # 리스트에 값을 넣는다
a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

a_list의 값은? [1,[2,3]]
a_list[0]의 값은? 1
a_list[1]의 값은? [2,3]
a_list[1][0]의 값은? 2

③ Dictionary 형 (Javascript의 dictionary형과 동일)

a_dict = {}
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

a_dict의 값은? {'name':'bob','age':21, 'height':178}
a_dict['name']의 값은? 'bob'
a_dict['age']의 값은? 21
a_dict['height']의 값은? 178

④ Dictionary 형과 List 형의 조합

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

people[0]['name']의 값은? 'bob'
people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
people[2]['name']의 값은? 'john'

(3) 함수

① 함수의 정의

코딩에서 함수는 (변수를 받든 안 받든) 정해진 동작을 수행하는 것이다.

'이름'을 마음대로 정할 수 있다.

📚 수학문제에서

f(x) = 2*x+3
y = f(2)

y의 값은? 7

📚 참고: 자바스크립트에서는

function f(x) {
    return 2*x+3
}

💡 파이썬에서

def f(x):
    return 2*x+3

y = f(2)

y의 값은? 7

② 함수의 응용

def sum_all(a,b,c):
    return a+b+c

def mul(a,b):
    return a*b

result = sum_all(1,2,3) + mul(10,10)

result라는 변수의 값은? 106

(4) 조건문

① if/else로 구성!

def oddeven(num): # oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다.
    if num % 2 == 0: # num을 2로 나눈 나머지가 0이면
        return True # True (참)을 반환한다.
    else: # 아니면,
        return False # False (거짓)을 반환한다.

result = oddeven(20)

result의 값은? True

def is_adult(age):
    if age > 20:
        print('성인입니다') # 조건이 참이면 성인입니다를 출력
    else:
        print('청소년이에요') # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)

무엇이 출력될까요? 성인입니다

(5) 반복문

파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태이다

반복문은 무조건 리스트와 함께 쓰인다!!

fruits = ['사과','배','감','귤']

for fruit in fruits:
    print(fruit)

사과, 배, 감, 귤 하나씩 꺼내어 찍힌다.

<리스트 예제 - 과일 갯수 세기 함수>

↓ 사과의 갯수를 세어 보여준다.

fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

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

print(count)

def count_fruits(target):
    count = 0
    for fruit in fruits:
        if fruit == target:
            count += 1
    return count

subak_count = count_fruits('수박')
print(subak_count) #수박의 갯수

gam_count = count_fruits('감')
print(gam_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:
    print(person['name'], person['age'])

# 반복문과 조건문을 응용한 함수>**
# 이름을 받으면, age를 리턴해주는 함수
def get_age(myname):
    for person in people:
        if person['name'] == myname:
            return person['age']
    return '해당하는 이름이 없습니다'

print(get_age('bob'))
print(get_age('kay'))

2. Python package

2-1) 패키지? 라이브러리?

Python에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위이다.이런 패키지의 묶음을 라이브러리라고 볼 수 있다.

2-2) Requests 라이브러리 사용해보기 + List/Dictionary/함수/If/For문 연습

✅ 아래 방법으로 서울시 대기 Open API에서, 중구의 NO2 값을 가져올 수 있다.

import requests # requests 라이브러리 설치 필요

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

print(rjson['RealtimeCityAir']['row'][0]['NO2'])

✅ 모든 구의 IDEX_MVL 값을 찍어주기

import requests # requests 라이브러리 설치 필요

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
    print(gu['MSRSTE_NM'], gu['IDEX_MVL'])

✅ IDEX_MLV 값이 60 미만인 구만 찍어주기

import requests # requests 라이브러리 설치 필요

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
    if gu['IDEX_MVL'] < 60:
        print (gu['MSRSTE_NM'], gu['IDEX_MVL'])

3. Web Scraping(Crawling)

3-1) 웹스크래핑(크롤링) 기초

(1) 웹스크래핑 해보기 (영화 제목)

'네이버 영화 페이지' 스크래핑 하기 https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303

bs4(beautifulsoup4) 패키지 추가 설치해야 한다.

✅ 크롤링 기본 세팅

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://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

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

# 코딩 시작

<크롤링 기본 세팅 설명>

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
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')

#############################
# (입맛에 맞게 코딩)
#############################

✅ select / select_one의 사용법

<영화 제목 가져오기>

태그 안의 텍스트를 찍고 싶을 땐 → 태그.text
태그 안의 속성을 찍고 싶을 땐 → 태그.['속성']
```
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 data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

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

select를 이용해서, tr들을 불러오기

movies = soup.select('#old_content > table > tbody > tr')

movies (tr들)의 반복문을 돌리기

for movie in movies: # movie 안에 a 가 있으면, a_tag = movie.select_one('td.title > div > a') if a_tag is not None: # a의 text를 찍어본다. print (a_tag.text)


### ✅ beautifulsoup 내 select에 미리 정의된 다른 방법

선택자를 사용하는 방법 (copy selector)

soup.select('태그명') soup.select('.클래스명') soup.select('#아이디명')

soup.select('상위태그명 > 하위태그명 > 하위태그명') soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

태그와 속성값으로 찾는 방법

soup.select('태그명[속성="값"]')

한 개만 가져오고 싶은 경우

soup.select_one('위와 동일')


> - 항상 정확한 것은 아니지만, 크롬 개발자도구를 참고할 수도 있다!!
1 원하는 부분에서 마우스 오른쪽 click → 검사
2 원하는 태그에서 마우스 오른쪽 click
3 Copy → Copy selector로 선택자를 복살 할 수 있음




## 3-2) 웹스크래핑(크롤링) 연습 [Quiz]
### (1) 웹스크래핑 해보기 (순위, 제목, 별점)
![](https://images.velog.io/images/waterlily_0101/post/f0dfd553-96a4-4551-a86e-9cf5e34f3fc8/2021-09-19%20(1)_%EC%9B%B9%EC%8A%A4%ED%81%AC%EB%9E%98%ED%95%91_%EC%88%9C%EC%9C%84,%EC%A0%9C%EB%AA%A9,%EB%B3%84%EC%A0%90.png)

##### <완성 코드>

import requests from bs4 import BeautifulSoup

URL을 읽어서 HTML를 받아오고,

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

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

select를 이용해서, tr들을 불러오기

movies = soup.select('#old_content > table > tbody > tr')

movies (tr들) 의 반복문을 돌리기

for movie in movies: # movie 안에 a 가 있으면, a_tag = movie.select_one('td.title > div > a') if a_tag is not None: rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기 title = a_tag.text # a 태그 사이의 텍스트를 가져오기 star = movie.select_one('td.point').text # td 태그 사이의 텍스트를 가져오기 print(rank,title,star)





# 4. DB
## 4-1) DB의 종류
### (1) RDBMS(SQL)
> - 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사하다.
- 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어렵다.
- 그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이할 수 있다.
- EX) MS-SQL, My-SQL 등

### (2) No-SQL
> - 딕서너리 형태로 데이터를 저장해두는 DB이다.
- 그래서 데이터 하나 하나 마다 같은 값들을 가질 필요가 없게 된다.
-자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있다.




# 5. pymongo로 DB 조작하기
## 5-1) pymongo 라이브러리의 역할
> - 예를 들어, MS Excel를 파이썬으로 조작하려면, 특별한 라이브러리가 필요하다.
- 마찬가지로, mongoDB라는 프로그램을 조작하려면, 특별한 라이브러리, pymongo가 필요하다!!
- 따라서 **pymongo 패키지**를 설치해야 한다!!

## 5-2) pymongo 기본 코드

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

코딩 시작


## 5-3) pymongo의 네 가지 기능
#### ① DB 연결하기 & 데이터 넣기
> **pymongo(insert)** 코드스니펫

doc = {'name':'bobby','age':21} db.users.insert_one(doc)

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

MongoDB에 insert 하기

'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.

db.users.insert_one({'name':'bobby','age':21}) db.users.insert_one({'name':'kay','age':27}) db.users.insert_one({'name':'john','age':30})


#### ②-1 모든 결과 값을 보기
> **pymongo(find)** 코드스니펫

same_ages = list(db.users.find({'age':21},{'_id':False}))

MongoDB에서 데이터 모두 보기

all_users = list(db.users.find({}))

참고) MongoDB에서 특정 조건의 데이터 모두 보기

same_ages = list(db.users.find({'age':21},{'_id':False}))

print(all_users[0]) # 0번째 결과값을 보기 print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for user in all_users: # 반복문을 돌며 모든 결과값을 보기 print(user)


#### ②-2 특정 결과 값을 뽑아 보기 
> **pymongo(find_one)** 코드스니펫

user = db.users.find_one({'name':'bobby'})

user = db.users.find_one({'name':'bobby'}) print(user)


#### ③ 수정하기
> **pymongo(update_one)** 코드스니펫

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

생김새

db.people.update_many(찾을조건,{ '$set': 어떻게바꿀지 })

예시 - 오타가 많으니 이 줄을 복사해서 씁시다!

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

user = db.users.find_one({'name':'bobby'}) print(user)

> 🎈 참고:
- DB에서 따옴표(`''` ) 없이 숫자로만 표시할 경우 `#`로 표시된다.
- 반면, `'숫자'` 형태로 문자열을 표현하면 `""`로 표시된다.

#### ④ 삭제하기 (거의 안 씀)
> **pymongo(delete_one)** 코드스니펫

db.users.delete_one({'name':'bobby'})

user = db.users.find_one({'name':'bobby'}) print(user)


## 5-4) pymongo 코드요약 (예시)
- 저장하고, 찾고, 바꾸고, 지우고!!!

> **① 저장하기**

doc = {'name':'bobby','age':21} db.users.insert_one(doc)

**②-1 여러개 찾기 - ( _id 값은 제외하고 출력)**

same_ages = list(db.users.find({'age':21},{'_id':False}))

**②-2 한 개 찾기**

user = db.users.find_one({'name':'bobby'})

**③ 바꾸기(수정)**

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

**④ 지우기(삭제)**

db.users.delete_one({'name':'bobby'})





## 5-5) 웹스크래핑 결과 저장하기
### (1) insert 연습하기 - 웹스크래핑 결과를 DB에 저장하기

### ✅ pymongo 기본 세팅 (크롤링 완성 코드에서 시작하기)

import requests from bs4 import BeautifulSoup

URL을 읽어서 HTML를 받아오고,

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

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

select를 이용해서, tr들을 불러오기

movies = soup.select('#old_content > table > tbody > tr')

movies (tr들) 의 반복문을 돌리기


### ✅ 도큐먼트 만들어 하나씩 insert 하기

import requests from bs4 import BeautifulSoup

URL을 읽어서 HTML를 받아오고,

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

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

select를 이용해서, tr들을 불러오기

movies = soup.select('#old_content > table > tbody > tr')

movies (tr들) 의 반복문을 돌리기





## 5-6) 웹스크래핑 결과 이용하기 [Quiz]

### (1) find, update 연습하기
- 파이썬 파일을 새로 하나 만들어 연습하기
### ✅ pymongo 기본 코드

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

코딩 시작


### 📍 1st. 영화제목 '매트릭스'의 평점 가져오기
##### <완성 코드>

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

코딩 할 준비

target_movie = db.movies.find_one({'title':'매트릭스'}) print (target_movie['star'])


### 📍 2nd. '매트릭스'의 평점과 같은 평점의 영화 제목들 가져오기
##### <완성 코드>

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

코딩 할 준비

target_movie = db.movies.find_one({'title':'매트릭스'}) target_star = target_movie['star']

movies = list(db.movies.find({'star':target_star}))

for movie in movies: print(movie['title'])


### 📍 3rd. 매트릭스 영화의 평점을 0으로 만들기
- 결과 robo3T로 보기
##### <완성 코드>

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

코딩 할 준비

db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}})

210915 개발일지

Wed, 15 Sep 2021 14:29:57 GMT

🎯나만의 쇼핑몰 메인 페이지 만들기🎯

📍 1st. 부트스트랩 시작 템플릿





    
    
    

    
    

    
    
    
    
    

    스파르타코딩클럽 | 부트스트랩 연습하기



    이걸로 시작해보죠!

📍 2nd. 사용할 폰트 링크 가져오기

☑ `~` 사이에 위치한 </code> 태그 아래 폰트 링크 붙여넣기</h4> <blockquote> <pre><code></code></pre></blockquote> <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet"> ``` <h4 id="☑-style--style-사이에-font-family-붙여넣기">☑ <code><style> ~ </style></code> 사이에 font-family 붙여넣기</h4> <blockquote> <pre><code></code></pre></blockquote> <ul> <li>{ font-family: 'Jua', sans-serif; }<pre><code></code></pre></li> </ul> <br> <h2 id="📍-3rd-아이템-이미지-가져오기">📍 3rd. 아이템 이미지 가져오기</h2> <p></p> <h3 id="☑-내가-한-방법---body--body-사이에-이미지-url-삽입">☑ 내가 한 방법 - <code><body> ~ </body></code> 사이에 이미지 url 삽입</h3> <p><code><body> ~ </body></code> 사이에</p> <blockquote> <pre><code></code></pre></blockquote> <div class="item-img"> </div> ``` <p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.item-img { text-align: center; padding: 40px 0px 30px 0px; }</code></pre></blockquote> <pre><code>##### • text-align을 통해서 이미지 위치를 center로 조정했다. ###### ↳ text-align을 사용해서도 이미지 위치를 center로 움직이는데 error가 나지는 않지만, ###### ↳ text-align의 속성은 텍스트의 정렬 방향을 의미하기 떄문에, ###### ↳ background-position을 사용해 이미지 위치를 center로 조정하자!!!!! ##### • padding을 통해서 이미지 안쪽 여백을 조정했다. ###### ↳ 쉽게 말해 이미지 위와 아래의 간격을 조절했다. ##### • 이미지 크기는 따로 조절하지 않았다. ### ☑ 또 다른 방법 - `<style> ~ </style>` 사이에 이미지 url 삽입 `<body> ~ </body>` 사이에 > ``` <div class ="item-img"></div></code></pre><p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.item-img { width: 500px; height: 300px; background-image: url("https://media.istockphoto.com/photos/spa-massage-picture-id607910912?k=20&m=607910912&s=612x612&w=0&h=GEney-H5Z87um9h8t34MeTm3FM-wOZ5PvW06SThhCuY="); background-position: center; background-size: cover; }</code></pre></blockquote> <pre><code>##### • background-image를 통해 이미지 url을 가져왔다. ##### • width와 height로 이미지의 가로, 세로 길이를 조절했다. ##### • background-size를 통해 width와 height가 설정한 가로, 세로 길이 만큼 이미지가 cover한다. ##### • background-position을 통해 이미지의 위치를 center로 조정했다. <br> ## 📍 4th. 상품명, 가격, 설명 쓰기 ![](https://images.velog.io/images/waterlily_0101/post/41e279ea-c776-4994-8518-44058250aa50/2021-09-17%20%ED%96%A5%EC%B4%88%20%EC%83%81%ED%92%88%EB%AA%85,%20%EA%B0%80%EA%B2%A9,%20%EC%84%A4%EB%AA%85.png) ### ☑ 내가 한 방법 `<body> ~ </body>` 사이에 > ``` <div class="item-desc"> <p><span style="font-size: 250%;">라벤더 향초</span> <span style="font-size: 100%;">가격: 10,000원/개</span></p> <p class="explain">이 향초는 사실 특별한 힘을 가지고 있어요. 향초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 됩니다. 하나 사가세요! 라벤더 향이 아주 좋아요!</p> </div></code></pre><h5 id="-span-태그를-통해-상품명-옆에-가격을-쓸-수-있었다">• <code><span></code> 태그를 통해 상품명 옆에 가격을 쓸 수 있었다.</h5> <h5 id="-span-태그-안에-style-태그를-사용해-상품명과-가격의-font-size를-조정했다">• <code><span></code> 태그 안에 <code><style></code> 태그를 사용해 상품명과 가격의 font-size를 조정했다.</h5> <p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.item-desc { width: 610px; margin: auto; } .explain { margin-top: -20px; }</code></pre></blockquote> <pre><code>##### • auto는 좌우의 바깥 여백을 똑같이 배분한 것이다. 그래서 브라우저 화면 중앙에 위치하게 된다. ##### • margin: auto; 를 통해 item-desc에 해당하는 부분이 center로 올 수 있게 조정했다. ##### • 상품 설명하는 부분(explain)이 상품명과 가격이 쓰여져 있는 부분(explain 윗부분)과 많이 떨어져 있어서 그 간격을 줄이기 위해 margin-top: -20px; 코드를 통해 줄였다. ### ☑ 또 다른 방법 `<body> ~ </body>` 사이에 > ``` <div class="item-desc"> <h1>라벤더 향초 <span class="price">가격: 10,000원/개</span></h1> <p>이 향초는 사실 특별한 힘을 가지고 있어요. 향초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 됩니다. 하나 사가세요! 라벤더 향이 아주 좋아요!</p> </div></code></pre><h5 id="-h1-태그를-통해-item-제목을-가장-크게-보이게-했다">• <code><h1></code> 태그를 통해 item 제목을 가장 크게 보이게 했다.</h5> <h5 id="-h1-태그-안에-span-태그를-삽입해-item-제목-옆에-바로-가격이-나타날-수-있도록-했다">• <code><h1></code> 태그 안에 <code><span></code> 태그를 삽입해 item 제목 옆에 바로 가격이 나타날 수 있도록 했다.</h5> <h5 id="-가격의-font-size를-조정하기-위해서-classprice-코드를-짰다">• 가격의 font-size를 조정하기 위해서 class="price" 코드를 짰다.</h5> <p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.price { font-size: 20px; } .item-desc { width: 500px; margin-top: 20px; margin-bottom: 20px; }</code></pre></blockquote> <pre><code>##### • margin-top과 margin-bottom을 통해 item-desc의 위쪽, 아래쪽 바깥 여백 간격을 조정했다. ###### ↳ 쉽게 말해 이미지와 item-desc의 사이 간격, 주문자 이름 칸과 item-desc의 사이 간격 조절했다. <br> ## 📍 5th. 로딩이 완료되면, 환율 API를 이용해서 환율 표시하기 ![](https://images.velog.io/images/waterlily_0101/post/2d418141-1c75-48c1-8d17-4abd82242f99/2021-09-17%20%ED%96%A5%EC%B4%88%20%ED%99%98%EC%9C%A8.png) ### ☑ 내가 한 방법 `<body> ~ </body>` 사이에 > ``` <div class="item-desc"> <p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p> </div></code></pre><p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.rate { color: blue; }</code></pre></blockquote> <pre><code> `<script> ~ </script>` 사이에 > ``` $(document).ready(function () { get_rate(); }); function get_rate(){ $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/rate", data: {}, success: function (response) { let now_rate = response['rate']; $('#now-rate').text(now_rate); } }) }</code></pre><h5 id="-로딩-후-바로-실시간-환율로-업데이트된-상태로-구현한-코드">• 로딩 후 바로 실시간 환율로 업데이트된 상태로 구현한 코드</h5> <h6 id="↳-function-get_rate-부분-바로-실행하기">↳ function get_rate() 부분 바로 실행하기</h6> <pre><code>$(document).ready(function () { get_rate(); });</code></pre><h5 id="-데이터-조회read-요청하기-위해-ajax-코드를-사용했다">• 데이터 조회(READ) 요청하기 위해 ajax 코드를 사용했다.</h5> <h5 id="-let-now_rate--responserate-코드는-rate-api의-실시간-환율-data를-가져온다">• let now_rate = response['rate']; 코드는 rate API의 실시간 환율 data를 가져온다.</h5> <h6 id="↳-처음에-let-now_rate--response0rate라고-코딩했더니-error가-났다">↳ 처음에 let now_rate = response[0]['rate'];라고 코딩했더니 error가 났다.</h6> <h6 id="↳-210917-error가-난-이유는-환율-api-주소로-들어가면-화면에-아래와-같이-뜨는데-json-형태로-값이-1개만-들어가-있다-이-경우-값이-array-형태가-아니기-때문에-response0-또는-response1을-로그로-찍어보면-undefined되어-있다고-나온다-따라서-api-json-형태에-맞게-ajax를-사용해야-error가-나오지-않는다">↳ (210917+) error가 난 이유는 환율 API 주소로 들어가면 화면에 아래와 같이 뜨는데, JSON 형태로 값이 1개만 들어가 있다. 이 경우 값이 array 형태가 아니기 때문에 response[0] 또는 response[1]을 로그로 찍어보면 undefined되어 있다고 나온다. 따라서 API JSON 형태에 맞게 Ajax를 사용해야 error가 나오지 않는다.</h6> <p></p> <h5 id="-now-ratetextnow_rate-코드는-쇼핑몰-메인-페이지에-실시간-환율-data를-시각적으로-보여주는데-사용되었다">• $('#now-rate').text(now_rate); 코드는 쇼핑몰 메인 페이지에 실시간 환율 data를 시각적으로 보여주는데 사용되었다.</h5> <br> <h2 id="📍-6th-item-order-박스-만들기">📍 6th. item order 박스 만들기</h2> <p></p> <h3 id="bootstrap-forms-코드스니펫-활용하기">Bootstrap forms 코드스니펫 활용하기</h3> <blockquote> <p><a href="https://getbootstrap.com/docs/4.0/components/forms/">https://getbootstrap.com/docs/4.0/components/forms/</a></p> </blockquote> <h3 id="☑-내가-한-방법">☑ 내가 한 방법</h3> <p><code><body> ~ </body></code> 사이에</p> <h4 id="①-주문자-이름">① 주문자 이름</h4> <blockquote> <pre><code></code></pre></blockquote> <div class="form-group"> <p> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">주문자 이름</span> </div> <input type="text" class="form-control" id="validationCustomUsername" placeholder="" aria-describedby="inputGroupPrepend" required> </div> </p> </div> <h4 id="②-수량">② 수량</h4> <blockquote> <pre><code></code></pre></blockquote> <div class="form-group"> <p> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">수량</span> </div> <select name="custom-select mr-sm-2" class="form-control" id="validationCustomUsername" placeholder="" aria-describedby="inputGroupPrepend" required> <option selected>-- 수량을 선택하세요 --</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </p> </div> ``` <h4 id="③-주소">③ 주소</h4> <blockquote> <pre><code></code></pre></blockquote> <div class="form-group"> <p> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">주소</span> </div> <input type="text" class="form-control" id="validationCustomUsername" placeholder="" aria-describedby="inputGroupPrepend" required> </div> </p> </div> ``` <h4 id="④-전화번호">④ 전화번호</h4> <blockquote> <pre><code></code></pre></blockquote> <div class="form-group"> <p> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">전화번호</span> </div> <input type="text" class="form-control" id="validationCustomUsername" placeholder="" aria-describedby="inputGroupPrepend" required> </div> </p> </div> ``` <p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.form-group { width: 610px; margin: auto; }</code></pre></blockquote> <pre><code>##### • auto는 좌우의 바깥 여백을 똑같이 배분한 것이다. 그래서 브라우저 화면 중앙에 위치하게 된다. <br> ## 📍 7th. '주문하기' 버튼을 클릭했을 때, '주문이 완료되었습니다.'라는 alert 띄우기 ### ☑ 내가 한 방법 `<body> ~ </body>` 사이에 > ``` <div class="form-group2"> <button type="button" class="btn btn-primary" onclick="order()">주문하기</button> </div></code></pre><h5 id="--button-태그-안에-onclickorder를-언급해야-기능으로-작동한다">• <code><button></code> 태그 안에 onclick="order()"를 언급해야 기능으로 작동한다.</h5> <p><code><style> ~ </style></code> 사이에</p> <blockquote> <pre><code>.form-group2 { text-align: center; margin-bottom: 250px; }</code></pre></blockquote> <pre><code>##### • text-align 속성은 텍스트의 정렬 방향을 의미한다. 정렬 방향을 center(중앙 정렬)로 코딩했기 때문에 '주문하기' text 위치가 button 안에서 중앙에 위치한다. `<script> ~ </script>` 사이에 > ``` function order() { alert("주문이 완료되었습니다."); }</code></pre><br> <hr> <p></p> <h5 id="완성-코드"><완성 코드></h5> <pre><code><!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">   <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>스파르타코딩클럽 | 부트스트랩 연습하기 라벤더 향초 가격: 10,000원/개 이 향초는 사실 특별한 힘을 가지고 있어요. 향초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 됩니다. 하나 사가세요! 라벤더 향이 아주 좋아요! 달러-원 환율: 1219.15 주문자 이름 수량 주소 전화번호

210914 개발일지

Tue, 14 Sep 2021 09:35:40 GMT

1. Ajax 기본 골격

$.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
        console.log(response)
    }
})

2. $ajax 코드 설명

☑ type: "GET" → GET 방식으로 요청한다.

GET: 데이터 조회(READ) 요청할 때

POST: 데이터 생성(CREATE), 변경(UPDATE), 삭제(DELETE) 요청할 때

☑ url: 요청할 url ☑ data: 요청하면서 함게 줄 데이터 (GET 요청시에는 비워두기)

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.

url: "http://naver.com?param=value¶m2=value2",

POST 요청은, data : {} 에 넣어서 데이터를 가져간다.

data: {param: 'value', param2: 'value2'},

☑ success: 성공하면, response값에 서버의 결과 값을 담아서 함수를 실행한다.

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}

3. jQuery와 Ajax의 조합 연습

3-1) 서울시 실시간 미세먼지 상태

☑ 서울시 실시간 미세먼지 상태 OpenAIP http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

(url 클릭하면 아래 이미지 나옴.)

☑ 업데이트 버튼을 누를 때마다 지웠다 새로 씌여지는 상태로 구현하기

$('#names-q1').empty()

☑ '미세먼지 수치'가 '50 이상'인 지역구만 '빨간색'인 상태로 구현하기

① url: " ", 에 서울시 실시간 미세먼지 상태 OpenAIP 넣기

② 가져올 data값 부르기

☐ let rows = response['RealtimeCityAir']['row'] ☛ RealtimeCityAir 하위에 위치해 있는 row data값 가져온다.

③ 가져올 rows의 범위 정하기

☐ for (let i = 0; i < rows.length; i++) ☛ i는 0부터 rows.length까지의 data값을 1개씩 +해서 가져온다.

④ row 하위에 위치한 '구이름(gu_name)'과 '미세먼지 수치(gu_mise)'의 data값 이름을 가져오기

☐ let gu_name = rows[i]['MSRSTE_NM'] ☛ 구이름(gu_name)의 data값을 row의 MSRSTE_NM에서 가져온다. ☐ let gu_mise = rows[i]['IDEX_MVL'] ☛ 미세먼지 수치(gu_mise)의 data값을을 row의 IDEX_MVL에서 가져온다.

⑤ '미세먼지 수치'가 '50 이상'인 지역구만 '빨간색'인 상태로 구현하기

☐ 안에

let temp_html = ``
if (gu_mise > 50) {
    temp_html = `${gu_name} : ${gu_mise}`
} else {
    temp_html = `${gu_name} : ${gu_mise}`
}
$('#names-q1').append(temp_html)

☐ 안에

.bad {
    color: red;
}

<완성 코드>





    
    jQuery 연습하고 가기!

    
    

    

    



    jQuery와 Ajax의 조합 연습

    

    
        서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기

3-2) 서울시 실시간 따릉이 현황

☑ 서울시 실시간 따릉이 현황 OpenAIP http://spartacodingclub.shop/sparta_api/seoulbike

(url 클릭하면 아래 이미지 나옴.)

☑ 업데이트 버튼을 누를 때마다 지웠다 새로 씌여지는 상태로 구현하기

$('#names-q1').empty()

☑ '현재 거치된 따릉이 수'가 '5 이하'인 거치대 위치만 '빨간색'인 상태로 구현하기

① url: " ", 에 서울시 실시간 따릉이 현황 OpenAIP 넣기

② 가져올 data값 부르기

☐ let rows = response['getStationList']['row'] ☛ getStationList 하위에 위치해 있는 row data값 가져온다.

③ 가져올 rows의 범위 정하기

☐ for (let i = 0; i < rows.length; i++) ☛ i는 0부터 rows.length까지의 data값을 1개씩 +해서 가져온다.

④ row 하위에 위치한 '거치대 위치(name)'와 '거치대 수(rack)', '현재 거치된 따릉이의 수(bike)'의 data값 이름 가져오기

☐ let name = rows[i]['stationName'] ☛ 거치대 위치(name)의 data값을 row의 stationName에서 가져온다. ☐ let rack = rows[i]['rackTotCnt'] ☛ 거치대 수(rack)의 data값을을 row의 rackTotCnt에서 가져온다. ☐ let bike = rows[i]['parkingBikeTotCnt'] ☛ 현재 거치된 따릉이의 수(bike)의 data값을을 row의 parkingBikeTotCnt 에서 가져온다.

⑤ '현재 거치된 따릉이 수'가 '5 이하'인 거치대 위치만 '빨간색'인 상태로 구현하기

☐ 안에

let temp_html = ``
    if (bike < 5) {
        temp_html = `
                        ${name}
                        ${rack}
                        ${bike}
                    `
    } else {
        temp_html = `
                        ${name}
                        ${rack}
                        ${bike}
                     `
    }
$('#names-q1').append(temp_html)

☐ 안에

.bad {
    color: red;
}

<완성 코드>





    
    JQuery 연습하고 가기!
    
    

    

    




    jQuery와 Ajax의 조합 연습

    

    
        서울시 OpenAPI(실시간 따릉이 현황)를 이용하기
        
        
            
                
                    거치대 위치
                    거치대 수
                    현재 거치된 따릉이 수

3-3) 랜덤 고양이 사진

☑ 고양이 OpenAIP http://spartacodingclub.shop/sparta_api/seoulbike

(url 클릭하면 아래 이미지 나옴.)

☑ 로딩 후 바로 실행하는 방법

: 로딩 후 바로 고양이 사진 나오게 하기

$(document).ready(function () {
    q1();
});

☑ 업데이트 버튼을 누를 때마다 지웠다 새로 씌여지는 상태로 구현하기

: 새로운 고양이 사진 나오게 하기

① url: " ", 에 고양이 OpenAIP 넣기

② 가져올 data값 부르기

☐ let imgurl = response[0]['url'] ☛ list에는 하나의 dictionary만 존재하기 때문에 0번째에 있는 url data값을 가져오도록 프로그래밍한다.

③ jQuery 이미지 태그 src 바꾸는 방법

☐ $('#img-cat').attr("src", imgurl);

<완성 코드>



  
    
    JQuery 연습하고 가기!
    
    

    

    

  
  
    JQuery와 Ajax의 조합 연습

    

    
      랜덤 고양이 사진 API를 이용하기

3-4) 나홀로메모장에 OpenAPI 붙여보기

☑ 나홀로메모장 OpenAIP(GET)

http://spartacodingclub.shop/post

(url 클릭하면 아래 이미지 나옴.)

☑ 로딩 후 바로 실행하는 방법

: 로딩 후 바로 movie articles 나오게 하기

$(document).ready(function () {
    $('#cards-box').empty();
    listing();
});

☑ $ajax 코드를 활용하여 나홀로메모장 OpenAPI 가져오기

① url: " ", 에 나홀로메모장(movie articles) OpenAIP 넣기

② 가져올 data값 부르기

☐ let rows = response['articles'] ☛ articles data값 가져온다.

③ 가져올 rows의 범위 정하기

☐ for (let i = 0; i < rows.length; i++) ☛ i는 0부터 rows.length까지의 data값을 1개씩 +해서 가져온다.

④ dictionary 순서에 따른 'comment'와 'desc', 'image', 'title', 'url'의 data값 가져오기

☐ let comment = rows[i]['comment'] ☛ i번째에 위치한 comment의 data값을 가져온다. ☛ 이하 같은 원리로 i번째에 위치한 각각의 data값을 가져온다.

⑤ 브라우저에 data가 시각화되어 보이게 하는 코드 작성하기

let temp_html = `
                    
                    
                        ${title}
                        ${desc}
                        ${comment}
                 
`

☛ 태그 사이에 위치한

를 let temp_html = 뒤에 붙여 바뀌는 data값을 ${} 형태로 변경한다.

⑥ 코딩한`temp_html`이 실제로 브라우저에 시각화되어 보이게 하기

☐ $('#cards-box').append(temp_html)

<완성 코드>





    
    
    

    
    

    
    
    
    
    

    스파르타코딩클럽 | 부트스트랩 연습하기

    

    

    




    
        나홀로 링크 메모장!
        중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다
        
        
            포스트박스 열기
        
    

    
        
            아티클 URL
            
        
        
            간단 코멘트
            
        
        
    

    
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.

210907 개발일지

Tue, 07 Sep 2021 12:58:50 GMT

학습내용

1. Bootstrap

1-1) Bootstrap이란?

: 예쁜 CSS를 미리모아둔 것.

[코드스니펫] 부트스트랩 컴포넌트 4.0 https://getbootstrap.com/docs/4.0/components/alerts/

1-2) Bootstrap 사용 - '나홀로 메모장' 만들기

(1) '나홀로 메모장' 뼈대 잡기

1st. Bootstrap Components 페이지에서 필요한 Jumbotron 코드 찾아 copy하기

[코드스니펫] 부트스트랩 컴포넌트 4.0 https://getbootstrap.com/docs/4.0/components/jumbotron/

2nd. Bootstrap Components 페이지에서 필요한 Card columns 코드 찾아 copy하기

*** 나열되어 있는 코드 중 나에게 필요한 코드 빠르게 찾는 방법

1st. 해당 페이지에서 마우스 오른쪽 클릭 후 '검사' 클릭

2nd. 코드 위에 마우스 올려다 놓으면 그 코드에 해당하는 card 표시됨

[코드스니펫] 부트스트랩 컴포넌트 4.0 https://getbootstrap.com/docs/4.0/components/card/#card-columns

(2) '나홀로 메모장'에 포스팅 박스 넣기

1st. Bootstrap Components 페이지에서 필요한 Form 코드 참고하기

2nd. copy한 코드 중 from 태그(`...`)가 있다면, form 태그를 div 태그(`...`)로 바꾸기


    
        아티클 URL
        
    
    
        간단 코멘트

3nd. 포스팅 박스 경계선 모양과 내부 요소의 간격 조절하기

2. jQuery

2-1) jQuery란?

: HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해 둔 것. 라이브러리!

2-2) jQuery와 Javascript 코드 비교

: jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 '미리 작성된 Javascript 코드'!

*** 사용 전에 '임포트'를 해야한다.

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery는 직관적으로 쓴다.

$('#element').hide();

2-3) jQuery 사용방법 (1)

1st. '임포트' 하기

: 미리 작성된 Javascript 코드를 가져오는 것

[코드스니펫] jQuery CDN https://www.w3schools.com/jquery/jquery_get_started.asp

2nd. 와 사이에 아래를 넣으면 끝!

2-4) jQuery 사용방법 (2)

*** CSS와 마찬가지로, jQuery를 쓸 때에도 "가리켜야"→ 조작할 수 있다.

ex) 특정 인풋박스의 값을 → 가져와줘! ex) 특정 div를 → 안보이게 해줘!

*** CSS에서는 선택자로 class를 사용했다면, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/..등을 가리킨다.

2-5) 자주쓰는 jQuery

(1) input 박스의 값을 가져오기

예를 들어 id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.

$('#post-url').val();

(2) div 보이기 / 숨기기

[1] div 보이기 : 예를 들어 id 값이 post-box인 곳을 가리키고, hide()로 안 보이게 한다. (=css의 display 값을 none으로 바꾼다.)

$('#post-box').hide();

↓ 나홀로 메모장에서 가져온 코드

[2] div 숨기기 : 예를 들어 id 값이 post-box인 곳을 가리키고, show()로 보이게 한다. (=css의 display 값을 block으로 바꾼다.)

$('#post-box').show();


#### (3) css의 값 가져오기
> ##### display 속성 값을 가져왔다.

$('#post-box').hide(); $('#post-box').css('display');

$('#post-box').show(); $('#post-box').css('display');

###### ↓ 나홀로 메모장에서 가져온 코드

```

(4) 태그 내 텍스트 입력하기

[1] input 박스의 경우

$('#post-url').val('여기에 텍스트를 입력하면!');

[2] 다른 것들 - ex) 버튼의 텍스트 바꾸기

1st. 가리키고 싶은 버튼에 id 값을 준다.

2nd.

$('#btn-posting-box').text('포스팅 박스 열기');

$('#btn-posting-box').text('포스팅 박스 닫기');

↓ 나홀로 메모장에서 가져온 코드

포스트박스 열기

(5) 태그 내 html 입력하기

~ 사이에, 동적으로 html을 넣고 싶을 땐? (ex) 포스팅되면 → 카드 추가)

1st. html을 넣고 싶은 태그에 id 값을 준 다음


    
        
        
            여기 기사 제목이 들어가죠
            여기에 기사 내용이 들어가겠죠
            여기엔 코멘트가 들어갑니다

2nd.

[1] 버튼을 넣어보기

let temp_html = '';
$('#cards-box').append(temp_html);

[2] 버튼 말고, 카드를 넣어보기

*** 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 한다.

let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `
                    
                    
                        ${title}
                        ${desc}
                        ${comment}
                    
                `;
$('#cards-box').append(temp_html);

2-6) jQuery와 Javascript의 조합 연습

(1) 빈칸 체크 함수 만들기

버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" alert 띄우기

① input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게! ② 만약 입력값이 빈칸이면 if(입력값=='') ③ alert('입력하세요!') 띄우기 ④ alert(입력값) 띄우기

(2) 이메일 판별 함수 만들기

이메일이 아니면(@가 없으면) "이메일이 아닙니다."라는 alert 띄우기

이메일이면(@가 있으면) 이메일 도메인만 alert 띄우기

① input-q2 값을 가져온다. ② 만약 가져온 값에 @가 있으면 (includes 이용하기) ③ info.spartacoding@gmail.com -> gmail만 추출해서 ( .split('@') 이용하기) ④ alert(도메인 값);으로 띄우기 ⑤ 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

(3) HTML 붙이기/지우기 연습

이름을 입력하면 아래 나오게 하기

① input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고! ② 가져온 값을 이용해 names-q3에 붙일 태그를 만든다.

let temp_html = `${txt}
`

③ 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html) 이용하기) ④ names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty() 이용하기)

2-7) jQuery 적용 - '나홀로 메모장' 포스팅박스 열기/닫기 기능

(1) '포스팅박스 열기' 버튼에 function 달기

// onclick 속성(attribute)을 추가한다.

↓ 나홀로 메모장에서 가져온 코드

포스트박스 열기

(2) 클릭해서 포스팅박스를 여닫게 하기

[1] 포스팅박스에 id 값을 주기

[2] 포스팅박스 제어하기

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
    }
}

↓ 나홀로 메모장에서 가져온 코드

[3] posting-box를 시작부터 감춰두기 (css의 display: none 속성!)

이런 것을, inline-style (인라인 스타일)이라고 부른다.

직관적으로 '처음부터 안 보이는 태그'!

(물론, class 주고, css에서 display:none 속성을 주는 것도 방법!)

↓ 나홀로 메모장에서 가져온 코드 - class 주고, css에서 display:none 속성을 준 방법

(3) '포스팅박스 열기' 버튼의 글씨 바꾸기

[1] 포스팅박스 열기 버튼에 id 값 주기

↓ 나홀로 메모장에서 가져온 코드

포스트박스 열기

[2] 버튼 텍스트 바꾸기

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
        // 가렸으니까 이제 열기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
        // 폈으니까 이제 닫기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}

↓ 나홀로 메모장에서 가져온 코드

3. '나홀로 메모장' 완성 코드




    
    
    
    
    
    
    
    
    
    
    스파르타코딩클럽 | 부트스트랩 연습하기
    
    
    



    
        나홀로 링크 메모장!
        중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다
        
        
            포스트박스 열기
        
    
    
        
            아티클 URL
            
        
        
            간단 코멘트
            
        
        
    
    
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.
            
        
        
            
            
                여기 기사 제목이 들어가죠
                기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                여기에 코멘트가 들어갑니다.

210902 개발일지

Thu, 02 Sep 2021 12:28:29 GMT

학습내용

1. CSS

1-1) CSS 기초 사용방법

: ~ 안에 공간을 만들어 작성한다. : mytitle라는 class를 가리킬 때, .mytitle {...}라고 써야한다.

1-2) CSS 연습 - 로그인 페이지 만들기

(1) 로그인 화면을 가운데로 가져오는 방법

1st. width와 margin: auto를 사용한다.

2nd. 1st 방법이 안 될 경우 display: block을 추가한다.

(2) margin과 padding의 차이점

: margin은 바깥 여백을, padding은 내 안쪽 여백을 조정해준다.

(3) 구글웹폰트 입히는 방법

1st. 폰트의 _link 태그_를 복사해서 ~ 다음 line에 붙여넣는다.

2nd. 폰트의 _CSS rules to specify families_를 복사해서 사이의 * {...} 안에 붙여넣는다.

(4) 폰트 color 바꾸는 방법

1st. ~ 사이에서 바꾸고자 하는 부분의 class="..."에 color-font를 넣는다.

예를 들어, blue로 바꾸고 싶다면 class="..."에 blue-font를 넣으면 된다.

2nd. 사이에

.blue-font {
    color: blue;
}

를 추가하면 색이 변경된다.

1-3) 로그인 페이지 완성 코드




    
    로그인페이지
    
    


    
        
            로그인 페이지
            아이디, 비밀번호를 입력해주세요
        
        ID: 
        PW:

2. Javascript

2-1) Javascript란?

: 프로그래밍 언어 중 하나로, 브라우저가 알아드를 수 있는 언어.

2-2) Javascript - HTML 연결.

<버튼을 클릭하면 경고창이 뜨게하기>

1st. 함수 만들어두기

*** `~` 안에 로 공간을 만들어 작성 한다. 즉, 내에 Javascript를 작성하는 것이다.

2nd. 버튼에 함수 연결하기 (버튼을 누르면 함수가 불린다.)

2-3) Javascript 기초 문법 (1)

(1) 변수 & 기본연산

☑ 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"

☑ let으로 변수를 선언

let num = 20
num = 'Bob'

*** 변수는 값을 저장하는 박스

*** 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.

☑ 사칙연산, 그리고 문자열 더하기가 기본적으로 가능

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행

☑ 변수명

- snake case

let first_name = 'bob'

- camel case

let firstName = 'bob'

(2) 리스트 & 딕셔너리

☑ 리스트: 순서를 지켜서 가지고 있는 형태

let a_list = [] // 리스트 선언
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

- 리스트에 요소 넣기

b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

- 리스트의 길이 구하기

b_list.length // 5를 출력

☑ 딕서녀리: 키(key)-밸류(value) 값의 묵음

let a_dict = {} // 딕셔너리 선언

// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

☑ 리스트와 딕셔너리의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

(3) 기본 함수들

☑ 사칙연산 외에도, 기본적으로 제공하는 여러 함수들 존재

- '나눗셈의 나머지'를 구하고 싶은 경우'

let a = 20
let b = 7
a % b = 6

- 모든 알파벳을 대문자로 바꾸고 싶은 경우

let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB

- 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

- 특정 문자로 나누고 싶은 경우 2

let txt = '서울시-마포구-망원동'
let names = txt.split('-'); // ['서울시','마포구','망원동']

- 특정 문자로 합치고 싶은 경우

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

2-4) Javascript 기초 문법 (2)

(1) 함수

☑ 기본 생김새

- 만들기

function 함수이름(필요한 변수들) {
    내릴 명령들을 순차적으로 작성
}

- 사용하기

함수이름(필요한 변수들);

☑ 예시

- 두 숫자를 입력받으면 더한 결과를 돌려주는 함수

function sum(num1, num2) {
    console.log('num1: ', num1, ', num2: ', num2);
    return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

(2) 조건문

☑ 20보다 작으면 작다고, 크면 크다고 알려주는 함수

function is_adult(age){
    if(age > 20){
        alert('성인이에요')
    } else {
        alert('청소년이에요')
    }
}

is_adult(25)

☑ if, else if, else if, else if else

function is_adult(age){
    if(age > 20){
        alert('성인이에요')
    } else if (age > 10) {
        alert('청소년이에요')
    } else {
        alert('10살 이하!')
    }
}

is_adult(12)

☑ AND 조건과 OR 조건

- AND 조건

function is_adult(age, sex){
    if(age > 20 && sex == '여'){
        alert('성인 여성')
    } else if (age > 20 && sex == '남') {
        alert('성인 남성')
    } else {
        alert('청소년이에요')
    }
}

- OR 조건

function is_adult(age, sex){
    if (age > 65 || age < 10) {
        alert('탑승하실 수 없습니다')
    } else if(age > 20 && sex == '여'){
        alert('성인 여성')
    } else if (age > 20 && sex == '남') {
        alert('성인 남성')
    } else {
        alert('청소년이에요')
    }
}

is_adult(25,'남')

(3) 반복문

☑ 예를 들어 0부터 99까지 출력해야 하는 상황이라면!

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

*** 이렇게 쓰기에 무리가 있다. 그래서 반복문이 존재

☑ 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있다.

for (let i = 0; i < 100; i++) {
    console.log(i);
}

for (1.시작조건; 2.반복조건; 3.더하기) {
    4.매번실행
}

1 → 2체크하고 → (괜찮으면) → 4 → 3

→ 2체크하고 → (괜찮으면) → 4 → 3

→ 2체크하고 → (괜찮으면) → 4 → 3 와 같은 순서로 실행된다.

i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.

☑ 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰인다.

◦ University Name 대학교 이름
◦ Location 대학교 위치
◦ Office Telephone Number 대학교 전화번호	◦ Contact Email 대학교 이메일	◦ Website 대학교 웹사이트