Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

다재다능 개발자 성장기 🚀

[스파르타코딩클럽] 웹개발 종합반 - 2주차 본문

웹개발종합반 TIL

[스파르타코딩클럽] 웹개발 종합반 - 2주차

merrytang 2022. 2. 23. 15:00

우선 25일까지 웹개발종합반 5주차를 끝내야되서, 하루에 한주차씩 끝내고 있다 ㅋㅋ 

확실히 실습하면서 수업을 들으니까 스스로 더 생각해야되서 더 기억에 오래남고, 흥미가 생기는 것 같다.

예전에 국비학원에 다닐 땐 그저 빠르게 나가는 진도에 맞추기 급급해서 어떻게 웹이 어떻게 동작하는지 생각하지 못하고 선생님 따라서 빠르게 타이핑하고 동작되는 걸 보는게 우선이이었는데, 이번 기회에 찬찬히 다시 하나씩 공부하다 보니 복습도 되고 얕게 알고 있던 것들을 더 깊이있게 이해할 수 있게 되어서 좋다 : ) 그래도 국비학원에 다닐 때 깔아두었던 밑바탕이 있어서 이해가 더 빠르게 되는 것 같긴 하다 ㅎㅎ 당시엔 이해하지 못하더라도, 어떤 경험이던지 언젠간 다 도움이 되는 것 같다. 

 

날씨API를 활용하여 팬미팅 사이트에 실시간으로 현재기온을 출력함. 

 

[수업 목표]

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

 

1) JQuery란? 

* HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리이다.

👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

  1. 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다.

*  jQuery와 Javascript - 코드 비교해보기

👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다.

 (전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이다. 그렇기 떄문에 쓰기 전에 "임포트"를 해줘야된다.)

 

* Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

  jQuery로 보다 직관적으로 쓸 수 있다! 

$('#element').hide();

 

2) JQuery 사용하기

* jQuery CDN을 <head> 와 </head> 사이에 아래를 넣으면 끝!

<https://www.w3schools.com/jquery/jquery_get_started.asp>

* 👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.

        예) 특정 인풋박스의 값을 → 가져와줘!

        예) 특정 div를 → 안보이게 해줘!

#css에서는 선택자로 class를 썼는데,  jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.

  

03. JQuery 다뤄보기

* JQuery가 할 수 있는 일은 무척 많다! 그렇기 때문에 외우지 말고 필요할 때 구글링해서 사용하면 된다.

 

1. input 박스의 값을 가져와보기

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

 

2. div 보이기 / 숨기기

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

 

3. 태그 내 html 입력하기

1) 버튼을 넣어보기

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

- 이런 방식으로 부트스트랩의 카드를 넣어볼 수도 있다. 

- html 태그가 들어갈 곳은 홀따옴표(')가 아닌 backtick(`)이다!  Tab 버튼 위에 있다! 

 

04. JQuery 적용하기(포스팅 박스)

- JQuery를 적용하여 함수를 사용하여 버튼을 클릭했을 때 포스팅 박스가 열리고, 닫히는 걸 실습해보았다. 

 

05. Quiz_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(입력값) 띄우기

    let a = $('#input-q1').val()
    if(a == ''){
        alert('입력하세요!')
    } else {
        alert(a)
    }


}

function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

    let b = $('#input-q2').val()
    if(b.includes('@')){
        let result1 = b.split('@')[1].split('.')[0]
        alert(result1)
    }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 c = $('#input-q3').val()
    let temp_html = `<li>${c}</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>

- 위와 같이 JQuery 를 이용하여 문제를 풀어보았다. 

- 문제를 풀면서 느낀건데 자바스크립트도 자바, 파이썬이랑 비슷한 기능을 가지고 있지만 각 언어마다 표현하는 방식      만 다르다는 생각이 들었다.

 

06. 서버-클라이언트 통신 이해하기

👉 API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

  • GET → 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
  • POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

 

07. Ajax 시작하기

👉 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.

jQuery가 임포트 되어있지 않은 페이지 에서는 아래와 같은 에러가 뜬다.

Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

 

* Ajax 코드 해설

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

 

- Ajax를 공부하면서 왜 response에 서버의 결과값이 들어가는지 궁금했는데 

👉 결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..! 

     라고 ㅋㅋㅋ 그렇군...!! 나중에 따로 찾아봐야겠다 ㅎㅎ 

 

- 서울시 OpenAPI, 따릉이 OpenAPI 에서 내가 필요한 부분만 추출해서 내가 만든 사이트에 출력할 수 있다는

  점이 흥미로웠다. 

 

- 랜덤 르탄이 API를 실습하면서 따로 DB에 연결하지 않고도 이미지와 텍스트 등도 쉽게 변경할 수 있다는 점이 간편하    다는 생각이 들었다. 

 

'웹개발종합반 TIL' 카테고리의 다른 글

[스파르타코딩클럽] 웹개발 종합반 - 5주차  (0) 2022.02.26
[스파르타코딩클럽] 웹개발 종합반 - 4주차  (0) 2022.02.25
[스파르타코딩클럽] 웹개발 종합반 - 3주차  (0) 2022.02.23
[스파르타코딩클럽] 웹개발 종합반 - 1주차  (0) 2022.02.22
'웹개발종합반 TIL' Related Articles more