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

작은미련 2023. 3. 16. 09:38

2023. 3. 16. 09:38

1. React로 화면 개발

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

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

1.1. 프로젝트 폴더 구조 및 환경설정 프로젝트 폴더 구조는 프론트엔드와 백엔드를 나누고자 client / server로 구분 한다. ⎮프로젝트 폴더 : linkserver/ |-------- client ( React 구조) |-------- server ( Python구

firstvalue.tistory.com

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에 붙여 넣는다.

BootStrap 무료디자인 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제작을 해보자.

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#9. 초화면 디자인 ( CSS 적용 및 화면 Component제작 ) (0)	2023.03.19
#8. 프론트엔드 화면개발 (component 제작) (0)	2023.03.17
#6. Python으로 API 개발(API Resource선언 및 테스트) (0)	2023.03.11
#6. Python으로 API 개발(데이타베이스 모델 작업) (0)	2023.03.10
#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09

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