늘 겸손하게

목차 문제 상황 문제 원인 해결책 - dependencies 배열 (의존성 배열) dependencies 배열 특징에 따른 결과 문제 상황 useEffect 메서드의 첫 번째 인자로 컴포넌트가 렌더링 된 이후에 실행할 코드를 넘겨주었습니다. api를 통해 데이터를 가져오는 코드였는데 데이터를 성공적으로 가져오면 dataRead state를 true로 변경하여 loading 화면에서 실제 앱 화면으로 변환되도록 구현했습니다. 하지만 불필요하게 api 호출을 두 번하는 문제가 발생했습니다. useEffect(() => { async function fetch_data() { console.log("fetch_data") console.log("dataRead : ", dataRead) const api_ke..

github-pages를 통해 배포까지 완료했으나 매번 새로운 코드를 push하고, deploy 하는 과정은 낭비이므로 배포 자동화를 프로젝트에 적용해보자. yml 파일 작성 actions가 어떤 방식으로 이루어질지를 결정하는 yml 파일을 우선 작성해야 한다. root/.github/workflows/ 하위에 gh-pages.yml 파일을 생성하자. 내용은 아래와 같이 작성한다. name: Build and Deploy on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v2.1.2 with: node..

목차 컴포넌트 기반 아키텍처 React Component 모듈화 마무리 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처는 큰 애플리케이션을 작은 재사용 가능한 조각으로 나누어 개발 및 유지 보수를 용이하게 만든다. React는 JavaScript UI 라이브러리로 UI를 구축하기 위해 컴포넌트 기반 아키텍처를 제공한다. 여기서 이야기 하는 컴포넌트 기반 아키텍처를 더 자세히 알아보자. 컴포넌트 기반 아키텍처를 알려면 먼저 컴포넌트가 무엇인지 알아야 한다. React Component React의 기본 구성 요소로 UI의 일부분을 정의하며, JavaScript 함수 또는 클래스로 작성된다. 컴포넌트는 props(속성) 및 state(상태)를 사용하여 동작을 정의하고 데이터를 표시한다. 각 컴포넌트는 독립적으..

목차 React에 Redux 설치 1. 프로젝트에 Redux Toolkit과 React Redux를 설치 2. React Store 생성 3. React에 Redux Store를 제공 4. Redux State Slice 생성 5. Store에 slice reducer 담기 6. React 컴포넌트 내부에서 Redux State, Action 사용하기 마무리 React에 Redux 설치 React를 활용한 토이 프로젝트를 개발하다 Redux를 설치할 일이 생겼다. Redux를 설치하고 초기 설정을 해보자. 출처 : https://react-redux.js.org/tutorials/quick-start Quick Start | React Redux react-redux.js.org 1. 프로젝트에 Redu..