[스파르타코딩클럽] 웹개발 종합반 2주차 기록
웹개발 종합반 2주차의 과정이다.
1주차보다 강좌 수가 줄어서 부담이 적겠다고 생각했으나
초보 중 한참 초보인 나로서는 조금씩 헤매는 과정이 나타나기 시작한 주차였다.
1주차 간단한 복습과
2주차에서 배우게 될 내용을 포괄적으로 설명해주고
바로 수업이 진행되었다.
- 2-2 jQuery 시작하기에서부터 2-5 JQuery 연습하기까지의 내용
jQuery란 HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 것. (라이브러리!)
jQuery를 사용하기에 앞서서서 아래의 jQuery CDN 부분을 참고해서 임포트해야한다.
1주차에서 부트스트랩 강의에선 부트스트랩 CDN이 코드스니펫에 딸려있어서
CDN을 직접 확인하는 방법을 몰랐는데
이번 강의를 통해서 알게되었다!
부트스트랩 CDN은 다음 링크에서 찾아볼 수 있었다.
https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
파이참에서
css는 class =""를 통해서 조작할 수 있었지만,
jQuery는 id = ""를 통해서 조작할 수 있었다.
위의 화면에서 cards-box를 숨겨보았다.
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}<div class="mytitle">
<h1>내 생애 최고의 순간들</h1>
<button onclick="open_box()">영화 기록하기</button>
</div><button type="button" class="btn btn-outline-dark" onclick="close_box()">닫기</button>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="url" placeholder="name@example.com">
<label for="url">영화 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="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark" onclick="close_box()">닫기</button>
</div>
</div>각각 id = "open_box()", id = "close_box()", id = "post-box"를 설정한다음,
<script>에 function open_box(){$('#post-box')} function close_box(){$('#post-box')} 를 넣어주고,
.mypost에 display: none; 을 넣어주면 숨김, 꺼냄 기능을 구현할수있다!
jquery + Javascript의 조합도 연습해봤다.
function q1() {
let txt = $('#input-q1').val()
if(txt == '') {
alert('입력하세요')
}else{
alert(txt)
}function q2() {
let txt = $('#input-q2').val()
if(txt.includes('@')){
alert(txt.split('@')[1].split('.')[0])
}else{
alert('이메일이 아닙니다.')
}function q3() {
let txt = $('#input-q3').val()
let temp_html =` <li>${txt}</li>`
$('#names-q3').append(temp_html)
function q3_remove() {
$('#names-q3').empty()위의 문제는 실습문제였는데
익숙하지 않다보니 오랫동안 고민하고 풀게되었다.
includes() 배열에 특정한 값을 포함하고 있는지를 확인할수있는 함수!
- 2-6 서버-클라이언트 통신 이해하기
GET은 서버에서 불러오는 거고,
POST는 서버에 저장, 변경, 삭제하는거라고 이해하고 있으면 되는걸까?
조금씩 바로바로 이해안되는 내용들이 생기기 시작했다ㅠㅠ
- 2-7 Ajax 시작하기에서부터 2-10 Ajax 연습하기까지의 내용
우선 Ajax는 jQuery를 임포트한 페이지에서만 동작 가능!
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 > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i=0; i<rows.length; i++){
let stationName = rows[i]['stationName']
let rackTotCnt = rows[i]['rackTotCnt']
let parkingBikeTotCnt = rows[i]['parkingBikeTotCnt']
let temp_html = ``
if (rackTotCnt < 10){
temp_html = `<tr class="rack">
<td>${stationName}</td>
<td >${rackTotCnt}</td>
<td>${parkingBikeTotCnt}</td>
</tr>`
} else{
temp_html = `<tr>
<td>${stationName}</td>
<td >${rackTotCnt}</td>
<td>${parkingBikeTotCnt}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}Ajax 코드에 익숙해지기 위한 연습을 진행했다.
$('#names-q1').append(temp_html) 코드 작성위치 문제 때문에 헤맸다.
괄호가 많아지다보니 나도모르게 헷갈렸나보다. 해당부분을 항상 신경써야할것같고
$('#').append(temp_html)과 각각의 ${}를 설정해줄때도 코드 오타 실수가 있었다.
숫자가 아닌 문자와 같은 경우는 작은 따옴표를 붙여야 한다는 것도 잊지말자.
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function (response) {
let url = response['url']
let txt = response['msg']
$("#img-rtan").attr("src", url);
$("#text-rtan").text(txt);
}
})
}
$("#아이디값").text("바꾸고 싶은 텍스트");
$("#아이디값").attr("src", 이미지URL);텍스트와 이미지를 바꿀때는 해당 식을 활용해보자!
- 2-11 2주차 끝 & 숙제 설명
1주차 숙제에서 현재 기온이 나타나게 하는게 숙제였다.
일단
<p>현재 기온 : <span id="temperature">00.0</span>도</p><span>에 id를 부여하고,
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/incheon",
data: {},
success: function (response) {
let temp = response['temp']
$("#temperature").text(temp);
}
})
});Ajax 코드를 입력해줬다.
이번 구현은 버튼을 눌러서 확인하는 것이 아니기 때문에
$(document).ready(function () {를 작성했다. 또한 text를 바꾸기 때문에
$("#아이디값").text("바꾸고 싶은 텍스트"); 를 참고해서 넣어줬다.
이제 접속할때 시간별로 온도가 바뀐다!
2주차 강의가 끝났다.
생초보가 코딩에 도전하는거라서 그런지 2주차부터 금방 이해가 안되어서 여러번 강의를 돌려보게되었다.
익숙해질 때까지 반복해서 강의를 들어봐야겠다.
추가로,
어제 살펴본 git, github 유튜브 강의를 참고해서
github에 지금까지 공부한 내용을 올려봤다.
별거 아닌데도 뿌듯했다(ㅋㅋ)
로컬저장소에서 원격저장소로 push 성공!