WEB 만들기 18 -CRA to Boilerplate

앞으로 만든 페이지를 만들기에 앞서서 폴더를 수정할것입니다. 

 

지금은 이런 상태라고 하면 

이런식으로 바꿀 예정입니다. 

여기서 보시면 

src 폴더안에 

LandingPage 부분은 처음에 나오는 페이지를 작성할것입니다. 

 

App.js 부분은 라우팅 관련일 처리를 할것인데 이부분은 무엇이냐면 

내가 로그인 관련 페이지에 가고 싶다고 하면 로그인 페이지로 갈수있게 그렇게 분류를 시켜줄 수 있는 것

 

HOC 는 컴포넌트 안에 

이것은 펑션인데 다른 컴포넌트를 갖는 펑션이라고 생각하면되는데 

 

Auth라는게 있는데 이게 어떤사람이 자격이 되는지 체크를 하는 곳인데 

 

어떤 컴포넌트가있는데 그곳은 관리자만 들어갈 수 있다고 하자.

이 Auth에서 어떤사람이 들어오려고 할때 이곳에서 들어올 수 있는 사람인지 아닌지 체크해서 들어올수 있게 하거나

못들어오게 하는데

무튼 Auth 안에다가 다양한 컴포넌트를 넣어놓고 auth가 이에 접근하는 것이 자격이 되는지 안되는지 판별해서 

다음 액션을 취하게 하는것을 HOC라고 생각하면됩니다. 

 

utils에는 여러군데에서 쓰이는것을 하나만 만들어서 사용한다고 생각합시다. 

 

이렇게 src안에다 만들어줍니다. 

그리고 

App.test.js랑 logo.svg를 지워주고 

LandingPage.js 만든 부분에 

import React from 'react'

function LandingPage(){
    return(
        <div>
         LandingPage
        </div>
    )
}

export default LandingPage

이렇게 만들어주고 하면되는데 

rfce로 해서 바로 만드는 법은

여기 눌르면 extension 있는데 여기서 es7 이라고 검색을 한후에 

 

 

이것을 다운을 받으면 rfce하면 펑션널 컴포넌트가 바로 만들어지고 

rcce하면 class 컴포넌트 생성이 됩니다.

이런식으로 다채워주시면 됩니다. 

이러면 준비는 끝~!