[수업 목표]

  1. 파이썬 기초 문법을 안다.
  2. 원하는 페이지를 크롤링할 수 있다.
  3. pymongo를 통해 mongoDB를 제어할 수 있다.

1) 파이썬이란 ?

(강의 회고를 하기 전에, 인터넷 검색을 통해 파이썬에 대한 설명을 좀 더 찾아 정리해 보았다.)

  • Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. (Indentation = 들여쓰기)
  • 파이썬은 네덜란드 개발자 귀도 반 로섬(Guido van Rossum)이 만든 언어
  • 구글은 파이썬을 많이 사용하는 기업으로 알려져 있다. 구글 내부에서 사용하는 코드 리뷰 도구, ‘앱 엔진’ 같은 클라우드 제품 등이 파이썬을 이용해 만들어졌다.
  • 파이썬은 문법이 간결하고 표현 구조가 인간의 사고 체계와 닮아 있다. 이 덕분에 초보자도 쉽게 배울 수 있고 다양한 분야에 활용할 수 있다는 장점이 있다. (JS보다 직관적 !)
  • 반면 단점으로는 속도가 느리다는 평가도 있으며, 모바일 앱 개발 환경에서 사용하기 힘들다. 또한 컴파일 시 타입 검사가 이뤄지지 않아 개발자가 실수할 여지가 조금 더 많다거나 멀티코어를 활용하기 쉽지 않다는 지적도 있다. 
  • [출처 : wikipedia] , [출처 : 네이버 지식백과]

 

2) 파이썬 기초문법 

① 변수 & 기본 연산

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

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

# 변수의 이름은 마음대로 지을 수 있음!
# 진짜 "마음대로" 짓는 게 좋을까? var1, var2 이렇게?

② 자료형

: 숫자, 문자형, 리스트 형 (Javascript의 배열형과 동일), Dictionary 형 (Javascript의 dictionary형과 동일), Dictionary 형과 List형의 조합형이 있다.

//숫자, 문자형
name = 'bob' # 변수에는 문자열이 들어갈 수도 있고,
num = 12 # 숫자가 들어갈 수도 있고,

is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.

-------------------------------------------------------------------
//리스트 형 (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'

 

③ 함수

# 수학문제에서
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

※ 자바스크립트에서 함수를 쓸 때 {}를 사용했다면, 파이썬은 들여 쓰기로 구분을 하기 때문에 들여 쓰기가 아주 중요하다! 

 

④ 조건문 (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

 

⑤ 반복문 (무조건 리스트와 함께 쓰임, JS와 가장 다른 부분!)

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

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

print(count)

# 사과의 갯수를 세어 보여줍니다.

 

3) 파이썬에서 라이브러리 사용하는 법

참고로 파이썬파일을 만들 때 생성되는 venv( = 가상 환경 virtual environment) 파일은 필요한 라이브러리를 모아두는 곳이다. 

이 남들이 만들어 놓은 라이브러리를 '패키지'라고 한다. 패키지 설치 방법은 다음과 같다. (패키지 설치 = 외부 라이브러리 설치)

 

빨간색 글씨 참조!

위는 파이썬을 통해 코드를 작성할 때 필요한 패키지들을 다운로드하는 방법이다. 빨간 글씨의 순서대로 실행해 주면 된다. 참고로 나는 맥북 프로 14를 사용하고 있는데 보안상의 문제 때문인지 항상 certifi라는 패키지를 추가로 설치해 주어야 다른 패키지들 import가 가능했다. 이번 강의에서는 requests, bs4(-> beautifulsoup4), pymonggo, dnspthon, certifi 패키지를 사용하였다. 아래 그림에서 가장 윗 윗 두줄을 참고하면 되겠다.

import requests # requests,bs4 라이브러리 설치 필요
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 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

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

 

4) 웹 스크래핑(크롤링) 기초

※ 크롤링은 두 가지 작업이 필요하다

① 요청해서 html 가져오기 ( → requests 라이브러리로 구현)

