수강일지 📖

1-1주차

1) HTML + CSS (실습 2개) 👌

background-image: url("#");
background-size: cover;
background-position: center;

가운데 정렬
width: 300px; 맞추고
margin: auto;

글꼴
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

<style>
  * {
    font-family: 'Nanum Gothic', sans-serif;
  }
  
css 분리
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

• 구글웹폰트

2) 문제은행 (CSS 선택자) 🚩

1-2주차

1) 부트스트랩 활용 (실습 1개) 👌

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

2) 자바스크립트 기본문법 (변수, 배열, 객체, 함수) 👌

let myEmail = 'aaaa@gmail.com'; 

  1. 특정 문자로 나누기 
  2. 특정 문자로 합치기 
  3. gmail만 추출하기

let wizards = [{'name':'Harry','age':40},{'name':'Ron Weasley','age':40}]

 - 'harry' 출력하기
    

🔥 1주차 숙제 👌

부트스트랩 활용해서 미니 쇼핑몰 만들기

    .button {
               margin: 10px auto;
               width: 10%;
               display: block;
           }
               버튼 가운데 정렬

2-1주차

1) 자바스크립트 기본문법 (조건문, 반복문) 👌

1. AND 조건 && : 모든 조건들이 true 여야 true
2. OR 조건 || : 조건 중 하나라도 true이면, true

let fruitsBasket = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
   
 - 과일세기 함수 만들기 [따로 변수(박스) 만들기]

2) JQuery (실습 2개)

	1) 포스팅 박스 열기/닫기 👌
 	2) jQuery+javascript 👌

JQuery import 하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery 적용

⭐  hide(), show(), tempHtml = 백틱, 
    $('# id값 ').css('width', '300px'),
    $('# id값 ').text('@#$%'),
    $('# id값 ').append(tmepHtml), ${} 등등..

3) 문제은행 (Javascript 3문제 👌, JQuery 2문제 👌)

 1~2. 누른 횟수를 보여주는 onclick 함수
    <button onclick="handleClick()">이 버튼을 눌러보세요</button>
 
 3. 반복문 & 딕셔너리
 
 2. 이메일 판별 함수 만들기

2-2주차

1) Ajax (실습 3개) 👌

  1~3. Javascript + jQuery + Ajax 

    let tempHtml = '';

	if(guMise >= 40) {
		tempHtml = `<li class="red">${guName} : ${guMise}</li>`;
	} else {
		tempHtml = `<li>${guName} : ${guMise}</li>`;
	}
		$('#mise-info').append(tempHtml);


- jQuery 이미지태그 src 바꾸기

    let image = response[0]['url'];
    $("#img-cat").attr("src", image);

2) 문제은행 (Javascript + jQuery + Ajax) 4문제 👌

2. console.log를 활용해서 찾았다 👌
4. 한번더 풀기 🚩

🔥 2주차 숙제 👌

로딩 완료시, 환율 API 이용해 환율 표시하기

<select class="custom-select" id="order-count">
    <option selected value=""> -- 수량을 선택하세요 -- </option>
    <option value="1">1개</option>
    <option value="2">2개</option>
    <option value="3">3개</option>
</select>

 수량값 가져올 때 value="" 필수

3-1주차

1) Javascript + jQuery + Ajax 복습 👌

2) 파이썬(Python) 기초 문법 🚩

3) 웹 스크래핑(크롤링) 👌

4) 문제은행 웹 스크래핑(크롤링) 3문제 🚩

3-2주차

