웹개발 2주차

joo.scent·2022년 6월 19일
JavaScriptajaxjqueryjsonweb서버-클라이언트
0

Keep

[Javascript]

1. jQuery 사용하기 기초

1) jQuery import : < head> ~ 사이에 아래 코드 넣기
(링크:https://www.w3schools.com/jquery/jquery_get_started.asp)

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

2) jQuery 선택자는 id로 보통 제어함

3) input박스 값 가져오기

// 콘솔창에 입력
// id 값이 post-url인 곳 선택 후, val()로 값을 가져온다는 뜻
$('#post-url').val();

4) div 보이기&숨기기

// 콘솔창에 입력하기
$('#post-box').hide();
$('#post-box').show();

5) css값 가져와보기(ex. display속성 값을 가져올 때)

$('#post-box').css('display');

6) 태그 내 텍스트 입력하기(바꾸기)

// input box에 텍스트 입력하기
$('#post-url').val('여기에 텍스트를 입력하면!');

//버튼 내 텍스트 바꾸기
$('#btn-posting-box').text('포스팅 박스 닫기');

2. div~div내에 동적으로 html 넣기 : ex) 포스팅 되면 카드를 추가해라, 포스팅 되면 버튼을 추가해라

1) 포스팅 되면 버튼을 추가해라 ('~~~')

let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html); // cards-box라는 아이디값을 가진 컴포넌트에다가 temp_html을 append해달라

2) 포스팅 되면 카드를 추가해라 (~~~)

let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

3) temp_html 뒤에 javascript 변수가 오는 경우에는 ''(따옴표)말고, backtic사용해서 내용 묶어주기.

4) 변수 부분이 바뀌는 내용이면, 이미 짜둔 html에서 복사해와서, "${~~~}" 바꿔넣기

  • 추가하고 싶은 카드의 형태
<div id="cards-box" class="card-columns">
    <div class="card">
      <img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
      <div class="card-body">
        <a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">여기에 기사 내용이 들어가겠죠</p>
        <p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
      </div>
    </div>
  </div>
  • 윗부분 복사후, 태그 내용들이 변수로 들어가서 바뀔 것이므로, ${~~~}으로 바꿔서 넣어주기
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

3. 버튼으로 포스팅 박스 열고 닫기 만들기

1) 포스팅 박스에 id 값을 준다

2) 포스팅 박스 제어를 위한 javascript함수 만들기

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
    }
}

3) html에서 posting-box 초기값 세팅(인라인 스타일) - style = "display : none" 또는 css에서 class만들어서 적용해도 ok

<div class="form-post" id="post-box" style="display:none">
    <div>
        <div class="form-group">
            <label for="exampleFormControlInput1">아티클 URL</label>
            <input class="form-control" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
        <button type="button" class="btn btn-primary">기사저장</button>
    </div>
</div>

4) 버튼에 id값 주기

5) 만들어 둔 함수에 버튼 글씨 바꾸는 코드 추가

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
				// 가렸으니까 이제 열기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
				// 폈으니까 이제 닫기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}

[Json]

1. JSONView 설치 : JSON을 더 가시적으로 볼 수 있음

임포트 링크 : https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko

[Ajax]

1. Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

2. Ajax 기본 골격

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비우기, POST요청시에 들어있는 데이터를 가져감)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 - 확인해볼 때 사용하고 앞줄 변수가 들어가면 거기까지 제대로 되고있는지 확인가능
  }
})

3. Ajax 이용해서 데이터 원하는 것만 불러오기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

Problem

  1. 데이터셋에서 column불러올 때 대소문자를 잘못쳐서 계속 오류가 뜸

  2. 인라인 스타일을 설정해주지 않았더니, 초기화가 안되고 자꾸 뒤에 그대로 붙어서 길어졌다

  3. 아래와 같이 했더니 오류남. 이유는 따옴표 통일 안해서.

        $(document).ready(function () {
            change_rate();
        });

        function change_rate() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let now_rate = response['rate'];
                    $("#realtime-rate").text("now_rate");
                }
            })
        }
  1. $(' 아이디값 ').text(' 변수값 ') // $(' 아이디값 ').append(' 변수값 ') 넣어야 하는데 거꾸로 넣어서 오류남

Try

  1. console.log(변수) 로 계속 확인해보는 습관 가지기. 틀리면 어디서 틀렸는지 찾기 힘들다

  2. 따옴표 모양도 다 통일해줘야 함. 다르면 다른걸로 인식함

profile
joo.scent
쫌쫌따리 개발일지
이전 포스트

웹개발 1주차

0개의 댓글