2주차개발일지

모든 토글을 열고 닫는 단축어: ctrl + alt + t

jQuery: html의 요소를 조작하는 javascript 라이브러리이다.
jQuery는 미리 작성된 javascript 코드이다 따라서 임포트 해야한다.
Javascript : document.getElementById("element").style.display = "none";
jQuery: $('#element').hide()
jQuery를 쓸 때에도 "가르켜야" 조작할 수있다.
id 값을 활용에 버튼/인풋박스/div/... 등을 가르킨다.

1) 버튼 누르만들기
let temp_html = `<button>나는 추가되는 버튼이다.!!!</button>` //주의 홑따옴표(')가 아닌 backtic이다 ( ` ) == shift + ~ 으로 감싸야한다.
ex)$('#card-box').append(temp_html)
2) 버튼 누르면입력 포스트 만들기
<script>
function save_comment(){
     let name= $('#name').val()
    let comment=$('#comment').val()
    let temp_html= `<div class="card">

                    <div class="card-body">
                        <blockquote class="blockquote mb-0">
                            <p>${comment}</p><!--html각주인데 html라인은 html각주를 사용해야한다-->
                            <footer class="blockquote-footer">${name}</footer>
                        </blockquote>
                    </div>
                </div>` //각주는 아마 html라인 안에서는 사용 할수 없다.
alert('등록되었습니다.')
    $('#cardbox').append(temp_html)
}

</script>

alert():경보메세지이다.

크롬 익스텐션은 Jason을 예쁘게 꾸며준다.

JSON은, Key:Value로 이루어져있다. 자료형Dictionary와 유사

클라이언트 ~> 서버: GET 요청 이해하기

API == 은행 창구

GET :데이터 조회

POST: 데이터 생성(create),변경(Update),삭제(Delete)을 요청할 때 

크롬 익스텐션은 Jason을 예쁘게 꾸며준다.

JSON은, Key:Value로 이루어져있다. 자료형Dictionary와 유사

클라이언트 ~> 서버: GET 요청 이해하기

API == 은행 창구

GET :데이터 조회

POST: 데이터 생성(create),변경(Update),삭제(Delete)을 요청할 때

ex)회원가입, 회원탈퇴, 비밀번호 수정

GET 방식으로 데이터를 받는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미.

& : 전달할 데이터가 더 있다는 뜻.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!

q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)

 

여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까요? →프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?" 백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

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

결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..! (대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 몰라요.^^;;)