S급 프론트엔드 개발자로 회귀하다 003화. 나는 리엑트의 새로운 페이지가 필요해

React를 어찌하여 설치하였다.

요즘은 세상이 좋아져서 vite라고 하는 프로젝트 셋팅 툴이 프로젝트 시작을 편리하게 해준다고 한다.

그런데 훌륭하게 설계된 프레임워크와 다르게, 플랫폼 개발 환경이 이토록 정형화되어있지 않았던 것도 문제가 있는 것?인가.. 하는 생각도 하지만, 워낙 javascript의 자유도나 변형된 형태가 다르다보니, 이해할 것 같기도 하다.

 

리엑트 프로젝트를 생성하는 방법은 `npm create vite@latest`이라고 명령어를 CLI에 작성하면, 어떠한 프로젝트로 생성할지 알아서 만들어준다. 나는 리엑트 + 타입스크립트 프로젝트를 선택하였는데, 리엑트 이외에도 바닐라 스크립트, Vue.js 같은 프론트엔드 기술들이 몇몇 보이긴 한다. 아직은 관심이 생기지 않는다..

생성된 프로젝트를 보니, javascript와 nodejs를 활용하여 프로젝트 개발할때 사용하는 설정파일인 package.json이 보이고, 타입스크립트와 관련된 tsconfig.json이 자동으로 생성된 것이 보이고, 또... vite 패키지로 프로젝트를 생성하였으므로 vite.config.ts 파일도 보인다... 설정부터 벌써 3가지 + eslintrc.cjs 같은 파일들도 생성되서 복잡하지만, 개발자들이 제일 많이 사용하는 설정으로 알아서 Default 설정이 잘 적용 되었을 것이라고 생각하고, 넘어간다.

프로젝트 생성을 하면, node_modules 폴더가 없는데, `npm install`또는 `npm i` 명령어를 입력하면 package.json에 입력된 모든 패키지들이 프로젝트 local 환경(가상환경이라고 해야하나..?)에 설치된다.

쓸모없는 assets 폴더나 public 폴더 내의 기본 resource를 삭제하고, tsx파일을 바로 실행할 수 있도록 해주는 tsx 명령어나, ts 파일을 js파일로 빌드해주는 tsc build 같은 명령어를 이용해서 잘 동작하는지 테스트를 해보고, 본격적으로 App.tsx에 코드 작성을 시작하였다.

 

App.tsx는 프로그램이 시작되는 Main 지점. 계층형태로 보자면 Root에 해당하는 파일이다.

여기에서 보통 프로그램의 화면 단과, 자주 사용되는 전역 데이터들을 공유하기 위한 작업들을 많이 진행하게 된다.

제일 먼저, 나는 메인 페이지와, 라이센스를 보여주는 페이지 두개를 생성하기를 원하기에, 페이지 라우팅 설정을 해주려고 한다.

내장 함수를 사용하는 방법도 분명 있다고 들었는데..? 더 편하게 구현하기 위해  react-router-dom 패키지를 설치하였다.

App 함수 내에 return문으로 아래와 같이 적어주면, 해당 코드가 페이지 관리 역할을 하게 된다.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="license" element={<h1>라이센스</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

 

- 4화 보러 가기 -

https://ngost.tistory.com/126