늘 겸손하게

목차 Github pages 생성 방법 마무리 Github pages Github-pages는 정적 사이트 호스팅 서비스로 HTML, CSS, JavaScript 파일을 깃허브 레포지토리에서 바로 가져와 빌드 과정을 거치고 웹 사이트를 배포하는 서비스이다. 개발한 프로젝트를 누구나 접속해서 볼 수 있도록 호스팅 서비스를 제공한다. 생성 방법 1. 레포지토리에 pages 생성 배포하려는 프로젝트 레포지토리 상단 우측에 settings 클릭 settings -> pages 우선 main 브랜치로 설정 후 'save' 클릭 새로고침하면 사이트가 배포된 주소가 나옵니다. 사이트를 배포하였으나 프로젝트와 연동되어 있지 않아 404에러가 뜨거나 Readme 파일이 출력됩니다. 2. 프로젝트와 연동 React 프로젝..

목차 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..

React Hook? React Hook은 React 16.8에 새로 추가된 기능으로 Hook은 class를 작성하지 않아도 함수 컴포넌트 내부에서 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. 함수형 컴포넌트는 React의 state와 생명주기 메소드 사용이 불가능하여 위에서 전달한 데이터를 간단히 출력하는 역할에 그쳤습니다. 하지만 React Hook의 개발로 함수형 컴포넌트 또한 state와 생명주기 메소드 사용이 가능해졌습니다. 대표적인 React Hook useState 함수형 컴포넌트 내에서도 state를 활용할 수 있도록하는 React Hook입니다. useState에 전달되는 인자 1개는 초기 state값이고 useState는 2개의 인자를 반환합니다. function ..

컴포넌트 중에서 실행할 작업(로직)과 출력을 같이 포함하는 컴포넌트가 존재한다. React를 사용하는 중요한 이유 중 하나는 컴포넌트의 높은 재사용성인데 이러한 컴포넌트는 로직과 출력이 한 컴포넌트에 묶여있기 때문에 재사용성이 떨어진다. 그렇기 때문에 데이터에 종속되지 않고 순수하게 출력 역할을 담당하는 프레젠테이셔널(presentational) 컴포넌트와 데이터를 처리하고 사용자와 상호작용을 처리하는 컨테이너(container) 컴포넌트로 나누어 재사용성을 높이는것이 좋다. 이러한 분할과정을 디커플링(decoupling)이라고 한다.