왜 parcel인가
간단하다 빨라서
캐싱에 의한 실행 속도 뭐 이런 것을 얘기하는게 아니다
프로젝트를 빠르게 시작할 수 있기 때문이다 웹팩으로 시작했다가 여기저기서 설정 찾아보다 에러나서 포기할 것 같아서
최대한 빠르게 시작할 수 있는 parcel로 시작하려고 한다
어짜피 규모가 커질 프로젝트가 아니고 중간에 안 엎어지고 잘 되면.. 뭐 웹팩으로 다시 하지 ㅋㅋ
설치
우선 프로젝트 폴더를 npm init으로 초기화 시켜주고 설정 다 디폴트로 했다
yarn을 사용할 것이라서 명령어는 yarn으로 통일
리액트와 파셀 번들러를 설치하자
yarn add react react-dom --dev parcel-bundler디렉토리
디렉토리는 다음과 같다
딱히 의미를 두진 않았는데 아무래도 CRA로 개발을 많이 하다보니 정신차려보니까 저렇게 폴더를 파고 있더라
코드
index.html
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
</head>
<body>
<div id="root"></div>
<script src="../src/index.js"></script>
</body>
</html>App.js
import React from "react";
const App = ()=>{
return (
<div>Hello world</div>
);
}
export default App;index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "../src/App";
ReactDOM.render(
<App/>,
document.getElementById('root')
);아주 별거없는 서버를 돌려 제대로 띄워지는지 확인하기 위한 코드들
실행
터미널에 parcel ./public/index.html로 실행해도 되지만 계속 이렇게 실행하는 것은 번거롭기 때문에 스크립트를 수정해주자
//package.json
"scripts": {
"start": "parcel ./public/index.html"
},yarn start 로 실행하면 1234포트로 서버는 잘 띄워지는데 왜인지 Hello world가 보이지 않는다..
html은 잘 뜨는데.. js파일들을 모두 public으로 옮기니까 또 잘 불러와진다
html에서 불러오는 경로가 잘못되었나? 하고 다시봐도 잘 돼 있고 삽질하다 package.json 파일을 보니 main 설정을 기본값으로 해놓고
index.js를 src폴더 아래에 위치시켜놔서 그랬다
"main": "./src/index.js"로 바꾼뒤 서버를 돌리면 정상적이게 Hello world가 보인다
Hello world를 띄우는 것도 이렇게 힘든데 과연 내가 잘할 수 있을까?
'일지' 카테고리의 다른 글
| TDD를 위한 준비 (0) | 2021.04.26 |
|---|
