본문 바로가기
IT/Web

[프론트엔드] 스파르타코딩클럽 웹개발 종합반 2주차 수강후기

by 퐁시냥 2021. 11. 16.

스파르타코딩클럽 웹개발 종합반 2주차 수강후기.

1주차 수업을 하루만에 다 듣고 2주차 수업도 듣고 있다. 오늘 안에 3주차까지 다 듣는게 목표인데.. 

벌써 새벽이라 2주차만 듣고, 내일은 3주차 ~ 5주차까지 완료해야겠다 ! 

 

 

2주차 수업 과제 - 현재 온도 표시

 

수업 내용을 정리해서 작성해놓는 용으로 사용 중이다. 

2주차는 Javascript, jQuery, Ajax 통신을 배웠다.

 

[수업 목표]

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

 

01. jQuery 란?

1)코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장. HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!

    • 👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
    • Javascript로 길고 복잡하게 써야 하는 것을 jQuery로 보다 직관적으로 쓸 수 있음.
      • jQuery와 Javascript - 코드 비교해보기 
      • /* JavaScript */ document.getElementById("element").style.display = "none"; /* jQuery */ $('#element').hide();
    • 👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)jQuery 사용하기

 

02. jQuery 사용하기 

  • 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.</aside>
  • 👉 jQuery CDN 부분을 참고해서 임포트하기: (링크)
  • <head> 와 </head> 사이에 아래를 넣으면 끝!</aside>
  •  
  • jQuery를 사용하는 방법css에서는 선택자로 class를 썼지요? jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
  • 백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!
  • 👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘!

 

03. JQuery 다뤄보기

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

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');
// 주의: 홑따옴표(')가 아닌 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);

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

  • JSON은, Key:Value로 이루어져 있음. 자료형 Dictionary와 아주 유사함.
  •  👉 API는 은행 창구와 같은 것!
  • 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재 
    • GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
    • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
  •  👉 GET 방식으로 데이터를 전달하는 방법 
     위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
     q=아이폰                        (검색어)
     sourceid=chrome        (브라우저 정보)
     ie=UTF-8                      (인코딩 정보)

05. Ajax 시작하기

  • 👉 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
  • 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
    • Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻
$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

 

  • ajax 코드 설명
    • type: "GET" → GET 방식으로 요청한다.
    • url: 요청할 url
    • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
      • 👉 리마인드 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' },​
    • success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다. 
      • success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 
console.log(response) 
}

06. Ajax 호출 예시

// src 수정하기
$('#img-rtan').attr('src', url)
// text 수정하기
$('#text-rtan').text(msg)


// 로딩이 다 되었을 때, ajax 호출하기
$(document).ready(function(){

    $.ajax({

        type: "GET",

        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",

        data: {},

        success: function (response) {

            console.log(response)

            let temp = response['temp']

            $('#mytemp').text(temp)

        }

    })

});

'IT > Web' 카테고리의 다른 글

[Apache] CentOS7 httpd SSL 인증서 적용 방법(https)  (0) 2023.01.23
[프론트엔드] 스파르타코딩클럽 웹개발 종합반 5주차 수강후기  (2) 2021.11.20
[프론트엔드] 스파르타코딩클럽 웹개발 종합반 4주차 수강후기  (0) 2021.11.19
[프론트엔드] 스파르타코딩클럽 웹개발 종합반 3주차 수강후기  (0) 2021.11.18
[프론트엔드] 스파르타코딩클럽 웹개발 종합반 1주차 수강후기  (1) 2021.11.16

관련글

댓글

티스토리툴바