Redux Thunk 리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법 리덕스 미들웨어임 Thunk : 일부 지연된 작업을 수행하는 코드 조각을 의미하는 프로그래밍 용어 1 ) redux-thunk 없이 구현할 경우 thunk 나 promise 같은 미들웨어 없이 구현해도 상관없음 하지만 미들웨어는 중앙 집중식 접근 방식이기 때문에 구성 요소를 더 간단하게 일반화하고 한 곳에서 데이터 흐름을 제어할 수 있음 큰 규모의 애플리케이션에서 리덕스를 사용하기에 더욱 편리해짐 useEffect(() => { fetchPosts(); }, []); async function fetchPosts() { const response = await axios.get("https://..."); dispat..

커링 (Currying) 함수와 함께 사용하는 고급 기술 f(a, b, c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c) 와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것 함수를 호출하는 것이 아니라 함수를 변환하는 것 예시 1) const makeFood = (ingredient1) => { return (ingredient2) => { return (ingredient3) => { return `${ingredient1}, ${ingredient2}, ${ingredient3}`; } } } const hamburger = makeFood("Bread")("Ham")("Tomato"); console.log(hamberger); // Bread, Ham, ..

Redux 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 Redux 데이터 Flow (단방향 데이터 흐름) React Componenet: 이벤트 발생 Action: 리듀서 함수에게 액션을 발생시키라고 명령함 (dipatch) Reducer: 스토어 내부 상태 업데이트 Redux Store: 새롭게 업데이트 된 상태를 이용해 다시 렌더링 React Componenet: 이벤트 발생 ... Action 간단한 자바스크립트 객체 type 속성: 수행하는 작업 유형 지정 payload 속성: redux 저장소에 데이터를 보낼 때 사용 { type: 'LIKE_ARTICLE', articleId: 42 } { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: ..

React Context 리액트에서 데이터 흐름을 컨트롤하는 방법 중 하나 (상태 관리) 컴포넌트 트리의 깊이에 상관 없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공함 전역 데이터를 관리하는 데 사용됨 (전역 상태, 테마, 서비스, 사용자 설정 ...) React.createContext const MyContext = React.createContext(defaultValue); Context 객체를 생성함 생성된 Context 객체는 리액트가 관찰하는 구성 요소를 렌더링 할 때 트리에서 그 위에 가장 근접하게 일치하는 Provider에서 현재 컨텍스트 값을 읽음 defaultValue 인수는 트리에서 구성 요소 위에 일치하는 Provider가 없을 경우에만 사용됨 컨텍스트를 사용하려면 Pr..

Event Bubbling (이벤트 버블링) 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것 (부모 요소들의 핸들러가 호출됨) FORM DIV P 에 할당된 핸들러 --> 에 할당된 핸들러 --> 에 할당된 핸들러 p 태그 클릭 : alert('p'), alert('div'), alert('form') 실행 div 태그 클릭 : alert('div'), alert('form') 실행 form 태그 클릭 : alert('form') 실행 FORM DIV P 부모 요소 핸들러에서는 어디에서 이벤트가 발생했는지 알 수 있음 p 태그 클릭 : target=p, this=form div 태그 클릭 : target=div, this=form form 태그 클릭 : target=form, t..

Firebase 모바일/웹 애플리케이션을 만들기 위해 Google에서 개발한 플랫폼 애플리케이션에 실시간으로 반영 가능 애플리케이션을 만들 때 필요한 부분들을 자동으로 만들어 줌 인증 데이터베이스 스토리지 푸시 알림 배포 ... Node.js + socket io + database 를 각각 사용하지 않고도 Firebase 만으로 백엔드 기능을 만들 수 있음 프로젝트 생성 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 시작하기 버튼 클릭 --> 프로젝트 이름 작성 --> 웹 아이콘 클릭 firebase 모듈 설치 npm insta..