따라하기 실습, 리액트편
02 환경설정과 헬로월드
프로그래밍을 하려면 프로그램을 몇개 설치하고 환경설정을 해야한다.
사실.. 시작하는 입장에서는..아니 경력자에게도,
프로그래밍 보다 어려운게 환경설정이다.
정말 시작인 반인 셈이다.
컴퓨터마다, 버전마다 설정이 조금씩 다르기 때문인데..
어떤 언어를 공부하든,
처음부터 끝까지, 튜토리얼과 발맞추기 어렵기 때문이다.
다만, 자바로 개발할 때 세팅하는 것과 달리
프로트앤드 라이브러리(또는 프레임워크) 리액트를 사용하면
설정은 거의? 안하고? 설치만 하는 것으로
상대적으로 쉽게
준비를 마칠 수 있다.
환경설정
01. 설치목록
자 이제, 아래 툴들만 설치하면 바로 시작할 수 있습니다.
vscode 코드를 작성하는 에디터 툴입니다.
node.js 후려쳐서 설명하면.. 작성한 코드를 실행하는 역할을 수행합니다.
yarn 패키지 도구로서.. 후려쳐서 설명하면..
다른 분이 만드신 코드를 가져오고 보관, 응용할 수 있도록 돕는 역할을 합니다.
| 비고 | vscode | node.js | yarn |
| 설치 링크 | https://code.visualstudio.com/ | https://nodejs.org/ko/download/ | https://classic.yarnpkg.com/en/docs/install#windows-stable |
02. 설치시작
OS가 윈도우10 기준 설치 방법입니다.
03. 시동걸기
리액트는
npm과 yarn을 사용해서
터미널 cmd(command의 약자)로 Hello World를 찍을 수 있습니다.
yarn은 아까 설치했고,, npm은 뭘까요? ;D
사실, npm은 아까 설치한 node.js에 포함되어 있어 자동으로 설치된 상태입니다.
1) 그럼, 먼저 cmd(command의 약자)를 실행하고
2) 명령어를 작성합니다.
yarn global add create-react-app
create-react-app hello-react
그러면 똬~
최종 확인은
브라우저 주소 창에서
그리고
...
여기서부터,
TMI ... 주의. 불필요하면 여기서 끝.
;D 만약,
cmd 창를 습관적으로
'닫기' 한 경우엔?
사실.. 이런 질문
또는 이런 상황에 봉착한 많은 이들이
비전공자 특히 문과생일 수 있다.
조금 더 적극적으로
조금 더 창의적?으로 응용하다가 길을 잃는 경우가 있다.
이런 경우는, 전문가의 튜토리얼에서도 찾을 수 없다.
><a
그래서 대부분 시작 단계에서 한참을 방황하다가
코딩을 접곤 합니다.
그래서 ,,, 갑짜기 ><
이런 무서운 화면이 나오면?
아까 성공한데로 따라가볼까? 하고
아까 명령어를 다시 입력하면....
create-react-app hello-react
아래와 같은 처음보는.. 메시지를 뱉는다 ><
사실.. 이런 질문
또는 이런 상황에 봉착한 많은 이들이
비전공자 특히 문과생일 수 있다.
조금 더 적극적으로
조금 더 창의적?으로 응용하다가 길을 잃는 경우가 있다.
이런 경우는, 전문가의 튜토리얼에서도 찾을 수 없다.
><a
그래서 대부분 시작 단계에서 한참을 방황하다가
코딩을 접곤 합니다.
암튼, 이런 경우엔
디렉토리 구조나 프로젝트 생성 구조를 모르는
시작하는 사람들이 종종 마주하는 이슈이다.
구체적으로 에러? 메시지를 살펴보면,
이미 hello-react 라는 이름의 폴더가 있고
The directory hello-react contains files that could conflict:
그 아래 node_modules/ 폴더, package.json 파일, public/ 폴더, src/폴더와 yarn.lock 파일이 있다고 한다.
Either try using a new directory name, or remove the files listed above.
다른 이름의 폴더를 다시 만들어서 하거나 이전에 폴더를 지우라고 하는 메시지이다.
돌이켜보면 create-react-app 문장은
리액트 프로젝트를 만들라는 명령어이고
뒤에 hello-react는 프로젝트가 설치될 장소의 이름으로 이해할 수 있을 것이다.
이런 경우 다시 만들면 불필요한 폴더만 생기는 것이기 때문에 아까 만들어놓은 폴더로 이동하는 편이 더 효율적이다.
cmd 창에서 아래 내용을 입력한다.
cd hello-react
cd는 과거 도스 명령어로 뒤에 있는 이름의 디렉토리로 이동한다는 뜻이다. 실행결과는 아래와 같다.
이렇게 아까 자동으로 생성된 프로젝트 폴더 안으로 들어올 수 있었다.
여기서 dir(디렉토리에 있는 모든 폴더를 알려주는 dos 명령어)을 입력하면,
아, 참고로
C 드라이브의 볼륨에는 이름이 없습니다. 볼륨 일련 번호: 56A1-D474
는 내 컴퓨터에서만? 있는 이슈다
드라이브의 이름에 없어서
일련번호라도 추가로 알려주고 있는 것이다.
일종의 컴퓨터 TMI
자, 원하는 위치에 왔으니
이곳에서 리액트를 실행해보면 된다.
리액트를 실행하는 방법은,
이번에 들어온 hello-react 안에서 아래 명령어를 실행하면 된다.
yarn start
그러면 아래 메시지가 나오면서
아까와 다르게,
실행결과를 브라우저 창을 알아서 띄워준다.
참고로 잊지 말아야할 것은
cmd창을 끄면 프로그램이 동작하지 않는다는 것이다.
아.. 이런-
코인깎는노인