[ReactJS로 영화 웹 서비스 만들기] Create React App

• 이전 연습에서는 react를 import하고 일일히 다 설정해주었지만, npx로 create-react-app 하면 훨씬 개발하기 편함
• 터미널에 npx create-react-app movie-app(생성할 디렉토리 이름)
  • 이미 존재하는 폴더 명과 같게 짓지 않도록 유의
  • npm(node package manager): nodeJS의 모듈들을 패키지화하여 저장하고, 패키지 설치 및 관리 도구
  • npx(node package runner): 일회성으로 원하는 패키지를 npm registry에 접근하여 실행하고 설치하는 도구
    • 패키지 업데이트 시, npm은 기존 패키지 제거하고 새로 설치해야함
• movie-app 디렉토리 터미널에서 npm start하면 노드 서버 실행 (ctrl + c 로 종료)
  • react-app 디렉토리의 package.json 에서 사용가능한 모든 스크립트 확인 가능

  • 

    초기 화면 (localhost:3000)

  • src 디렉토리: 내가 만드는 모든 파일을 넣을 곳
  • create-react-app이 src에 있는 내가 만든 어플리케이션을 public 디렉토리의 index.html에 넣어줌
  • App.js를 수정하고 저장하면 웹페이지에 자동 로드된다
    • WSL2 사용 시 자동 로드가 매우매우 느린 문제 발생 -> linux의 home 디렉토리에 어플리케이션 복사
    • 우분투에서

      sudo cp {movie-app 디렉토리 위치} ~/

      cp(copy), ~/ : linux 홈 디렉토리 위치
      • 또는 어플리케이션의 상위 위치로 이동해서 sudo cp movie-app ~/
    • VSC에서 movie-app 실행 후 서버를 켜보니 react-scripts 관련 문제 발생

      npm install -g create-react-app
      npm install --save react react-dom
      
      npm i react-scripts​

    • WSL2에서는 mnt에서 작업하면 매우 느리다고 함
    • ※ 참고

      explorer.exe .​

       우분투 터미널에서 현재 작업중인 디렉토리 열기
  • css나 testing 파일은 사용 안하므로 삭제

  • 

    App.js에서 Button import 하고 사용 안했을 때 나오는 warning

  •  
  • 요소마다 파일을 분리하며 코딩, 요소별로 스타일링 가능 (랜덤 클래스명 부여)

  • 

  • // App.js
    import Button from "./Button";
    import styles from "./App.module.css";
    
    function App() {
      return (
        <div>
          <h1 className={styles.title}>Welcome back to react!</h1>
          <Button text={"continue"} />
        </div>
      );
    }
    
    export default App;

  • /* App.module.css */
    .title {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      font-size: 18px;
    }

    이름.module.css

  • // Button.js
    import PropTypes from "prop-types";
    import styles from "./Button.module.css";
    
    function Button({ text }) {
      return <button className={styles.btn}>{text}</button>;
    }
    
    // js 코드로 inline styling
    // css 파일로 따로 관리하는게 더 편함
    // function Button({ text }) {
    //   return (
    //     <button
    //       style={{
    //         backgroundColor: "tomato",
    //         color: "white",
    //       }}
    //     >
    //       {text}
    //     </button>
    //   );
    // }
    
    Button.propTypes = {
      text: PropTypes.string.isRequired,
    };
    
    // App.js에서 Button.js에서 만든 Button을 불러올 수 있도록 export
    export default Button;

    터미널에 npm i prop-types 하고 파일에 import

  • /* Button.module.css */
    .btn {
      color: white;
      background-color: tomato;
    }

  • // index.js
    import React from "react";
    import ReactDOM from "react-dom";
    import App from "./App";
    // import "./styles.css";
    // style.css 파일을 만들어서 전역적으로 스타일링하면 여러 요소에 효율적으로 접근하기 어려움
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById("root")
    );