JS의 기본 (3)

29 Sep 2021

My 33th Post

by Enterprise Kim.T.H

const reactJS = (react) => {
  if (react) {
    console.log("react에 대해서 배워보자!");
  }
  console.log("다시 돌아온 일상");
};

오늘부터는 요즘 가장 핫(Hot!)하고, 그만큼 많이 사용되는 React JS에 대해서 알아보겠습니다.

저번에 잠시 설명한 것과 같이 React는 JS의 한 종류라고 할 수 있습니다.

JS에는 바닐라JS, Node JS등과 같이 여러 종류가 있고, React JS 또한 JS에 속하는 한 종류입니다.

기본적으로 React는 프로트엔드, 즉 우리가 실제 보는 화면을 구성하는 데에 특화되어 있습니다.

다음에서 React JS의 엄청난 장점을 알아보겠습니다.

React가 많이 쓰이는 이유 중 첫번째는 모바일 앱과 웹페이지를 모두 만들 수 있기 때문입니다.

즉 플레이 스토어에서 다운 받는 그러한 앱을 만들 수 있을 뿐만 아니라 웹페이지도 작성이 가능하다는 말입니다.

두번째로는 개발 시간이 매우 빠르기 때문입니다.

여기서 개발 시간이 빠르다는 것을 체감하지 못할 수도 있는데요.

React로 웹디자인을 하는 것과 HTML로 웹디자인을 하는 것은 어림잡아 우사인 볼트와 일반인이 100M경기를

하는 것에 비유할 수 있을 정도로 개발 속도가 매우 빠릅니다.

개발 속도가 빠른 이유는 Hot-Loading이라는 혁신적인 기능 덕분인데요.

Hot-Loading이라는 기능은 쉽게 말해 ‘자동 새로고침’이라고 할 수 있습니다.

일반적으로 HTML이나 JSP같은 경우 코드를 수정하고 해당 페이지를 새로고침 해야만 수정한 결과를 확인할 수 있습니다.

하지만 React는 코드를 수정하고 저장하는 동시에 해당 페이지를 자동으로 새로고침해줘서 수정을 하면서

바로바로 결과를 확인하며, 틀린 부분은 더 빠르게 수정할 수 있습니다.

마지막으로 React-Hooks라는 ‘함수형’ 프로그램기법을 통해서 코드를 간소화하고

동작을 더 빠르고, 편리하게 처리할 수 있습니다.

React-Hooks는 아직 너무 어렵게 다가올 수 있기 때문에 다음에 기회가 되면 다루도록 하겠습니다.

먼저 React를 사용하기 위해서는 React 프로젝트를 만들어야 합니다.

React 프로젝트를 만드는 명령은 CLI환경에서 가능합니다.

여기서 CLI란 Command Line Interface의 약자로 우리가 흔히 말하는 검은창을 말합니다.

영화에서 보면 해커들이 검은창에 뭐라고 입력을 하면 결과들이 쭉 나오는 것을 볼 수 있는데

우리가 앞으로 사용할 검은창이 바로 그 창입니다.

Windows환경일 경우 프로그램 검색창에서 cmd라는 프로그램을 검색해서 실행해주면 되고,

Mac환경일 경우 Launchpad에서 기본앱에 Terminal이라는 프로그램을 실행하면 CLI환경이 됩니다.

종료하고 싶으면 언제든지 창닫기를 눌러도 되고, 안전한 방법은 ‘exit’을 입력하여 빠져나가는 것이 안전합니다.

기본적으로 node.js가 설치되어 있어야지만 React 프로젝트를 만드는 명령을 실행할 수 있습니다.

하지만 지금은 시간이 많이 없음으로 프로젝트 생성 명령어만 알아보고 마치도록 하겠습니다.

위에서 열어준 CLI환경에 아래의 코드를 입력하면 자동으로 프로젝트를 만들어줍니다.

npx create-react-app [프로젝트 이름]

여기서 맨 앞의 npx는 node.js를 설치해야만 사용할 수 있기 때문에 다음시간에 알아보도록 하겠습니다.

오늘은 React가 무엇이고 프로젝트를 생성하려면 어떻게 해야하는지에 대해서 알아보았습니다.

사람에 따라서는 CLI환경을 쓰는 것이 지루하고 힘들 수도 있지만 나중에는 CLI환경이

더 편해지기 때문에 처음부터 너무 부담을 갖지 않으셨으면 좋겠습니다.

다음 시간에는 node.js를 설치하는 방법에 대해서 알아보겠습니다.

그럼 안녕 !

Good Bye ~