② 그 안에서 필요한 정보 찾기 (타이틀, 이미지 ) → bs4 (BeautifulSoup) 라이브러리로 구현

③ headers 란?  우리가 코드에서 콜을 날릴때 마치 브라우저에서 콜을 날리는 처럼 하는것.

 

방법 ) 항상 정확하지는 않으나, 크롬 개발자 도구를 참고할 수 있다.

  • 원하는 부분에서 마우스 오른쪽 클릭 → 검사
  • 원하는 태그에서 마우스 오른쪽 클릭
  • Copy → Copy selector로 선택자를 복사할 수 있음

(예시)

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.naver?sel=pnt&date=20210829',headers=headers)

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


#old_content > table > tbody > tr:nth-child(3) > td.title > div > a
#old_content > table > tbody > tr:nth-child(4) > td.title > div > a

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

for movie in movies:
    a = movie.select_one('td.title > div > a')
    if a is not None:
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        star = movie.select_one('td.point').text
        print(rank, title, star)

※ 태그 안의 텍스트를 찍고 싶을 땐 → 태그.text  / 태그 안의 속성을 찍고 싶을 땐 → 태그['속성']

 

참고 ) beautifulsoup 내 select에 미리 정의된 다른 방법

# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')

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

# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')

# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')

 

5) DB개괄

  • 자료를 필요할 때 쉽게 찾기 위해 사용하는 프로그램의 일종
  • 우리 눈에 보이진 않지만, 사실 DB에는 Index라는 순서로 데이터들이 정렬되어 있다.
  • 크게 두 가지 종류가 있다 ( SQL , No-SQL)

RDBMS(SQL) : 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사. 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이. 따라서 주로 대기업에서 많이 사용  ex) MS-SQL, My-SQL 등

 

No-SQL : 딕셔너리 형태로 데이터를 저장해두는 DB. 고로 데이터 하나하나마다 같은 값들을 가질 필요가 없다. 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있다. 따라서 주로 스타트업에서 많이 사용  ex) MongoDB

  • 유저가 몰리거나 , DB를 백업해야 하거나, 모니터링 하기가 아주 용이하다는 이유로  요새는 Cloud 형태를 많이 사용! ex) mongoDB Atlas

 

6) mongoDB

  • mongoDB 클라우스 서비스를 이용하면 쉽게 데이터를 불러오고 정리할 수 있다. 사용법은 구글링 해보기! 나는 이미 설치와 개설이 끝났기 때문에 나에게 필요한 정보만 기록하려 한다. 

아래는 자주 사용하는 기본 코드! (필요할 때마다 복붙해서 사용하면 된다.)

from pymongo import MongoClient
import certifi

ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.sx4vg7k.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.dbsparta


# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

예시)

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.55vah.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

# 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 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',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:
        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 태그 사이의 텍스트를 가져오기
        doc = {
            'rank': rank,
            'title': title,
            'star': star
        }
        db.movies.insert_one(doc)

위 과정을 거치고 실행을 시키면 mongoDB의 movies 폴더에 크롤링한 데이터가 들어가 있음을 확인할 수 있다. 

 


스파르타코딩클럽의 웹 개발 종합반은 개괄적인 내용을 다룬 강의이기 때문에 추가로 유튜브 채널 <생활코딩>에서 파이썬 강의를 들어보았다. 아직 극 초급단계인 내가 강의를 통해 이해한 포인트를 정리해보자면,

 

1. 파이썬은 프로그래밍 언어의 하나이다.

2. 자바스크립트와 다르게 들여 쓰기를 통해 함수를 구분하기 때문에 들여쓰기를 유의해야 한다.

3. 필요한 기능은 구글링을 통해 검색하여 사용한다. ex). text [0:2],. strip() 

4. 매번 프로그래밍에 필요한 패키지들을 라이브러리에서 import 한 후 사용해야 한다.

5. 클라우드와 연결하게 되면 Open API에서 실시간으로 업데이트되는 데이터를 이용하여 필요한 코드를 작성하고 필요한 결과를 효율적으로 찾아낼 수 있다.

 

