차근차근 배움터

Promise 객체를 다룰 때는 .then() 대신 async, await 키워드를 사용할 수 있다 import React, { useState } from "react"; import MoviesList from "./components/MoviesList"; import "./App.css"; function App() { const [movies, setMovies] = useState([]); async function fetchMoviesHandler() { const response = await fetch("https://swapi.dev/api/films"); const data = await response.json(); const transformMovies = data.results...

리액트 어플리케이션은 결국에는 자바스크립트 어플리케이션이다. 이것이 본질이다. 이 자바스크립트 솔루션을 통해 우리가 원하는 어떤 HTTP 요청이든 전달할 수 있다. 예를 들어서 패키지 중에 axios라는 것이 있다 GitHub를 방문해서 받을 수 있는데 어떤 자바스크립트 라이브러리를 사용하는가에 관계없이 HTTP 요청 전송을 하고 이에 대한 반응을 매우 간단하게 할 수 있는 패키지이다. 심지어 라이브러리 없이도 사용할 수 있지만 최근에는 자바스크립트 내에서 HTTP 요청을 전송하는 내장 메커니즘도 있는데 이를 Fetch API라고 한다. 이 Fetch API는 브라우저 내장형이며 데이터를 불러오고 이름과는 다르게 데이터 전송도 가능하다. 이 API를 통해 HTTP 요청을 전송하고 응답을 처리할 수 있고,..

아래 웹사이트를 이용할 것이다 이건 데이터베이스가 아니라 연습용으로 사용할 백엔드 앱이다 API, 어플리케이션 프로그래밍 인터페이스(Application Programming Interface)이다 이 용어는 매우 넓은 개념인데, 단순히 리액트나 HTTP 요청만 있는 것이 아닙니다 우리는 코드를 통해 명확하게 정의된 인터페이스를 다루며 또 어떤 결과를 얻기 위한, 작업에 대한 규칙이 명확하게 정의된 것을 다루고 있다는 뜻이다 보통 REST, 또는 GraphQL API를 말하게 됩니다 이 두 개는 서버가 데이터를 노출하는 방식에 대한 서로 다른 표준이다 여기 아래쪽의 URL같은 곳에 여러분이 요청을 전송하게 되면 특정한 형식에 맞춰서 데이터를 전달해줍니다 서로 다른 URL에 각각 다른 요청을 보내게 되면 ..

Star Wars API 사용하기 필독: 다음 강의에서는 본 강의 섹션, Star Wars API 에서 사용할 데모 백엔드를 소개해 드릴 겁니다. https://swapi.dev/ 페이지로 접속하시면 됩니다. 페이지 로딩 및 백엔드 접속이 안된다면, 다음 백업 링크로 접속하세요. (https://swapi.py4e.com/)

즉 브라우저에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 절대 안된다 왜냐하면 사용자가 자바스크립트 코드에 항상 접근할 수 있기 때문에 데이터 베이스에 연결하는 인증 정보가 노출되는 것에 대한 보안 문제 때문이다.

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다: https://github.com/academind/react-complete-guide-code/tree/13-class-based-cmp 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

컴포넌트 안에서 오류가 발생하고 이를 처리할 수 없는 상황이라고 가정해보죠 이 users 컴포넌트에서 오류를 해결하지 않고 부모 컴포넌트에서 처리하고 싶다면 try-cache 문은 사용할 수 없습니다 이 문장은 정규 자바스크립트 문장을 사용하는 곳에서만 쓸 수 있기 때문입니다 이럴 때 오류 경계(Error Boundary)라는 것을 사용한다. componentDidCatch() 생명 주기 메소드를 활용하는 컴포넌트입니다 componentDidCatch() 메소드는 어느 클래스 컴포넌트에도 추가할 수 있으며 컴포넌트에 이를 추가하게 되면 클래스 컴포넌트를 오류 경계로 만들게 됩니다 이 ‘오류 경계’란 단어는 이런 생명 주기 메소드를 갖는 컴포넌트를 지칭하는 용어입니다 2개의 함수형 컴포넌트를 편집할 수 없..

무조건 함수형 컴포넌트를 쓸 필요는 없다는 겁니다 클래스 형식이 좋다면 그걸 써도 돼요 하지만 함수형 컴포넌트의 장점이 충분히 있기 때문에, 클래스 컴포넌트는 무시하셔도 괜찮습니다. 단 하나의 예외가 있는데, 이는 나중에 설명드리겠습니다 어떤 방법을 써야 할지 잘 모르겠다면 그러니까 함수형, 또는 클래스 컴포넌트 중에 무엇을 써야 할지 결정할 수 없다면 지금 보시는 의사 결정 트리를 확인해보시기 바랍니다