DJ pupm this party

내가 처음 REST API에 대해서 알게된건 지난 여름에 DRF프레임워크를 사용할 때였다. 

그때 REST API라는 것에 대한 명확한 정의를 알지 못했었는데 오늘 한번 주제로 다루어 보면서 공부해보면 좋을 거 같다는 생각을 한다. 

REST API란?

REST API는 Representational State Transfer의 약자로, 웹 기반 애플리케이션 간 상호작용을 돕는 설계 방식입니다. API(Application Programming Interface)를 통해 클라이언트와 서버 간의 데이터를 주고받을 때 RESTful 원칙을 따릅니다.

주요 특징으로는 다음과 같습니다.

• 리소스 기반: 모든 데이터(사용자, 게시글 등)를 리소스로 간주.
• HTTP 메서드 사용: CRUD 동작을 HTTP 메서드로 표현.
  • GET: 리소스 조회
  • POST: 리소스 생성
  • PUT/PATCH: 리소스 수정
  • DELETE: 리소스 삭제
• URI 설계: 리소스 경로는 직관적이고 의미 있게 작성.
  • 예: /users/123 (ID가 123인 사용자 정보)

REST의 6가지 설계 원칙

RESTful API를 설계할 때 따라야 하는 6가지 원칙도 중요합니다.

1. Uniform Interface: 일관된 인터페이스 설계.
   • 각 엔드포인트가 동일한 방식으로 작동해야 함.
2. Stateless: 상태 비유지.
   • 서버는 클라이언트 상태를 저장하지 않으며, 모든 요청은 독립적.
3. Cacheable: 응답은 캐시 가능.
   • 클라이언트는 서버의 응답을 캐싱하여 성능 최적화.
4. Client-Server Architecture: 클라이언트와 서버는 독립적으로 설계.
5. Layered System: 계층화된 시스템.
   • 중간 서버(로드 밸런서, 프록시 등)를 사용할 수 있음.
6. Code on Demand (Optional): 필요 시 클라이언트에서 코드를 실행.
   • 예: 자바스크립트 파일 제공.

REST API의 작동 방식

예시: 블로그 포스트 API

• Base URL: https://api.myblog.com
• 엔드포인트:
  • GET /posts → 모든 포스트 조회
  • GET /posts/1 → 특정 포스트(ID: 1) 조회
  • POST /posts → 새 포스트 생성
  • PUT /posts/1 → 특정 포스트 수정
  • DELETE /posts/1 → 특정 포스트 삭제

HTTP 요청과 응답

요청 예시 (POST /posts):

POST /posts HTTP/1.1
Host: api.myblog.com
Content-Type: application/json

{
  "title": "REST API란 무엇인가?",
  "content": "REST API에 대해 알아봅시다!"
}

응답 예시:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 101,
  "title": "REST API란 무엇인가?",
  "content": "REST API에 대해 알아봅시다!",
  "created_at": "2024-12-11T08:30:00Z"
}

REST API의 장단점

장점:

• 직관적이고 간단함: HTTP 메서드와 URI를 사용하므로 쉽게 이해 가능.
• 확장성: 클라이언트와 서버가 독립적이라 확장에 유리.
• 플랫폼 독립성: JSON, XML 등 다양한 포맷 지원.

단점:

• 엄격하지 않은 표준: RESTful API 구현 방식이 개발자마다 달라질 수 있음.
• 복잡한 요청 시 처리 부담: 상태 비유지 원칙으로 인해 요청마다 필요한 데이터를 모두 포함해야 함.

REST와 RESTful의 차이

• REST는 아키텍처 스타일이고, RESTful은 REST 원칙을 준수한 시스템을 의미합니다.
• 모든 REST API가 RESTful한 것은 아닙니다. URI 설계나 상태 비유지 원칙 등을 어길 수 있기 때문이죠.

REST API 설계 시 주의할 점

1. 명확하고 직관적인 URI:
   • 좋음: /users/123/posts
   • 나쁨: /getUserPosts?id=123
2. 적절한 HTTP 상태 코드 사용:
   • 200: 성공
   • 201: 리소스 생성
   • 404: 리소스 없음
   • 500: 서버 오류
3. 에러 처리:
   • 명확하고 일관된 에러 메시지 제공.
   • 예: { "error": "Post not found" }

실제 프로젝트에서 REST API 사용하기

