React 프로젝트 살펴보기

 

node_modules부터 public, src 등 다양한 폴더와 파일들이 있다. 하나씩 다 살피진 않을거고 내가 생각했을 때 중요한거 몇개 집어서 살펴보자.

pakage.json

먼저 pakage.json 파일을 보면

이런 json 파일을 볼 수 있는데 이는 프로젝트의 개발 환경 설정값이라고 보면 된다. 여기서 scripts 부분을 보면

dev, build, lint, preview 이런 속성이 정의되어있는 걸 볼 수 있는데 프로젝트 실행할 때 npm run dev라는 명령을 터미널에 내릴 때 그 dev가 여기서 온 것이다.

npm run dev (개발서버 실행)

npm run build (배포용 파일 빌드)

npm run preview(빌드 결과물 로컬서버에서 미리보기)

npm run lint(코드 문법 검사)

와 같은 명령을 vite, vite build 이런 명령어로도 사용가능하게 해준다고 보면된다.

 

dependencies는 운영에 필요한 라이브러리, devDependencies는 개발용 도구들로

이것들을 바탕으로 위의 프로젝트 구조에서 node_modules에 실제로 프로젝트에서 사용될 라이브러리들이 세팅된다.

 

처음에 npm create vite@latest로 프로젝트를 시작할 때 자동으로 node_modules를 설치해 줬지만 보통 형상관리를 할 때는 이러한 라이브러리들을 같이 관리하지않고 이런 세팅값만 가지고 있다가 (실제로 프로젝트를 빌드해서 그 프로젝트 폴더를 살펴보면 .gitignore 파일이 있는데 이 파일 내용을 보면 node_modules가 포함되어있다.) 이를 제외한 프로젝트를 받은 뒤 npm i라는 명령어를 실행하면 세팅값을 바탕으로 라이브러리들을 설치해준다.

 

 

스프링이나 스프링 부트로치면 build.gradle이나 pom.xml라고 생각하면 되겠다.

 

더하여 node_modules에서 라이브러리들을 뜯어보는것도 공부가 되긴 하겠지만 시작부터 이걸 뜯어보는건 비효율적이라고 생각한다. 예전에 스프링부트를 공부할 때도 이걸 처음부터 뜯어봤을때는 하나하나 보는데 시간도많이 걸리고 이해도 잘 안되고 했는데 스프링부트를 어느정도 사용하면서 궁금해졌을때 그 구조를 보면 좀더 이해가 잘되더라. 리액트도 그렇게 실제로 사용하다가 시간날때 한번씩 라이브러리를 뜯어보거나 하면 좀더 눈에 잘 들어올 것 같다. 그래서 실제로 나는 패스했다....

 

 

index.html

index.html 파일을 열어보면

 

위와 같은 짧게 작성된 html을 볼 수있다. 지금 프로젝트를 막 시작하고 local 페이지에 접속했을 때 아래와 같은 페이지를 볼 수 있는데 이곳이 index.html이다. 리액트는 spa를 전제로 만들어졌기 때문에 index.html에서 react프로젝트에 포함된 모든 화면을 그려낸다.

그렇다면 위와같은 화면은 어디서 구현될 지 보면

<div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>

바디 태그내의 요부분 덕이라고 유추할 수 있다. src/main.jsx로 가보자.

 

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

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

 

보면 root라는 id에 뭔가를 렌더링 하는가보다 라고 생각이 든다. <App />이라는 건 위를 보니 /App.jsx에서 import를 한걸 보면 거길 보면 될 것 같은데 이제 createRoot와 strictMode가 문제다. 가져오는곳도 그냥 react, react-dom/client 뭐 이런식인데 라이브러리를 뒤져봐야 나올것만 같다. 하지만 라이브러리를 봐봐야 당장 이해할 것 같지도 않을 땐 그냥 react 홈페이지의 문서를 찾아보면 된다.

https://ko.react.dev/reference/react/StrictMode

<StrictMode> – React

https://ko.react.dev/reference/react-dom/client/createRoot

createRoot – React

읽어보면 createRoot는 react로 작성된 앱을 화면에 렌더링해주는 역할이고 strictMode는 디버깅 영역표시 뭐 이런 느낌이다. 

 

결국 실제로 화면의 요소는 App에 있을 것 같으니 App.jsx로 가보자.

 

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

 

이제 뭔가 개발자가 구현해야할 것 같은 코드들이 쭉 나온다. 리턴문 내에 html 언어와 중괄호 내에 변수들이 있는 모습 같은 것들이 보인다. '이렇게 생겼구나 만나서 반가워' 하고 인사 정도 하면되겠다.

 

public, src/assets

보면 vite.svg나 react.svg나 이미지파일인데 하나는 public 폴더에, 하나는 src/assets 폴더에 저장되어있는 걸 볼 수 있다. react에서 자원을 관리하게 할지 앱 전체에서 정적으로 가지고 있게할지에 따라 각 폴더에 저장한다는 개념인데 추후에 그냥 프로젝트 진행에 따라 사용하면 되고 일단은

 

assets - 번들러가 관리하는 자원. JS 모듈 시스템 안에 있다

public - 번들러를 거치지않고 그대로 배포되는 자원. 그냥 정적 서버 폴더다.

 

정도로 생각해주면 된다.

 

그외

vite.config.js: 바이트 설정 파일

pakage-lock.json: 프로젝트 설정(의 특히 버전)을 lock 걸어놓는 파일. 특히 협업에서 필수

eslint.config.js: 코드 검사 설정 (컴파일 오류 잡아주는)