Amada Coding Club

일단 진짜 필요한 부분만 쓰고 나중에 풀어서 쓴다. suspense는 요약하자면 비동기 처리를 하는 컴포넌트에서 그 비동기 처리가 끝나기 전까지 보여주는 컴포넌트를 더 편리하게 관리하기 위해 리액트에서 제공하는 기능이다. 나는 이걸 연습하려고 할 때 자꾸 작동을 하지 않아서 왜 안되는가 했는데 suspense를 지원하는 라이브러리를 사용해야만 사용이 가능하다 Relay: graphQL을 기반으로 데이터를 다루는 라이브러리 SWR: 서버 데이터를 다루는 라이브러리 React-Query: 서버 데이터를 다루는 라이브러리 Recoil: 전역 상태 관리 라이브러리 이 네 가지 라이브러리가 대표적인 라이브러리이다(이거 말고도 더 있을 수도 있다) 이 라이브러리에서 사용 가능한 이유는 Suspense가 Promis..

[Promise] Promise API에 대해 알아보자 [비동기] 비동기 함수에 대해 알아보자 최근에 Async와 await함수를 다루다가 Promise는 무엇이고 비동기 함수, 그리고 callback은 무엇인지 궁금해졌다. 이를 정리해보려고 한다. 프론트엔드에서도 데 amadaclub.tistory.com 지난 시간에는 Promise API에 대해 알아봤다. 기존 비동기 함수를 사용할 때 처리하는 함수로 콜백 함수를 썼지만 콜백안에 또다른 비동기가 들어가는 경우 그리고 안에 다른 콜백이 들어가는 경우 콜백 지옥이 일어날 수 있다고 했다. 이 콜백 지옥을 풀어주는? 해결해주는? 기능이 Promise API이고 Promise를 좀 더 쉽게 사용할 수 있게 돕는 기능이 오늘 다룰 Async와 Await이다...

[비동기] 비동기 함수에 대해 알아보자 최근에 Async와 await함수를 다루다가 Promise는 무엇이고 비동기 함수, 그리고 callback은 무엇인지 궁금해졌다. 이를 정리해보려고 한다. 프론트엔드에서도 데이터 처리는 많이 일어나기 때문에 비동 amadaclub.tistory.com 지난 게시글에서 비동기 함수에 대해서 알아보았다. 어떠한 비동기 함수가 종료되고 나서 처리되는 함수로 콜백함수를 사용한다고 했다. 그러나 콜백함수는 콜백이 연달아 호출되며 가독성을 떨어트리는 콜백 지옥을 일으킬 수 있다. 이 문제를 해결하기 위해 콜백함수를 분리하는 방법을 사용할 수 있지만 다른 방법으로 Promise(프로미스 or 프라미스)를 사용할 수도 있다. Promise 비동기 처리를 하고자 할 때 Promis..

최근에 Async와 await함수를 다루다가 Promise는 무엇이고 비동기 함수, 그리고 callback은 무엇인지 궁금해졌다. 이를 정리해보려고 한다. 프론트엔드에서도 데이터 처리는 많이 일어나기 때문에 비동기에 대해 명확하게 알아두면 좋을 것 같다. 먼저 비동기 함수에 대해 알아보자. 비동기함수 일반적으로 우리가 짜는 코드는 동기적으로 실행된다. 이때 동기적이란 A가 실행될 때 A가 종료될 때까지 기다렸다가 다음 로직이 실행되는 순차적으로 실행되는 것을 말한다. 비동기는 한마디로 동기적으로 실행되지 않는 것을 말하며 A가 실행되면 A가 종료될 때까지 기다리지 않고 다음 순서의 함수가 실행되는 것을 말한다. 그림으로 나타내면 다음과 같다. 비동기는 왜 필요할까? 외부 API에서 데이터를 가지고 올 때..

2023.01.28 - [Front-End/React] - [React Hook] 리액트 Hook 총정리(5) - useMemo useCallback (React.memo) [React Hook] 리액트 Hook 총정리(5) - useMemo useCallback (React.memo) 2023.01.28 - [Front-End/React] - [React Hook] 리액트 Hook 총정리(4) - Hook 사용 규칙, Hook 제작방법 [React Hook] 리액트 Hook 총정리(4) - Hook 사용 규칙, Hook 제작방법 [React Hook] 리액트 Hook 총정리(3) - useEffect 2023.01. amadaclub.tistory.com 오늘 다룰 내용은 useContext이다. 일단..

강의에서 배포를 한다길래 따라하다가 마지막 배포 과정에서 다음 오류가 발생했다. 이 오류 때문에 머리 좀 쥐어짰다. 찾아보니 CRA로 제작한 리액트 앱을 배포할 때 쓰는 빌드팩이 heroku22에서는 지원이 안된다고 한다. 그래서 nextJS를 통해서 배포하거나 remix.run을 통해 배포하라고 나와있다. 나는 위 두 방법 말고 다른 방법으로 배포를 했다. 먼저 기존에 등록한 빌드팩을 지우고 express 패키지를 설치한다 우선 프로젝트의 최상위에 sripts 폴더를 생성하고 그 안에 heroku.start.js를 추가한다. 그리고 아래 내용을 넣는다 const express = require("express"); const path = require("path"); const app = express..