• Postman이나 cURL로 테스트하기: API를 직접 호출해보고 응답 확인.
• Swagger와 같은 문서화 도구 사용: 개발자 간 협업을 위한 문서화.
• JWT와 함께 보안 강화: 인증 및 권한 부여에 토큰 기반 접근 제어 사용.

React에서 컴포넌트를 만드는 방식은 함수형 컴포넌트와 클래스형 컴포넌트 두 가지로 나눌 수 있습니다. 최근 React에서는 함수형 컴포넌트와 Hooks를 주로 사용하지만, 클래스형 컴포넌트 역시 여전히 많은 프로젝트에서 사용됩니다. 이번 블로그 글에서는 함수형 컴포넌트와 클래스형 컴포넌트를 비교하며 각 방식의 차이점, 장단점, 그리고 사용 사례에 대해 살펴보겠습니다.

1. 함수형 컴포넌트란?

함수형 컴포넌트는 간단하게 함수로 정의되며, JSX를 반환하는 구조입니다. 상태를 관리하거나 생명주기 메서드를 사용하기 위해 React의 Hooks를 활용할 수 있습니다. 최신 React 애플리케이션에서는 주로 함수형 컴포넌트가 사용되고 있습니다.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

함수형 컴포넌트의 주요 특징

• 간결함: 함수형 컴포넌트는 코드가 간단하고 선언적입니다.
• Hooks 사용: useState, useEffect 등과 같은 Hooks를 사용해 상태 관리 및 생명주기와 유사한 기능을 처리할 수 있습니다.
• 가벼움: 클래스형 컴포넌트보다 메모리 측면에서 더 효율적입니다.

2. 클래스형 컴포넌트란?

클래스형 컴포넌트는 class 키워드를 사용해 정의되며, state와 생명주기 메서드(componentDidMount, componentDidUpdate 등)를 통해 컴포넌트의 상태와 행동을 관리합니다. 함수형 컴포넌트보다 문법이 복잡하지만, React의 초기부터 사용된 방식입니다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

클래스형 컴포넌트의 주요 특징

• 클래스 사용: ES6 class 문법을 사용하여 정의됩니다.
• 생명주기 메서드: 컴포넌트가 마운트되거나 업데이트될 때 실행되는 생명주기 메서드를 제공합니다.
• this 사용: 클래스 컴포넌트에서는 this 키워드를 사용해 상태나 메서드에 접근해야 합니다.

3. 함수형 컴포넌트와 클래스형 컴포넌트 비교

항목함수형 컴포넌트클래스형 컴포넌트

1) 코드의 간결성

함수형 컴포넌트는 함수로 정의되고 Hooks를 통해 상태나 생명주기 메서드를 쉽게 사용할 수 있어 코드가 더 간결합니다. 클래스형 컴포넌트는 constructor, this 키워드를 사용해야 해서 더 복잡한 구조를 가집니다.

2) 생명주기 관리

클래스형 컴포넌트는 생명주기 메서드를 사용해 컴포넌트의 마운트, 업데이트, 언마운트 등의 시점에 특정 동작을 정의할 수 있습니다. 함수형 컴포넌트에서는 useEffect 훅을 사용해 이와 같은 기능을 구현할 수 있습니다.

클래스형 컴포넌트의 생명주기 메서드 예시

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

  render() {
    return <div>My Component</div>;
  }
}

함수형 컴포넌트에서 useEffect를 이용한 생명주기 관리

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log('Component mounted or updated');
  });

  return <div>My Component</div>;
};

3) Hooks의 등장

Hooks의 도입으로 함수형 컴포넌트가 더욱 강력해졌습니다. 이전에는 클래스형 컴포넌트에서만 상태 관리 및 생명주기 메서드를 사용할 수 있었지만, Hooks 덕분에 함수형 컴포넌트에서도 이를 사용할 수 있게 되어 함수형 컴포넌트가 더 선호되고 있습니다.

4. 결론: 언제 어떤 컴포넌트를 사용해야 할까?

클래스형 컴포넌트는 기존 코드나 레거시 프로젝트에서 많이 사용되며, 아직도 유지보수가 필요할 때 유용할 수 있습니다. 하지만 새롭게 프로젝트를 시작한다면, 함수형 컴포넌트와 Hooks를 사용하는 것이 더 효율적입니다.

