공부하고 정리하고

React로 만든 예제 파일을 GitHub를 통해 배포하려고 하니 404에러가 발생하였다. 

1. 프로젝트  Private 

build파일이 private으로 설정되어 있으면 접근이 불가능 하니 Public으로 변경해주어야 한다. 

Private으로 설정된 프로젝트를 Public으로 변경하자. 

우측 상단의 settings를 클릭하고 가장 아랫쪽으로 스크롤하면 Danger Zone이 있다. 

여기서 Change visibility를 클릭해 Public 으로 변경하자.

2. GitHub Pages 설정 

GitHub 프로젝트에서 우측 상단에 있는 Settings를 클릭하고  사이드바의 Pages를 클릭하면 GitHub Pages가 나온다. 

여기서 Source는 Deploy from a branch 

Branch는 gh-pages로 설정해주자. 

여기까지 설정 후 

$ npm run deploy로 재배포 해주니 예제 페이지가 잘 배포 되었다. 

다만, 링크 클릭 시 컴포넌트에 대한 접근이 이루어지지 않았다. 

이를 해결하기 위해서는 

3. PUBLIC_URL 추가 

Router에 아래와 같이 basename 요소를 추가

설정 후 재배포를 한다. 

아래 링크와 같이 정상 작동함을 확인할 수 있다. 

https://sungyun-develop.github.io/React_dev/

Do it! 리액트 프로그래밍 정석 책을 보고 공부를 시작하며 지금부터의 내용은 책을 바탕으로 요약 및 정리 그리고 추가한 내용들을 주로 다룰 예정이다. 

리액트는 프런트엔드 프레임워크 중 하나로 여러 프레임워크중에 하나이다. 

주목받는 프런트엔드 프레임워크는 리액트를 포함하여 앵귤러, 뷰제이에스가 있는데 아래 그림처럼 리액트가 꾸준한 사랑을 받고 있음을 알 수 있다. 

https://npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue

리액트는 페이스북에서 개발하고 공개한 오픈소스 소프트웨어이다. 

리액트의 특징은 화면 출력에 특화된 프런트엔드 프레임워크라는 것인데 특징을 나열하면 다음과 같다. 

- 컴포넌트로 화면 구성

→ 컴포넌트는 작고 독립적인 코드 블록이며 이를 조합하여 효율적이며 빠르게 화면을 구성합니다. 

- 게임 엔진 원리 도입

→ 화면 출력 속도가 빠름 

자바스크립트는 제이쿼리와 핸들바 라이브러리를 사용해 화면을 구성하는데 이 라이브러리는 매우 간결하다는 특징이 있지만 화면이 커질수록 화면을 그리는 시간도 길어진다. 그 이유는 화면의 일부만 바뀌어도 화면 전체를 다시 그리기 때문.

특정 노드를 수정하면 관련된 모든 노드를 다시 그려야 하니 코드가 길어질수록 화면을 띄우는 시간은 길어집니다. 이런 문제를 해결하기 위해 게임 엔진 원리를 도입했다고 합니다.

게임엔진 원리는 다음 장면에 필요한 화면을 미리 그려두어 화면을 빠르게 전환하는 방법을 말합니다. 

Virtual DOM

웹 프로그래밍이 전문적인 업무는 아니나 관심이 많아 공부를 시작하려고 한다. 

블로그에 정리하면서 공부를 한다면 꾸준히 할 수 있지 않을까...? 

올해 2023년 12월이 왔을 때 이글이 저멀리 보이지 않기를 기원하며... 

React 공부를 시작하도록 하겠다.