🧑🏻‍💻시니어개발자🧑🏻‍💻

#7. 프론트엔드 화면 개발

1.1. Component 제작 ( React로 API 호출 )

이제부터 컴포넌트를 하나씩 작성해 보자.

React에서 Axios를 이용해 API 호출하기

컴포넌트는 크게 3가지로 구분하여 작성했다.

1.    API URL을 관리하는 api.config.js

2.    AXIOS로 API을 호출하여 리턴 받는 service.js

3.    service을 받아 화면에 출력해주는 컴포넌트들

디렉토리는 src 밑에 /component 에 /api 와 /service 로 나눈다.

⌘ api.config.js ( 위치: linkservice/client/src/component/api/api.config.js)

----------------------------------------------------------------------------------------------

Python Server에서 개발한 API 호출 URL을 관리한다. 

API가 많아지면 별도 관리 하는게 유지보수상 좋다.

export const API = {
    //LINKS 서비스 API  
    LINKSALL: `/api/links`,
    LINKREGISTER: `/api/link/create`,
    LINKSELECT: `/api/link/select/`,
    LINKDELETE: `/api/link/delete/`,
    LINKUPATE: `/api/link/update`,
}

⌘ service.js ( 위치: linkservice/client/src/component/service/service.js)

------------------------------------------------------------------------------------------------

service.js는 각 API 호출을 담당하는 함수들을 모아둔 서비스로,

axios 로 API을 호출하여 값을 return받도록 함수를 정의하고, 외부에서 호출할 수 있도록 linkService로 지정한다.

import axios from "axios"
import { API } from "../api/api.config"

// ####### 링크정보 API 호출
const getLinks = () => {
    return axios.get(API.LINKSALL)
}
const getSelectLink = (id) => {
    return axios.get(API.LINKSELECT + id)
}
const createLink= (values) => {
    return axios.post(API.LINKREGISTER, values)
}
const updateLink = (id, values) => {
    return axios.put(API.LINKUPATE + id, values)
}
const deleteLink = (id) => {
    return axios.put(API.LINKDELETE + id)
}
const linkService = {
    getLinks,
    getSelectLink,
    createLink,
    updateLink,
    deleteLink,
}
export default linkService;

1.2.  화면 출력

화면 소스는 .jsx 확장자로 생성했다.

⌘ links.jsx ( 위치: linkservice/client/src/component/links.jsx)

--------------------------------------------------------------------------------------------------

component안에 API을 호출하여 리턴 받은 값을 화면에 출력해보자.

useEffect을 통해 linkService의 getLinks(전체링크목록조회)을 호출하는 로직이다.

rendering되는 return값에 <></> Fragment축약으로 감싸 있는 것을 확인하기 바란다.

import React, { useState, useEffect } from "react"
import linkService from "./service/service"

export default function LinkMain() {
    const [data, setData] = useState([])

    useEffect(() => {
        linkService.getLinks().then(
        (res)=> {
            setData(res.data)
           console.log(res.data)
        }, (error) => {
           alert(error.res.data.message )
        }
        )
    }, [])
    
    return (
<> 
     <div>
       { data.links && data.links.map((links) => (

        <div key={links.id}> 
            <div >id : {links.id}</div>
            <div>name : {links.name}</div>
            <div>tag : {links.tag}</div>
            <div>imageurl : {links.imageurl}</div>    
            <div>linkurl : {links.linkurl}</div>   
        </div>
                                                              
        ))}
     </div>
 </> 
    ) // return
} // function

links.jsx의 LinkMain()을 App.js에서 Router을 지정하여 호출해보자.

⌘ App.js ( 위치: linkservice/client/src/App.js)

-------------------------------------------------------------------------------------------------------

import React from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import LinkMain from "./component/links"

function App() {
  return (
    <BrowserRouter>    
      <Routes>
        <Route exact path="/" element={<LinkMain />} />  
      </Routes> 
    </BrowserRouter>
  );
}
export default App;

터미널을 열어서 yarn start을 실행해보자. 하지만, 모듈 오류가 날것이다.

관련 모듈을 설치 안 해서 나는 것으로 우선 모듈 설치를 하자.

$ yarn add react-router-dom

$ yarn add axios

$yanr start

모듈 설치 후 실행하면 빈 화면에 브라우저 개발자 모드에 보면 404오류가 발생한다.

오류 Url을 보면 API 호출 시 발생한다.

React에서 백엔드 서버로 API 요청 시 Proxy 설정을 해줘야 정상 호출이 된다.

우리는 Python Flask로 API을 구현 했으므로, Python Server단을 호출할 수 있도록 설정하면 된다.

⎮Proxy 설정

client의 package.json 열어 proxy설정을 추가한다.

"proxy": "http://0.0.0.0:5000",

   📌 아이피를 127.0.0.1로 설정안하고, 0.0.0.0 로 설정한 이유는 클라우드 환경(AWS, CAFE24등) 경우 내부 IP가 192.168로 시작될 수 있어서 모든 IPv4 인터페이스를 설정하고자 0.0.0.0로 했다.

이제 실행해보자

