📌 Day 1

웹 개발 기초 1
HTML - CSS - JS - DB

---

🔎 Topic 1

margin

margin은 바깥쪽 공백을 말한다.
위쪽, 오른쪽, 아래쪽, 왼쪽 순 (시계방향)으로 공백을 지정할 수 있다.

margin: 10px 5px 10px 5px;

✔️ width + margin: auto
넓이를 정하고 margin을 auto로 하게 되면 정해진 width에 맞게 남는 공간의 양쪽 margin을 같게 한다.

양쪽 margin이 같다는 것은 가운데 정렬된다는 의미.

두 css 속성을 모두 썼지만 정렬이 되지 않는다면 해당 태그의 내용이 text인 것. display: block을 이용해 block으로 만들어주면 정렬 가능하다.

margin: auto
width: 300px

---

🔎 Topic 2

Jquery

✔️ id값을 이용해서 HTML 요소 가져오기

let tmp = $('#id')

✔️ 태그 숨기기 .hide() / 보여주기 .show()
.hide()는 display: none을 .show()는 display: block을 스타일로 추가

let tmp = $('#id').hide()

let tmp = $('#id').show()

✔️ ` 를 이용한 문자열 html 구성

let tmp_html = `<button>버튼입니다</button>`

✔️ ` 를 이용해 구성한 문자열 html을 기존 html에 붙이기
기존 HTML 요소 뒤에 정의한 문자열 형태 HTML에 붙게 된다.

$('#id').append(tmp_html)

✔️ ` 를 이용한 문자열 html에서 변수 사용 ${..}

let name = 'kim';
let tmp = `<div>내 이름은 ${name} 입니다.</div>`

✔️ 이미지 url 삽입(변경)

let imageUrl = "http://......jpeg";
$('#img-id').attr('src', imageUrl)

✔️ 페이지 로딩시 동작 지정
페이지가 처음 로딩될 때 or 새로고침 될 때 동작하는 함수를 지정

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

---

🔎 Topic 3

AJAX

✔️ Ajax 기본 틀
지정한 url로의 요청이 성공했다면 해당 api의 반환 데이터가 response에 담기게 된다.

$.ajax({
	type: "GET",
	url: "",
	data: {},
	success: function(response) {
		...
	}

여러 공공데이터 api로 부터 받은 Json형태 데이터를 파싱하여 여러 방식으로 사용 가능하다.

---

🔎 Topic 4

MongoDB (pymongo)

✔️ pymongo intall
[Preference] - [Project: ] - [Python Interpreter] - pymongo package install

✔️ pymongo를 이용한 MongoDB Connection

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

✔️ 삽입 insert
삽입하고자 하는 데이터를 Dict 타입으로 만들어서 삽입
users는 mongoDB의 Collections 이름이 된다.

doc = {'name':'lee', 'age':26}
db.users.insert_one(doc)

✔️ 조회 select
조건 없이 모두 조회 (findAll)
'_id':false는 mongoDB가 랜덤으로 생성하는 유니크한 ID값은 조회하지 않갰다는 의미

findALl = list(db.users.find({}, {'_id':False}))

age가 26인 데이터를 리스트 타입으로 모두 조회

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

name이 lee인 데이터 한 건을 조회
조회 결과가 여러 건인 경우에도 한 건만을 조회한다.

user = db.users.find_one({'name':'lee'}, {'_id':False})

✔️ 수정 update

name이 lee인 데이터 단건 수정
업데이트될 값은 {'$set':{key,value}} 로 지정

db.users.update_one({'name':'lee'}, {'$set':{'age':10}})

✔️ 삭제 delete

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

---

복습인듯 복습아닌 웹 기본 강의를 마쳤다.

복습이 웬 말인가 아주 잘 배우고 갑니다..