-
react-native를 시작하면서/window 개발환경 설정/오류 해결_2app/react-native 2022. 4. 6. 16:38반응형
https://hwantech.tistory.com/108
이거 먼저 보고오세용 안 보고 오면 뭔 소린지 머름 머름 머름
- vs code 개발환경 설정
맨 밑에 네모 4개 눌러서
1. 한국어 언어팩 설치
2. c# 스크립트 설치
둘 다 했으면
타임스크립트 설치
위에 한국말 써져 있는 거 보면
터미널이라고 써져 있다 아님 ... 에 들어 있음
npm i -g typescript ts-node
입력 하면 설치 뜬다
그런데 이 부분 내가 실수 한 부분
이것때문에 하루 삽질했다....
https://reactnative.dev/docs/environment-setup
이 부분이 내가 놓친 부분 사실 나는 개발환경 블로그 짜집기 해서 깔았기 때문에
react-native cli 깔라고? ㅇㅋㅇㅋㅇㅋ~~~ 그래그랭 깔지뭐 ~~~
했다
하지만 typescript 기반은 expo cli 를 설치해줘야한다
그래야 나중에 프로젝트 뙇 진행하려하면 app.tsx 가 열린다
이건 이따 설명하겠다...
여러분들은 미리미리 알도롱롱 코로롱~~~
touch 프로그램 사용하기
scoop install touch
디렉토리 만들어보기
mkdir src
touch src/index.ts
code src/index.ts
index.ts 가 열리면
console.log("Hello world!"); 쳐보장
ts-node src/index.ts
그럼 콘솔창에 헬로 월드 뜬당 에러날일 일도일도일도 없음
prettier 설치
ctrl + shift + p 누르고
기본 설정(json) 옆에 제이슨 요거요거 꼭 있어야댕
열어서 이거 쳐주기!
{ "editor.formatOnSave" : true, "[typesscript]":{ "editor.formatOnPaste":true, "editor.formatOnSave" : true, "editor.defaultFormatter" : "esbenp.prettier-vscode" } }
그 다음
touch .prettierrc.js
파일열어서 더블클릭 아래 소스 입력
module.exports = { singleQuote: ture, semi:false }
드디어 모든 환경 변수 끄읏!!~!~@~!!!!
이제 run 해보장
명령 프롬프트에 아래 소스 작성
npx react-native init MyApp --template react-native-template-typescript code MyApp
그럼 비쥬얼이 열리는데
꼭 이렇게 app.tsx가 열려야 한다 jsx가 열리면
타입스트립트 기반 소스를 넣을 수가 없어서 에러 뜬당
jsx 열리면 expo.cli 가 제대로 깔려있는데 active cli uninstall 이 안되어있는지 꼭꼭 확인하깅
코드가 열리면 비쥬얼 안 터미널은 열어 요거요거 입력
npm start
ㅅㅅㅇ ㅅㅅㅇ 된다 되당~~~
npm run android
이제 내가 바라던 화면이 나오겠즤~~~~~ 했는뎅.... 둗ㅇ....
이게 무슨일이고.....
거짓말 안하고 5일 삽질했다....
처음에 무슨말인지 도통 감도오지않았다
무슨말인지 몰라서 하나하나 삭제 했다가 깔았다가.....
별의별 짓을 다했다 구글링해도 안나오고 정말 울고싶었다....
그래도 나란놈 포기하지 않긔....ㅎㅎ
결국 계속 들여다보니 오류가 무슨말인지 이해가 가기 시작했다
내가 해결한 방법
이제 알려주겠다.
[윈도우 앱개발] VS Code에서 React.. : 네이버블로그 (naver.com)
이 블로그 때문에 정말정말 도움 많이 됐당
doctor 꼭 해봐라.. sdk 버전 jdk 버전 버전 다르면 걍 아예 안됌.. 꼭 doctor 해봐야 한다..
1. sdk 31 버전으로 맞췄고
2. jdk 11 깔기 (oracle 가서 11버전 그냥 깔면된다)
3. jdk 환경변수 11버전으로 맞춰주기(시스템 환경 변수 편집으로 들어가서 없으면 새로 만들고 있으면
11버전 으로 바꿔주기 아마 1.8로 되어 있을 거다)
4. 안드로이드 스튜디오 gradle 버전 11로 맞춰주기
android studio project -> 상단 file -> settting -> buid 뭐시기 클릭 -> gradle
나는 안드로이드가 예전 버전이라 없는데 최신 버전
-> from 옆에 1.8로 되어 있을 거다 그걸 새로 깐 11로 맞춰 줌 끝!
다시 런해보장
..
드뎌 봤도다 이 화면....허ㅓ허허렁나엃ㄶㄴㄹ힌;알이ㅜㅁ 눙무루
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
진짜 또 안될까바 무서워서 여러번 런 했는데 이제 진짜 된다ㅜㅜ
이제 헬로 월드는 식은죽...
그건 쉬우니까 블로그에선 패스하겠당 무튼
저의 리액티 네이티브 개발환경이였슴다
다들 삽질하지 마시길 ㅜㅜㅜㅜ 빌어요웅 ㅜㅜㅜㅜ
반응형'app > react-native' 카테고리의 다른 글
<react-native>view 컴포넌트와 css 박스 모델/자원과 아이콘 사용하기 (0) 2022.04.11 <react-native> faker / error 확인 (1) 2022.04.09 <react-native> style 속성과 styleSheet API ... (0) 2022.04.09 <react-native> Button, alert, ... (0) 2022.04.09 react-native를 시작하면서/window 개발환경 설정/오류 해결_1 (0) 2022.04.06