<스파르타 코딩클럽 웹개발 종합반 3주차 개발일지>
3주차에 배울 것은 파이썬, 크롤링, 데이터베이스(mongo DB) !
(파이썬! 내가 아는게 나왔다!>,.<)
우선 2주차에 했던 javascript 사용하는 법을 복습하고자,
전에 만들었던 '내 생애 최고의 영화들!' 홈페이지에 영화리스트가 있는 api를 받아
forEach를 사용해서 이미지, 별점, 제목 등등을 불러 오는 걸 연습했다.
쿄쿄, 이렇게 내 맘대로 배포해도되나?ㅋ_ㅋ(난 몰랏>_<ㅎ)
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타 피디아</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.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;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
margin: 20px auto 0px auto;
width: 95%;
max-width: 1200px;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
display: none;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns > button {
margin-right: 10px;
}
</style>
<script>
$(document).ready(function(){
listing();
});
function listing() {
$('#cards-box').empty()
fetch('http://spartacodingclub.shop/web/api/movie')
.then(response => response.json())
.then(data => {
// console.log(data)
let rows = data['movies']
rows.forEach(a => {
//console.log(movie)
let title = a['title']
let image = a['image']
let desc = a['desc']
let star = a['star']
let comment = a['comment']
let star_image = '⭐'.repeat(star)
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_image}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
}
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="open_box()">영화 기록하기</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSmoviect01">별점</label>
<smoviect class="form-smoviect" id="star">
<option smoviected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</smoviect>
</div>
<div class="form-floating">
<textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards">
<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">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<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">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<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">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<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">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
이후 파이썬 본격적으로 시작!
vscode에 python설치(=컴퓨터가 알아들을 수 있게 변역팩을 설치한다고 생각하면 됨!)
-> hello.py 파일 생성 -> 윗줄에 터미널(실행시키면 결과값이 나오는 곳) -> 새터미널(하단에 터미널 창이 띄워짐)
print('hello wordl') 입력후 -> 오른쪽마우스 -> 터미널에서 python 파일실행
하단 터미널에 hello world 가 찍힌 것을 확인할 수 있다.
(hello world 국룰인가?ㅎ)
파이썬 기초는 알기 때문에 강의 슥슥 가볍게 훑어보기!
변수, 자료형, 함수, 반복분, 조건문 등등..
해당 강의로 html css javascript로 코딩을 입문하신 분들이라면,
개인적으로 아주- 간략하게 자주 쓰는 파이썬 코드 위주로 냅다 사용하시는 것 같아서
완전 처음 보는 입문자가 볼때는 설명이 부족해서 어려울 수도 있다고 생각함!
html이랑 쓰는 방법도 조금씩 다르고?
아니면 되려 자잘자잘한 설명을 안듣고 실전에 돌입해서 괜찮을수도..
코딩은 검색, 복붙이 잩은 동작이니..! (케바케ㅋ)
여튼 내 개발일지를 쓰려고 만든 티스토리이기 때문에..
아는 부분에 대한 자세한 설명은 스킵하도록 하겠다!
(나중에 나중에 기회가 된다면 교육자료같이 만드는 것도 좋을듯?!)
가상환경 설치!
vscode에서 파이썬 연습용 파일을 열어둔 뒤, 오른쪽 하단에 '인터프리터 선택' 을 클릭 ->
python 3.8.6 64-bit 클릭 - > 확인차 상단 입력부분에서 오른쪽마우스, 터미널에서 python 실행 클릭
-> 하단 터미널에 출력이 되면 잘 선택된 것
-> 하단 터미널에 python3 -m venv venv 입력(window는 python라고 입력) 후 엔터 ->
왼쪽에 폴더가 자동 생성됨을 확인(라이브러리를 담아둘 폴더) ->
오른쪽 하단에 3.8.6-64bit 클릭 -> 인터프리터가 뜨면 python 3.8.6 venv venv 클릭 ->
상단에 터미널 - 새터미널 클릭 -> 하단 터미널에 (venv)가 붙은걸 확인
* ↑ 이 작업은 '지금부터 이 폴더에서 라이브러리를 가져다 쓸거야' 라고 이해하면 된다함!
= '라이브러리를 venv에서 가져올거야'
= '라이브러리를 venv 폴더에다 깔거야'
-> 터미널에 pip install requests 입력 후 엔터(라이브러리 설치완료)
fetch 는 서버에서 데이터를 가져와서 보는 것이었는데,
fetch의 역할을 requests 라이브러리가 하는 것이라고 보면 된다.
import requests # requests 라이브러리 설치 필요
r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()
요렇게 코드를 복붙해주고, print(rjson)을 입력하면, 링크 파일에 있는 데이터가 터미널에 나오는걸 확인할 수 있다.
요 데이터는 서울의 미세먼지 데이터!
해당 링크를 보면 리스트가 나열된걸 확인 할 수 있고
print(rjson['RealtimeCityAir']['row']) 를 입력해보면, row 하위의 데이터가 나오는걸 확인할 수 있다.
리스트가 나오면 뭐다? 반복문!
반복문을 돌려 우리가 필요한 지역구(MSRSTE_NM), 미세먼지 수치(IDEX_MVL)를 가져오면 된다.
for a in rows:
gu_name = a['MSRSTE_NM']
gu_mise = a['IDEX_MVL']
print(gu_name, gu_mise)실행해보면 구와 수치가 나란히 입력된걸 확인!
이렇게 해서 requests라는 라이브러리를 이용해서 api 데이터를 활용할 수 있다는 걸 확인해보았다.
웹스크래핑 / 크롤링
스크래핑을 하기 위해 필요한 라이브러리 설치!
☞(만약, vscode 프로그램을 껏다가 다시 킨 상황이라면, 프로그램 하단 오른쪽에 ('venv':venv)가 있는지 확인하고
터미널 안에도 (venv)가 있는지 봐야한다. 터미널 안에 없다면 프로그램 상단 터미널-새터미널 눌러주고 시작!!)
pip install bs4
설치!
크롤링 기본코드 복붙
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')
# 코딩 시작웹에 접속하는 requests, 솎아내는 beautifulsoup 을 사용하려 import 해줬음을 위 코드에서 확인.
연결된 링크에 '그린북'위에 커서를 두고 오른쪽마우스 - 검사 를 누르면 html 코드를 볼 수 있다.
그린북을 지정하는 a태그 위에 오른쪽마우스 - copy - copyselector 클릭
a태그 하나만 가져왔기 때문에, soup.select_one을 쓰고 소괄호 안에 a태그 복사한 값을 붙여넣어주면 된다.
a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')
print(a)print(a)를 해보면 a태그 내용만 복사된걸 확인 할 수 있다!
print(a.text) # 제목만 나오게 하고 싶을 때 -> 그린 북
print(a['href']) # 링크만 나오게 하고 싶을 때 -> /movie/bi/mi/basic.naver?code=171539
링크에 있는 영화의 제목들만 다 가져오기 위해서, 다시 검사 클릭.
모든 제목 하나 하나가 <tr>태그 안에 들어가 있는걸 알 수 있다.(커서를 갖다 대면 내가 선택한 영역이 보임)
그렇다는건? <tr>태그를 반복문으로 돌려 제목만 빼내면 되는 것!
첫번째, 두번째, 세번째 tr태그를 copy select 한 내역은 아래와 같다.
old_content > table > tbody > tr:nth-child(2)
old_content > table > tbody > tr:nth-child(3)
old_content > table > tbody > tr:nth-child(4)
어디까지 공통으로 갖고 있는지 볼 수 있다.
tr태그 여러개를 갖고올 것이기 때문에 soup.select('공통된 위치까지')
trs = soup.select('#old_content > table > tbody > tr') # tr태그가 여러개 들어있는
for tr in trs:
print(tr) # 쌓인 tr 확인하기
내가 가져올 제목을 확인하기 위해, 다시 네이버 링크에서 제목 위 커서. 오른쪽 마우스 - 검사 클릭
copy selector를 해보면
# old_content > table > tbody > tr:nth-child(4) > td.title > div > a
# 제목 copy selector, tr까지는 아래 trs와 공통된 내역임을 확인 했으니
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
a = tr.select_one('td.title > div > a') #그 이후의 위치 td ~ a까지 복붙해서 tr에서 select_one
print(a)
어랏? 근데 실행값 중간에 None이라고 써져있는 녀석들이 있다.
다시 네이버 링크에서 검사를 들어가면
요렇게 사이에 구분선도 tr 태그로 있었다는 점!
저 녀석들을 제외해야 하기 때문에, 반복문 안에 조건문을 추가하도록 한다. 하기 코드 확인
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
a = tr.select_one('td.title > div > a')
if a is not None: # if a != None: 으로도 쓸 수 있지만, 조금 더 직관적으로 is not을 써준다
print(a.text) # 제목만 프린트
이어서 순위, 별점도 가져오기!
꺅!!!!!!!!!!!!!!!!!!!!!!!!!♥ 다음 작업을 넘어가기 전, 선생님이 먼저 해보라고 해서
나 혼자 끄적끄적 아래 코드를 만들어서 따라해 보았더니 결과물이 잘 나왔다 >,.< 작은 일에 행복해진 나
우선 선생님처럼 가져올 값의 태그 위치를 복붙해 보았고, 공통되는 부분을 제외하고 변수로 달아보았다. >,.<
# 나 혼자 도전용
# old_content > table > tbody > tr:nth-child(4) > td.title > div > a 제목
# old_content > table > tbody > tr:nth-child(2) > td:nth-child(1) > img 순위
# old_content > table > tbody > tr:nth-child(2) > td.point 별점
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
a = tr.select_one('td.title > div > a') # 제목
rank = tr.select_one('td:nth-child(1) > img') # 순위
star = tr.select_one('td.point') # 별점
if a is not None: #if a != None: 과 같음. is not이 조금 더 직관적
print(rank['alt'], a.text, star.text)
선생님의 코드는 이렇게!! 확실히 나랑 쓰는게 다르구나 ㅠ_ㅠ 갈길이 멀당, 더 배우도록..!
for tr in trs:
a = tr.select_one('td.title > div > a')
if a is not None:
title = a.text
rank = tr.select_one('td:nth-child(1) > img')['alt']
star = tr.select_one('td.point').text
print(rank, title, star)
데이터 베이스
저장해놓은 데이터를 잘 가지고 오는게 데이터 베이스의 역할!
(요즘의 트렌드는 클라우드)
데이터 베이스의 종류는 2가지
SQL(=RDRMS) / NoSQL(Not Only SQL의 약자)
① SQL : 정해진 칸에 데이터를 넣음(엑셀과 비슷)
- 사람이 실수할 일이 없음
- 대기업처럼 비즈니스가 잘 안바뀌는 큰 곳
- 틀이 있기 때문에 조금 더 빠르게 데이터를 가져올 수 있음
② NoSQL : 정형화된 틀이 있는게 아니라 데이터를 내 마음대로 저장할 수 있음
- 비즈니스의 유연성을 담보
- 스타트업 같이 비즈니스가 자주 변동되는 곳
강의에서 사용할 건 NoSQL 방식인 MongoDB !
빠르게 가입 먼저 진행 슈슉-(3주차 3-11 강의 참고!ㅋ_ㅋ)
내 컴퓨터에 있는 데이터를 몽고DB에 넣어주는 것. 가져오기도 함.
MongoDB를 이용하기 위해선 2개의 라이브러리가 필요하다
(뭐가 많네...)
pymongo / dnspython
vscode 터미널에 두 가지 설치해주면됨
pip install dnspython
pip install pymongo
이후 새로 만든 폴더에 pymongo 기본코드 복붙 후, mongodb url 복붙
from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta(mongoDB는 회원가입 절차나, 라이브러리 사용법, url복붙하는 것도 살짝 번거롭다...
강의가 21년도?에 만들어진거라 그런지 강의에서 보여주는 화면이랑 살짝 달라서 버벅거렸음 ㅠ 지치넹;ㅋ)
mongoDB는 딕셔너리를 그냥 넣어주면 된다고함
from pymongo import MongoClient
client = MongoClient('url 입력하는 건 비밀!') # 복잡한 절차,ㅎ
db = client.dbsparta
doc = {
'name' : '영수', # 딕셔너리 생성
'age' : 24
}
db.uesr.insert_one(doc) # 데이터 베이스에 넣는 법상단의 코드를 실행하면 vscode 에서는 아무런 반응도 하지 않음.
몽고디비로 넘어가서 확인해보면 user 콜렉션이 추가 된다고 한다.
그러나,ㅋ
아오,,,!!!!!!!! 몽고디비가 말을 듣질 않아서 구글 계정 가입한거 꾸역꾸역 계정 탈퇴시키고,
새로운 이메일로 다시 가입했다...............
여차저차 따라 하는데 업로드가 또 안되서 다른분들이 남겨 놓은 즉문즉답을 보고 나도 코드를 추가했더니 이제서야 됨 ㅠ_ㅠ.......
현재시각 새벽 1시 20분인데 거의 40분을? 이거 하느라 애먹은 듯하다.............하.............지치네....................?
from pymongo import MongoClient
import certifi # <- 추가
ca = certifi.where() #<- 추가
client = MongoClient("000님의 DB주소", tlsCAFile=ca) #<- 끝에 추가하기
db = client.dbsparta해결,,,
거진.. 한시간만에 확인 할 수 있었던.. mongDB에 들어간 모습,...,,. 다시는 겪고 싶지 않아,..
저기에 있는 users는 dbsparta라고 하는 큰 데이터 베이스 안에 있는 콜렉션이라고 한다.
큰 데이터 베이스에 이것저것 맘대로 넣으면 뭔지 모르니 묶어놓은 소그룹 단위라고 생각하면 된다한다.ㅋ
같은 코드를 또 입력하고 실행하면 이중으로 또 들어가기 때문에
기존의 코드는 지우고 새로운 코드를 입력해서 실행시킨다.
doc = {'name' : '영희', 'age' : 30}
db.users.insert_one(doc)
doc = {'name' : '철수', 'age' : 20}
db.users.insert_one(doc)
오른쪽 상단에 refresh를 누르면 하단에 영희, 철수가 추가된 걸 확인 할 수 있다.
pymongo(find) - 여러개 찾기
all_users = list(db.users.find({},{'_id':False})) # 데이터베이스의 자료를 찾아오는 코드
for a in all_users: # 리스트로 되어있어서 for문 돌림
print(a)
vscode 터미널에 데이터 베이스에 있는 데이터들이 출력되는 걸 확인
pymongo(find_one) - 한개 찾기
user = db.users.find_one({})
print(user)
영수, 24살 한 개만 출력되는 걸 확인
데이터 앞에 '_id 블라블라' 입력되는게 보기 싫다면 중괄호 뒤에 {},{'_id':False} 를 추가해주면 된다.
pymongo(update_one) - 한개 조작하기
db.users.update_one({'name':'영수'},{'$set':{'age':19}}) # 이름이 영수인 것을 찾아서, 나이를 19로
영수의 나이가 24 -> 19이 된 걸 확인
pymongo(delete_one) - 한개 지우기
db.users.delete_one({'name':'영수'}) # 영수를 지워라
영수는 사라지고, 영희 철수 2개만 남은 것을 확인
pymongo 요약본
오차피 인터넷에 검색하면 다 나오는 자료니까 배포해도 되겠찡? ㅋ_ㅋ
# 저장 - 예시
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'})
웹스크래핑 결과 데이터베이스에 저장하기
네이버 영화 크롤링 작업 이전에 한것을 print 하는 결과로 받는 게 아니라 딕셔너리 형태로 만들어서 데이터베이스에 넣어준다!
하단 코드에 # 추가 주석 참고
from pymongo import MongoClient # 추가
import certifi # 추가
ca = certifi.where() # 추가
client = MongoClient('url입력',tlsCAFile=ca) # 추가
db = client.dbsparta # 추가
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')
a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
a = tr.select_one('td.title > div > a')
if a is not None:
title = a.text
rank = tr.select_one('td:nth-child(1) > img')['alt']
star = tr.select_one('td.point').text
doc = { # 추가
'title':title, # 추가 print(rank, title, star)를 지워주고
'rank':rank, # 추가 딕셔너리 형태로 만들어준다
'star':star # 추가
} # 추가
db.movies.insert_one(doc) # 추가 이번엔 users가 아니라 movies라는 컬렉션에 저장할 것
코드 실행 후 데이터베이스에 movies 컬렉션이 추가되고, 크롤링 작업했던 자료가 들어간걸 확인 할 수 있다.
단! vscode에서 실행을 여러번 클릭하면
클릭하는대로 데이터베이스에 추가되니, 같은 자료가 몇 번씩 쌓여있다면 본인이 여러번 실행한 것..!ㅋㅋ
마지막 지니뮤직에 랭킹 제목 가수 순으로 크롤링 해오기를 숙제로 3주차 끝!
3주차는 몽고디비만 아니었으면,, 꽤나 재밌었던 느낌..!
현재시각 새벽 2시 30분ㅋ_ㅋ
넘나 집중했나보다.
낼 출근이 두렵다...............................................
'코딩 개발일지 > 웹개발 종합반(스파르타 코딩클럽)' 카테고리의 다른 글
| <스파르타 코딩클럽 웹개발 종합반 5주차> (0) | 2023.03.12 |
|---|---|
| <스파르타 코딩클럽 웹개발 종합반 4주차> (0) | 2023.03.12 |
| <스파르타 코딩클럽 웹개발 종합반 2주차> (0) | 2023.02.28 |
| <스파르타 코딩클럽 웹개발 종합반 1주차> (0) | 2023.02.26 |