sec 16.(실습) App.js 파일 수정하기

routing : app.js 파일에 포함되어 있는 app 컴포넌트에 구현

-> app 컴포넌트가 가장 처음으로 렌더링 되는 컴포넌트이기 때문

 

index 경로인 /(slash) 로 접속 -> 메인 페이지 컴포넌트를 보여줌

slash-post-write으로 접속 -> post-write 페이지 컴포넌트 보여줌

slash-post-post-id로 접속 -> post-view 페이지 컴포넌트 보여줌

colon-post-id -> 동적으로 변하는 파라미터를 위한 값

 

 

app.js 파일 수정 코드

import React from "react";
import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";
import styled from "styled-components";
// Pages
import MainPage from "./component/page/mainpage";
import PostWritePage from './component/page/PostWritePage';
import PostViewPage from './component/page/PostViewPage';

const MainTitleText = styled.p`
    font-size: 24px;
    font-weight: bold;
    text-align: center;
`;

function App(props) {
    return (
        <BrowserRouter>
            <MainTitleText>지윤이의 미니 블로그</MainTitleText>
            <Routes>
                <Route index element={<MainPage />} />
                <Route path="post-write" element={<PostWritePage />} />
                <Route path="post/:postId" element={<PostViewPage />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

 

(실습) 애플리케이셔 실행하기 

 

 

글 작성하는 화면

But, 실제 서버와 연동되어 있지 않기에 실제로 글이 작성되진 않음! 

글 작성하기 버튼을 누르면 첫 화면으로 돌아옴

 

 

(실습) Production 빌드하기 

웹 애플리케이션 개발의 최종 단계 = 빌드와 배포

but, 배포는 다루지 않고 빌드하는 과정만 해봄!!

 

Build란? 

: 작성한 코드와 애플리케이션이 사용하는 이미지, CSS 파일 등의 파일을 모두 모아서 패키징 하는 과정

빌드 과정에는 코드가 식별이 불가능하도록 obfuscation 이라 불리는 난도카가 되기도 하며

필요 없는 공백이나 줄 바꾼 문자들을 제거하여 minification 이라 불리는 축소 과정도 포함

-> 최종적으로 만들어진 파일들은 Build 폴더에 모이게 됨 

//빌드하기
npm run build

build 폴더가 생성됨

build folder 내

:  index.html 파일, 이미지 그리고 css 파일과 javascript bundle 파일이 static 폴더 안에 각각 들어가게 됨

 

//serve 설치하기
npm install -g serve

* serve : static 파일들을 서빙해주는 역할을 하는 프로그램

-g 옵션을 넣어 글로벌 모드로 서브 패키지를 설치

-> 글로벌 모드로 설치하게 되면 각 프로젝트 폴더 내에 설치되는 것이 아니라 현재 사용 중인 컴퓨터의 다른 경로 어디에서든지 사용할 수 있게 됨

 

serve -s build에서 오류 발생..!!

--> 오류 미해결.. 중간고사만 끝나면... 다시 돌아올께요...!!ㅠㅠ

 

에러 -> 스크립트 실행 권한이 제한되어 있어 발생하는 문제임을 확인함!!

 

! 해결방법 !

- 스크립트 실행 권한을 변경시키기 위해서는 windows powershell을 관리자 권한으로 실행시켜서 변경해주어야 함!!

 

1. windows powershell을 검색하여 관리자로 실행해준다.

윈도우 검색 -> powershell -> 오른쪽 버튼을 눌러 관리자 권한으로 실행

 

2. Set-ExecutionPolicy Unrestricted 명령어 엔터!

 

3. Y를 누르고 엔터! 

다시 터미널에 ExecutionPolicy 작성하면 Unrestricted 나오고 제한이 풀림!!

 

 

! 문제 해결 !

 

serve -s build 문제 해결 완료입니당~!!