TIL # 44 < React Native 1 - 초기 설정 / UI >

  개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

 

📖 React Native 공부 시작...!

 

  업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용

 

💡 문제점

react native 초기설정을 하고 npm start를 해서 qr코드를 휴대폰 expo앱으로 인식했을때 파란화면이 나오면서 network response timed out 이라고 error가 뜨는 문제가 발생

 

📌 시도해본 것

구글링 결과 방화벽 문제라고 해서 노트북 방화벽 설정에 들어가 인바운드 규칙에서 19000포트와 19001포트를 추가해줬다. ----> 실패

 

✨ 해결

package.json 부분에 
"scripts"-"start"에 --tunnel추가 (터미널 우회)
즉 ,"start": "expo start --tunnel",

= expo start --tunnel 으로 실행(npm start 대신) - 19002포트로 열림

 

⭐ 알게된 점

한가지 문제에도 여러가지 원인과 해결책이 있으니 한가지 해보고 안된다고 하지말고 여러 시도 해봐야 한다는것을 알게 되었다!

 

 

  오늘 새로 배운 내용

 

📖 < react-native 초기설정 >

1. 폴더생성

2. expo홈페이지에 project 생성

3. Vscode 열고 cli설치/새프로젝트 생성

npm install --global expo-cli

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

eas init --id [expo홈페이지 project id를 복붙]

npm start

 

4. 배포하기

 

vscode 터미널에서

eas update (엔터여러번)

 

📖< UI >

 

• div대신 View를 사용 <View><Text>test</Text></View> text꼭사용
  
  
• display: flex 안써도 된다! 기본적용되있음
  
  
• 웹과 다르게 기본flexDirection이 column이다
  
  
• 웹은 Rn은 (로컬이미지 가져올때)
  (firebase사용시) </image source={{url: "어쩌고"}} >
  
  
• TextInput 에서 onChange(웹) onChangeText(RN)
  
  
• ScollView 에서는 style 쓰면 안되고 contentContainerStyle={}을 사용해야한다
  
  
• 최상위 component를 로 감싸줘야 노치부분을 비워줄수 있다
  
  
• style 하는방법
  - 인라인스타일링 
  - stylesheet 사용
  - styled component 사용(emotion 라이브러리 사용추천)
  - tailwind

 

  참고할 만한 레퍼런스들

 

팀원분이 추천해준 Todo 리스트 만들기(참고해서 Rn 투두만들기를 해볼 수 있음)

https://velog.io/@soonmac/React-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

  회고

 

- React Native 앱공부를 시작하게 되었다. 앱공부 1주간 공부 열심히 하고 1주간 프로젝트 잘 해서 웹,앱에 대한 전반적인 지식을 쌓을수 있는 기회이니 최선을 다해야겠다!

 

  To-Do List

 

- React Native 실시간 강의 듣고 공부하기