[스파르타] #웹개발 종합반 #2주차 개발일지👊🏻

Recorder_H·2021년 12월 26일
0

#웹개발일지

목록 보기
2/4
post-thumbnail

🌼 Notion 강의자료

🚩수업 목표

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

JS 복습

  • 짝/홀수 onclick 함수
    <script>
        let count = 1; // 변수를 함수 안에서 선언하면 함수가 끝나면서 사라짐.
        function hey() {
            if (count % 2 == 0) { // count를 2로 나눈 나머지가 0이라면
                alert('짝수입니다!');
            } else {
                alert('홀수입니다!');
            }	
            count += 1; // = count + 1
        }
    </script>

📝JQuery

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

  • Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
    1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장.
  • jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드, 전문 개발자들이 짜둔 코드를 import하여 간단하게 쓸 수 있음.
// Javascript로 길고 복잡하게 써야 하는 것.
document.getElementById("element").style.display = "none";

// jQuery로 보다 직관적으로 작성.
$('#element').hide();

jQuery CDN

구글 CDN https://fonts.google.com/?subset=korean

부트스트랩을 사용할 경우, jQuery CDN이 임포트 되어있음.
<head> 와 </head> 사이에 작성.

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

css에서는 선택지로 class, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됨.

👉 input 박스의 값을 가져와보기

값 가져오기 $('#id값').val();
input값 입력하기 $('#id값').val('장영실'); 

<div class="posting-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

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

👉 div 보이기 / 숨기기

나타내기 $('#id값').show()
숨기기 $('#id값').hide() 

<div class="posting-box" id="post-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

// 크롬 개발자도구 콘솔창에 입력.
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

👉 css의 값 가져와보기

$('#post-box').hide();
$('#post-box').css('display'); // 예 display 속성 값 가져오기

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

👉 태그 내 텍스트 입력하기

텍스트 바꾸기 $('#id값').text('텍스트')

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

//다른 것들 - 예) 버튼의 텍스트 바꾸기
// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>

$('#btn-posting-box').text('포스팅 박스 닫기');

👉 태그 내 html 입력하기

이어 붙이기 $('#id값').append(temp_html)
back tick(`) - html처럼 생긴 문자열을 html로 변환.

<div> ~ </div> 내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)

// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
<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 temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

// 버튼 말고, 카드 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// backtick을 사용하면 문자 중간에 Javascript 변수 삽입 가능.
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);

  • JQuery 적용하기(나홀로메모장)


// 포스팅박스 열기 버튼에 id 값 주기, onclick 속성(attribute)을 추가.
<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>

<script>
function openclose() { 
  let status = $('#post-box').css('display'); // post-box'가 보이는 상태(block)인지 아닌지(none)
  // console.log(status); 찍어보기
  if (status == 'block'){ // id 값 post-box의 display 값이 block 이면
    $('#post-box').hide(); // post-box를 가리고
    $('#btn-posting-box').text('포스팅박스 열기'); // 가렸으니까 이제 열기로 바꿔두기
  } else {
    $('#post-box').show(); // 아니면 post-box를 펴라
    $('#btn-posting-box').text('포스팅박스 닫기'); // 폈으니까 이제 닫기로 바꿔두기
  }
}
</script>

// 포스팅박스에 id값 주기
<div class="form-post" id="post-box">
  
// posting-box 시작부터 감춰두기
<style>
  .posting-box {
	display:none;
}
</style>

📝서버→클라이언트: "JSON" 이해

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

📝클라이언트→서버: "GET 요청" 이해

👉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                      (인코딩 정보)

📝Ajax

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

Ajax 기본 골격

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "여기에URL을입력", // 요청할 url
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    // success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행
    
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

data: 요청하면서 함께 줄 데이터

  • GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
    http://naver.com?param=value&param2=value2

  • POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
    data: { param: 'value', param2: 'value2' },

Ajax 연습

// 모든 구의 미세먼지 값을 찍어보기
$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = ['RealtimeCityAir']['row'] // 데이터 꺼내는 부분!
    for (let i = 0;, i < rows.length; i++){ 
    	let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = row[i]['IDEX_MVL']
        if(gu_mise < 70){
          console.log(gu_name,gu_mise)
        }
    }
  }
})

👩‍💻 2주차 마무리하며.

🤍 차근차근 consol에 찍어보고, 나아가는 훈련! (코드쭈-욱 짜놓고 에러찾기 X)
🤍 코딩은 외워서 하는 것이 아니다, 가져다 쓰는 것!
🤍 { } / " " / . → 맥락과 사용법을 익혀라!
🤍 헷갈리지 않게 "정렬(ctrl+alt+L)" 잘하기!
🤍 태그 짝 잘 맞는지 확인하기!
🤍 완벽하게 하려고 하지 않기
🤍 익숙할 정도로 반복/연습하기
🤍 구글링을 습관화
🤍 에러를 무서워하지 말고, 최대한 읽어보고 익숙해지려고 노력하기!

💜 게더(스파랜드)에서 스온스 진행 중
💜 11일 챌린지 도전 중
💜 개발일지 작성 중 (+복습)
💜 틈틈히 개별 프로젝트 아이디어

profile
Recorder_H
꼼꼼한 원칙주의자, Rami

0개의 댓글