[React] 개발 환경 설정(feat. node, vsCode) (Hello World 출력하기)

 

 

vsCode 설치 방법은 따로 설명하지 않았습니다.

기본 적인 설치 방법과 사용법 숙지가 필요합니다.

developing-move.tistory.com/25

node 설치 및 에디터(vscode) 설치

또한 node.js를 활용하여 진행할 예정이기 때문에 node에 대한 기초 지식도 필요합니다.

 

우선 초기 단계에서는 npm install 방법만 숙지하셔도 됩니다.

developing-move.tistory.com/42

[node] npm install하기

터미널에 npx create-react-app study 입력

여기서 study는 패키지 명(임의로 지정)

create-react-app가 바벨부터 시작해서 개발 환경에 모든 것들을 자동으로 setting 해준다.

 

npm이 아닌 npx 키워드를 사용한다.

• npm은 해당하는 패키지를 해당하는 디렉토리에 node.modulse라는 폴더를 만들어 실제로 설치하는 기능을 담당
• npx 를 실행하는 것이 목적이기 때문에 node.modulse라는 폴더 생성하지 않고 실행하는 것

npx 를 사용하는 이유는 이번 경우와 같이 create-react-app이라는 패키지를 실행할 것인데

추후에 별도의 pakage.json에 저장해서 사용할 것이 아니라 해당하는 커맨드 라인을 실행하는 것이 목적이기 때문

 

npx에 대해서 더 자세한 것은 해당 포스트에 나와있습니다.

developing-move.tistory.com/142

[Node] npx란?

 

node에 대한 지식이 없으신 분들은 그냥 따라서 입력하셔도 진행하는데 있어 문제가 없습니다.

 

 

설치가 완료되었으면 설치된 프로젝트 경로로 이동 및 npm start

localhost:3000 접속

 

 

hello World 출력하기

 

아래 이미지 경로를 참조하여 app.js 파일로 이동

app.js파일의 p태그 시작부터 a태그 끝까지 지운 뒤 <p>hello World</p> 입력

localhost:3000 재접속

 

아래 예시는 vscode 사용자를 위한 vscode 확장팩 설치 (vscode를 사용하지 않으시는 분은 넘어가셔도 무관합니다.)

필자의 경우 설치가 되어 있어 설정 이미지가 나오고 있지만 미설치 시 install 혹은 설치라고 나옵니다.

이후에 코드 가독성을 위한 Prettier 설치

chrome dev tool 중 React Developer Tools 설치

설치 후 react를 사용하는 사이트에 가면 아래와 같이 리액트 사용 중이라고 나옴

사용하지 않는 사이트는 아래와 같이 사용하지 않는다고 나옴

 

다시 instagram 페이지로 이동하여 개발자도구(F12)에서 아래와 같은 이미지가 확인 되면 정상적으로 chrome dev tool이 설치되었음을 알 수 있음

추후에 Components와 Profiler는 많이 쓰이게 됨