webOS Article/1. Web Application 개발하기

React로 Application 만들기

cstleb 2021. 7. 19. 18:03

 

 

 

개발환경 setting하기

1. Node.js 설치하기

React를 사용하기 위해서는 먼저 Node.js를 설치해야 합니다.

https://nodejs.org/

위 링크에서 각자의 운영체제에 맞추어 가장 최신 버전의 Node.js를 설치하시면 됩니다.

이 포스팅이 작성되는 현재 시점에는 16.4.2가 가장 최신 버전이므로 참고하시기 바랍니다.

React를 사용하는데 Nodejs를 설치하는 것은 Create React App 라이브러리를 이용하기 위함입니다.

이어서 Create React App을 이용해 리액트 어플리케이션의 기본 틀을 만들고 확인하겠습니다.

 

2. Create React App으로 프로젝트 생성하기

먼저 어플리케이션을 코딩할 폴더를 만들고, 터미널에서 해당 폴더의 경로로 이동합니다.

그리고 다음과 같은 명령어를 입력해 Create React App을 실행합니다.

> npx create-react-app <Project Name>

가장 간단한 스마트 홈 어플리케이션을 만들어볼 것이기 때문에 프로젝트명을 smart_home으로 입력해 실행했습니다.

 

이제 폴더에 생성된 폴더와 파일들을 살펴보겠습니다.

react_app의 폴더 안에 프로젝트명과 동일한 이름으로 smart_home이라는 하위 폴더가 생성된 것을 확인할 수 있습니다.

그리고 smart_home 폴더 안에는 node_modules, public, src 폴더와 package.json파일 등이 생성되어 있습니다.

 

node_modules : 설치된 라이브러리들이 전부 들어있습니다.

public : 이미지 파일 등의 static 파일들이 보관되어 있습니다.

src : 우리가 어플리케이션을 개발할 때 코드를 작성하는 파일들이 들어있습니다.

package.json파일 : 설치한 라이브러리들의 이름과 버전을 모아놓은 목록을 보여줍니다.

 

3. 어플리케이션 실행하기

이전 단계에서 만든 어플리케이션의 기본 틀을 실행해보겠습니다.

터미널에서 cd <프로젝트명> 을 입력해 만들어진 어플리케이션의 폴더 경로로 이동합니다.

> npm start

이어서 위의 명령어를 입력하면 웹 브라우저 상에서 아래와 같은 모습으로 기본 어플리케이션이 동작하게 됩니다.

+)

더보기
더보기

만약 어플리케이션이 자동으로 웹 브라우저 상에서 동작하지 않는다면,

아래의 터미널 메세지에 나오는 주소를 직접 입력해 실행하면 됩니다.

 

어플리케이션에서 Edit src/App.js and save to reload.라고 적혀있는 것을 확인할 수 있는데,

우리가 어플리케이션을 개발할 때 src폴더의 App.js 파일에서 메인 페이지에 들어갈 html을 작성하면 되는 것입니다.

실제 메인페이지는 public/index.html이지만 App.js에 있는 코드들이 index.html에서 동작할 수 있도록 index.js에서 명령하고 있기 때문에 App.js에서 메인 페이지를 개발하면 됩니다.

 

어플리케이션 개발하기

1. React Bootstrap 설치하기

> npm install react-bootstrap

먼저 리액트에서 부트스트랩을 사용할 수 있도록 하는 툴인 React Bootstrap을 설치합니다.

부트스트랩은 Navigation Bar나 Button과 같은 기능들을 쉽게 추가할 수 있도록 하는 기능을 수행합니다.

 

2. CSS link 태그 삽입하기

프로젝트 폴더 하위의 public 폴더에서 index.html을 열어 <head>태그 안에 아래의 링크 태그를 붙여 넣습니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>

 

3. 간단한 smart home 어플리케이션 개발하기

React 실습으로 여러 방의 불을 버튼을 이용해 켜고 끄는 간단한 스마트 홈 어플리케이션을 개발하겠습니다. 

앱 개발은 앞서 설명드린 바와 같이 App.js 파일에서 진행해주시면 됩니다.

먼저 App() 함수 안의 원래 있던 코드들을 지우고 개발을 시작합니다.

 

아래의 React Bootstrap 페이지에서 추가하고 싶은 컴포넌트들을 복사에 붙여 넣으시면 자동으로 생성됩니다.

https://react-bootstrap.github.io/

우선 Navigation Bar을 만들어봅시다.

여러 디자인의 Navbars 중 마음에 드는 것을 선택하여 해당 코드를 자신의 App.js 파일의 App()함수의 return()에 붙여 넣어줍니다.

저는 아래와 같은 Navbar을 선택했습니다.

<Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#link">Link</Nav.Link>
        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

위 코드를 붙여 넣고 반드시 해당 태그들을 App.js의 가장 윗 부분에서 아래와 같이 import 해주어야 합니다.

import { Navbar,Container,Nav,NavDropdown } from 'react-bootstrap';

파일을 저장하고 어플리케이션을 실행하면 해당 어플리케이션에 네비게이션 바가 생성된 모습을 확인할 수 있습니다.

 

이제 Card 컴포넌트로 방을 구성하고 그 안에 버튼과 이미지를 삽입해 버튼을 누르면 이미지가 바뀌도록 만들어 불이 꺼졌다가 켜지는 코드를 구성해보도록 하겠습니다.

