노마드코더 강의 7일차.

심심해서 만들어보는 React JS 강의 수강 2번째

 1. ReactJS로 영화 웹 서비스 만들기 (완료)

 2. 실전형 리액트 Hooks 10개

     > 작업은 Code SandBox에서 진행! (온라인에서 코딩할 수 있는 템플릿 제공)

        - https://codesandbox.io/

     > useState

        - useInput

        - useTabs

     > useEffect

        - useTitle

        -  usePageLeave

        -  useClick

        -  useFadeIn

        -  useFullscreen

        -  useHover

        -  useNetwork

        -  useNotification

        -  useScroll

        -  usePreventLeave

        -  useConfirm

        -  useAxios

     > 강의 제목은 hook 10개인데 10개 이상을 배우네(?)

     > 공식 사이트 : https://react.dev/reference/react/hooks

시작에 앞서... 리액트 훅이란?
- 리액트 훅(React Hook)은 리액트 버전 16.8에 도입된 개념으로, 함수형 컴포넌트에서 상태 관리를 할 수 있도록 해주는 함수입니다. 
- 리액트 훅은 리액트 클래스형 컴포넌트에서 사용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 해줍니다. 
- 리액트 훅은 함수 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수입니다. 
- 리액트 훅은 기본적으로 UI의 상태 관련 동작 및 부수 작용(side effects)을 캡슐화하는 가장 간단한 방법입니다. 
- 리액트 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. 

온라인 환경 세팅 후 실제 hook 개발 진행!

노마드코더 강의 6일차.

심심해서 만들어보는 React JS 강의 수강

 - ReactJS로 영화 웹 서비스 만들기

  1. 준비물

     > react app 설치 (React JS, React-Dom, Babel)

     > propTypes : npm i prop-types 

2. Movie App 확장

 - 기존 버전에 css 추가

 - Detail 레이아웃은 여전히 개발하지 않았음. (추후 강의 전부 수강 후 진행 예정)

 - https://github.com/walterpark5193/react-for-beginners/tree/main

 * Breaking Change : 버전을 업데이트하면서 코드가 깨져서 코드를 수정해야 하는 Case

 - React.js는 기존 소스코드에 신규 기능을 추가하는 방식이기에 Breaking Change가 없다.

 - 즉, 옛날 코드도 여전히 동작한다는 의미

노마드코더 강의 5일차.

심심해서 만들어보는 React JS 강의 수강

 - ReactJS로 영화 웹 서비스 만들기

  1. 준비물

     > react app 설치 (React JS, React-Dom, Babel)

     > propTypes : npm i prop-types 

git production 배포 설정
1. npm i gh-pages (결과물을 github pages에 업로드 할 수 있게 해주는 패키지)
2. npm run build (production을 위해 compressed 코드 생성
3. package.json 설정 추가 (deploy시 build 후 gh-pages -d build 하도록 설정)
   "deploy": "gh-pages -d build",    "predeploy": "npm run build"
   - build 폴더를 미리 설정한 git remote 에 배포한다는 의미
4. npm run deploy 시 npm run build -> gh-pages -d build 순으로 처리됨
5. package.json에 설정한 homepage 경로에서 배포소스확인
 - "homepage" : https://walterpark5193.github.io/react-for-beginners/
* git 이 없는 경우 https://git-scm.com/download 에서 git을 설치해야한다.
** vscode와 git을 연결하는 방법은 브라우저에 github 로그인해두고 터미널에서 git 실행 시 자동으로 브라우저와 연동되어 로그인된다.
*** 그 뒤 vscode에서 remote를 연결하면 된다. (이 때 remote는 github에서 미리 repository를 생성해두어야 연결 가능)

2. Movie App publishing 결과

 - https://walterpark5193.github.io/react-for-beginners/