[JAVASCRIPT 공부일지] 2주차 - 1 (리액트 네이티브 앱 개발 React-Native)

2주차부터는 '리액트 네이티브' 앱 개발을 시작하려고 합니다. 그러기 위해서는 리액트 네이티브 (기술)와 Expo (도구)를 설치하여야 합니다. 이후 앱 화면을 만들고, 리액트 기초를 공부해보겠습니다.

---

< 리액트 네이티브? >

리액트(React) + 네이티브(Native)의 합성어로,

자바스크립트 언어 하나로 안드로이드 앱과 ios앱 두가지 모두 만들어주는 라이브러리를 말합니다.

cf) 라이브러리 : 개발할 때 사용하는 도구

< Expo ? >

 안드로이드 & iOS 코드를 몰라도 개발이 가능하게 해주는 도구이자, 개발중인 앱을 쉽게 확인해주는 앱을 제공하는 도구
즉 Expo는 "개발 중인 앱 테스트"를 위한 Expo 클라이언트 앱을 자바스크립트 형태로 제공해줍니다.

>> Expo Client 앱을 다운받아 실제로 개발중인 실시간으로 화면을 확인할 수 있습니다.
기존에는 기기를 컴퓨터에 연결하거나 가상환경으로 확인을 했지만 Expo Client 앱은 Expo서버를 명령어로 실행시킨 후, 
QR코드를 찍어서 확인해보면 만들어낸 환경을 보여줍니다.

---

<터미널로 도구 설치 - 리액트 네이티브 / Expo / Node / NPM 설치>

1.

npm install -g yarn

>> 자바스크립트를 설치하는 효율적인 도구인 npm을 설치 후,
>> 더 유용한 도구인 yarn을 npm으로 설치

2. Expo 명령어 도구 상자를 설치

npm install -g expo-cli

>> -g : 전역적 설치 (어디서든 사용할 수 있도록)
>> Expo : 명령어들을 제공해주는데, 프로젝트 생성, 실행, 프로젝트 빌드 등 여러 기능의 사용이 가능합니다.

3. Expo 가입 및 로컬에 Expo 계정 세팅

4. expo 로그인 명령어로 expo 실행

expo login --username gnob

5. vscode를 열고 앱 만들기

expo init ( 프로젝트 명 )

6. 템플릿 고르기 (방향키 조작) 
- blank 커서에서 Enter
- yarn을 통해 필요한 도구 설치 및 서버를 실행

7. cd (change directory)를 통해 현재 만들어진 폴더 (프로젝트 명) 폴더로 이동

cd 프로젝트 명

8. 본격적으로 expo 실행 

expo start

>> 오류발생시 npm install 로 재설치 후 실행

9. QR코드를 스마트폰으로 촬영하여 연동
>> 컴퓨터와 휴대기기의 인터넷 환경(Wi-Fi 등)이 동일해야함

---

<expo 구성 폴더>

1. assets 
: 이미지나 리소스들을 관리하는 폴더

2. App.js
: 보여지는 화면이 될 것

3. app.json
: 리스트와 딕셔너리의 복합구조 = JSON
(나중에 앱 배포할 시 앱에 대한 설명서) + (앱 이름, 앱 버전, 앱 아이콘 등 설정 가능)

---

<JSX>

:  JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.

1. 함수는 앱화면에 해당

2. 경고 오류를 발생시키지 않기위해 App.js 에 

console.disableYellowBox = true;

3. JSX는 태그로 화면을 그리는 것
<jsx문법>
       내용
</jsx문법>

4. Expo는 반환값을 받아서 기기에 그려주는 과정입니다.

cf) (반환한다 = 렌더링한다)
cf) (태그 = 엘리먼트)

---

<JSX 규칙>

1. 모든 태그는 리액트 네이티브에서 꺼내서 사용

import ( ) from 'react-native';

>> 여기서 'react-native'는 도구상자이며, 라이브러리라고 합니다.

2. 태그는 각기 다른 방식으로 열리고 닫힙니다.
>> 각기 방법이 다르기때문에 공식문서를 참고하시면 됩니다.
>> 모든 태그는 항상 바깥에 감싸는 태그가 있어야합니다.

3. JSX문법 안에서 주석 사용

 {/* 주석처리 */}

>>  {/* 주석처리 */}으로 감싸주셔야합니다.
>> 단축키 Ctrl + / : 선택된 영역이 주석처리됩니다.

---

다음 공부일지에서는 자바스크립트에서 화면을 구성하는 엘리먼트에 대해 다뤄보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.