들어가며

react는 자바스크립트의 대표적인 웹프레임워크입니다. 웹프레임워크는 웹개발을 도와주는 도구를 의미해요. react가 왜 대표적인 웹프레임워크일까요? 그건 바로 전 세계의 개발자들에게 가장 인기있는 웹개발 도구로 인정받았기 때문입니다.

2021 Developer Survey - Stackoverflow
질문: 어떤 웹프레임워크를 가장 선호하나요?

2021년의 가장 인기있는 웹프레임워크는 react 였습니다. 절대로 흔들리지 않을 것 같던 jQuery의 아성이 무너졌네요.

• 2021년: 1위 react (40.1%), 2위 jQuery (34.4%)
• 2020년: 1위 jQuery (43.3%), 2위 react (35.9%)
• 2019년: 1위 jQuery (48.7%), 2위 react (31.3%)

이제까지 저는 주로 파이썬을 이용해서 웹개발을 했는데요, 파이썬 웹프레임워크로는 django 와 flask 가 있죠. 전문 웹개발자가 아니기도 했거니와, 평소에 데이터 엔지니어링을 주로 하다보니 파이썬을 다루는게 좀더 편했기 때문이예요. 이후 필요에 의해 자바스크립트를 다루게 될 때에도, 어찌된 일인지 (가장 유명했던) react 보다는 vuejs를 먼저 접하게 되었습니다. 어쨋든 돌아돌아서, 결국은 react를 만지는 기회가 오게 되었네요. (제가 이 얘기를 왜 하게 되었을까요. tmi... 🤤)

vuejs도 재밌습니다 😋. 나중에 기회가 되면 vuejs에 대해서도 다뤄볼 예정이예요.
vuejs 공식 홈페이지 바로가기

각설하고, 이 글에서는 react를 가장 빠르게 경험해보는 시간을 가져보려고 합니다. create-react-app 이라는 nodejs 패키지를 통해서요!

CRA 시작하기

create-react-app는 react 개발을 쉽게 시작할 수 있도록 도와주는 도구입니다. 다들 CRA라고 부르더라구요.
그런데 좀 이상하지 않으세요? react가 웹개발을 도와주는 도구인데, create-react-app은 react 개발을 도와주는 도구라니... 😳. 왠지 create-react-app 개발을 도와주는 도구도 있을 것 같은 너낌적인 너낌

사실 react 개발환경을 처음부터 구축하는 것은 많이 복잡합니다. webpack, babel 설정 등 초보 개발자가 넘어야할 벽이 좀 있죠. create-react-app은 개발자가 개발환경을 일일이 신경쓰지 않아도 되도록 만든 일종의 react 개발 템플릿이라고 생각하면 됩니다.

create-react-app에 대해서 자세한 내용을 알고 싶다면 여기를 참고하세요.

그럼 create-react-app으로 app을 만들어 볼까요? 터미널에서 아래 명령어를 입력합니다.
아참, app 이름은 my-app이라고 지었어요.

$ npx create-react-app my-app

npx는 오타가 아닙니다. 😅
npx는 npm에서 새로 제공하는 기능이예요. npm 5.2 버전 이후부터 쓸 수 있다고 하네요. 기본적으로는 "nodejs 패키지를 임의로 설치해서 실행하는 도구"라고 합니다. 좀더 자세한 내용은 여기를 참고해주세요.

만약 에러 메시지 없이 아래 내용이 출력되었다면 my-app의 기본 뼈대는 다 만들어진 겁니다.

Success! Created my-app at <설치된 디렉토리>
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

실행 중에 에러가 발생한 경우

혹시 아래 메시지와 유사한 내용이 터미널에 출력되었나요?

You are running Node 12.22.10.
Create React App requires Node 14 or higher. 
Please update your version of Node.

이는 현재 사용 중인 nodejs의 버전이 너무 낮다는 뜻입니다. create-react-app은 최소 nodejs 버전 14 이상에서 구동해요.
버전 14 이상의 nodejs를 사용하려면 아래의 명령어를 실행해주세요.

# 현재 설치된 nodejs 버전 확인하기
$ nvm ls
 
# 버전 14 이상의 nodejs가 없으면, 최신버전으로 설치하기
$ nvm install --lts

# 버전 14 이상의 nodejs가 이미 설치되어 있다면, 해당 버전으로 사용전환하기
$ nvm use <버전>

나의 첫 react app 확인하기

위의 과정을 다 거쳤다면, app은 이미 만들어진거예요. 좀 더 그럴듯한 app을 만들려면 더 많은 과정이 필요할 겁니다. 하지만 오늘의 목표는 create-react-app을 통해 만든 react app이 어떻게 생겼는지 한번 살펴보는 거예요. 🤠

create-react-app을 통해 my-app을 만들었다면, app 구성에 필요한 파일들이 아래처럼 자동으로 만들어집니다. (아래 이미지는 vscode에서 확인한 디렉토리 구조입니다)

현재 시점에서 세부적인 얘기를 하기는 힘들지만...
지금은, 내 입맛에 맞는 app을 만들기 위해서는 "src 디렉토리의 파일들을 편집해야한다" 정도만 알고 있으면 될 것 같습니다.

그럼 my-app이 웹페이지에서 어떻게 보이는 지 확인해볼까요? 터미널에서 아래 내용을 실행해주세요.

# my-app의 root 디렉토리로 이동하기
$ cd my-app

# my-app을 브라우저에서 열기
$ npm start

그럼 브라우저가 자동으로 열리면서, create-react-app이 만들어준 my-app으로 연결 될겁니다. (만약 자동으로 안열리면 브라우저에 http://localhost:3000 을 직접 입력해도 좋아요)

이렇게 생겼습니다. 축하해요, react로 만든 첫 앱이예요! (아직 아무 코딩도 안했지만) 🔥
오늘도 수고했습니다.