⎮실행방법

    -       서버 ( $ linkservice/server ) 터미널

          1.    python 가상화 실행 ( source ./bin/activate )

          2.    python3 server.py 실행

          3.    POSTMAN을 통해서 샘플 데이타를 입력한다. 

          ► POST /api/link/create - 링크정보 등록 참고

#6. Python으로 API 개발(API Resource선언 및 테스트)

-       클라이언트 ( $ linkservice/client ) 터미널

       1.    yarn start 실행

브라우저에서 http://localhost:3000 으로 확인해보자.

정상적으로 출력됨을 확인할 수 있다.

📌 links.jsx 소스에 API을 통해 JSON을 제대로 받아오는지 확인하고자 useEffect 부분에 console.log을 찍어 브라우저

     개발자모드에 console에 {links: Array(1)} 가 보인다.

화면이 이쁘지 않아, 다음 포스팅에는 디자인을 해보자.

1.    React로 화면 개발

자, 이제부터 REACT로 화면을 개발 해보자.

앞에서 사전 준비시 프로젝트 폴더인 linkservice아래에 npx create-react-app 으로 이미 client을 생성했다.

#4. 프로젝트 폴더 구조 및 환경설정

1.1.  React 기본설정

기본 폴더구조에서 필요 없는 파일을 모두 지운다.

      · public 폴더 밑에 index.html을 제외하고 모두 삭제

      · src 폴더 밑에 App.js, index.js 을 제외하고 모두 삭제

React 파일 구조를 간단히 설명한다면,

1. index.js

src 폴더에 메인 Script로 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링을 한다.

2. App.js

src 폴더에 컴포넌트를 정의하는 Script이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.

3. index.html

public 폴더에 있으며, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링 된 결과가 표시된다.

   📌 App.js에서 컴포넌트를 정의하고 -> index.js 에서 ReactDOM.rendor 하고  -> index.html에서 표시된다.

먼저, App.js 을 수정한다.

아래 코드에서 필요 없는 내용 지우고, 다음과 같이 추가 한다.

index.js 에서 reportWebVitals 부분과 import index.css을 주석처리 한다.

   📌 참고로, reportWebVitals는 Create React App에서 서드파트 라이브러리로 Index 파일에 써 있는 것처럼

       reportWebVitals() 에 console.log을 넣어주면 개발창을 통해 앱의 퍼포먼스 시간들을 분석하여 object형태로

      보여준다.

이젠 터미널에서 yarn start을 실행하고, 브라우저에서 접속해보자.

1.2. 디자인 가져오기

디자인까지 하면 1인 개발자로 가장 이상적이만, 그만큼 많은 노력이 필요하다. 나도 디자인 만큼은 많이 배우지 못해서 얕은 지식으로 화면을 만들어 보기로 했다.

디자인이 필요 없는 분들은 디자인 설명부분을 제외하고, 개발부분만 봐도 된다.

우선 Bootstrap 무료 디자인을 가지고 와서 변경해보고자 한다.

디자인 참조 : https://getbootstrap.com/docs/5.3/examples/

우리는 Album화면을 가지고 시작하고자 한다. https://getbootstrap.com/docs/5.3/examples/album/ 접속후 오른쪽 마우스 클릭해서 페이지 소스보기에서 HTML을 복사하여 index.html에 붙여 넣는다.

Title등 텍스트 부분을 빼거나, 수정하시고, HTML에서 본문에 해당되는 <main></main> 과 <footer></footer> 는 삭제하고 나머지 부분에서 필요한 부분은 추가/수정/삭제해서 초기 화면을 구성해보자

<main></main> 부분이 가장 중요하므로, 소스내 확인하기 바란다.

<!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1">
  <meta name="description" content="">
  <meta name="generator" content="Hugo 0.88.1">
  <title>링크서비스</title>

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.kr/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="collapse bg-dark" id="navbarHeader">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h4 class="text-white">링크서비스</h4>
            <p class="text-muted">개발은 엄연히 존중 받아야 할 개인의 창작물입니다. 
            </p>
          </div>
        <div class="col-12">
          <h6 class="text-white">Developers</h4>
          <ul class="list-unstyled">
            <li class="text-muted">(주)XXXXXXXX</li>
            <li class="text-muted">사업자번호:XXX-XX-xxxxx</li>
            <li class="text-muted">대표전화:000-1111-2222</li>            
          </ul>
        </div>
      </div>

      </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
      <div class="container">
        <a href="/" class="navbar-brand d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2"
            viewBox="0 0 24 24">
            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
            <circle cx="12" cy="13" r="4" />
          </svg>
          <strong>링크서비스</strong>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
          aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </header>


  <main>
    <!-- 배경이미지 처리 -->
    <section class="container" id="section">
    </section>    

    <div class="album py-4 bg-light" >
      <div class="container" id="root">
            <!--   여기에 본문내용을  처리 -->
      </div>
    </div>
  </main>
  <!-- <footer class="text-muted py-2" id="footer">
  </footer> -->
</body>
</html>

📌 디자인 및 퍼블리싱이 가능하신 분들은 각자 다른 디자인으로 해도 무방하다.

이젠 화면이 잘 출력되는지 확인 한다.

다음편에는 Component제작을 해보자.