여기까지가 오늘의 이해인데, 잘하고 있는지는 모르겠다. 앞으로 실전 연습이나 프로젝트를 만들면서 지금의 추상적인 개념들을 구체화할 수 있을 것 같다. 모든 비전공자 코린이들 화잇팅!! 

 

 

[수업 목표]

  1. Javascript 문법에 익숙해진다.
  2. jQuery로 간단한 HTML을 조작할 수 있다.
  3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

Javascript

  • 우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. 
  • HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다.
  • 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다
  • 자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와준다. 기존 C나 자바 언어와 달리 굉장히 단순한 구조와 원칙을 가지고 있기 때문에 초보 개발자들이 쉽게 배우고 이해할 수 있다.
  • 단점은 성능이나 보안 측면이다. 일단 내부에서 제공되는 기능이 제한적이고, 관련된 개발도구도 적은 편이다. 또한 자바스크립트는 HTML 소스코드에 함께 작성되면서 소스코드가 외부로 공개되는데, 이 과정에서 보안 취약점이 발생할 수 있다.

                                         출처 : [네이버 지식백과] 자바스크립트 [Javascript] - 웹을 풍부하게 만들어주는 작고 가벼운 언어 (용어로 보는 IT, 이지현)

 

1) jQuery 란?

  • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리. (JS보다 직관적)
  • jQuery는 전문 개발자들이 짜둔 미리 작성된 Javascript 코드 (그렇게 때문에, 쓰기 전에 "임포트" 필요)
  • https://www.w3schools.com/jquery/jquery_get_started.asp (임포트 하는 법 링크 참고하기)

임포트 하는 법 : <head> 와 </head> 사이에 아래를 넣으면 끝!

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

 

  • css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. css에서는 선택자로 class="..."를 사용했다면 jQuery에서는 id="..." 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킨다.

 

자주쓰는 jQuery

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();

// let temp_html = `` 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

let ...=$('#...').val() 로 변수를 정해주고, 

그것을 다시 let temp_html=`` 로 받아

$('#....').append(temp_html)로 연결시키는 과정을 기억하자!

 

2) 서버-클라이언트 통신 이해하기

① 서버→클라이언트: "JSON"을 이해하기

  • JSON은 쉽게 말해 데이터를 주는 규칙 
  • JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 유사

위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있다.

 

② 클라이언트→서버: GET 요청 이해하기

  • API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것과 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
  • GET → 통상적으로 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
  • POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

API이해를 돕기위한 추가 자료 - 출처 : 스파르타코딩클럽

 

GET 방식으로 데이터를 전달하는 방법

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967


여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?

→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

 

3) Ajax

  • Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
  • 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
  • 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포
  • 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
  • Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

Ajax 기본 골격 + 해설

 

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다. http://naver.com?param=value¶m2=value2

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

 

  • 사실, 아직 이해가 완전히 되지는 않기 때문에 오늘 풀었던 예제를 통해 형식을 그냥 외워보려 한다.
    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
        .bad {
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];

                        let temp_html = ''

                        if (gu_mise > 70) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

let rows 를 통해 변수를 설정해주고, for문으로 리스트를 돌려주고, temp_html을 이용하여 변수갑을 브라우저에 찍어준다. 그리고 if 문의 색깔은 class="bad"라는 값을 다시 지정해 위의 <sytle>에 .bad 부분을 추가해 준다. 

 

※ tip : 이미지 바꾸기  $("#아이디값").attr("src", 이미지URL)

           텍스트 바꾸기  $("#아이디값").text("바꾸고 싶은 텍스트")

 

 


처음 보는 용어들에 정신이 어질어질 어렵지만, 반복된 연습을 통해 익숙해 질 거란 느낌이 팍 들었다 ! 일단 오늘 이해한 부분은, jQuery를 통해 보다 간결한 코드로 자바스크립트를 구현할 수 있다는 점과 서버와 클라이언트가 JSON형식의 데이터를 주고 받을때 [GET], [POST] 이 두가지 요청 방식이 있다는 점.  

 

