JSX pragma는 React 또는 다른 JSX 구문을 해석하기 위해 사용되는 설정입니다. 이 설정은 JSX 구문을 JavaScript로 변환하기 위해 프리프로세서에게 알려주는 역할을 합니다. 이 글에서는 JSX pragma와 함께 웹 애플리케이션을 배포하는 방법을 소개하겠습니다.

1. Create React App 선택

기본적으로 JSX pragma를 사용하는 React 애플리케이션을 배포하기 위해서는 Create React App을 선택하는 것이 가장 일반적입니다. Create React App은 React 애플리케이션을 빠르고 간편하게 설정할 수 있는 도구입니다.

2. Create React App 프로젝트 생성

먼저 Create React App을 사용하여 프로젝트를 생성합니다. 다음 명령을 실행하여 Create React App을 설치합니다.

npx create-react-app my-app

my-app은 새로 생성할 프로젝트의 이름입니다. 원하는 다른 이름을 사용할 수 있습니다.

3. JSX Pragma 설정

프로젝트를 생성한 후에는 JSX pragma를 설정해야 합니다. 이를 위해 src/index.js 파일을 열고 다음 줄을 추가합니다.

/** @jsxImportSource @emotion/react */

위 줄은 @jsxImportSource pragma와 함께 @emotion/react라는 패키지를 사용하도록 알려줍니다. 이 패키지는 Emotion CSS-in-JS 라이브러리를 사용하는 경우 자주 사용됩니다.

4. 애플리케이션 빌드

JSX pragma가 설정되었으면, 이제 애플리케이션을 빌드할 준비가 되었습니다. 다음 명령을 실행하여 애플리케이션을 빌드합니다.

npm run build

위 명령을 실행하면 build 디렉토리에 애플리케이션의 최적화된 정적 자산이 생성됩니다.

5. 정적 파일 서빙

애플리케이션을 배포하기 위해 생성된 정적 파일을 서빙할 웹 서버를 설정해야 합니다. 이 단계는 애플리케이션을 배포할 호스팅 환경에 따라 다를 수 있습니다.

예를 들어, Netlify와 같은 서비스를 사용하는 경우, 애플리케이션을 배포하기 위해 Build & Deploy 설정을 구성해야 합니다. 다른 호스팅 서비스를 사용하는 경우 해당 서비스의 문서를 참조하여 정적 파일을 서빙하는 방법을 알아야 합니다.

6. 애플리케이션 배포

전반적인 프로세스를 거쳐 애플리케이션을 배포할 준비가 되었습니다. 설정된 웹 서버에 애플리케이션의 정적 파일을 업로드하고 호스팅된 애플리케이션을 브라우저에서 확인할 수 있습니다.

요약

JSX pragma와 함께 웹 애플리케이션을 배포하기 위해 Create React App을 사용하는 방법을 살펴보았습니다. Create React App을 이용하여 React 애플리케이션을 설정하고, JSX pragma를 설정한 후에 애플리케이션을 빌드하여 정적 파일을 생성합니다. 마지막으로, 설정한 웹 서버에 정적 파일을 업로드하여 애플리케이션을 배포합니다.

#React #CreateReactApp #JSXPragma #Webpack