공부기록/[강의노트] Udemy React 완벽가이드 101~200 (36) 썸네일형 리스트형 # 199 [udemy React 완벽 가이드 노트] custom-hooks의 구체적인 예시 import React, { useEffect, useState } from "react"; import Tasks from "./components/Tasks/Tasks"; import NewTask from "./components/NewTask/NewTask"; function App() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [tasks, setTasks] = useState([]); const fetchTasks = async taskText => { setIsLoading(true); setError(null); try { const response = .. # 195 [udemy React 완벽 가이드 노트] Custom Hooks 만들기 Custom Hooks란? 정규 함수인데 stateful logic이다. (안에 state를 설정할 수 있는 로직을 포함한 함수) 커스텀 훅을 만들면 재사용 가능한 함수에 state를 설정하는 로직을 아웃소싱할 수 있다. 커스텀 훅은 다른 커스텀 훅을 포함한 리액트 훅을 사용할 수 있다. 커스텀 훅을 통해 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱 할 수 있으며 이를 통해 다양한 컴포넌트에서 호출 가능하다. 즉, 로직 재사용이 가능한 매커니즘이다. 커스텀 훅에서는 리액트 훅과 다른 훅도 사용가능하다. Custom Hooks 필요한 이유 상호간에 연관된 작업을 수행하는 서로다른 컴포넌트들이 있는경우 지금의 경우에는 BackwardCounter와 ForwardCounter간에 비슷한 부.. # 190 [udemy React 완벽 가이드 노트] POST 요청 (firebase) 더미 API를 제공하는 사이트 Firebase firebase는 구글이 제공하는데 코드 작성없이 사용가능한 데이터베이스가 아닌 백엔드 요청을 주고받을 수 있는 완전한 REST API를 제공하는 풀 백엔드 어플리케이션이다. 데이터를 가져오고 저장할 수 있다. 이 URL은 firebase REST API에 대한 URL이며 API는 들어오는 요청을 받고 백그라운드 데이터 베이스와 통신한다. 우리가 보기에 직접 데이터베이스와 소통하는것 같지만 실제로는 그렇지 않다. 이 URL을 통해 Firebase 로 데이터를 보낼 수 있다. App.js파일 const fetchMoviesHandler = useCallback(async () => { setIsLoading(true); setError(null); try { .. # 189 [udemy React 완벽 가이드 노트] 컴포넌트 로딩되자마자 데이터 가져오기 : useEffect를 사용하여 HTTP요청 전송은 컴포넌트의 state를 바꿔버리기 때문에 useEffect안에 넣어줘야 한다. (안그러면 계속 state가 변경되어 무한 반복이 된다) function App() { const [movies, setMovies] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { fetchMoviesHandler(); }, []); dependencies에는 무엇을 넣을 것인가? fetchMoviesHandler라는 함수 자체를 넣는다면 함수 자체가 변경될 때마다 렌더링이 발생될 것이고 외부state를 변경하면 이 함수가 변경되.. # 188 [udemy React 완벽 가이드 노트] http오류 처리하기 http요청을 할 때 오류가 발생할 수 있다. 기술적 오류 예를들어 네트워크 연결이 없다든지 http요청을 하였는데 error 응답을 받은 경우가 그렇다. 이 오류는 404, 500, 401등과 같은 오류다. 오류 종류에 대해서는 나중에 살펴보기로 하자. 대략적으로 403, 401 등은 요청이 성공적으로 전송되었고 기술적 문제가 없었는데 서버가 원하는 요청을 주지 않았음을 의미한다. 기술적으로 성공적으로 응답받았으나 응답에 오류 코드가 포함되어있어 오류 문자를 받은 것이다. 500번대는 서버에러가 발생한 경우다. 만약 api의 URL을 조금 다르게 변경한 경우 404 에러가 발생하게 된다. 이 때는 그냥 Loading 문구에서 넘어가지 않고 계속 멈춰있게 되는데 에러 문구를 띄워 문제가 발생되었음을 사용.. # 184 [udemy React 완벽 가이드 노트] SWAPI (The Star Wars API) axios, fetch API, async await 더미 API를 제공하는 사이트 전송요청을 해서 실습 해볼 수 있다. 데이터베이스가 아니고 백엔드 앱이다. 이 것의 백그라운드에서는 아마도 스타워즈 데이터를 저장하기 위해 데이터베이스를 사용할 것이다. API : 어플리케이션 프로그래밍 인터페이스 리액트, HTTP요청 뿐만 아니라 코드를 통해 명확하게 정의된 인터페이스를 다루며, 어떤 결과를 얻기 위한, 작업에 대한 규칙이 명확하게 정의를 다룬다. HTTP요청에 대한 API를 말할 때는 보통 REST, Graph QL API를 말한다. 이 두 개는 서버가 데이터를 노출하는 방식에 대한 서로 다른 표준이다. SWAPI는 REST이며 URL같은 곳에 요청을 하게 되면 특정한 형식에 맞춰 데이터를 전달해 준다. 서로 다른 URL에 다른 요청을 보내면 그에 맞는 .. # 182 [udemy React 완벽 가이드 노트] 리액트가 데이터베이스와 소통하는 방법 리액트 앱이나 일반적인 브라우저 앱에서 실행되는 자바스크립트 코드는 데이터베이스와 직접 통신하면 안된다. 왜? 기술로는 어려울 수 있겠지만 클라이언트 내부에서 데이터베이스에 직접 연결을 하거나 브라우저의 자바스크립트 코드를 통해 직접 연결을 하면 그 코드로 데이터베이스의 인증정보를 노출하게 된다. 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저 뿐만 아니라 웹사이트 사용자도 개발자도구를 통해 접근하고 읽을 수 있다. 데이터베이스 접근을 허가하는 인증 정보등이 노출될 수 있다. 그 외에 성능문제도 발생될 수 있는데 가장 큰 이슈는 보안이다. 직접이 아닌 다른 방식을 사용해야 한다. 예를 들어 백엔드 어플리케이션이다. ( NodeJS App, PHP App, ...) 브라우저가 아닌 다른 서버에서 실.. # 179 [udemy React 완벽 가이드 노트] 클래스 기반 컴포넌트를 써야할 때 : Error Boundaries (try-catch 문) Error Boundaries 어떤 오류는 예방할 수 없으며 어떤 오류는 어플리케이션의 어떤 부분에서 다른 부분으로 무언가가 잘못됐다고 전달할 때 사용되기도 한다. 예를 들어 HTTP요청을 보냈는데 서버가 일시적으로 응답이 없을 경우, 그 요청에 대해 응답할 수 없고 어플리케이션에서 오류가 발생하게 될 것이다. componentDidUpdate() { if (this.props.users.length === 0) { throw new Error("No users provided!"); } } throw new Error코드는 콜스택에서 오류를 발생시키는 코드다. 오류 처리가 되지 않으면 전체 애플리케이션이 강제 중단 되어 버린다. try-catch 문 일반적인 자바스크립트 문에서는 try-catch 문을.. 이전 1 2 3 4 5 다음 목록 더보기
