인텔리j에서 리액트 개발환경 구성하기

인텔리j에서 리액트 개발환경 구성하기

React JS

---

 2016년 쯤 **통신사 프로젝트에 참여하게 됐는데 프론트 개발파트와 백엔드 개발파트를 나누어서 진행했었다.

 나는 백엔드 개발자 역할로 들어갔었는데 그 때 처음 SPA를 접하게 됐다.

 그 당시 프론트 개발파트에서 사용하던 JS 라이프러리가 React였고 특징, 장단점 등을 어깨너머로 익혔고 약간의 코딩도 해봤지만 CRUD를 모두 경험해 본 터는 아니었다.

 

 어느덧 7년이라는 세월이 흘렀다.

 요즘 참여하고 있는 프로젝트는 프론트, 백엔드 이렇게 나누어서 개발하는 곳은 아니다.

 운 좋게 대형 프로젝트인데 분석, 설계, 개발까지 모두 타임라인 순으로 모든 역할을 하고 있으며, 현재는 개발 단계로 프론트, 백엔드 이것저것 닥치는 대로 하는 중이다.

 오랜만에 자바스크립트를 하게 돼서일까  은근히 재미를 느끼는 중이며 이왕 하는 김에 짬짬이 React 공부를 시도해 보는 중이다.

 세상 참 좋은 게 집에서 무료로 공부를 할 수 있다는 게 너무 좋다.

 

공부 방법으로 책도 좋지만 은근히 나이가 들어 시력이 떨어진 상태다.

무료강의 없나 찾아보니 인프런 사이트에서 입문용으로 충분한 무료강의를 많이 제공한다. 추천~

 

인프런에서 제공하는 리액트 무료강의

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

인텔리J로 개발환경을 구성

내가 만난 프론트하시는 분들은 은근히 Visual Studio Code 툴을 많이 사용하는 것을 보곤 한다.

일하는 동네가 SI라 이클립스나 무료 툴을 주로 사용하는데 개인적으로는 인텔리 J를 가장 좋아한다.

인프런 강의에서도 비주얼스튜디오 코드로 환경을 설정하지만 난 인텔리 J로 구성했다.

1. Node JS를 설치한다.

2. NPX 명령어를 사용하려면 CMD 에서 Node js 설치 후에 한 가지 작업을 해준다.

   npm install npx -g 를 실행.  참고로 강의에서는 이 부분이 빠져 있다.

 

그 후, 오늘 포스팅의 목적인 인텔리 J에서 React 설정

New Project -> React 선택

프로젝트명을 원하는 대로 입력 후, Create 버튼 클릭

npx create-react-app

npx cmd 명령어가 이미 인텔리 J에 포함되어 있다.

node js 스타일의 폴더 구성을 하느라 약간 시간이 걸린다.

작업이 모두 끝나고 실행해 본다.

방법은 두 가지다. 인텔리 J 상단 Play 녹색 버튼 또는 터미널을 열고 고전적인 방식으로 npm start를 입력하는 법.

 

컴파일이 문제없이 끝나면 3000번 포트로 Node js 서버가 실행되며 index.js 페이지가 실행된다.