앱개발 강의 2주차 Note - (2) 앱화면 만들기 - Expo

앱개발 2주차 - (2) Expo 실행하기

 

앱개발 2주차. 지난주 자바스크립트 공부를 좀 하고, Expo로 본격 앱 화면 만들기 실습이다.

예전에 했던 html, css 프론트엔드 만드는 과정 같아서, 그렇게 어렵게 느껴지지는 않는다.

참 신기하구만..!

 

나중에 복습하면서 좀 깔끔하게 노트 정리를 해야할듯.

 

VS Code를 실행하고 폴더 지정해준다.

View > Terminal을 눌러 터미널 창을 켜주면 코딩 가능.

 

expo init sparta-myhoneytip-zero

(init은 expo로 프로젝트를 만든다는 의미)

 

 

blank. 도화지 상태다.

이제 yarn 이라는 반가운 도구가 보일 것임.

프로젝트를 생성했다.

 

cd(change directory) 는 이동 명령어

cd sparta-myhoneytip-zero

 

expo start

그러면 크롬 창이 뜬다. 

카메라로 QR코드를 찍으면 작업이 가능!

(expo client 앱 깔아야함)

그런데, 같은 네트워크 망에서 접속해야한다.

 

 

asset은 아이콘이나 이미지 등의 모음.

node_modules 는 앱을 개발할 때 쉽게 사용할 수 있는 도구들이 들어있는 폴더

App.js는 화면이 되는 파일. (자바스크립트)

 화면을 나타내는건 함수로 되어있다.

 

app.json (딕셔너리와 리스트의 복합구조!)

 - 앱에 대한 설명서라고 볼 수 있다.

 

<앱 화면 만들기> JSX 문법

 

폴더 열기를 하면 그 디렉토리에서 명령문을 칠 수 있다.

(굳이 cd로 안들어가도.)

 

App.js

꺾쇠 <~~> </~~> 로 된 것이 JSX 문법이다.

 

리액트 네이티브 개발하다보면 노란색 경고창이 든다. 에러는 아니고 권장사항 정도다.

안보이게 하는 코드를 넣을 수 있다.

 

App() {   함수 부분과 return 사이에

console.disableYellowBox = true;

작업하고 저장하면 앱에 바로 반영된다.

 

 

<JSX 기본 문법>

 

태그로 화면을 그리는 것을 뜻한다.

App.js 는,

App이라는 함수가, return에 있는 것을 반환한다.

여기서는 렌더링이라고도 한다.

태그는 엘리먼트라고도 한다.

 

JSX문법의 규칙

 

1. 모든 태그는 리액트 네이티브 주머니에서 꺼내서 써야한다.

원천 기술은 리액트 네이티브인데, expo라는 도구를 얹어서 쓰는 것이기에.

(그 의미는 상단에 import ~ from 'react-native'에 있다.)

 

import해오는 도구들은 라이브러리라고 부르기도 한다.

 

2. 태그가 열리면 닫는다. 단 일부는 스스로 열리고 닫힘

이러한 규칙은 공식문서에 나와있다.

 

https://reactnative.dev/docs/view

 

3. 모든 태그들은 최종적으로 감싸는 태그가 있어야한다.

그리고 전체 태그를 ( ) 로 감싸야한다.

 

Tip)

// 주석

ctrl / 는 범위 주석