앱개발 2주차 개발일지

오늘은 앱개발 종합반 2주차 개발일지를 적을 것이다 !
1주차보다 더 심화된 내용이라 그런지 더 열심히 들었다 필기만 봐도 그래보이지 않습니까?
이것저것 다 메모하다보니깐 꽉 채워서 적은 것 같다 ㅎ 사실 코딩은 이렇게 이론으로 아무리 알아봤자 실제로 할 줄 알아야 한다.
메모하는 습관보다는 직접 코드를 두드리는 습관을 길들이자. (다음부터^^)

2주차에선 드디어 ! 직접 앱을 만들어보는 시간을 가졌다
전체적인 한줄평 : 생각보다 간단하다
하지만 기본적인 틀을 반드시 알고 넘어가야 응용할 수 있겠다는 생각이 들었다.
첫부분에선 이해가 잘만 되어서 막 나 개발자 되는거 아님? 개발이 왜이렇게 재밌지 ㅎㅎ? 했는데 한 2-13 강의부터 바로 그런 생각 집어치웠다 (겸손해지는 순간^^)
아무튼..코딩도 공부 열심히 하면 그래도 해볼만하겠네? 생각이 처음 드는 순간였다

<<본론>>
*리액트(React)+네이티브(Native)
: 자바스크립트 언어를 하나로 만들게 해준다 (안드로이드&IOS 모두 가능!)

-> 리액트 네이티브를 알면 안드로이드 IOS 모두 다룰 수 있기에 굉장히 유리함

라이브러리란? 개발 도구 (Tool)

*Expo (휴대폰 어플에도 설치 expo client)
: 자바스크립트 언어를 하나로 만들 수 있도록 도와줌

(복습)
*Node, npm
: 자바스크립트 개발 환경 구축, 자바스크립트 앱 개발 도구를 가져와 사용

// expo, node, npm, yarn 설치 필수
1. MAC 에서는 terminal 창을 오픈한다. (command+space바 누르면 검색창이 뜬다 거기에 터미널 입력하면 됨)

2. terminal 에 node-v , npm-v 입력 (설치가 정상적으로 되었을 때-> 버전이 나온다 ex. v16.14.0)

사실 노드랑 엔피엠(?) 설치가 안되어서 입력을 했는데 계속 찾을 수 없다고 오류가 떠서 하루종일 맥북 붙들고 있었다. 이대로 앱개발 수업은 끝이 난건가..
엄청난 구글링 끝에 막 여러 코드로 찾아내고 그랬는데 결국 원인은 소프트웨어 업데이트였던 것.. 여러분 프로그램 설치시 무 조 건 컴퓨터 소프트웨어 업데이트부터!!! 뭔가 맥북이 더 심한듯 업데이트에 예민해;;
업데이트 오래걸리니 미리미리 해두시길 나도 업데이트 때문에 하루 지나서 수업 들음
아무튼 업데이트 하고 설치하면 ( 설치는 웹사이트 들어가서 하면 됨) 정상적으로 버전이 뜸.

3.terminal 에서 yarn, expo 모두 설치

npm install -g yarn
yarn -v // 설치 완료 확인 위와 마찬가지로 정상 작동시 버전 뜸

npm install -g expo-cli
-> 오류가 뜰 수도 있음 그러면 앞에 sudo 붙여 내가 이 컴퓨터 주인이다! 알려주셈

*npm: 노드 패키지 매니저 명령 실행하겠다!
install: 설치하겠다!
-g: 컴퓨터 전역적으로 설치!
expo-cli: 설치 할 패키지 이름

4.expo 가입
사이트에 접속하여 expo 가입을 한다. expo 는 플랫폼 (like naver) 과 같은 것, 앱을 개발하고 배포하는 역할을 한다.

이후, 로컬에 계정 세팅까지 해준다 (terminal로 연결)
expo login

이런 식으로 터미널에 연결까지 해주면 컴퓨터 vsc에서 코드를 작성하면 휴대폰에서 바로 확인을 할 수 있다. 오류가 나면 에러라고 빨간색 창이 뜨기도 한다.

<<파일 구경하기>>
-assets : 앱 동작, 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일 담는 폴더
-node_modules : 리액트 네이티브 & expo로 앱 만들며 설치하게 되는 많은 라이브러리들이 저장되는 장소
-App.js (왕중요!!!) : 리액트 네이티브 앱이 시작되는 곳!!! 앞으로 만들 앱의 모든 출발점
-app.json : 앱 이름, 출시 버전, 아이콘 등등 기본 정보 설정 파일

거의 세번째 파일만 다룬다고 생각하면 편하다! 이후에 실습과정에서도 App.js 에서 주로 활동했던 것 같다

<<본격적인 설명, 화면을 구성하는 태그 문법: JSX>>

JSX 문법상의 꺽쇠를 태그라고 부름<>
화면을 구성하는 최소한의 영역정도의 의미를 갖고 있음
*JSX 문법
: 화면에 그려주는 행위 = 렌더링 (rendering)
-App.js 가 이에 속하는 가장 핵심적인 부분! 앱의 화면을 그려주는 커다란 함수이다.
-return -> 화면에 표출되는 부분 (앱상)
- , -> 또 하나의 화면 그리는 문법

-import{StyleSheet,Text,View} from 'react-native';
//react-native 에 속하는 {StyleSheet, Text, View}
중괄호에 들어있는 것들은 사용할 수 있는 태그들이다!

모든 태그들은 공식 사용 설명서를 참고하여 가져와 사용한다 !!!

