❏ react - react 시작하기! (Creat React App)
안녕하세요!
오늘부터 react를 시작하면서 처음 실행하는 환경을 구축하게 되었는데요. ^^
그렇기에 개발환경을 구축하는 방법에 대해서 알아보겠습니다.
먼저 리엑트 홈페이지로 들어갑니다.
👇👇👇 바로가기 👇👇👇
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
공식홈페이지에 들어왔습니다!
공식홈페이지에는 다양한 정보가 있다고 하니 들어가서 읽어보면 좋다고 합니당.
가운데의 시작하기 버튼을 눌러주세용!
클릭 후 보이는 화면입니다.
저는 Creat React App으로 세팅을 하려고 하니 옆 메뉴의 새로운 React 앱 만들기 버튼을 눌러주세요.
그러면 보이는 화면은 아래와 같습니다.
아래로 스크롤해서 내려주시면...
추천 툴체인이라는 카테고리가 나오는데요.
저는 계속 말했듯이 Creat React App을 사용할 테니 Creat React App버튼을 눌러주세요.
짜잔
그러면 Creat React App의 깃허브 페이지가 나홉니다.
그냥 보시고 옆에 있는 Creat React App 홈페이지 주소를 눌러주세욥
👇👇👇 바로가기 👇👇👇
Create React App
Set up a modern web app by running one command.
create-react-app.dev
링크를 타고 들어가면 이러한 메인 화면이 나타납니다!
그럼 아래로 스크롤을 내려주세요.
이러한 화면이 나타납니다.
이렇게 마지막에 프로젝트를 담을 디렉토리 명까지 적혀 있습니다.
이건 터미널에 작성을 하게 되며 npx를 사용하려면 먼저 Node.js가 우리의 컴퓨터에 깔려 있는지 확인을 해야 합니다,
"나는 깔려 있다!' 하시는 분들은 넘어가시고
'나는 깔려있지 않다.' 면 아래의 링크를 들어가서 설치를 해주시면 됩니다.
👇👇👇 Node.js 설치 바로가기 👇👇👇
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
먼저 바탕화면에 디렉토리 폴더를 하나 만듭니다.
저는 react-app로 만들겠습니다!
만약 그냥 react라고 폴더명을 정하시면 에러가 뜨니 꼭 뒤에 다른 명을 적어주시거나 다른 폴더명을 사용하셔도 됩니다.
자 그럼 돌아와서 vs코드로 폴더를 오픈해주세요!
그리고 상단 메뉴의 터미널 > 새 터미널 버튼을 클릭해주세요!
그럼 이렇게 하단에 터미널이 뜨게 됩니다.
그럼 우리는 이제 명령어를 사용하여 vs코드를 제어할 수 있습니다.
그럼 이제 환경을 구축해 보겠습니다.
다른 디렉토리가 아니고 해당 디렉토리에 구축을 할 거 기 때문에 . 으로 작성해주세요!
막 여러 가지가 뜨는데요.
설치가 필요하다면 y를 누르시고 전부다 설치를 해주시면 됩니다!
저 같은 경우도 이렇게 여러 가지를 설치하고 업데이트가 되었습니다!
근데 이거 너무 귀엽더라고요ㅠ
자 아래와 같은 게 터미널에 나타났다면 진짜 다 왔습니다.
진짜 다 왔습니다!
여기서 npm start라고 명령을 작성을 해주시면...
이러한 하나의 브라우저가 뜨게 되면서 환경구성은 끝나게 됩니다...
고생많으셨습니다!
다음시간에는 소스코드 수정방법에 대해서 알아보겠숩니다!!
（っ ‘ ᵕ ‘ ｃ）