👋🏻 2. Hello Enact!

튜토리얼에서는 src/views/MainPanel.js 파일은 사용하지 않기 때문에 지우고 시작하라고한다.

이제 실제로 코드를 작성하고 앱을 실행해보겠다.

2-1. 🏗 Module 구축하기

Enact 팀에서는 어떤 모듈이든 자체 디렉토리에 배치하고, main 속성이 해당 파일을 가리키는 package.json을 포함시키는 것을 권장한다고 한다.

그래서 우리가 만든 앱의 폴더를 보면 루트 디렉터리에 package.json이 있고 App 디렉터리 안에도 package.json이 있다.

💡 main 속성은 패키지의 진입점이 되는 모듈의 ID를 말한다.
즉, enact-library라는 이름의 패키지를 설치하고 require(”enact-library")를 통해 모듈을 import 하면 main으로 지정된 모듈의 export 객체가 반환된다.
react-ksmodal 라이브러리를 배포하고 import가 안되는 문제가 있었는데 이게 원인이었다….😅

2-2. 🎨 Rendering

여기서부터는 설치한 boilerplate에 관한 내용이다.

./src/index.js 의 내용인데 공식문서와 boilerplate에 있는 코드가 다른 것은 React18로 업데이트되면서 바뀐 부분이 있기 때문이다.

/* global ENACT_PACK_ISOMORPHIC */
import {createRoot, hydrateRoot} from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';

const appElement = (<App />);

// In a browser environment, render instead of exporting
if (typeof window !== 'undefined') {
	if (ENACT_PACK_ISOMORPHIC) {
		hydrateRoot(document.getElementById('root'), appElement);
	} else {
		createRoot(document.getElementById('root')).render(appElement);
	}
}

export default appElement;

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
// Learn more: https://github.com/enactjs/cli/blob/master/docs/measuring-performance.md
reportWebVitals();

Isomorphic Support

/* global ENACT_PACK_ISOMORPHIC */

맨 윗줄에 위와 같은 주석이 눈에 띄어서 enact 공식문서에 검색을 해보았고, Isomorphic Support를 알게되었다.

Isomorphic Support는 React18의 hydrateRoot를 통해 Prerendering(html을 미리 로딩하는 것)을 지원한다는 것인데 바뀐 부분은 따로 정리하겠다.

Running the App

• npm run pack - ./dist 디렉토리에 앱을 번들링한다.
• npm run pack-p - ./dist 디렉토리에 프로덕션 용 앱을 번들링한다.
• npm run serve - 애플리케이션을 메모리에 번들링하고 포트 8080에서 HTTP 서버를 시작하여 애플리케이션을 실행한다. 코드를 변경하고 저장할 때마다 변경사항이 브라우저에 바로 반영된다.
• npm run clean - ./dist 디렉터리를 삭제한다.