• 레거시 코드: 기존에 클래스형 컴포넌트를 많이 사용해온 프로젝트라면 유지보수 차원에서 클래스를 계속 사용해야 할 수도 있습니다.
• 새 프로젝트: 최신 기능을 활용하고 더 간결한 코드를 작성하고 싶다면 함수형 컴포넌트와 Hooks를 사용하는 것이 좋습니다.

React의 방향성은 함수형 컴포넌트에 무게를 두고 발전하고 있으므로, 앞으로는 함수형 컴포넌트가 기본 선택지가 될 것입니다.

리액트에서는 컴포넌트라는 개념이 매우 중요합니다. 컴포넌트에 대해서 확인해보고 이와 더불어 state와 props에 대한 내용도 확인해 봅시다.

React 컴포넌트란?

React에서 컴포넌트는 UI를 구성하는 가장 작은 단위로, 독립적이고 재사용 가능한 코드 조각입니다. 이 컴포넌트는 각자 자신의 상태를 관리할 수 있고, 서로 데이터를 주고받으며 동작합니다. 이 컴포넌트는 다음과 같은 두 가지 형태로 작성할 수 있습니다:

• 함수형 컴포넌트 (Functional Components): 함수 형태로 정의된 컴포넌트.
• 클래스형 컴포넌트 (Class Components): 클래스를 이용해 정의된 컴포넌트. (최근에는 함수형 컴포넌트와 Hooks를 더 많이 사용함)

함수형 컴포넌트의 예시

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

컴포넌트에서 STATE

State는 컴포넌트 내에서 변경 가능한 데이터를 관리하는 데 사용됩니다. 예를 들어, 사용자 입력, 버튼 클릭 등으로 인해 변할 수 있는 값을 다룰 때 useState 훅을 사용합니다. 쉽게 이야기하면 변수와 비슷한 개념이라고 생각하면 쉬울 거 같습니다.

import React, { useState } from 'react';

