항해99 2주차 개인필기 (jquery + ajax get)

Seong Hyeon Kim·2022년 3월 28일
2주차JavaScript
0

항해99

목록 보기
8/16

2주차는 javascript 를 활용하는 방법들로 시작한다

 <script>
            let count = 0
            function hey(){
                count +=1
                if(count % 2==0){
                    alert ('짝수입니다.')
                } else {
                    alert('홀수입니다.')
                }
          }
        </script>

라는 코드식을 작성한 후 body 쪽에

<button onclick="hey()"> 영화 기록하기</button>

라는 형태로 버튼에 내가 만든 함수 hey()를 연결? 해주면
버튼 누를때마다 카운트가 쌓이고 if문 함수식에 따라 카운팅되는 횟수에 따른
다른 값이 출력되는 방식이다.

1) jQuery 란?

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

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

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

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

    👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

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

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

jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)

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

jquey 를 사용하려면 html파일의 head 부분에 한가지 문장을 적어놔야 하는데

https://www.w3schools.com/jquery/jquery_get_started.asp 에 접속하여

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

라는 형태의 문장이 있어야 실행이 된다.

  • 2) jQuery 사용하기
    • 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다. 👉 jQuery CDN 부분을 참고해서 임포트하기: [(링크)](https://www.w3schools.com/jquery/jquery_get_started.asp) - **[코드스니펫] jQuery CDN** html https://www.w3schools.com/jquery/jquery_get_started.asp
    • head 와 /head 사이에 아래를 넣으면 끝! 👉 수업 자료를 잘 따라온 분이라면, 코드에 이미 다음과 같이 임포트 되어있을거예요. 다시한번 잘 살펴보세요! ```html ```
    • jQuery를 사용하는 방법 👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 썼지요? jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다. 백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!

jquery 의 활용

1. 박스 없애기

<div class = "mypost">

index (내 생에 최고의 영화들) 파일안에 포스팅 박스의 함수 이름인 저곳에 id값을 준다 뭔가를 하고 싶을때는 반드시 이름을 만들어야 하기 때문!

<div class = "mypost" id="post-box">

여기서는 이렇게 이름을 줬다.
그리고 실행을 한후 콘솔창으로 들어와서

$('#post-box').hide()

라고 실행을 하면

$('#post-box').hide()
S.fn.init [div#post-box.mypost]

라는 문구와 함께 박스가 사라진다.

$('#post-box').show()
S.fn.init [div#post-box.mypost]

다시 나타나게 하는 방법은 show 로 바꾼후 재실행 하면 다시 나타난다

2. 내용 바꾸기

<input type="email" class="form-control" id="url" placeholder="name@example.com">
            <label for="floatingInput">영화 url</label>

영화 url 을 입력하는 창에 id값 url을 줬다. 그리고 콘솔창에

$('#url').val('입력을 하고싶다')

라고 입력하면 원래 영화 url칸에 아무것도 없었지만
입력을 하고싶다 라는 문구가 입력되어있는게 보인다.

저 수식을 간단히 설명하자면
$() 안에는 id 즉 수정하고 하는곳의 이름을 불러서 jquery 를 먹이겠다는 뜻이고
.val() 에는 이름을 부른곳에 이러한 값을 넣겠다 라는 의미다.

$('#url').val()
'입력을 하고싶다'

반대로 콘솔창에 $('#url').val()라고 입력후 실행하면 '입력을 하고싶다' 라는 문구가 출력된다
저 수식을 설명하자면 id url의 val값을 보겠다 라는 의미로 생각하면 된다.

3. juery 로 카드박스 만들기

<div class="row row-cols-1 row-cols-md-4 g-4">

카드 박스가 있는 곳은 여기다. 이곳에 id값을 넣어준다

<div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">

이런식으로 이름은 준 후 저장후 콘솔창으로 다시 가서

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">여기에 재목이 들어갑니다</h5>
                        <p class="card-text" 여기에 내용이 들어가지요</p>
                        <p>⭐⭐⭐</p>
                        <p claass="mycomment">여기에 코멘트가 들어갑니다</pclaass>
                    </div>
                </div>
            </div>`

let temp_html = ` 을 두번 누른 후 그 안에 html 에 카드 부분을 담당하던 div> 부분을 복붙해준후 그대로 실행해준다

그리고 난후

$('#cards-box').append(temp_html)

콘솔창에 다음의 코드를 입력후 실행하면 카드박스들이 생성되는것을 볼수 있다

3-1 juery 로 카드박스 만들고 이름 바꾸기

콘솔창에서

let mytitle = '타이타닉'

이라고 함수 선언 후 실행한 다음

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">${mytitle}</h5>
                        <p class="card-text" 여기에 내용이 들어가지요</p>
                        <p>⭐⭐⭐</p>
                        <p claass="mycomment">여기에 코멘트가 들어갑니다</pclaass>
                    </div>
                </div>
            </div>`

라고 바꾼다. 참고로 바뀐 부분은 my title 부분을 여기에 제목이 들어가지요 가 아닌 ${mytitle} 로 바꿔주었다.

그리고 위와 동일하게

$('#cards-box').append(temp_html)

를 실행해주면 이번에는 타이타닉 이라는 바뀐 제목의 포스터가 복사가 된다.

포스팅박스 생성-닫기 활성화

가장 먼저 id 값을 주는것으로 시작하는데 잘 주어지는지 확인 먼저 해보자

 <script>
            function open_box(){
                alert ('박스 열기')
            }
            function close_box(){
                alert ('박스 닫기')
            }
        </script>

자바스크립트를 먼저 만들어두고 body 로 가서 id값을 줘야한다.
박스 열기는 영화 기록하기에 넣고
박스 닫기는 기록 완료 쪽에 넣기로 했다

<button onclick="open_box()"> 영화 기록하기</button>


<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

그리고 각각의 버튼들을 눌러보면서 alert 값이 잘 나오는지 확인한다

출력이 잘 되는것을 확인했으면 이제 jquery로 바꿔줄 시간이다

  <script>
            function open_box(){
                $('#post-box').show()
            }
            function close_box(){
                $('#post-box').hide()
            }
        </script>

기존에 alert 로 적어놓은 부분을 jquery 를 사용하기 위해 코드 내용이 바뀌엇고
이제 버튼들을 누르면 박스가 생성되거나 사라지거나 할수 있다.

하지만 시작부터 박스가 있는것보다는 누를때마다 생성되는게 더 보기 좋기 때문에
시작부터 박스가 보이지 않도록 설정해준다

<sytle>
.mypost{
            max-width: 500px;
            width: 95%;

            background-color: white;

            margin : 10px auto 0px auto;
            box-shadow: 0px 0px 3px 0px gray;
            padding:20px;
            
            display: none;



</style>

style 태그안에 포스팅 박스를 꾸며주는 부분인 .mypost 부분을 찾아서 display: none; 이라는 글자를 적어주면 존재는 하지마 처음부터는 보이지 않게 된다.

ajax 콜에 관한 이해

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

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

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

  • GET → 통상적으로! 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회

  • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정

👉 **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",
            url: "여기에URL을입력",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })
  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

2주차 과제내용 팬명록에 날씨 만들기

풀이과정

  1. 우선 날씨 코드를 넣을 대상 즉 변수를 미리 지정해준다.
1-1
<div class="mytitle">
            <h1> IU 팬명록 </h1>
     </div>

1-1. 날씨가 나올 위치는 팬명록이기 때문에 날씨가 나올 곳에 변수를 미리 만들어둔다

1-2
<div class="mytitle">
            <h1> IU 팬명록 </h1>
     <p>현재 기온 : <span id="temp">00.0 도</span> </p>
    </div>

1-2. 다음처럼 p태그를 이용하여 한줄을 만들고 그 안에 span 태그를 사용하여 안쪽에 진짜 목적인 온도에 대한 변수이름 즉 id값을 만들어준다

  1. ajax 콜을 위해 미리 준비해둔 코드를 script 부분에 넣는다
2.
<script>
$.ajax({
            type: "GET",
            url: "여기에URL을입력",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })

</script>

2-1 url 에 내가 원하는 날씨를 알려주는 url 주소를 입력한다.

2-1
<script>
$.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })

</script>

2-2 실행 후 내가 콘솔창을 띄워서 내가 원한느 값이 무엇언지를 확인한다. 여기서는 temp값이 내가 원하는 값이다.

2-3 콘솔창에서 내가 원한 값을 확인했으면 이제 그 값을 넣기 위해 변수를 선언후 (✅✅표시된곳) 내가 원한 그 값이 맞는지 한번 더 확인차 콘솔로그(temp) 로 찍어보고 확인한다.

2-3
<script>
$.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
           ✅✅ let temp = response['temp']
                console.log(temp)
            }
        })

</script>
  1. 다음과 같이 코드를 적어서 아까 있엇던 온도 값이 밖으로 나올 수 있도록 한다.
3.
<script>
        $(document).ready(function(){
                $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                    data: {},
                    success: function (response) {
                       let 3️⃣temp = response[4️⃣'temp']
                          1️⃣$('#temp').2️⃣text(3️⃣temp)


                        }

                })
        });

    </script>
  1. 설명
    1️⃣ 이곳에 있는 temp는 temp라는 id 즉 1-1에 맨처음 만들었던 변수명이다.
    2️⃣ 명령어. 1️⃣ 번에 3️⃣번의 값을 text 즉 작성하겠다는 의미의 명령어다
    3️⃣ 위쪽 3️⃣번과 아래쪽의3️⃣번은 같은 값이다. 가로안에 3번은 그냥 윗줄에 3번을 지정?해서 호출한다는 의미로 적어놓은것이다.
    4️⃣ 4번에 적힌 temp는 url안에 들어있는 우리가 원하는 값 temp를 말한다. url내부에 있는 변수명 temp의 값을 호출한다는 의미로 생각하면 된다.

fff

///해답 코드

<script> 
        $(document).ready(function(){
                $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                    data: {},
                    success: function (response) {
                       let temp = response['temp']
                            $('#temp').text(temp)


                       }

                })
        });

    </script>
profile
Seong Hyeon Kim
삽질도 100번 하면 요령이 생긴다. 부족한 건 경험으로 채우는 백엔드 개발자
이전 포스트

2022.06.22 - WIL [클론 코딩을 마치며]

다음 포스트

항해99 3주차 개인필기

0개의 댓글