[항해99] 사전스터디 - 2주차 강의회고록

🦄 사전 스터디 2주차 강의회고록

2주차에는 프론트에서 가장 중요한 JavaScript 개념과 JQuery, Fetch 사용에 대해 배운다.

가장 핵심적인 개념이기 때문에 잘 숙지하면서 들어야겠다.

특히 클라이언트가 서버에 요청하는 Fetch와 GET, POST요청과

응답을 받는 JSON객체 형태에 유의하며 듣도록 하자!😊

✨02/12 : 목표 : 사전스터디 2주차 완강

📒강의 노트 정리

02 JavaScript 맛보기

- Javascript 는 동적인 웹을 만들 수 있는 프로그래밍 언어다. html을 제어하여 움직임을 발생시킨다.

- jQuery는 html 뼈대를 선택해서 쉽게 조작할 수 있다.

- Bootstrap과 같이 jQuery도 남들이 만든 코드모음, 라이브러리다.

- Fetch는 짧은 코드로 요청을 보내고 받아올 수 있다(서버에서 내려오는 데이터를 가져와서 사용할 수 있다).

1) 자바스크립트란?

- 브라우저가 유일하게 알아들을 수 있는 프로그래밍 언어(파이썬 등은 브라우저가 알아들을 수 없음, 브라우저에 명령을 내리는 표준 언어, 역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있)

2) 자바스크립트 기초

- head 안의 style 밑에 script로 사용

- 버튼 클릭 시 alert 경고문 띄우기

<script>
      function hey() {
        alert("안녕하세요!");
      }
    </script>
  </head>
  <body>
    <div class="mytitle">
      <h1>내 생애 최고의 영화들!</h1>
      <button onclick="hey()">영화 기록하기</button>
    </div>

- 배열 + 객체 조합하여 많이 사용 : 정보들을 효과적으로 묶어 관리 가능

let a = [
        { name: "준영", age: 27 },
        { name: "영수", age: 15 },
        { name: "준영", age: 27 },
      ];
      console.log(a);
      console.log(a[0]["name"]); // 준영
      console.log(a[1]["age"]); // 15

04 JavaScript & JQery 연습하기

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

- jQuery와 Javascript - 코드 비교 : jquery로 직관적으로 사용 가능

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

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

1) JQuery 사용하기

- jquery CDN 임포트

https://www.w3schools.com/jquery/jquery_get_started.asp

- head에 넣기

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

- id값을 활용해 jquery 사용하기 : $('#id값') 으로 접근 가능

function checkResult() {
      let a = "사과";
      alert(a);
      $("#q1").text(a); // id=q1이 '사과'로 변경됨
    }
    
let a = ["사과", "배", "감", "귤"];
      $("#q1").text(a[1]); // id=q1이 '배'로 변경됨
      $("#q1").css("color", "red"); // id=q1이 '배'로 변경됨
      $("#q1").css("font-size", "40px");

      let b = { name: "준영", age: 30 };
      $("#q2").text(b["name"]); //준영

      let c = [
        { name: "준영", age: 30 },
        { name: "철수", age: 35 },
      ];
      $("#q3").text(c[1]["age"]); //35

+ [ ] 접근 방법의 차이 알아보기(포스팅 참고)

$("#q3").text(c[1]["age"]) 와
$("#q3").text(c[1].age)의 차이..?

[JavaScript] 객체의 프로퍼티(property) 접근 방법, 속성과 메소드 차이

🙌객체(Object) - 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표

junvelee.tistory.com

06 JQery 연습하기

- .append( ) => 덧붙이다 => 실제 html이 되어 출력된다.

function checkResult() {
      let fruits = ["사과", "배", "감", "귤", "수박"];

      $("#q1").empty(); // 기존에 있던 애들 지워짐
      fruits.forEach((fruit) => {
        let temp_html = `<p>${fruit}</p>`; // fruits들이 추가됨
        $("#q1").append(temp_html);
      });

      // 실습
      let people = [
        { name: "서영", age: 24 },
        { name: "현아", age: 30 },
        { name: "영환", age: 12 },
        { name: "서연", age: 15 },
        { name: "지용", age: 18 },
        { name: "예지", age: 36 },
      ];

      $("#q2").empty();
      people.forEach((a) => {
        let name = a["name"];
        let age = a["age"];
        let temp_html = `<p>${name}는 ${age}입니다.</p>`;
        $("#q2").append(temp_html); // 서영는 24입니다. ...~
      });
    }

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

- 리얼타임 서울시 미세먼지 OpenAPI

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

- JSONVue 확장프로그램(위 JSON 데이터를 보기쉽게 나타내줌)

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