const Counter = () => {
  // useState로 count 상태 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      {/* 버튼 클릭 시 count 상태 변경 */}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

• useState는 현재 상태(count)와 상태를 업데이트하는 함수(setCount)를 반환합니다.
• 위 예시에서 버튼을 클릭할 때마다 count 값이 1씩 증가하고, 그 값이 화면에 즉시 반영됩니다.

컴포넌트에서 Props

Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. Props는 읽기 전용이므로 자식 컴포넌트에서 이를 직접 변경할 수 없습니다.

// 자식 컴포넌트
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// 부모 컴포넌트
const App = () => {
  return (
    <div>
      {/* Props로 name 값을 자식 컴포넌트에 전달 */}
      <Greeting name="React" />
    </div>
  );
};

export default App;

• Greeting 컴포넌트는 name이라는 props를 받으며, 이를 통해 인사말을 출력합니다.
• 부모 컴포넌트인 App은 Greeting에 name="React"라는 값으로 props를 전달하고, 자식 컴포넌트는 이를 출력할 뿐 수정할 수 없습니다.

State와 Props의 차이점

• State는 컴포넌트 내에서 관리되는 데이터로, 주로 사용자 상호작용을 처리할 때 사용됩니다.
• Props는 부모에서 자식으로 전달되는 읽기 전용 데이터로, 컴포넌트 간 데이터 흐름을 관리하는 데 사용됩니다.

State와 Props를 함께 사용하는 예시

import React, { useState } from 'react';

// 자식 컴포넌트
const DisplayCount = ({ count }) => {
  return <h2>Current Count: {count}</h2>;
};

// 부모 컴포넌트
const CounterApp = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter</h1>
      {/* State를 자식 컴포넌트로 전달 */}
      <DisplayCount count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default CounterApp;

패키지 매니저(Package Manager)

리액트로 개발을 하다보면 npm이라던가 yarn이라던가 하는 것들을 반드시 보게된다. 

얘들은 뭐길래 사용해야하는 걸까? 

이들은 패키지 매니저라고 불리는 것들이다. 말그대로 패키지를 관리하는 도구로서 프로젝트에서 라이브러리, 프레임워크, 모듈 등의 패키지를 관리한다. node.js에서는 흔히 npm과 yarn을 자주 사용한다. 이들은 웹사이트에서 패키지를 다운로드하여 컴퓨터에 설치를 해준다.

간단하게 이야기 하자면 설치된 프로그램을 관리하는 프로그램이다. 

그렇다면 node.js에서 가장 많이 사용되는 npm과 yarn은 어떤 차이를 가지고 있는 걸까?

NPM

npm은 node.js와 함께 2009년에 처음 출시된 패키지를 쉽게 설치하고 관리하기 위해 설계된 패키지 관리자이다.

명령어로는 다음과 같은 것들이 있다.

npm install <package>: 패키지 설치.
npm init: 새로운 프로젝트 초기화.
npm install 또는 npm i: package.json에 명시된 모든 패키지 설치.
npm update: 패키지 업데이트.

기능으로 package.json파일을 사용하여 프로젝트에 필요한 패키지와 그 버전을 관리한다. 기본적으로 중앙화된 npm레지스트리에서 패키지를 설치한다. 또 많은 패키지 관리와 배포에 사용된다. 

Yarn

yarn은 yet another resource negotiator의 약자로 2016년에 facebook이 npm의 성능과 보안 문제를 해결하기 위해 만든 패키지 관리자이다. npm과 호환이되며, 같은 기능을 제공하지만 성능과 안정성을 개선하려는 목적을 가지고 있다. 

명령어는 다음과 같다.

yarn add <package>: 패키지 설치 (npm의 install에 해당).
yarn init: 새로운 프로젝트 초기화.
yarn install: package.json 또는 yarn.lock 파일에 명시된 모든 패키지 설치.
yarn upgrade: 패키지 업데이트.

yarn 은 yarn.lock파일을 통해 설치된 모든 패키지의 정확한 버전을 고정하여 의존성 충돌을 방지하고 병렬설치 및 캐싱을 통해 빠른 속도록 패키지 설치가 가능하다. 오프라인 모드를 지원하고 이미 설치된 패키지를 네트워크 없이도 다시 설치가 가능하다 .

npm과 yarn의 차이점

결론

• npm: 기본적으로 Node.js와 함께 제공되며, 전 세계적으로 가장 많이 사용되는 패키지 관리자이다. 많은 프로젝트에서 안정적으로 사용되고 있으며, 최근 버전에서는 성능과 보안이 많이 개선되었다.
• Yarn: npm의 성능과 보안 문제를 해결하기 위해 만들어진 대안으로, 특히 빠른 설치 속도와 의존성 관리에서 강점을 보인다. 대규모 프로젝트나 팀 협업에서 더 일관된 환경을 제공할 수 있다.

두 도구 모두 JavaScript 프로젝트에서 패키지 관리를 쉽게 해주지만, 프로젝트 규모나 속도에 민감하다면 Yarn을 사용하는 것이 유리할 수 있습니다. 하지만 둘 다 매우 유사하므로, 개인의 선호나 프로젝트 요구 사항에 따라 선택하면 된다.

텍스트를 작성할 수 있는 노트앱을 만들어 볼겁니다.!! 

이 앱은 처음에는 이렇게 아무것도 없는 빈공백에 버튼만 놓여져 있고 이 버튼을 누르게 되면 텍스트를 작성할 수 있는 박스가 생성됩니다.

이 박스에서는 텍스트만 쓸 수 있고 내용을 삭제할 수도 있습니다. 

이렇게 만들어 질 수 있고 다양한 어플들에서 이러한 메모장을 생성해서 어플을 만들었다는 기억이 납니다 .

자, 그럼 이 어플은어떻게 생성되었는지 한번 확인해 보도록 하겠습니다. 

const notesContainer = document.querySelector(".notes-container");
const createBtn = document.querySelector(".btn");
let notes = document.querySelectorAll(".input-box");

- noteContainer는 노트들이 추가될 컨테이너 역할을 합니다. 

- createBtn은 class가 btn인 요소를 참조합니다. 

- notes는 class가 input-box인 <p>요소들을 선택하여 참조합니다. 

function showNotes() {
  notesContainer.innerHTML = localStorage.getItem("notes");
}

showNotes();

 이 함수는 로컬스토리지에서 저장된 노트를 불러와서 notesContainer에 표시하는 함수입니다. 

localStorage.getItem('notes')는 로컬 스토리지에서 'notes'라는 키로 저장된 값을 가져옵니다. 

이 값은 notesContainer의 innerHTML로 설정되어 페이지가 로드될 때 저장된 노트들이 표시되도록 합니다.

showNotes()를 호출하여 페이지가 로드될 때 자동으로 저장된 노트들이 화면에 표시됩니다.

function updateStorage() {
  localStorage.setItem("notes", notesContainer.innerHTML);
}

updateStorate함수는 현재 notesContainer의 내용을 로컬 스토리지에 저장하는 역할을 합니다. localStorage.setIem('notes',notesContainer.innerHTML)는 notesContainer의 현재 innerHTML을 'notes'라는 로컬 스토리지에 저장합니다. 이를 토통해 페이지를 새로고침해도 노트가 유지됩니다. 

createBtn.addEventListener("click", () => {
  let inputBox = document.createElement("p");
  let img = document.createElement("img");
  inputBox.className = "input-box";
  inputBox.setAttribute("contenteditable", "true");
  img.src = "images/delete.png";
  notesContainer.appendChild(inputBox).appendChild(img);
});

이 코드는 createBtn이 클릭되면 새로운 노트를 생성하는 역할을 합니다. 

- inputbox는 새로운 <p>요소를 생성하며 class를 input-box로 설정하고 contentededitable속성을 true로 설정한다. 이 속성은 사용자가 해당 요소를 클릭하여 내용을 편집할 수 있게 해준다. 

- img는 살제버튼으로 사용할 이미지를 생성한다. 이 이미지는 나중에 노트를 삭제할 때 사용된다. 

- 마지막으로 생성된 inputbox와 img를 notesContainer에 추가한다. 이로써 새로운 노트가 화면에 나타나게 된다. 

notesContainer.addEventListener("click", function (e) {
  if (e.target.tagName === "IMG") {
    e.target.parentElement.remove();
    updateStorage();
  } else if (e.target.tagName === "P") {
    notes = document.querySelectorAll(".input-box");
    notes.forEach((nt) => {
      nt.onkeyup = function () {
        updateStorage();
      };
    });
  }
});

 이 코든느 notesContainer내에서 발생하는 클릭 이벤트를 처리한다.

- e.target.tagName==='IMG'는 만약 클릭한 요소가 이미지(IMG)라면 해당 이미지를 포함하는 부모요소를 제거한다. 그런다음 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

- e.target.tagName==='p'는 만약 클릭한 요소가 p태그라면 모든 노트요소를 다시 선택하고 각각의 노트에 대해 keyup이벤트를 등록한다. 이 이벤트는 사용자가 노트의 내용을 수정할 때마다 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.execCommand("insertLineBreak");
    event.preventDefault();
  }
});

