FE & BE

1. 프레임워크 결정 + React 기본 문법 [MyHomepage: 개인 홈페이지 만들기]

zeroiron0 2022. 11. 15. 14:48

안녕하세요! 개발자 최영철입니다.

 

산업기능요원으로 취업을 준비하는 중 여러 개발자의 개인 포토폴리오 홈페이지를 확인할 수 있었습니다.

이것에 영감을 받아 '처음부터 끝까지 나만의 홈페이지를 만들어보자'라는 결심을 했습니다.

 

최종으로 만들어진 개인 홈페이지

 

먼저 무슨 프레임워크를 이용해서 홈페이지를 구현할 것인지 정해야했습니다.

백엔드단은 회사에서 인턴 했을 때 숙달된 Django를 사용하기로 했습니다.

프론트엔드단은 Django를 사용해볼까 했지만 대부분 JavaScript 계열 프레임워크를 사용하는 것을 보고

JavaScript도 배울겸 React를 선택했습니다.

 

Django와 React를 설치한 후 문득 React를 사용하려면 왜 node.js를 설치해야하나 궁금했습니다.

 

그렇게 열심히 구글링한 결과, stackoverflow에서 다음과 같은 답글을 발견합니다.

Most React frontend project uses NodeJS as a way to run scripts (even third-party modules) that serve as tools for development. These scripts could be in any other languages, but since the developer is already writing JavaScript to build a React app, it makes sense to use tools from the same ecosystem.

다시 말하면 대부분의 React 프론트엔드 프로젝트는 같은 JavaScript면서 node.js에 존재하는 다양한 패키지를 사용하기 위해 node.js를 사용하는 것이었습니다.

실제로 기본 React의 실행 코드도 npm start인 것을 보면 이것이 권장하는 방법인 것 같습니다.

 

그렇게 React로 첫 프로젝트를 생성한 다음 App.js를 열어봤는데

함수 return 부분에 html에서 보던 <div> 태그가 보였습니다.

태그를 사용하는 이유에 대해 공부한 결과, React가 페이지를 표시하는 방식과 컴포넌트에 대해 알게 되었습니다.

 

function Foo() {
    const something = { key2: value2 }
    return (
    <div>
      <div className='{CSS 클래스 이름}'>
        Hello, World!
      </div>
      <Bar key={value} { ... something } ></Bar>
      <Bar key={value} { ... { key2: value2 } } />
    </div>
    )
}


//Bar Component
function Bar(props) {
    const { key, key2 } = props
    console.log(key, key2)
}

//Console: value, value2

 

알게된 내용을 설명해드리면

1. 위의 예제처럼 반드시 모든 컴포넌트를 하나로 묶는 최상위 컴포넌트가 필요합니다. <div>로 묶을 경우 만약 상위 컴포넌트가 존재한다면 하나의 컴포넌트로 처리됩니다. 만약 Grid가 있고 각각의 컴포넌트가 다른 셀로 들어가도록 CSS가 짜여있으면 이 경우 CSS 이름을 맞추더라도 한 Cell에 모든 컴포넌트가 들어가고 그 상태에서 CSS가 적용됩니다.

이것을 방지하려면 <></>라는 Fragment 태그로 묶어야합니다.

2. {}을 통해 변수, 함수 등의 객체를 전달할 수 있습니다.

3. 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달하려면 예제의 key={value}처럼 사용하거나 { ... something } 처럼 spread operator를 이용해 dictionary로 보낼 수 있습니다. 이렇게 보내진 데이터는 하위 컴포넌트에서 props를 통해 접근할 수 있습니다.

4. React는 SPA (Single Page Application)를 지향하므로 각 기능을 하는 컴포넌트를 따로 만든 후 하나의 페이지에서 조립해서 사용하는 것이 좋습니다.

 

이렇게 프레임워크를 결정하고 기본적인 React 문법에 대해 공부했습니다.

다음에는 홈페이지에 추가할 기능을 생각하고 이 기능에 대응할 DB Schema를 구현해보겠습니다.