- 서버에서 클라이언트로 데이터를 내려줄 때 JSON 객체 형태로 응답받는다.

1) 클라이언트→서버: GET 요청 이해하기

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

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

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

2) GET 방식으로 데이터를 전달하는 방법

- 주소는 크게 두 부분으로 나눠진다. '?'가 나눠지는 지점이다. 예를들어 네이버 영화 주소에서 ? 기준으로 앞부분이 <서버주소>, 뒷부분이 [영화 번호]이다. code부분을 다른 번호로 변경하면 다른 영화 페이지로 이동한다.

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다. & : 전달할 데이터가 더 있다는 뜻입니다.

google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

google.com/search 까지가 서버 주소 / q , sourceid, ie 등의 정보를 api로 전달

여기서 code, q, sourceid, ie 등의 이름을 정하는 것은, 프론트엔드와 백엔드 간의 약속에 의해 정해진다.

+ URL 주소 구조 알아보기 (포스팅 참고)

[Web] URL과 도메인의 차이, URL의 구조

🙌 URL과 도메인의 차이 - 도메인(Domain) : 서버 이름은 도메인이나 IP주소로 입력 가능하다. 사용자가 매번 IP주소를 입력하기는 쉽지 않다. IP주소를 변환시켜 줄 네임 서버가 도메인을 뜻한다.IP

junvelee.tistory.com

08 Fetch 시작하기

- Fetch : Fetch로 서버에 URL로 데이터를 요청하여 받아옴

- Fetch를 쓰면서 jQuery를 사용할 것이기 때문에 jQuery를 임포트한 페이지에서만 동작, jquery script 추가

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

1) Fetch 기본 골격

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

Fetch 코드 설명
- fetch("여기에 URL을 입력") ← 이 URL로 웹 통신 요청을 보낼 거야!
  - ← 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
- .then() ← 통신 요청을 받은 다음 이렇게 할 거야!
- res ⇒ res.json()
  - ← 통신 요청을 받은 데이터는 res(response) 라는 이름을 붙일 거야(변경 가능)
  - ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
- .then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야

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

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

2) Fetch 사용하여 미세먼지 데이터 가져오기

fetch(
        "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99"
      )
        .then((res) => res.json())
        .then((data) => {
          let rows = data["RealtimeCityAir"]["row"];
          rows.forEach((a) => {
            console.log(a["MSRSTE_NM"], a["IDEX_MVL"]); // 중구 160 ...~
          });
        });

+ fetch로 get, post 요청하는 방법, fetch와 axios 차이, postman 사용법 더 공부하기

10 Fetch 연습하기

- 혼자 실습

fetch(
        "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99"
      )
        .then((res) => res.json())
        .then((data) => {
          let rows = data["RealtimeCityAir"]["row"];
          rows.forEach((a) => {
            let local = a["MSRSTE_NM"];
            let figure = a["IDEX_MVL"];
            let degree = a["IDEX_NM"];
            $("#q1").append(
              `<p>${local}의 미세먼지 농도는 ${figure}로 ${degree}입니다.</p>`
            );
          });
        });

-서울시 OpenAPI(실시간 미세먼지 상태)로 모든 구의 미세먼지를 표기하기 => 업데이트 버튼을 누를 때마다 지웠다 새로 씌우기

function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulair")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["RealtimeCityAir"]["row"];
            $("#names-q1").empty(); // 돌기 전에 비워주기

            rows.forEach((a) => {
              let gu_name = a["MSRSTE_NM"];
              let gu_mise = a["IDEX_MVL"];

              let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
              $("#names-q1").append(temp_html);
            });
          });
      }

10 Fetch 연습하기2

- 미세먼지가 40 이상일 경우, 빨간색으로 보여주기

function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulair")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["RealtimeCityAir"]["row"];
            $("#names-q1").empty(); // 돌기 전에 비워주기

            rows.forEach((a) => {
              let gu_name = a["MSRSTE_NM"];
              let gu_mise = a["IDEX_MVL"];

              let temp_html = ``;
              if (gu_mise > 40) {
                temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
              } else {
                temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
              }

              $("#names-q1").append(temp_html);
            });
          });
      }

12 Fetch 퀴즈

1) 서울시 따릉이 현황 OpenAPI 이용하여 표 만들기

function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulbike")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["getStationList"]["row"];
            $("#names-q1").empty();

            rows.forEach((a) => {
              let stationName = a["stationName"];
              let rack = a["rackTotCnt"];
              let bike = a["parkingBikeTotCnt"];

              let temp_html = `<tr>
                                    <td>${stationName}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                </tr>`;

              $("#names-q1").append(temp_html);
            });
          });
      }

