멋쟁이사자처럼 프론트엔드 스쿨 2기 44_Day

aydennote·2022년 6월 8일
0
post-thumbnail

📖 오늘 학습 뽀인트!

  1. React
    1-1 위니브 사이트 (with React)
    1-2 프로젝트 생성 및 배포

1. React

1-1 위니브 사이트 (with React)

 function Main() {                           // 2
        return <h1 className="ir">상품페이지 목록</h1>;
      }

      const Card = function ({ goods }) {
        const url = "http://test.api.weniv.co.kr/" + goods.thumbnailImg;
        return (
          <li className="product-item">
            <div className="product-img">
              <img src={url} />
            </div>
            <strong className="product-name sl-ellipsis">
              {goods.productName}
            </strong>
            <button className="like-btn"></button>
            <div className="product-price">
              <strong className="price m-price">
                {goods.price}
                <span></span>
              </strong>
            </div>
          </li>
        );
      };

      const Cart = () => <a href="#" className="list-btn cart-link"></a>;

      const Product = function ({ item }) {       // 3
        return (
          <main className="product">
            <ul className="product-list">
              <Card goods={item[0]} />
              <Card goods={item[1]} />
              <Card goods={item[2]} />
              <Card goods={item[3]} />
              <Card goods={item[4]} />
              <Card goods={item[5]} />
              <Card goods={item[6]} />
            </ul>
            <Cart />
          </main>
        );
      };
      const body = (                       // 1
        <div>
          <Main />
          <Product item={data} />
        </div>
      );
      const domContainer = document.querySelector("#root");  // 4
      ReactDOM.render(body, domContainer);
  1. body 라는 변수에 JSX 형식으로 Main, Product 함수의 결과를 넣는다.
    위 소스코드에는 data라는 객체가 없지만 있다고 가정하고 Product 함수에item이라는 변수에 data를 담아 props로 전달한다.
  2. Main 함수는 <h1>태그 하나를 반환한다.
  3. 1번에서 item으로 props를 구조 분해 할당으로 전달 받아 Card 함수에 객체 데이터 7개를 goods라는 변수에 담아 props로 전달한다. 만약, 구조 분해 할당으로 전달하지 않으면 props.item 이런식으로 props를 붙여야한다.
  4. 생략된 부분이 있지만 앞선 1,2,3 과정을 모두 거친 결과를 어디에 추가할지 정하는 부분인데, 넣어줄 태그를 선택한 다음 ReactDOM.render(최종 결과물, 태그); 를 사용해 화면에 표시한다.

1-2 프로젝트 생성 및 배포

프로젝트 생성 및 실행

터미널에서 npx create-react-app 폴더명을 입력하면 프로젝트와 react 기본 module 들이 설치된다. 설치된 프로젝트 폴더로 이동한 뒤에 npm start를 입력하면 실행된다.


Github에 수동 배포

  1. 아래 코드를 package.json에 추가.
{
	"homepage":"여러분 github page url",
	...
}
  1. npm run build 입력하며 build 폴더 및 resource 생성.
  2. build 폴더 안에 있는 파일을 그대로 github pages에 업로드.

❓ 빌드
영문 서적을 한글로 번역하여 출판하는 것을 예로들면 아래와 같다.
1. 영문으로된 글을 한글로 번역하는 것은 컴파일이다.
2. 번역한 글을 책으로 엮는 것은 빌드이다.
3. 완성된 책을 고객들이 읽을 수 있도록 서점에 진열하는 것은 배포이다.
4. 1~2번 과정을 하나로 묶어 '빌드 한다'고 하기도 한다.
즉, Node 환경에 구동되는 리소스(JS, 모듈 등)들을 브라우저 환경에서 구동할 수 있도록 하는 과정이 빌드이다.
빌드 개념 출처

profile
기록하는 개발자 Ayden 입니다.

0개의 댓글