내 아들은 효자인가 #1 - React 시작하기

[22. 5. 12]

ㅋㅋ.ㅋ.ㅋ.ㅋ..ㅋ...

타입스크립트로 바꾸면서 처음부터 다시만든 셈이 되었다.

타입스크립트로 진행할 생각이없다면 상관없지만,

아니라면 이글을 보는게 나을듯싶다.

https://sheep-h.tistory.com/11

내 아들은 효자인가 #2 - TypeScript로 변환하기

---

 

 

 

 

일단 작은것 부터 완성해나가서 내 흥미를 떨어트리지 않게 하는것이 목표!

때문에 간단한 front 화면 먼저 만들어 보기로 했다.

 

React 시작하기

React를 해본적은 있지만, 너무 오랜만에 하는 거라서 좀 찾아보기로 한다.

 

 

react 공식 홈페이지를 참고해서 만들기로 한다.

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

저 페이지를 보면 아래와 같이 적혀있는 부분이 있다.

 

React 팀의 추천 방법은 아래와 같습니다

• React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App.  ⬅️
• 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요..
• 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요..
• 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 한다면 더 유연한 툴체인.

 

아래 추천해준 방법중 첫번째 방법인 Create React App을 사용한다.

 

react 사용 조건

• Node 14.0.0 이상, npm 5.6 이상

 

 

 

1. 버전확인

나는 2개다 이미 깔려 있기때문에 설치하는 방법은 따로 다루도록 하고 버전만 확인해주겠다.

(+설치하는 방법은 기회가 되면 따로 포스팅을 해보겠다!)

//node 버전 확인
node -v

//npm 버전 확인
npm -v

 

 

 

2. react application 생성

아래 명령어를 터미널에 입력한다.

npx create-react-app [프로젝트명]

 

중간에 이런 문구가 나온다.

Need to install the following packages:
     create-react-app
Ok to proceed? (y)

해석 그대로 저 create-react-app 패키지가 해당 명령어를 수행하기 위해서 필요하니 설치하겠다는 의미다.

당황하지 않고 y를 입력해준다.

 

그러면 아래에 다음과 같이 성공했다며 실행하는 방법을 알려준다.

 

 

 

3. app 실행하기

아까 터미널에서 알려준 방법대로 실행해본다.

cd [프로젝트 이름]
npm start

 

아래와 같은 화면이 나오면 리엑트앱이 정상적으로 만들어진것이다!

터미널에 컴파일에 성공했다고 하면서 주소를 알려준다.

그 주소에 들어가서 아래와 같이 떴다면 성공이다!