오늘 배운 내용에 도움이 될 만한 블로그 글을 발견하여 아래에 링크를 남겨본다. 

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

AJAX란 무엇인가?

AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequ

velog.io


4회 수강 후 여전히 부족한 부분 정리 : 1. 오타에 유의하자 (특히 중괄호), 2. 코드를 간결히 할 수 있는 방법을 생각해보자.

 

<2-5 강의 퀴즈 부분> 

 

1 번 문제

오늘은 그래도 내가 직접 코드를 작성해 봤다. 1번은 무난하게 패스 !

 

2번 문제

2번을 푸는데 좀 시간이 걸렸지만, 이번에도 혼자 코드 작성에 성공 ! 중괄호 하나가 빠져서 이 문제때문에 오류를 찾느라 고생했다. 아, 참고로 네번째줄 alert안에 '.val()' 빼줘야 정답이다.

 

3번 문제

내가 작성한 코드
정답 코드 (훨씬 간결하다.)

 

 

과제 코드 검사

내가 작성한 코드
정답 코드 (이것도 훨씬 간결.)

자바스크립트(Javascript)란?

  • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
  • HTML이 뼈대고 CSS가 꾸미기라면 JS는 움직이는 것이라고 생각하면 된다. 예) 클릭하면 뜨는 팝업 메시지
  • HTML과 연결 할 때 <head>~</head>안에 <script>~</script>로 공간을 만들어 <script> 아래에 작성
  • Java와 Javascript는 어떤 차이가 있나요? -  인도와 인도네시아.. 바다와 바다코끼리.. -> 즉, 아무 관련 없다.

 

1) Javascript 기초 문법 배우기(1)

① 크롬 개발자도구 콘솔 창은 어떤 의미? 

띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구. 새로고침 하면 모두 사라진다는 사실!

tip (console 창 단축키) : 윈도우: F12, 맥: alt(option) + command + i, 그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능

 

console.log(변수)

  --
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");

② 변수 & 기본연산

  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) ∴ 서로 같음을 표시할 때는 '==' 사용.
  • let으로 변수를 선언
let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
  • 사칙연산, 그리고 문자열 더하기가 기본적으로 가능
  • 변수명 정하기 : 
let first_name = 'bob' // snake case라고 합니다.

또는,

let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.

과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!

③ 리스트 & 딕셔너리

  • 리스트: 순서를 지켜서 가지고 있는 형태
  • 딕셔너리: 키(key)-밸류(value) 값의 묶음
  • 리스트와 딕셔너리의 조합
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'

잠깐 ! 이렇게 사용하는 이유는 ? 

순서를 표시할 수 있고, 정보를 묶을 수 있습니다. 보기에도 깔끔해지고, 유지 보수가 쉬워지는 장점이 있다.

 

2) Javascript 기초 문법 배우기(2)

① 함수의 기본 생김새

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

 

② 조건문 if, else if, else

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

is_adult(12)

③ 반복문 (예를 들어 0부터 99까지 출력해야 하는 상황이라면)

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

+ 반복문은 주로 딕셔너리가 들어간 리스트와 함께 쓰임 - 앞으로 자주 보게 될 것.

 


아직은 이해가 어려운 자바스크립트이지만, 튜터님 말대로 이해하려고 하기보다 사용하면서 익숙해지는 것이 좋을 것 같다. 공부하다 모르는 함수나 정의들은 구글링을 통해 적극적으로 배우도록 하자! 웬만한 것들은 구글링을 통해 답을 찾을 수 있다. 갈길이 멀지만 오늘도 화잇티이잉 ! :) 

 

[수업 목표]

  1. 서버와 클라이언트의 역할에 대해 이해한다.
  2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
  3. Javascript 기초 문법을 익힌다.

1. 서버와 클라이언트란 무엇인가?

 

출처 : 스파르타 코딩클럽

 