1.모든 태그는 가져와서 사용한다 (공식 사용 설명서)
프로그래밍을 잘하는 사람은 직접 코드를 막 짜서 직접 적는 것이 아닌 이미 만들어져 있는 틀에서 얼마나 잘활용하고 구현해내는가 이다. (라고 한다)

무조건 코드를 외우고 주입시켜야 된다고 생각했는데 공식 사용 설명서나 구글링을 통해서 이미 짜여져 있는 부분은 충분히 사용해도 된다고 한다.
오히려 권장한다. 복붙하는 개념이 아니라 소스를 가져와서 스며들게 한다는 쪽인듯.

2.태그는 닫는 것과 자체적으로 닫는 것으로 구분해야 된다 <>
3.모든 엘리먼트는 감싸는 최상위 엘리먼트가 필요하다 (없으면 오류가 발생)
4.return 문은 소괄호를 사용한다!
5.주석 구분
return 문 안에 있는 주석 -> JSX 문법 안에서 존재
밖-> 자바스크립트 영역

*주석 달기! 저번 시간에도 다루었지만 주석 작성은 프로그래밍 연습 과정에서 매우 중요, 연습뿐만 아니라 나중에 함께 작업하는 개발자와도 대화하기 편해짐

*VS코드 맨 아래쪽에 블럭처럼 쌓여있는 익스텐션에서 material icon theme, bracket pair colorize 를 설치하면 귀여운 아이콘과 알록달록한 색상으로 이루어진 코드를 볼 수 있음 (코딩의 소확행(?)

1)
화면의 영역, 레이아웃을 잡아주는 엘리먼트.
화면을 원하는 대로 분할 가능.

 <View style={styles.container}>
  <View style={styles.subContainerOne}></View>
  <View style={styles.subContainerTwo}></View>
</View>

2)
앱에 글 작성하려면 반드시 사용해야하는 엘리먼트.

 <Text>문자는 Text 태그 사이에 작성!!</Text>
 *문자는 Text 태그 사이에 작성하는 것이 매우 중요하다고 한다!

3)
앱 화면을 벗어나는 영역의 경우, 해당 엘리먼트로 감싸면 스크롤 가능!

 <ScrollView style={styles.container}> ... </ScrollView>

**각 태그들에는 style이라는 속성을 갖는다
이 속성은 파일 최하단에 작성한 스타일 코드 객체의 키 값을 부영해 엘리먼트들에 스타일을 줄 수 있다.
StyleSheet- 태그에 스타일 주는 방식! (리액트 네이티브에서 제공하는)
딕셔너리 하나를 만듬 예쁘게 정리

4)

<Button 
        style={styles.buttonStyle} 
        title="버튼입니다 "
        color="#FF0000" 
        onPress={()=>{
          Alert.alert('팝업 알람입니다!!')
        }}
      />
  
  버튼 안에 있는 문자는 title 속성에 값을 넣기
  버튼 색상은 color 속성에 값을 넣기
  onPress? -> 눌렀을 때 어떤 이벤트가 일어나게 하려면 !!
  ㄴ화살표 함수로 구현하여 함수를 만든 다음 연결해야된다
  
   onPress={() => {customAlert()}}
  

5)
임의의 영역과 디자인에 버튼 기능을 달고 싶을 때 주로 사용.
-> 화면에 영향 주지 않는 영역 가짐

이부분은 조금 까다로운듯..사실 이해가 좀 안되지만 넘어가버린 부분^^ 근데 버튼 엘리먼트는 본인의 영역을 가지기에 스크롤뷰처럼 카드 형식으로 만든 화면 같은 경우엔 버튼 태그를 사용하기 어렵기 때문에 해당 태그를 사용한다고 함! 앞으로 많이 써야하는 녀석이므로 친해져야 된다고 한다.... (ㅠ)

6)
앱에 이미지 넣기
1. assets 폴더에 있는 이미지 가져와 사용!
2. 외부 이미지 사용!
source 부분에 uri 사용

     <Image 
    source={{uri:'https://images.unsplash.com/photo-1424819827928-    55f0c8497861?fit=crop&w=600&h=600%27'}}
    resizeMode={"cover"}
    style={styles.imageStyle}
  />

7) flex (매우매우 중요!!)
영역의 레이아웃 결정 , 영역을 차지하는 속성
-상대적이다
ex. containerOne 1, containerOne 2 이면 전체 3등분한 뒤 , 1/3 가져가고 2/3 가져감

8) flexDirection
영역 방향
-row: 가로
-column: 세로 (기본 값)

이외에도 justifyContent, alignItems 등이 있는데.. 너무 어려워서 설명만 가볍게 듣고 넘겼 다..! 다 외울 필요없다니 조금 아껴두기 ㅎ 틈틈히 보면서 머릿속에 넣어봐야겠다

이러한 JSX 문법과, 추가적인 요소들로 앱 화면을 처음으로 만들어봤다.
앱 화면을 만들면서 모듈, 반복문, 조건문 등 1주차때 배웠던 친구들도 등장하였다.
이것까지 모두 작성을 해버리면 오늘 잠을 못잘 것 같아서 이론적인 부분에서만 마무리하려고 한다.

그리고 앱 화면 실습(?) 에서는 이론공부가 딱히 중요하지 않은 것 같다 물론 배경지식은 있어야 하지만 이를 백번천번 글로 말로 설명해봤자..코드를 작성하지 못하면 땡이다!
그래서 점점 메모하는 거나 이론 공부보다 실습 위주로 늘려나갈 계획이다 다음부턴 코드로 가득 찬 화면을 볼 수 있게 될 것 ㅎㅎ

또 다시 코딩초보운전사의 개발 일지를 봐주셔서 감사하고 도움을 주신다면 감사하겠습니닷 (꾸벅-)