1) mongoDB 사용법 CRUD 👌

  - db.users.insert_one(doc) 데이터 생성
  - list(db.users.find({})) 데이터 모두 보기
  - list(db.users.find({'age': 40})) 특정조건
  - db.users.find_one({'name': '덤블도어'}, {'_id': False}) 
    특정 키 값을 빼고 보기
  - db.users.update_one({'name': '덤블도어'}, {'$set': {'age': 19}})
  
  정리 ⭐
  # Create(생성)
     user1 = {'name': '론', 'age': 40}
     user2 = {'name': '해리', 'age': 40}
     db.users.insert_one(user1)
     db.users.insert_one(user2)

     # Read(조회) - 한 개 값만
     user = db.users.find_one({'name': '론'})

     # Read(조회) - 여러 값 ( _id 값은 제외하고 출력)
     same_ages = list(db.users.find({'age': 40}, {'_id': False}))

     # Update(업데이트) - 여러 값
     db.people.update_many({'age': 40}, { '$set': {'age': 70}})

     # Update(업데이트) - 하나 값
     db.users.update_one({'name': '론'}, {'$set': {'age': 116}})

     # Delete(삭제)
     db.users.delete_one({'name': '론'})
  

2) 스크래핑 정보 DB 삽입 (주의) 🚩 👌

3) mongoDB CRUD 응용 👌

🔥 3주차 숙제 🚩

지니뮤직 1~50위 곡 정보 스크래핑

4주차

1) Flask 기초 - API 만들기 👌

1) HTML - render_template 넣기
2) <img src="{{ url_for('static', filename='rome.jpg') }}"/>

2) Flask, API - 모두의 책리뷰 👌

    - 기존 리뷰 박스 비우기
    $(document).ready(function () {
        $("#reviews-box").html("");
        showReview();
        });      

  제목, 저자, 리뷰 정보 저장하기(Create → POST)

  (서버)
  - 클라이언트가 준 title, author, review 가져오기
    title_receive = request.form['title_give']
  - DB에 정보 삽입하기
  - 성공 여부 & 성공 메시지 반환하기
  (클라이언트)
  - 제목, 저자, 리뷰 내용을 가져오기
  - POST에 저장을 요청
  - 주의) data: {title_give: title, 등}

  저장된 리뷰를 화면에 보여주기(Read → GET)

  (서버)
  - DB에 있는 모든정보 가져오기
  - return jsonify의 ['msg'] 값에 넣기
  (클라이언트)
  - 반복문 돌리기

3) Flask, API - 나홀로 메모장 👌

  메타태그 스크래핑
  soup.select_one('meta[property="og:image"]')
  soup.select_one('meta[property="og:title"]')
  soup.select_one('meta[property="og:description"]')

POST
(서버)
- 클라이언트로부터 데이터를 받기 url, comment
- meta tag 스크래핑하기 
- 주의) data = requests.get(url_receive, headers=headers)
  url을 url_receive로
- mongoDB에 데이터 넣기 url, comment, title, image, desc
(클라이언트)
- 값가져오기 

GET

⭐ DB폴더 이름 주의

🔥 4주차 숙제 👌

원페이지 쇼핑몰 완성하기

   post 밑에
   window.location.reload();

5주차

• Flask, API 마이 페이보릿 무비스타 👌

1. 조회(Read) 기능 GET : 영화인 정보 전체를 조회
   1) DB에 이미 저장되어있는 상태 
      post 값가져올 필요없음
   2) GET 여러 값들 가져오기
      - like가 많은 순으로 내림차순 find뒤에 .sort('like', -1)
      
2. 좋아요(Update) 기능: POST
   클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가 
   
   (서버)
   - name_receive = request.form['name_give']
   - mystar 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.
   - 이름으로 된 도큐먼트를 찾아서 라이크값을 구하기 
   - 김다미 좋아요를 눌렀다면 김다미의 좋아요 수 가져오기
   - current_like = db.mystar.find_one({'name': name_receive})['like']
   - star의 like 에 1을 더해준 new_like 변수를 만듭니다.
   - new_like = current_like + 1
   - mystar 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경(업데이트)
   - db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
   
   (클라이언트)
   data: {name_give: name}
   
   
3. 삭제(Delete) 기능: 
   클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제
   
    - db.mystar.delete_one({'name': name_receive})

6주차

• 서버 구매, 간단한 flask 서버 올리기