클라이언트는 자료를  요청(request)하는 컴퓨터이고 서버는 자료를 그 요청에 응답(respond)하는 컴퓨터이다.

프론트엔드 개발자들은 클라이언트에 노출되는 부분을 개발한다고 할 수 있고, 백엔드 개발자는 유저들에게 보이지는 않지만 그 뒤에서 일어나는 서버에 저장하는 데이터에 함수를 입히고 원하는 기능을 구현하는 개발을 한다고 할 수 있다.

 

프론트엔드는 좀더 고객친화적이고 디자인요소를 다루는 것이고, 백엔드는 추상적인 것들의 다룬다.

 


2. HTML (=뼈대)/ CSS(=꾸미기) , boostrap

HTML은 구역과 텍스트를 나타내는 코드, CSS는 잡은 구역을 꾸며주는 것. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생함. HTML 코드 내에 CSS 파일을 불러와서 적용한다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

1) HTML

① HTML은 크게 <head>와 <body>로 구성됨

  • head안에는 페이지의 속성 정보를, body안에는 페이지의 내용이 들어간다
  • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 ( 페이지의 속성을 정의하거나, 필요한 스크립트들을 불러줌. 즉, 눈에 안 보이는 필요한 것들을 담는 것)
  • 아래를 참고해서 필요할 때 찾아서 사용하기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

※ tip 1 : Pycharm에서 코드 자동정렬 하려면?  ctrl+alt+L (맥은 cmd+alt+L) 

- 코드를 잘 정렬해야 유지, 보수도 쉽고 협업을 할 때 효율성을 높일 수 있다.

 

② HTML 부모-자식 구조

  • html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요! 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음. 

보이는 바와 같이 빨간 <div>를 이동하면 자동으로 초록 파랑<div>도 같이 이동 하게됨.

 

2) CSS

① CSS 사용 

  • <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.  <body>부분에서 꾸미고자 하는 부분을 'class ="이름"'으로 지정해 주고, <style>아래 부분에  .이름 { ... } 라고 작성 한 뒤 { }안에 꾸며주는 코드를 작성한다.

 

예시) 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

※ tip2 : 위에 backgroud 와 display 부분은 다음에 필요할 때 복붙해서 쓰도록 한다!

 

  • margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 조절함
  • 만들어둔 박스를 화면 가운데로 가져오려면?  width를 주고, margin: auto를 사용하자! 그래도 안되면? display:block을 추가!
 .wrap {
            margin: 10px auto;
            width: 300px;
        }

 

② CSS 구글 웹폰트 입히기

  • https://fonts.google.com/?subset=korean 에서 마음에 드는 폰트 선택
  • 폰트 클릭 후 우측 상단 아이콘 에서 Embed 탭 클릭
  • 마지막 link 복사해서 HTML 파일에 붙여주기
  • CSS 에 *{} 를 통해 전체 페이지에 적용하면 끝
 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

예시 ) Jua라는 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 됩니다.

<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Jua', sans-serif;
}

※ tip 3 : 주석 달기 (ctrl 혹은 command + / 슬래시 )

 

    주석을 붙여놓으면 브러우저/컴퓨터는 그 부분을 읽지 않음. 주석은 개발자 본인 또는 동료를 위해 사용.

  1. 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
  2. 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용

※ tip 4 : 모바일 처리 하는 법

width: 95%;
max-width: 500px;

 

3) Bootstrap 

  • 남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일합니다. 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐
  • 남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 게 답
  • https://getbootstrap.com/docs/5.0/ 
 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

※ tip 5 : 이모티콘 모음 링크 https://kr.piliapp.com/facebook-symbols/

 

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com


4회를 수강한 오늘(10/24일) 헷갈렸던 부분 정리 :

 

 

기록하기 닫기 버튼 부분 CSS로 가운데다 배치하는 법

 

 

먼저 버튼부분을 다시한번 <div>로 묶고 class를 지정해야 했다. 자꾸 이 부분을 까먹는다. 

 

+ Recent posts