일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- vision-camera
- 자동로그인
- React
- 뒤로가기구현
- makePermutation
- 페이지리렌더링
- 순열
- Flatlist
- 모달에서뒤로가기
- TextInput
- API
- algorithm
- JSON
- react-native
- 리액트 네이티브
- C++98에러
- 리액트네이티브
- 가격자릿수
- 2023년 정처기 필기
- 알고리즘
- touchableopacity
- Icon
- fcm push
- 모달
- fcm 푸시
- ReactNative
- modal
- 재귀함수
- asyncstorage
- 리액트
- Today
- Total
생각은 길게 코딩은 짧게
[React] 리액트 환경설정 본문
안녕하세요 세히이 입니다:) 자바를 끝내고 React를 처음 시작하였는데 많은 삽질 현장들을 여기에 기록해보겠습니다...
리액트 시작해봅시다 ~~~
React는 webpack과 babel을 사용하기에 Node.js 가 설치되어 있어야 합니다
Node.js 설치하기 : nodejs.org/en/
- 13버전이하 아니면 17버전은 쓰면 안됨.
- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋음.
- 설치 중 chocolatey 어쩌구는 설치 안해도 됨.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
01.basic이라는 폴더를 만들어줍니다
-> 디렉토리 파일을 꼭 소문자로 만드세요!! 저는 대문자로 만들었더니 오류가 나서 찾아보니 소문자를 권장한다고 합니다
권장인데 왜 오류가 떠...?!
폴더 안으로 들어가 cmd창을 켜주세요
노드프로젝트 생성해주는 명령어
> npx create-react-app .
(처음에는 오래 걸림)
cmd에 명령어를 입력해주면 요로코롬 다운로드가 되면서 Happy hacking! 이라고 나온답니당
폴더를 보시면 많고도 많은 아이들이 생긴 것을 보실 수 있답니다 :)
이제 실행을 해줘야겠죠 실행을 해주는 명령어
> npm start
입력해주시면 웹 서버 3001번으로 실행된 것을 보실 수 있습니다
보통 3000번으로 실행되는데 3001번인 이유는 3000번에는 다른 프로젝트가 실행되고 있기 때문이에요
코딩 툴은 VSCode를 사용할 것입니다
- VSCode가 javascript에 최적화 되어 있기 때문
VSCode 설치하기 : https://code.visualstudio.com/
여기서 꿀팁!! 파일 크기가 너무너무 크므로 다른 컴퓨터로 이 파일들을 옮기고 싶을 때는
「src 폴더와 package.json만 폴더에 넣고 노드 프로젝트 생성하는 명령어를 입력해 준 뒤 npm start만 하면 된다는 것」
사실 리액트 시작한지 꽤 됐는데 이제야 기록을 한답니다 끄악...!! 오늘부터 여태까지 한 것들 열심히 기록해보겠습니다.