React Bootstrap에서 Card 컴포넌트 중 마음에 드는 디자인을 골라 삽입합니다.

<Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

버튼도 추가할 예정이었기 때문에 처음부터 버튼이 달려있는 컴포넌트를 선택했습니다.

방들은 React의 컴포넌트 형식으로 따로 만들어 추가합니다.

function으로 Room()을 만들고 return값으로 <Card> 컴포넌트를 지정한 후 App() 함수의 Nav바 아래에 <Room>컴포넌트를 추가합니다.

 

버튼에서 onClick 이벤트로 두 개의 이미지 중 하나만 선택되어 나타나도록 하는 코드를 작성합니다.

먼저 Room 함수에서 State를 이용해 Switch값을 저장할 변수를 만들어줍니다.

let [Switching,switchingChange] = useState(false);

이 때 useState가 자동으로 import되지 않는다면 App.js의 맨 윗 부분에 다음의 코드를 붙여 넣어야 합니다.

import { useState } from 'react';

이미지를 나타낼 때 if문을 사용할 수 없기 때문에 삼항연산자로 대체해 기능을 구현합니다.

필요없는 부분을 제거하고 디자인을 조금 변경해 완성한 Room 함수의 코드는 다음과 같습니다.

function Room(props){
  let [Switching,switchingChange] = useState(false);
  return (
    <div style={{ display: "inline-block"}}>
      <Card style={{ width: '18rem' }}>
        <Card.Body>
          <Card.Title>{props.whoes} Room</Card.Title>
          <Card.Text style={{ marginTop: '10px', marginBottom: '0' }}>
            Push the switch below if you want to turn the light on / off
          </Card.Text>
          <div style={{ padding: '20px' }}>
            {
              Switching === true
              ? <img src={img_off} style={{ width: '60%' }}/>
              : <img src={img_on} style={{ width: '60%' }}/>
            }
          </div>
          <Button variant="outline-primary" onClick={()=>{switchingChange(!Switching)}}>Switch</Button>
        </Card.Body>
      </Card>
    </div>
  )
}

이 때 이미지는 같은 src폴더에 저장해 놓은 후 위에서 다음과 같이 import 한 후 사용했습니다.

import img_off from './light_off.svg';
import img_on from './light_on.svg';

 

이제 방을 여러 개로 구성하기 위해 App() 함수에서 map을 이용해 반복문으로 구현하겠습니다.

먼저 state로 값을 저장합니다.

let [whoes, whoesChange] = useState(['My','Parents','Bath']);

그 후 <Room>컴포넌트가 있는 곳에서 다음과 같은 코드를 작성합니다.

{
    whoes.map((a,i)=>{
       return <Room whoes={whoes[i]}></Room>
    })
}

 

위 Room 함수의 7번째 줄에서 props로 whoes의 값을 받아오기 때문에 해당 데이터가 전송되어 나타나게 됩니다.

 

이제 어플리케이션 구성은 마쳤습니다.

+ 전체 코드 보기

더보기
더보기 
import './App.css';
import { Navbar,Container,Nav,NavDropdown,Button,Card } from 'react-bootstrap';
import img_off from './light_off.svg';
import img_on from './light_on.svg';
import { useState } from 'react';

function App() {

  let [whoes, whoesChange] = useState(['My','Parents','Bath']);

  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">Smart Home Application</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Link</Nav.Link>
              <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      {
        whoes.map((a,i)=>{
          return <Room whoes={whoes[i]}></Room>
        })
      }

    </div>
  );
}

function Room(props){
  let [Switching,switchingChange] = useState(false);
  return (
    <div style={{ display: "inline-block"}}>
      <Card style={{ width: '18rem' }}>
        <Card.Body>
          <Card.Title>{props.whoes} Room</Card.Title>
          <Card.Text style={{ marginTop: '10px', marginBottom: '0' }}>
            Push the switch below if you want to turn the light on / off
          </Card.Text>
          <div style={{ padding: '20px' }}>
            {
              Switching === true
              ? <img src={img_off} style={{ width: '60%' }}/>
              : <img src={img_on} style={{ width: '60%' }}/>
            }
          </div>
          <Button variant="outline-primary" onClick={()=>{switchingChange(!Switching)}}>Switch</Button>
        </Card.Body>
      </Card>
    </div>
  )
}


export default App;

어플리케이션을 실행하면 다음과 같이 구성이 완료된 모습을 확인할 수 있습니다.

Switch 버튼을 누르면 아래와 같이 기능이 수행됩니다.

완성된 어플리케이션을 패키징하여 설치하면 webOS 위에서 동작시킬 수 있습니다.

 

 

'webOS Article > 1. Web Application 개발하기' 카테고리의 다른 글

Enact를 이용하여 webOS web app 만들기 2  (0) 2021.07.19
Enact를 이용하여 webOS web app 만들기 1  (0) 2021.07.10
webOS web App의 메타파일  (0) 2021.07.04
webOS에서 동작하는 웹앱(web application) 개발하기  (0) 2021.06.26
web application이란 무엇인가?  (0) 2021.06.26

'webOS Article/1. Web Application 개발하기'의 다른글

  • 현재글React로 Application 만들기

관련글

댓글

티스토리툴바