2) 5대 이하인 곳은 빨간색으로 표시해주기

function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulbike")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["getStationList"]["row"];
            $("#names-q1").empty();

            rows.forEach((a) => {
              let stationName = a["stationName"];
              let rack = a["rackTotCnt"];
              let bike = a["parkingBikeTotCnt"];

              let temp_html = ``;

              if (bike < 5) {
                temp_html = ` <tr class="under5">
                                    <td>${stationName}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                </tr>`;
              } else {
                temp_html = `<tr>
                                    <td>${stationName}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                </tr>`;
              }

              $("#names-q1").append(temp_html);
            });
          });
      }

2주차 과제 : 실시간 서울 날씨 API 적용하기

- 자동 로딩 함수 & 날씨 API

// 자동 로딩 함수
      $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            console.log(data);
          });
      });

- 아래에 현재 서울의 실시간 날씨 가져와서 나타내기

<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>

- 완성

$(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            let temp = data["temp"];
            let temp_html = `${temp}`;
            $("#temp").append(temp_html); // 현재날씨
          });
      });
      
<div>현재 서울의 날씨 : <span id="temp">현재날씨</span>도</div>

- 정답 : .text를 사용하면 굳이 temp_html과 .append를 사용하지 않아도 된다..

$(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            let temp = data["temp"];
            $("#temp").text(temp);
          });
      });

+ 여러가지 OpenAPIs 사용해보기

✅ 느낀점

2일차도 목표로 한 2주차는 완강할 수 있었다!🙌

특히 Fetch와 JQuery 사용법에 대해 가볍게 공부해 볼 수 있어 좋았다.

여러가지 OpenAPIs들을 찾아보고 사용해 보면서 제공되는 정보들로 간단한 토이프로젝트를 만들 수 있을 것 같다.

완강 후 반드시 토이프로젝트에 도전해 봐야겠다는 용기가 생겼다!

✖️보완할 점, 아쉬운 점

더 공부하고 싶은 부분 :

- [ ] 대괄호를 통한 객체 접근방법과 .로 접근방법의 차이 공부하기

- JQuery 사용법 더 공부해보기

- URL, URI 의 차이점과 구조 분석해 보기

- Fetch에서 GET, POST 등 여러가지 요청들에 대해 공부해 보기

- Fetch와 axios 라이브러리의 차이, 왜 axios를 사용하는지 비교해보기

- Postman 사용법 숙지하기

전반적으로 간단하고 쉽게 접근할 수 있어 굉장히 흥미있었지만, 깊게 공부하기 위해서는 따로 반드시 더 공부해야 할 필요가 있다. 여러가지 OpenAPI들이 많다는 것을 진작 알았다면 몇 가지 사용하여 공부해 보았을텐데 지금 알았다는 사실을 반성하게 되었다.

특히 과제를 해결하면서, 간단한 과제임에도 더 간단하고 다른 접근방법이 있음에도 이를 간과하고 배운대로만 코딩하는 나를 보며 너무 생각이 갇혀있는 것이 아닌가 하는 생각도 들었다.. 앞으로는 한 번 더 생각해보자.

자바스크립트 객체에 관련된 개념도 다시 한번 정확하게 숙지해야 할 필요성을 느꼈다. 이번 2주차에서는 더 공부해야 할 것들이 넘치는 것 같다. 차근차근 하나씩 더 공부해 나가기로 하자!🙌

저작자표시 비영리

'항해99 > 사전 스터디' 카테고리의 다른 글

[항해99] 사전스터디 - 5주차 강의회고록 (0)	2023.02.15
[항해99] 사전스터디 - 4주차 강의회고록 (0)	2023.02.15
[항해99] 사전스터디 - 3주차 강의회고록 (0)	2023.02.13
[항해99] 사전스터디 - 1주차 강의회고록 (0)	2023.02.11

Junvely 개발일기

[항해99] 사전스터디 - 2주차 강의회고록

🦄 사전 스터디 2주차 강의회고록

✨02/12 : 목표 : 사전스터디 2주차 완강

📒강의 노트 정리

✅ 느낀점

✖️보완할 점, 아쉬운 점

'항해99 > 사전 스터디' 카테고리의 다른 글

티스토리툴바

[항해99] 사전스터디 - 2주차 강의회고록

🦄 사전 스터디 2주차 강의회고록

✨02/12 : 목표 : 사전스터디 2주차 완강

📒강의 노트 정리

✅ 느낀점

✖️보완할 점, 아쉬운 점

'항해99 > 사전 스터디' 카테고리의 다른 글

관련글

티스토리툴바