이 코드는 사용자가 노트(inputBox) 안에서 Enter 키를 누를 때 발생하는 동작을 정의합니다.

- 기본적으로 Enter 키를 누르면 새로운 노트가 생성되거나 현재 노트의 내용이 변동될 수 있지만, 이 코드는 document.execCommand("insertLineBreak")를 사용하여 대신 줄 바꿈을 삽입합니다

- event.preventDefault()는 기본 동작을 막아, Enter 키를 누를 때 새 노트가 생성되거나 다른 원치 않는 동작이 발생하지 않도록 합니다.

기본적인 기능의 앱들을 만들어 보면서 javascript를 학습하기로 했다. 

그 중에서 첫번째로 날씨앱을 만들어 보았다.

이 앱은 검색창에 영어로 도시이름을 검색하면 해당 도시의 날씨와 기타 정보들을 확인 할 수 있는 앱이다. 

초기화면은 다음과 같이 검색할 수 있는 창과 버튼이 있다. 

해당 화면에서 올바른 이름으로 입력을 하게 되면 해당 도시의 정보를 확인 할 수 있지만 이름이 잘못되면 

"Invalid city name"이라는 문장이 나타나게 된다. 

자 그럼 제대로 작성하여 확인해보자 

Korea에 대한 날씨, 습도, 풍속을 확인 할 수 있다.

그렇다면 이것은 어떻게 구현하였을까? 

이것은 Open Weather Map API를 사용하여 해당 내용을 구현할 수 있었다. 

const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

apiUrl변수는 openweathermap api의 기본 URL을 포함한다. 이 API는 도시이름을 입력 받아서 해당 도시의 날씨정보를 JSON형식으로 변환한다. 또한 units=metric을 통해 온도를 섭씨 단위로 가져오도록 설정하였다. 

