성연커밋 : )

리액트는 사용자에게 제공할 때 빌드 작업을 무조건 거쳐서 배포해야한다. 빌드를 통해 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지, 공백 등을 제거하여 파일 크기를 최소화 및 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 할 수 있음. CRA프로젝트를 빌드할 경우 최소 두 개 이상의 js파일이 생성 yarn build 코드를 통해 build를 하면, build/static디렉터리에서 '3.20e936d7' 와 같은 해시 값이 포함되어 있다. 2로 시작하는 파일에는 React, ReactDOM 등 node_modules에서 불러온 라이브러리 관련 코드 main으로 시작하는 파일에는 직접 프로젝트에 작성하는 App같은 컴포..

비동기 작업을 처리할 때 redux-thunk는 일반함수로 이루어져있어 간단명료하다. redux-saga는 진입 장벽이 조금 있으나, 복잡한 상황에서 더욱 효율적으로 작업을 관리할 수 있다는 장점 redux-promise-middleware, reudx-pender, redux-observable 등도 사용 가능 미들웨어를 사용하지 않고 그냥 컴포넌트단에서 api를 요청하는 것도 틀린 방법은 아니다. 비동기 작업을 처리할 때 리덕스 미들웨어를 사용하는 이유? - 조금 더 편하게 처리하기 위해서! 불편하다면 사용 권유 x

컴파일 에러가 떳다. 에러 설명은 다음과 같다. Relative imports outside of src/ are not supported. src 폴더 밖의 경로는 찾을 수 없다고... 현재 src폴더 내의 components폴더 안에 js파일들을 만들어주었더니 해결이 되었다. 그전에는 src폴더 밖에 components디렉토리가 있었던것.. 바로 아래사진처럼 말이다.... 유의할것... 난 바보였다... 이걸로 한시간가까이 헤맸어 ...

리덕스 프로젝트를 사용할 때 지켜야 할 규칙 1. 단일 스토어 - 하나의 프로젝트 안에는 하나의 스토어가 들어 있음. 2. 읽기 전용 상태 - 리덕스 상태는 읽기 전용이다. - 리액트에서 setState를 사용하여 state를 업데이트 할때 업데이트 하는 과정에서 불변성으 지켜주기 위해 spread, immer 라이브러리를 사용한것과 마찬가지! 리덕스에서 불변성을 유지해야 하는 이유? - 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문.(겉핡기식) 3. 리듀서는 순수한 함수 - 변화를 일으키는 리듀서 함수는 순수한 함수여야한다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다 파라미터 외의 값에는 의존x 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체..

리덕스는 가장 많이 사용하고 있는 리액트 상태 관리 라이브러리. 리덕스를 사용하면 컴포넌트의 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음. 리덕스 라이브러리는 전역상태를 관리할 때 효과적! context API를 통해서도 같은 작업이 가능하나, Context API가 생기기전에는 리덕스를 사용해 전역 상태를 관리함. 액션 - 상태에 어떠한 변화가 필요하면 액션이 발생 - 하나의 객체로 표현 - type필드를 반드시 가지고 있어야 하며, 액션의 이름이라고 생각하면 된다. { type:'ADD_TODO', data:{ id:1, text:'리덕스 배우기; } } 액션생성함수 - 액션 생성 함수는 액션 객체를 만들어 주는 함수 function addTodo(data) { ret..

색상 선택을 하기 위해 이때까지 Context에 있는 값을 사용할 때, Consumer을 이용하였다. 리액트에 내장되어 있는 Hooks중에서 useContext라는 Hook을 사용하여, 함수형 컴포넌트에서 Context를 편하게 사용할 수 있다. 원래 ColorConsumer를 사용한 코드 import React from "react"; import { ColorConsumer } from "../contexts/color"; const ColorBox = () => { return ( {({state}) => ( )} ); }; export default ColorBox; useContext를 사용한 코드 import React, { useContext } from "react"; import Colo..

SelectColor.js import React from "react"; import { ColorConsumer } from "../contexts/color"; const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; const SelectColors = () => { return ( 색상을 선택하세요. {({ actions }) => ( {colors.map((color) => ( actions.setColor(color)} onContextMenu={(e) => { e.preventDefault(); actions.setSubcolor(color); }} /> ))} )} ); }; export default..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리액트 관련 라이브러리에서도 많이 사용되고 있으며, 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context AP를 기반으로 구현되어 있음. 리액트는 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리 여기서 state와 props를 다시 정리하자면! state는 함수 내에 선언된 변수처럼, 컴포넌트 내부에서 바뀔 수 있음! state를 바꿀 땐? setState함수를 사용하여 값을 바꾼다! props는 상위컴포넌트 데이터를 하위컴포넌트가 사용할 때 쓰인다! 읽기만 가능!! ..

Context API를 공부하기 위해 새로 리액트 앱을 만들었으나, 아래와 같은 에러가 떳다. 나는 프로젝트 이름을 context_API 라고 했을 때 에러가 떳다. 이 에러는 npm, yarn 사용하는 명령어의 일부가 담겨있거나, 프로젝트명에 대소문자 또는 특수기호를 입력하지 말라는 말이라고 한다. API가 대문자여서 그런가보다.. context_api 로 하니까 잘 만들어졌는데.. .. 내 프로젝트 중에선 REACT_APP 이라는 프로젝트가 있는데.. 이것은 의문이다..

axios를 이용하여 news api를 가져와 뉴스를 보였고, styled-component를 이용하여 보기 좋게 뉴스 뷰어를 만들었다. 위에 카테고리별로 분류를 해주면 더 좋을 것 같다. 최종 결과물은 다음과 같다. 나도 css잘하고싶다.......... css공부나 더 해야겠따. pages/NewsPage.js import React from "react"; import Categories from "../components/Categories"; import NewsList from "../components/NewsList"; const NewsPage=({match}) =>{ const category=match.params.category || 'all'; return( ) } export d..