코드노예

Vite를 이용해서 React 프로젝트를 시작하는 예시입니다.

Vite 이란?

Vite은 한마디로 웹 빌드 툴입니다. 아래 링크에서 자세한 내용을 확인할 수 있습니다.

Vite | Next Generation Frontend Tooling

Vite을 사용하면, 빠른 HMR이 지원되어 변경한 코드를 바로 확인할 수 있으며, 운영환경에 배포될 에셋들을 최적화시킬 수 있습니다. Vite은 frontend framework 를 관리해주는 빌드 툴이라고 생각하면 될거 같습니다.

Vite은 react 뿐 아니라 vanilla, vue 등의 template도 지원합니다. 여기서는 react에 focus하도록 하겠습니다.

React 프로젝트 시작하기

Vite를 이용해서 프로젝트를 시작하려면, node.js 가 설치되어 있어야 합니다. 18이상을 지원한다고 되어 있는데, 저는 LTS 버전인 22버전을 사용했습니다.

아래 명령어를 실행합니다.

npm create vite@latest

먼저 프로젝트 이름을 지정합니다. 저는 그냥 enter를 입력해서 "vite-project" 라는 이름으로 진행하겠습니다.

다음은 framework를 선택합니다. Arrow Key (up, down)을 이용해서 이동가능하고, 여기서는 React를 선택합니다.

마지막으로 variant를 선택합니다. 저는 TypeScript를 선택했습니다.

프로젝트가 생성이 되었습니다.

아래와 같은 메시지가 나올 것입니다.

처음에 프로젝트 이름을 vite-project로 지정했기 때문에, 같은 이름으로 프로젝트 폴더가 생성되었습니다.

아래 명령으로 프로젝트 폴더로 이동합니다.

cd vite-project

그리고, 필요한 모듈을 설치해 줍니다. (npm install 과 같은 명령어 입니다.)

npm i

모듈이 설치되면, 아래 명령어로 실행합니다.

npm run dev

아래와 비슷한 화면이 나오면서 실행되면 정상입니다.

웹 브라우저를 열어서 주소창에 http://localhost:5173 을 입력합니다. 그러면 아래와 같은 기본 웹 앱이 나옵니다.

가운데, count is 0 라고 되어 있는 버튼을 누르면 카운트가 올라갑니다.

vscode 사용하기

vscode 사용자의 경우, vite-project 폴더에서 다음과 같이 입력합니다. 그러면 vscode 프로그램이 현재 프로젝트 폴더를 열어줍니다.

code .

아래와 같이 나옵니다.

이제부터 vscode를 이용하여 프로젝트를 편집할 수 있습니다.

오랜만에 리액트 앱을 개발할 일이 생겨서 체크해 보다가 이상한 이슈를 만나게 되었습니다. 

대략 아래와 같은 에러 메시지가 나옵니다.

npm ERR! node_modules/react
npm ERR!   react@"^19.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

내용을 살펴보면.. react 19를 설치했는데, @testing-library/react@13.4.0 은 react 18을 필요로 한다.. 는 이야기네요..

stackoverflow 나 facebook github 이슈에 리포팅 되어 있는 이슈지만 해결책은 react 18로 다운 그레이드하라는 식의 이야기 밖에 없네요.. 사실 react 18로 다운 그레이드 하는 것도 수월하지 않고.. 근본적인 해결책은 아니다 싶었습니다.

문제 해결을 위해 원인이 무엇인가에 대해서 살펴 보았습니다..

먼저 npx로 생성하는 리액트 앱의 dependencies를 살펴보면, "cra-template", "react", "react-dom", "react-scripts" 이렇게 4가지로 나오네요..

react 와 @testing-library/react 간의 호환성 문제였기 때문에, 위의 4개 모듈 중에 어떤 모듈이 @testing-library/react 를 설치하는지 확인해봐야 겠습니다.

확인을 위해, temp 폴더를 생성하고 각각의 모듈을 설치해서 dependencies를 살펴보았습니다. 그 결과 cra-template 모듈의 template.json 파일에서 @testing-library들이 포함되어 있는 것을 확인하였습니다.

temp 폴더에 설치한 cra-template 모듈에 있는 template.json 파일을 열고 @testing-library/react의 버전을 편집합니다. (temp/node_modules/cra-template/template.json)

npm 사이트에서 확인해 본 결과, 현재16.2.0 이 최신이네요.. 

업데이트 하는 김에, 다른 dependencies들의 버전도 모두 최신버전으로 올려주었습니다. (아래 캡쳐 화면 참고)

cra-template 모듈을 편집했다면, 이제 실제 react 프로젝트를 생성하면 되는데, 생성시 template을 우리가 편집한 cra-tempate 모듈을 바라볼 수 있게 옵션으로 지정해 줍니다.

아래와 같은 폴더 구조에서, Projects/react 위치에서 다음과 같이 template 옵션을 지정하여 실행합니다.

npx create-react-app my-app --template file:./temp/node_modules/cra-template

그러면 오류 없이 프로젝트가 잘 생성될 것입니다.