async function checkWeather(city) {
  const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

이 checkWeather함수는 비동기 함수로 선언이 되었는데 aysnc 키워드는 해당함수가 비동기 작업이며 await키워드를 사용할 수 있게 한다. city라는 매개변수를 전달하여 이를 url에 연결 할 수 있게 했다. 

fetch함수 호출 

fetch함수는 네트워크 요청을 수행하여 리소스를 가져오는 웹 API이다. 이 프로젝트에서는 openweathermapAPI에 요청을 보내 날씨 정보를 가져왔다. 

URL예시

만약 도시가 seoul이고 api가 yourapikey로 설정되어 있다면 완성된 URL은 다음과 같이 나타난다.

https://api.openweathermap.org/data/2.5/weather?units=metric&q=Seoul&appid=yourApiKey

HTTP요청 및 응답처리 

- fetch(apiUrl + city + &appid=${apiKey})는 이 URL로 GET요청을 보낸다. 

- 이 요청이 처리된 후, 서버는 해당 도시의 날씨 정보를 포함한 JSON데이터로 응답을 보낸다.

await의 사용 

await키워드는 fetch함수가 완료될 때까지 기다린 후, 결과를 response변수에 할당한다. 

이 과정에서 함수의 실행은 일시 중단되지만, 전체 프로그램이 멈추는 것은 아니다. 다른 코드가 계속 실행될 수 있고 response가 준비되면 함수는 다시 실행을 이어나간다. 

Response객체

response변수는 서버로부터 받은 HTTP응답을 나타내는 객체이다. 이 객체에는 응답상태코드, 응답데이터, 헤더 등이 포함된다. 

- 예를 들어 ,response.status는 응답의 http상태로 코드를 변환한다. 

- 이후 코드에서는 response.json()을 사용해 응답 데이터를 JSON으로 변환한다. 

API호출 결과 처리 

if (response.status == 404) {
  document.querySelector(".error").style.display = "block";
  document.querySelector(".weather").style.display = "none";
} else {

API호출이 성공하지 않으면 status==404에러 메세지를 보여준다. 에러가 발생하면 날씨 정보를 숨기고, 에러 메시지를 표시한다. 

호출이 성공하면 날씨 정보를 화면에 표시하고 에러 메시지를 숨긴다. 

날씨 정보 화면에 표시

var data = await response.json();
console.log(data);
document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

response.json()으로 응답 데이터를 JSON형식으로 변환한 후 이를 데이터 변수에 저장한다. 

이를 .city .temp .humidity .wind등의 정보를 HTML요소에 표시한다. 

날씨 아이콘 

if (data.weather[0].main == "Clouds") {
  weatherIcon.src = "images/clouds.png";
} else if (data.weather[0].main == "Clear") {
  weatherIcon.src = "images/clear.png";
} else if (data.weather[0].main == "Rain") {
  weatherIcon.src = "images/rain.png";
} else if (data.weather[0].main == "Drizzle") {
  weatherIcon.src = "images/drizzle.png";
} else if (data.weather[0].main == "Mist") {
  weatherIcon.src = "images/mist.png";
}

조건문을 사용하여 data.weather[0].main값에 따라 날씨 상태를 확인하고 이에 맞는 이미지 파일을 weather Icon에 설정한다. 

이벤트 리스너 추가

searchBtn.addEventListener("click", () => {
  checkWeather(searchBox.value);
});

그리고 사용자가 검색버튼을 클릭하면 checkweather함수가 실행되어 사용자가 입력한 도시의 날씨 정보를 가져온다. 

마지막으로 checkWeather();호출! 

본 내용은 'Do it! HTML + CSS +JS웹 표준의 정석' 책을 참고 하여 작성하였습니다 

웹 개발이란 

웹 브라우저 화면에 보이는 것 뿐만 아니라 웹 사이트에서 사용자에게 제공할 기능과 서비스를 포함하는 내용

서버vs 클라이언트 

클라이언트

- 사용자가 웹 사이트에 접근 할 대 사용하는 기기

- 웹 브라우저(좁은 의미) 

서버

- 인터넷에 연결된 컴퓨터 

- 웹 요소와 여러 정보가 저장됨 

프론트 엔드 vs 백엔드

프론트엔드 

-웹 브라우저 화면에 보이는 부분을 다룸-> 웹 사이트 제작 

-html,css,자바스크립트 등을 사용 

백엔드 

-사용자 뒤에서 보이지 않는 영역, 즉 서버를 다룸 

-데이터 베이스를 설계하거나 데이터를 처리함

-자바, php, 파이썬 등 프로그래밍 언어를 사용 

웹 개발의 기본 

HTML

-웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속 

-HTML에서 약속한 표기법을 사용해서 문서 작성해야 함 

CSS 

-웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법 

-다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 함 

자바스크립트 

-사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술 

-자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉬움