A Developing Developer
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Javascript, jQuery 본문
내일배움캠프 4기/[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Javascript, jQuery
H-JJOO 2022. 10. 7. 14:24내일배움캠프 4기 사전캠프 4일차
- Javascript
- 짝 / 홀수 판단하는 방법
<script>
let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0이다. => 짝수
let odd = 3;
console.log(odd % 2); // 2로 나눈 나머지가 1이다. =? 홀수
</script>
<script>
let count = 1;
function plzClick() {
console.log(count);
if (count % 2 == 0) {
alert('짝수입니다.')
} else {
alert('홀수입니다.')
}
count += 1;
}
</script>
</head>
<body>
<button onclick="plzClick()">CLICK</button>
</body>
----
여기서 잠깐! Javascript function 을 만들다가 동작을 안해서 시간을 잡아먹었는데,
<script>
let count = 1;
function click() {
console.log(count);
if (count % 2 == 0) {
alert('짝수입니다.')
} else {
alert('홀수입니다.')
}
count += 1;
}
</script>
</head>
<body>
<button onclick="click()">CLICK</button>
</body>무엇때문에 동작을 하지 않는 것일까?
Javascript 에는 click() 이 이미 메소드로 만들어져있는거 같다.
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/click
HTMLElement.click() - Web API | MDN
HTMLElement.click() 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.
developer.mozilla.org
미리 만들어져 있는 메소드명은 새로운 함수명으로 해주면 동작을 안하는 것 같다. 주의하자...
----
- jQuery
HTML 의 요소들을 조작하는, 편리한 Javascript 를 미리 작성해 둔 것이다. 즉 라이브러리 이다.
jQuery 가 등장하게된 배경은, Javascript 로 모든 기능을 구현은 가능하지만 코드의 복잡함, 브라우저 간 호완성 문제 고려하기 위해서이다.
Javascript
<script>
document.getElementById("element").style.display = "none";
</script>jQuery
<script>
$('#element').hide();
</script>
jQuery 사용을 하기위해서는 CDN 을 'import' 해 줘야한다.
import 는 미리 작성된 코드를 가져오는 것이다.
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><head> 와 </head> 사이에 넣으면 된다.
jQuery 사용 방법은 CSS 와 마찬가지로 적용할 태그를 "가리켜야" 조작을 할수 있다.
CSS 는 class 를 사용했다면, Javascript 는 id 값을 통해 가리키게 된다.
기존에 작성한 '내생에 최고의 영화' index.html 에 동작기능 즉 Javascript 를 적용한 코드이다.
<!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 {
background-color: green;
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/topgun2.PNG");
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: 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;
}
.wrap {
max-width: 1800px;
width: 95%;
margin: 20px auto 0px auto;
}
.card > img {
height: 700px;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0 auto;
box-shadow: 0 0 3px 0;
padding: 20px;
display: none;
}
.mybtn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.mybtn > button {
margin-right: 20px;
border: 1px solid black;
}
#floatingTextarea {
height: 200px;
}
</style>
<script>
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 type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-light" onclick="close_box()">닫기</button>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<div class="col">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BZWYzOGEwNTgtNWU3NS00ZTQ0LWJkODUtMmVhMjIwMjA1ZmQwXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg"
class="card-img-top" alt="...">
<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">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/13/Top_Gun_Maverick_Poster.jpg/220px-Top_Gun_Maverick_Poster.jpg"
class="card-img-top" alt="...">
<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">
<img src="https://img.cgv.co.kr/Movie/Thumbnail/StillCut/000082/82120/82120203763_727.jpg"
class="card-img-top" alt="...">
<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">
<img src="images/TopGun4.PNG"
class="card-img-top" alt="...">
<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>jQuery 부분이고
<script>
function open_box() {
$('#post-box').show(); // show 말그대로 보여주는 기능이다.
}
function close_box() {
$('#post-box').hide(); // hide 말그대로 숨기는 기능이다.
}
</script>open_box() 를 onclick 해준 body 에 button 부분이고
<div class="mytitle">
<h1>내 생에 최고의 영화</h1>
<button onclick="open_box()">영화 기록하기</button>
</div>close_box() 를 onclick 해준 body button 부분이다.
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-light" onclick="close_box()">닫기</button>
</div>아 추가로 최초에 등록박스가 보이지 않게 하기위해서 <style> 태그에 등록박스를 display : none 해 주었다.
<style>
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0 auto;
box-shadow: 0 0 3px 0;
padding: 20px;
display: none; // 여기!
}
</style>
닫기를 클릭하면 등록 박스가 숨겨진다.
- jQuery 퀴즈
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text"/>
<button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>
위 코드는 Javascript 부분코드를 완성하기 전 코드이고, 아래코드는 완성 코드이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
let input1 = $('#input-q1').val();
if (input1 == '') {
alert('입력하세요!');
} else {
alert(input1);
}
}
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
let input2 = $('#input-q2').val();
if (input2.includes('@') == true) {
alert(input2.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
let input3 = $('#input-q3').val();
let temp_html = `<li>${input3}</li>`;
$('#names-q3').append(temp_html)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text"/>
<button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>
- 1번 문제
입력된 값을 가져올 수 있는 $('# ...').val() 을 사용하였다.
val() 에 빈값을 주게되면 현재 주어진 값을 가져오고, val('내용') 에 '내용'을 입력해 주게되면 # 뒤의 id 값을 태그에 값을 입력하게 된다.
입력하는 곳의 id 값은 input-q1이므로 $('#input-q1').val('입력'); 하게되면 '입력' 이라고 입력되게된다.
나머지는 if문을 활용해서 입력값이 없을경우와 입력값이 있을때 조건을 코딩하면된다.
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
let input1 = $('#input-q1').val();
if (input1 == '') {
alert('입력하세요!');
} else {
alert(input1);
}
}
- 2번 문제
1번 문제에서 사용한 val() 을 이용해서 값을 받아온 후 includes 라는 메서드를 활용하는데, abc.includes('값') 일 경우 abc 값에서 '값'이 있다면 true, 없다면 false 를 반환한다.
나머지는 앞서배운 split() 메서드를 활용하여 '@' 과 '.' 를 기점으로 리스트로 나눠주면 된다.
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
let input2 = $('#input-q2').val();
if (input2.includes('@') == true) {
alert(input2.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
}- 3번 문제
HTML 을 붙이고, 지우는 문제인데 붙이기위해선 1,2번과 마찬가지로 val() 로 값을 받아온 후 붙이고자하는 태그의 id값을 가져와서 append 해주면 된다. 삭제는 empty 를 활용하면 된다.
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
let input3 = $('#input-q3').val();
let temp_html = `<li>${input3}</li>`;
$('#names-q3').append(temp_html)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}=================================================================================
스파르타코딩클럽_웹개발_종합반(강의자료)
=================================================================================
오늘은 jQuery 를 활용한 Javascript 를 주로 배웠는데, Javascript 는 나름 써봤지만, jQuery 를 제대로 배우고 쓰는건 처음이라 새로운 느낌이들었다.
오늘 마치기 전에 매니저님께서 Javascript 로 코딩테스트 문제 간단한거 관심있으면 풀어보라고 문제를 알려주셨다.
처음에는 결국 뭐를 출력해야하는지 좀 해깔렸지만, 기본 문제는 다 풀 수 있는 수준이였다.
문제는 for 문 만 사용해서 풀 수 있는 문제가 있었는데, 혼자서 잠깐생각하는 것으론 생각이 나지않았다.
매니저님의 풀이를 보고 '아~ 맞다 저렇게 할 수도 있지' 라는 생각이 들었는데, 역시 코딩테스트는 다양하게 많이 자주 해봐야할거 같다.
내일배움캠프 4기 사전캠프 1주차가 끝났다.
아직까지는 예전해 했던 내용을 복습하는 느낌이라 어려울 내용은 전혀 없어서 할만했다.
(그래도 개발일지가 시간을 많이 잡아먹어서 시간은 알차게 쓰는거 같다.)
주말간에 간단하게 복습을하고 좀 쉬어야 겠다...
20000
'내일배움캠프 4기 > [왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' 카테고리의 다른 글
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Ajax (1) | 2022.10.11 |
|---|---|
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 서버 클라이언트 통신 (0) | 2022.10.11 |
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - CSS, Javascript 기초 (0) | 2022.10.06 |
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - HTML, CSS 기본 내용 (2) | 2022.10.05 |
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 서버/클라이언트/웹의 동작 개념 (0) | 2022.10.05 |
'내일배움캠프 4기/[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' Related Articles
more