결론적으로 cra-template 모듈을 관리하는 facebook 측에서 dependencies를 업데이트 해줘야 해결이 되는 문제인데.. facebook 에서는 정책을 변경해서, react 프로젝트 생성 시, framework와 함께 프로젝트를 생성하는 방법을 권장하고 있습니다. 

https://react.dev/learn/start-a-new-react-project

내용을 간략히 요약하자면, 웹 사이트 혹은 웹 앱을 개발할 때, react 를 이용하는 framework을 사용하는 것을 권장하니, 이제부터는 create-react-app은 대신, create-next-app 이나 create-remix 등의 명령어를 이용해서 프로젝트를 생성하라고 하네요..

여튼 아직 create-react-app을 필요로 하시는 분들을 위해 작성한 포스팅이니, 잘 활용하시면 좋겠습니다.

요약

1. react 19는 create-react-app 으로 프로젝트 생성시 에러가 발생함

2. 이유는 create-react-app 에서 참조하는 모듈 cra-template 에서, react 18을 참조하는 오래된 라이브러리를 참조하고 있기 때문임

3. 이를 우회하기 위해서, cra-template 을 다운로드 해서, 참조 모듈의 버전을 올려주고,

4. create-react-app 명령어 실행시 편집한 버전의 cra-template 경로를 template 옵션으로 지정해 주면 됨

이번에는 React Component 와 속성에 대해서 알아보겠습니다.

컴포넌트는 UI를 독립적이고, 재사용이 가능한 조직으로 나눌수 있게 해줍니다. 각 컴포넌트는 격리되어 동작합니다. 

개념적으로, 컴포넌트는 JavaScript function 와 비슷합니다. 컴포넌트는 입력을 받을 수 있고 (속성), React element 를 반환해 줍니다.

컴포넌트를 정의하는 방법에는 Javascript function로 작성하거나 Class를 이용해서 작성할 수 있습니다. 클래스형의 경우 React.Component를 상속받아서 작성하며, render 메써드를 반드시 정의해 줘야 합니다.

아래는 화면에 Hello 메시지를 표시해주는 컴포넌트의 예시입니다.

함수형 예시

function Welcome(props) {
    return <h1> Hello, {props.name}</h1>;
}

클래스형 예시

class Welcome extends React.Component {
    render() {
        return <h1> Hello, {this.props.name}</h1>;
    }	
}

이전의 코드를 아래와 같이 변경하면 컴포넌트를 이용한 결과를 확인할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>;
}

const element = <Welcome name="Maria"/>;
ReactDOM.render(element, document.getElementById('root'));

코드에 대해서 약간의 부연 설명을 하면,

element 생성시,

이전에는 React.createElement 매써드를 사용했었는데, 컴포넌트를 사용할 때는 태그를 이용해서 생성을 하면 됩니다.

속성으로 지정된 name 은 Welcome 이 생성될 때, prop 값에 {name: "Maria"} 형태로 전달이 됩니다.

Welcome 컴포넌트는 받아온 속성을 이용해서 렌더링된 <h1> Hello, Maria </h1> 에 해당하는 엘리먼트를 리턴해 줍니다.

React는 UI 개발에 사용되는 Javascript Library 입니다. 

React – A JavaScript library for building user interfaces (reactjs.org)

React의 특징으로는 선언형 스타일을 사용하며, Javascript를 이용한 컴포넌트 기반의 아키텍처를 사용합니다. 그리고 강력한 추상화 기능을 제공합니다.

Javascript Native 기능을 이용하는 문법을 사용하기 때문에, 다른 프레임워크에 비해서 빠르게 습득할 수 있으며, Virtual DOM 방식을 이용해서 UI 속도가 매우 빠릅니다.

현재 (2021.08.20) React는 17.0.2 버전이 출시되어 있으며, 버전 18이 준비 중 입니다.

React 프로젝트로 "원활히" 개발을 진행하기 위해서 먼저 node.js 를 설치합니다.

명령 프롬프트를 실행하여 프로젝트 폴더로 이동해서 아래 명령어를 입력합니다.

npx create-react-app my-app

my-app 이라는 폴더가 생성되고 기본 프로젝트 코드가 생성됩니다.

현재 설정된 패키지 버전은 다음과 같습니다.

yarn 혹은 npm 명령어를 이용해서 프로젝트를 실행합니다.

yarn start

혹은

npm start

처음 실행시에는 필요한 라이브러리를 다운로드 받기 때문에 시간이 조금 걸릴 수 있습니다.

웹브라우저에서 http://localhost:3000 를 입력하면, 생성된 프로젝트 결과물이 나옵니다. (설정에 따라 포트 번호는 달라질 수 있습니다.)

아래와 같은 화면이 나옵니다.

Hello World 를 출력해 보기 위해서, src 폴더에 있는 모든 파일들을 삭제하고,

index.css, index.js 파일만 새로 생성해 보았습니다.

아래 파일들 삭제

신규 파일 생성

index.js 파일을 열어서 아래와 같이 코드를 작성합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var element = React.createElement('h1', null, "Hello World!")
ReactDOM.render(element, document.getElementById('root'))

저장 후 웹브라우저를 리프래시 하면 아래와 같이 나옵니다.

작성한 코드에 대해서 간단히 설명하자면,

React.createElement 매써드는 html 엘리먼트를 생성해서 돌려주기 때문에,

element 에는 <h1>Hello World!</h1> 에 해당하는 엘리먼트가 지정됩니다.

그리고, ReactDOM.render 매써드는 해당 엘리먼트를 렌더링해 줍니다.

코드는 element에 지정된 것을 root 라는 아이디를 가진 엘리먼트를 찾아서 렌더링 해주라는 의미이고,

public 폴더에 있는 index.html 파일을 열어보면, body 에 "root" 라는 아이디를 가진 div 엘리먼트가 있는 것을 확인할 수 있습니다. 

Ionic 프레임워크에 대해서 소개하는 글입니다.

Ionic 프레임워크는 웹 기술(html, css, javascript)을 이용해서 모바일 / 데스크탑 앱을 만들어 주는 오픈소스 UI 툴킷이라고 정의하고 있습니다. 현재 Angular, React, Vue 를 지원하고 있습니다. 부가적으로 Appflow 등을 이용하면 앱 빌드 및 배포도 편리하게 관리할 수 있습니다.

Ionic document 사이트

Ionic Framework - Ionic Documentation

Ionic 으로 앱을 개발하기 위해서는 Node & npm 만 설치되어 있으면 됩니다. 그 외에 개발시 사용할 editor로는 Visual Studio Code를 권장한다고 합니다. 

Ionic 설치는 터미널에서 진행합니다. Windows의 경우 Window 키를 누르고 cmd 라고 입력하면 명령 프롬프트가 검색되는데, 클릭 (혹은 enter를 입력) 해서 실행합니다. (혹은 Powershell에서 작업하셔도 됩니다.) 

명령 프롬프트에서 아래와 같이 입력하고 enter를 입력해서 ionic-cli 를 설치합니다. (install 대신 i 라고 입력해도 됩니다.)

> npm install -g @ionic/cli

Ionic 설치는 global로 진행되기 때문에 어느 경로에서 설치해도 상관 없지만, 프로젝트를 시작할 때는 시작할 경로에 가서 실행합니다.

아래 경로에서 프로젝트를 생성한다고 가정하고, 아래 명령어를 입력해서 ionic 프로젝트 폴더로 이동합니다. (입력 전에 탐색기를 이용해서 C:\Projects\ionic 폴더를 만들어 주세요.)

> cd C:\Projects\ionic

이제 아래 명령어로 ionic 앱을 생성합니다.

> ionic start myApp

실행을 하면, 프레임워크를 선택하라고 나옵니다. (Ionic 6.12.3 기준)

파란색 커서를 화살표 키로 위 아래로 움직여서 프레임워크를 선택할 수 있습니다. 원래 Angular가 기본이었는데, 요즘 핫한 React를 본격적으로 지원하는 것 같습니다. 본인이 익숙한 프레임워크를 선택하면 되는데, 저는 React를 선택해 보겠습니다.

프레임워크 선택 후에는 템플릿을 선택하라고 나옵니다.

역시 커서를 움직여서 선택해 주면 됩니다. 자유도가 높은 blank로 시작할 수도 있지만, 생성 후 간단한 화면을 보기 위해서 sidemenu 를 선택해 보겠습니다.

템플릿을 선택하고 나면, 프로젝트가 생성되고, 해당 프로젝트에 필요한 모듈들이 설치가 됩니다.

마지막에 Ionic 계정을 만들거냐고 물어보는데, 일단 N을 눌러 만들지 않고 넘어 갑니다. 

설치가 끝나고 나면, 다음에 해야할 액션들에 대해서 설명을 해줍니다.

cd 명령어로 생성된 프로젝트 폴더로 가서, ionic serve 명령으로 앱을 실행할 수 있다고 나와 있습니다.

> cd myApp
> ionic serve --no-open

--no-open 은 실행 후 브라우저가 자동으로 열리는 것을 막는 옵션입니다.

정상적으로 실행되었다면, Development server running 이라고 나오면서 접속 URL을 알려줍니다.

웹 브라우저를 열어서 주소를 입력해 봅니다. 보통 8100 포트가 사용되고 있지 않으면 8100으로 설정되지만, 사용중인 경우에는 다른 포트 번호로 세팅 됩니다.

http://localhost:8100

실행해 보면 다음과 비슷한 화면이 나옵니다. (화면크기에 따라서 보여지는 내용이 조금 다를 수 있습니다.)

왼쪽 메뉴들을 눌러보면 오른쪽에 각각에 연결된 페이지가 나타납니다.

Visual Studio Code를 이용해서 프로젝트 폴더아래 있는 src 경로의 소스를 편집해서 앱 개발을 할 수 있습니다.

다음 포스트에서는 android 앱을 빌드해 보겠습니다.