[사이드 프로젝트] fillsa 개발일지 007. 리액트 처음 세팅하기 (1)

1. vscode extensions 설치하기

전부 필수는 아니고, 그냥 내 vscode에 깔려있는 것들을 나열해보았다.

 

Auto Rename Tag

 

ES7+ React/Redux/React-Native snippets

 

ESLint

 

HTML CSS Support

 

JS Quick Console

`console.log()` 코드를 log라는 축약어로 바로 쓸 수 있다.

 

Live Server

 

Prettier - Code formatter

프리티어 구체적인 설정 방법은 링크 참조

 

 

 

---

2. 리액트 디렉토리 구조 만들기

pages

react router로 라우팅을 적용하는 컴포넌트들을 저장

여기에 담기는 컴포넌트들은 파일명을 '~~Page'로 끝내기

 

components

재사용 가능한 컴포넌트들을 저장

 

hooks

커스텀 훅을 저장

 

apis

각종 api 함수 두기

 

store

redux, zustand 등 상태 관리 라이브러리와 관련된 파일 저장

 

assets

이미지, 폰트 등을 저장

 

constants

모든 페이지에서 주요하게 쓰이는 색 등의 상수 저장

 

utils

정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일 저장

 

styles

전역 CSS 스타일과 관련된 파일 저장

 

 

 

 

 

---

3. src를 baseUrl로 설정하기 (Vite ver.)

매번 아래와 같이 import 구문을 쓸 때 상대 경로를 작성하는 것이 귀찮을 수 있다.

baseUrl이라는 것을 설정하면 src 폴더를 절대 경로처럼 작성할 수 있다. 

import reactLogo from '../../assets/react.svg'

 

 

npm install @vitejs/plugin-react-swc

 

 

 

vite.config.js 파일을 아래와 같이 작성한다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {find: "@", replacement: "/src"},
    ]
  }
})

 

 

이제 import 경로에 "@"를 쓰면 src 폴더를 의미한다. 앞으로는 편하게 아래와 같이 쓸 수 있다.

import reactLogo from '@/assets/react.svg'

 

 

---

4. img 파일 경로 설정하기 : public 폴더 vs scr 폴더

public 폴더

• 앱이 컴파일될 떄 사용하지 않는 모든 것
• public 폴더에 있는 파일은 절대경로를 사용하여 불러쓰는 것이 가능하다.
• 정적 파일을 담는 곳이다.
• 파일 경로를 잘못 입력하거나 해당파일이 존재하지 않을 경우 컴파일 단계가 아닌 사용자가 접근할 때 404 오류를 응답받음
• 결과 파일명에 content hash가 포함되지 않기 때문에, 파일이 수정될 때마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 한다.
• public 폴더에 넣은 파일은 번들러로 처리되지 않고, 원본이 build 폴더에 복사된다.
• 파일이 후처리(post-process)되거나 경량화(minify)되지 않는다.

 

src 폴더

• 개발하면서 작업하는 파일 대부분을 넣는다.
• 파일이 존재하지 않을 경우 404 에러가 아닌 컴파일 에러가 발생한다.
• 결과 파일 이름에는 콘텐츠 해시가 포함되므로 브라우저가 이전 버전을 캐싱하는 것에 대해 걱정할 필요가 없다.
• 상대경로를 통해 import하거나, import를 하지 않고 인라인으로 파일을 접근하고 싶다면 아래와 같이 require를 사용한다.

<img src={require("../../../assets/Logo.svg").default}/>

 

결론

• 화면 짜면서 그때 그때 필요한 이미지들은 src > assets 폴더에 넣어서 쓰자.
• 어느 페이지를 가든 정말 자주 쓰이는 이미지들은 public > images 폴더에 넣어서 쓰자.

 

 

---

5. Router 설정하기

1단계) react-router-dom 설치하기

npm install react-router-dom

 

 

2단계) main.jsx 파일에서 <App /> 을  <BrowserRouter>로 감싸기

※ webpack 번들러를 사용하는 경우 index.js 파일에서 진행

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import { BrowserRouter } from "react-router-dom";


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

 

3단계) src > components 디렉토리 하위에 Header.jsx 파일 만들기

import { Outlet } from 'react-router-dom';

export default function Header() {
    return (
        <>
            <div>Header</div>
            <Outlet />
        </>
    );
}

url이 변경될 때마다 헤더는 고정된 상태에서 페이지만 갈아끼워지게 할 것이다.

페이지가 갈아끼워지는 위치에 <Outlet />을 두면 된다.

 

 

 

+) 테스트를 위해 src > pages 디렉토리 하위에 2개의 임시 페이지 만들기

export default function MainPage() {
    return <>Main Page</>;
}

export default function TestPage() {
    return <>Test Page</>;
}

 

Main페이지는 Header와 함께 보여지게 할 것이고,

Test페이지는 Header가 없는 페이지로 구성할 것이다.

 

 

 

 

4단계) App.js 파일을 다음과 같이 수정한다.

import './App.css';
import { Routes, Route } from 'react-router-dom';
import Header from '@/components/Header';
import MainPage from '@/pages/MainPage';
import TestPage from '@/pages/TestPage';

function App() {
    return (
        <>
            <Routes>
                <Route element={<Header />}>
                    {/* 헤더, 푸터와 같은 요소와 함께 보여질 페이지들은 여기에 */}
                    <Route path="/" element={<MainPage />} />
                </Route>

                {/* 단독으로 보여질 페이지들은 여기에 */}
                <Route path="/test" element={<TestPage />} />
            </Routes>
        </>
    );
}

export default App;

 

 

 

+) 테스트 해보기

- Header 잘 뜨는지 확인하기 (http://localhost:5173/)

 

 

- Header 안 뜨는지 확인하기 (localhost:5173/test)

 

👍👍