React 시작하기, node.js란 무엇일까, npm 다운로드

 

 

 

 

 

react는 웹 애플리케이션 개발 시 많이 쓰이는 라이브러리입니다. (저는 프레임워크라고 합니다 ㅎㅎ) 리액트는 자바스크립트 기반이기 때문에 js파일 내에서 모든 작업이 이루어집니다.

제가 생각한 React의 가장 큰 장점은 '사용자 지정 HTML'입니다

이를 컴포넌트라고 부르는데 html을 커스텀해서 간단하게 컴포넌트만 사용하면 연속적으로 사용할 수 있다는 거죠.

저는 특히 쇼핑몰처럼 상품 데이터만 바뀌고 같은 레이아웃이나 상품 박스가 연속해서 나올 때 편하게 코딩했던 기억이 있네요.

props, state, useEffect 등 매력 있는 기능이 많이 있으니 코딩할 맛 나더라고요.

 

 

nodejs는 어떤 프로그램일까?

nodejs는 JavaScript를 이용하여 서버를 구축하거나 실행시킬 수 있는 도구입니다. 쉽게 말해 우리가 컴퓨터에게 명령을 내리는 방식과 유사하게 동작한다고 보시면 됩니다. 또한 다양한 플러그인을 설치하면 좀 던 편리하게 활용할 수 있으며, 대부분의 경우 구글링을 통해 손쉽게 구할 수 있습니다.

Node.js는 자바스크립트 기반으로 하기 때문에 웹 개발자들이 이미 알고 있는 언어를 사용하여 서버 측 코드를 작성할 수 있습니다. 이로 인해 전체 개발 프로세스를 단순화하고 개발자의 생산성을 향상시킵니다.

접근도 편하고 정보도 많아 편리하게 사용할 수 있습니다.

 

 

 

nodejs에서 제공하는 패키지매니저npm은 무엇일까

npm은 Node Package Manager의 줄임말로 소스코드 없이 간편하게 원하는 패키지를 설치 및 삭제할 수 있도록 도와주는 서비스입니다. 예를 들어 특정 함수나 클래스를 만들고 싶을 때 해당 코드를 일일이 입력한다면 시간이 오래걸리겠죠? 하지만 npm 을 통해서 간단히 검색 후 설치/삭제 하면 되기 때문에 매우 편리합니다.

 

패키지 매니저는 yarn, gradle, bower, NuGet등 다양한 패키지 매니저가 있습니다. 이는 나중에 다뤄보겠습니다.

 

 

 

---

 

Node.js 다운로드

선 노드를 다운로드 해줘야 합니다. 자바스크립트 언어 엔진으로 구동됩니다.

 

Node.js

 

<주의>
다운로드 하시는데 개발환경에는 JAVA건 NODE건 개발 툴이건 모든 것을 안전이 확인된 버전을 사용하는 것을 추천 드립니다.
최신을 사용하면 좋은점도 있겠지만 터지면 멘탈도 같이 터질겁니다...

 

npm(NodePackageManager)은 위 사이트에서 node를 설치하면 자동으로 같이 설치됩니다.

---

다음으로 잘 다운로드가 됐나 확인을 해야 하는데 개발자들은 터미널(cmd)에서 버전을 확인합니다.

 

not found가 아닌 이렇게 버전이 나오면 사용할 준비가 돼있는겁니다.

저희는 이제 react를 구현할겁니다.

 

 

cmd가 위치한 파일을 자신만의 workspace위치로 이동하거나 바탕화면에 폴더하나 만들어서 cmd로 열어주면 손쉽게 이동할 수 있습니다.

CMD로 열어주세요!!

 

이제 이 폴더를 react workspace로 만들어 보겠습니다.

cmd창에

npm install -g create-react-app

create-react-app my-app

을 입력합니다.

 

 

npm을 이용해 -g옵션 create-react-app을 설치하고 (시스템 폴더 패키지 설치)

설치한 create-react-app으로 my-app이라는 제목으로 프로젝트를 생성합니다.

 

설치가 무사히 실행되기 시작했습니다.

설치가 끝나면 지정한 이름으로 폴더 하나가 생성되는데 이는

설치를 시작한 터미널에서 폴더로 들어가 줍니다.

cd myapp

하면 myapp폴더로 이동합니다.

 

마지막으로

npm start

터미널의 위치를 작업하고자 하는 폴더(workspace)로 이동하고 npm start를 하면

해당 주소창이 로컬 호스트로 찍히고 리엑트 로고가 빙글빙글 돌아가면 성공입니다.