curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
//안되시는분들
//-bash: nvm: command not found <- 요 에러 나오면요,
//vi ~/.bash_profile <-vi 에디터로 파일을 연 다음 아래 코드가 있는 지 확인! 없으면 넣어주세요
//넣을 코드{
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
}
//그런 다음 **.bash_profile 파일 재시작** 해도 뭔가 계속 다시 설정해야 nvm이 된다면! .zprofile 파일에다 해보기!!
source ~/.bash_profile
nvm사용 https://nodejs.org/ko/download/releases/ 해당 주소로 들어가면 Node 버전 목록을 볼 수 있습니다. 주로 12 아니면 14버전을 사용합니다. d엑 이게 모지 (슬랙 즉문즉답에 물어보긴했는데 구글링도 해야지..구글링으로 바로 해결!)
>>>사용하던nvm1.1.8을 삭제하고nvm1.1.7로 다운그레이드하여 nvm use를 써보니 아래 사진처럼 해결되었다!
1. 일단 nvm 을 사용하기 위해서는 기존에 설치되어있는 Node 를 삭제 해야한다. ( 기존 Node 가 설치 되어있으면 nvm 에서 버전을 아무리 바꿔도 반영이 안되는 것 같다. ) → 제어판 가셔서 삭제하시면 됩니다.
Expo 프로젝트 생성 및 명령어 Expo 명령어 리뷰 겸 sparta-test 이름의 엑스포 프로젝트를 생성합니다. 명령어 화면에서 cd 명령어로 Desktop(혹은 바탕화면)으로 이동 후 Expo 명령어를 실행합니다.
✅Expo 프로젝트 생성 [expo init wegram] ✅Expo 프로젝트 실행 [expo start] 구글 플레이스토어 혹은 애플 앱스토어에서 Expo 클라이언트 앱을 내려받은 상태에서 여러분 휴대폰 카메라로 QR 코드를 찍으면 엑스포 서버와 연결된 상태의 앱이 보여지게 됩니다.✅vscode를 열어 Expo 명령어로 생성한 프로젝트를 열어서 확인합니다!
🚩🚩🚩🚩🚩시뮬레이터로 개발하고 싶으신 분들 참고!
👀시뮬레이터를 통한 앱 개발
이 다음 명령어 부터는 시뮬레이터를 이용해 개발하는 방법을 소개합니다. 시뮬레이터는 간단히 말해 가상의 휴대폰을 컴퓨터에 띄워 놓는 것을 뜻하며, 안드로이드 스튜디오와 xcode 프로그램을 통해 설치가 가능 합니다. 하지만 우리는 강의동안 실제 여러분 휴대폰에 설치한 Expo 클라이언트 앱으로 개발을 진행하기 때문에, 다루지는 않습니다. 하지만 시뮬레이터 설치 방법과 시뮬레이터를 통한 개발 방법을 다음과 같이 소개하오니, 여유가 되실때 한번 시도해보시기 바랍니다 :)
❓❓시뮬레이터? 시뮬레이터는 가상의 휴대폰입니다. 여러분들 컴퓨터에 가상의 휴대폰을 띄운 다음, 현재 개발중인 앱을 실행시킬 수 있습니다.
물론 가상의 휴대폰이라 다양한 디바이스 기종을 생성하여 띄울 수 있습니다. 하지만 원하는 기종 각각을 설치하여 실행 준비를 해두어야 합니다
❗❕안드로이드 시뮬레이터는 안드로이드 스튜디오에서 , IOS 시뮬레이터는 Xcode 기반에서 설치가 가능합니다. - 안드로이드 에뮬레이터 설치 1) Android Studio 실행 이번에는 SDK Tools에서 위 4 항목을 체크한 후 설치합니다.다음으로는 AVD Manager에 들어가서, Create Virtual Device를 눌러봅시다. 나중에 구글 플레이 스토어에서 테스트 해보고 싶다면, Play Store 마크가 있는 것을 선택해주시면 됩니다. 사이즈를 선택합니다. Next를 누르면 안드로이드 버전 선택을 해야하는데 가장 최신의 stable 버전을 설치하면 좋습니다.
램은 최소 8기가 이상!!!!필요
2)Xcode 시뮬레이터 설치 Xcode 시뮬레이터 설치 expo start --android 👉expo start와 동일하지만, Expo 서버를 켠다음 동시에 안드로이드 시뮬레이터를 작동시킵니다. 따라서 바로 개발하고 있는 앱을 시뮬레이터에서 확인할 수 있습니다 👉이 명령어로 안드로이드 시뮬레이터가 자동으로 실행되지 않는다!라면, 안드로이드 스튜디오에서 수동으로 안드로이드 시뮬레이터를 작동시킨다음 명령어를 실행시키세요
[Expo 개발 준비] 코드 스타일을 정하고 시작하자, Prettier
본격 개발 전, 코드 스타일 정하기 👌코드 스타일을 처음부터 정해놓으면 편합니다. 예컨대, 자바스크립트 문법 끝날 때마다 세미콜론 ; 을 찍을지 말지 문자열을 나타낼 때는 작을 따옴표를 찍을지, 큰 따옴표를 찍을지와 같은 규칙말이죠!
이러한 규칙을 미리 정하면 알아서 정해주는 도구가 있습니다. 바로 Prettier 입니다. 👉 이제는 vscode 에디터 자체 기본설정을 건드려야 하는데요! 맥은 shift + command + p , 윈도우는 Ctrl+, 을 누른 후 오른쪽 User Settings 쪽에 코드스니펫 코드를 넣어주세요 default setting은 맥에서나 윈도우에서나 건드리면 안 되니 반드시 user settings 인지 확인하세요!
vscode 유용한 도구
[앱 화면 만들기] JSX 기본 원칙 5가지
화면을 구성하는 태그 문법, JSX
👉 `App.jsx`는 JSX문법으로 그려져 준비된 화면을 반환합니다. 반환한다는 게 잘 와닿지 않는다면 단순히 화면을 그려준다고 생각하면 편합니다.
즉, 리액트 네이티브에서 `return`은 여러분이 작성한 JSX문법으로 구성된 화면을 앱상에 보여주는 역할을 하는 겁니다.
😁 JSX문법을 화면에 그려주는 행위, 이 동작을 이제 우린 렌더링(rendering)이라 부릅니다.
👉 `<View>` `<Text>`와 같이 꺽쇠로 쓰여져 있는 것들은 리액트 네이티브에서 JSX라고 부르는데 이는 또 하나의 화면을 그리는 문법입니다.
😁 JSX 문법상의 꺽쇠를 태그라고 부르고, `<View>`영역 `</View>`과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할 때 JSX에선 이를 엘리먼트라 부릅니다.
화면을 구성하는 최소한의 영역정도의 의미를 갖고 있습니다. 이 JSX 문법은 사용방법이 정해져 있습니다. 리엑트네이티브에서꺼내온다!(1) + 리턴문 소괄호 필수(4)공식문서 발췌 내용 감싸는 태그 있어야함 개발자는 주석을 통해 소통한다 ㅇㅅaㅇ
[앱 화면 만들기] JSX 주요 태그와 속성 살펴보기(1)
<View></View>
👉화면의 영역(레이아웃)을 잡아주는 엘리먼트입니다. 현재 App.jsx 상에서 View는 화면 전체 영역을 가집니다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할 할 수도 있습니다.
하지만 View로 화면을 분할하고 영역을 잡아나가려면 오늘 배울 스타일 문법(StyleSheet)을 활용해야 합니다. 바로 Flex죠! 바로 다음 챕터에서 자세히 다뤄보도록 하겠습니다! (앱개발종합반 강의 봐주세요`!)
<Text> 기본&심화 👉앱에 글을 작성하려면 반드시 사용해야 하는 엘리먼트입니다. 바로 위에서 배운 View 엘리먼트 안에서 문자를 작성하면 오류가 발생합니다. 반드시 문자는 Text 엘리먼트 안에서!! ✔ Text 줄바꿈01 또는 특정 부분만 띄우고 싶다면 {"\n"} 표현식을 사용해서 구현할 수도 있습니다. ✔Text 줄바꿈02 제공되는 엘리먼트, 즉 태그들에는 기본 속성들이 있습니다. numberOfLines 속성을 이용하여 긴~글에서 몇 줄만 보이게 할지 결정할 수 있습니다!
이게 가능하려면 <View>태그가 감싸고 있는 <Text> 태그여야 합니다!
태그의 속성이란 건 <Text numberOfLines={3}/> 과 같이 태그 안에 자리한 키와 벨류의 쌍을 뜻합니다.
[앱 화면 만들기] JSX 주요 태그와 속성 살펴보기(2)
<TouchableOpacity/> & 다양한 함수
함수를 어떻게 사용했는지에 집중해서 살펴봅시다! 직접 구현하고 하나씩 눌러보면 바로 이해가 갑니다!
onPress={() => { customAlert('값을 함수로 넘겨줄 수도 있습니다.'); }}
onPress={() => customAlert()}
onPress={customAlert2}
정의한 함수에 데이터를 넘기고 싶으면 () => customAlert() 형태로!
아무데이터도 안넘기고 정의한 함수 그대로 실행시킨다면! 바로 onPress={customAlert2}
함수이름만 onPress에 연결! 쉽죠?
<Image> 앱에 이미지도 넣어봐야겠죠! 두 가지 방식이 있습니다. assets 폴더에 있는 이미지를 가져와서 사용하는 방법과 (import) , 외부 이미지 링크를 넣어서 사용하는 방식입니다(uri). >>상세 내용은 앱개발종합반 강의 봐주세요!
다양한 태그 사용법은 Expo 공식 문서 보기! 아주 기본적이고, 좀 더 알고 있으면 응용할 수 있는 내용들을 조금 더 다뤄봤습니다. 앞으로 다양한 태그들을 사용할 일이 있을 텐데요! 1) assets폴더를 새로운 이미지 넣었는데 expo가 인식 못함 2) 이미지 정확한 사이즈 안 넣어줌 등,, 그럴 때마다 방황하지 말고! 엑스포 공식문서에서 검색 후 사용해봅시다!
리스트 자료형으로 값을 넘기면 됩니다. 그러면, 태그의 style 속성은 세 값을 넘겨 받고, 옷을 차례대로 입혀나갈 수 있게 됩니다. 이렇게 할 경우, 스타일 태그를 외부에서 관리하여 좀 더 체계적인 코드 관리가 가능해집니다.
[앱 화면 만들기] 화면에 구역을 나누는 Flex ✅Flex 간단 정리 앱 화면을 구성할 때 사실 flex가 가장 중요하다고 봐도 과언이 아닙니다. 영역의 레이아웃을 결정하는 자세한 부분도 앱개발 종합반 1-2주차 기본 설명에 있어요 :)
👍flex - 영역을 차지하는 속성입니다.(상대적) 👍flexDirection - 자리잡은 영역의 방향 (row는 가로 방향, column은 세로방향으로 영역을 배치) 부모의 영역을 나눠 갖는다! 👍justifyContent - justifyContent는 flexDirection과 동일한 방향으로 정렬하는 속성입니다 기본값은 상하! 👍alignItems - Align Items는 Flex Direction과 수직한 방향(반대 방향이라고 생각하면 편합니다)으로 정렬하는 속성입니다. 👍alignSelf- 개인적으로 가장 많이 사용하고 있는 속성입니다. 부모 태그가 Flex가 쓰여 레이아웃 결정 영역 안에 있다면 내부에 있는 자식 태그들은 이 alignSelf를 사용함으로써 간단하게 가운데 정렬을 할 수가 있습니다.
[리액트 기초 복습&활용] 컴포넌트에 대한 이해와 props(속성) 활용
공부할 리액트 필수 지식 👉 다시 떠올리자면, 리액트 네이티브는 리액트(React.js) 라이브러리 기반으로 만들어진 프레임워크 입니다. 그렇기 때문에 기본적인 구조는 리액트를 닯아 있습니다.
대표적으로
1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터! 3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달! 4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳
네 가지가 있습니다.
컴포넌트(Component) 컴포넌트는 UI의 요소 하나하나를 재사용 가능한 부분으로 조각내서 운영하는 기법입니다. 리액트 기반으로 만들어진 페이스북 웹사이트는 운영되는 컴포넌트가 수만 가지라고 합니다✅버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있습니다.
이렇게 컴포넌트로 생각하고 앱을 개발해 나아간다면, 코드 재사용이 용이 해집니다.
코드 재사용이란 어려운 용어는 아니고, 버튼 하나를 만들었을 때 이 버튼 코드를 여러 페이지에서 사용 가능하다는 뜻입니다.
👀실제 우리 예제에 어떻게 적용할 수 있는지. 확인해보겠습니다. components 폴더에 PopupButton.jsx를 만들고 다음 코드를 넣어주세요
👍팝업 버튼 컴포넌트에 값과 함수 넘기기한 버튼 컴포넌트로 다양한 페이지에서 목적에 맞게 변경해서 사용하려면 어떻게 해야할까요? 컴포넌트를 사용하려고 부른 페이지에서 목적에 맞는 값들을 넘겨줘야 할겁니다. 컴포넌트에! 다음과 같이 말이죠! 비구조 할당 방식으로 받아온다 !👀App.jsx에서 넘긴 title과 CustomAlert에 집중해보세요!
태그에 스타일을 입혔었던 것처럼, 속성이라고 부를 CustomAlert 과 title 을 PopupButton 태그(우리가 직접 만들어 상단에 불러와 사용한 컴포넌트)에 부여해줬습니다.
그리고 실제 PopupButton 에서 비구조 할당 방식으로 필요한 속성 이름만 쏙! 꺼내어, 코드단에서 바로 사용했습니다. 이렇게 함수까지 넘길 수 있단 점! 아주 유용하고, 추후엔 필수적으로 쓰입니다.
[리액트 기초 복습&활용] data.json과 useState
wegram 더미 데이터 임포트하기 앱 개발을 하다보면, 이미지 뿐만 아니라 기본 데이터들은 딕셔너리 + 리스트 복합 구조인 JSON 데이터로 가지고 있다가 불러와 사용하기 마련입니다. 추후에 앱상에서 실제로 사용할 간단한 시 데이터를 앱 프로젝트 상에 준비하고 불러오죠:) 1) 데이터를 리스트로 스크롤 가능하게 보여주려면! ScrollView를 사용해야한다. 2) ScrollView에서 flex 옷을 입히려면 contentContainerStyle 속성에 스타일 이름을 연결 시켜줘야 한다. 3) JSX 문법 안에서 자바스크립트 문법을 사용하려면 {} 안에서 사용해야한다. 4) JSX 문법 안에서 만복문을 쓸땐 map 함수를 리스트에 연결시켜 사용한다. 5) 상단에서 data.json을 불러온다음, 실제로 사용할 리스트 값이 담긴 키 값을 map 함수에 연결해야 한다. 6) 반복문 돌릴 땐, map 함수 두번째 인자로 받게 되는 인덱싱(순서 번호) i 를 반복문 대상 태그에 key={i} 즉, key 속성으로 연결시켜줘야한다. 7) 반복문에서 데이터를 꺼내 사용할 땐, 리스트처럼이 아닌(content[0].title) content.title 처럼, 반복문 매 순간마다 딕셔너리 하나씩 사용하는 모습을 머릿속에 그릴 수 있어야 한다.
상태(State, useState)
👉 컴포넌트마다 데이터를 보유하고 관리 할 수 있습니다. 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 `상태`라 부릅니다.
리액트에서 상태(`state`)는 리액트 라이브러리에서 제공해주는 `useState`로 생성하고 setState 함수로 정/변경 할 수 있습니다.
사용방법은 실습을 통해 알아보도록 하겠습니다!
useState, 그렇다면 왜 중요할까? 리액트는 특이한 점이 있습니다.
여러분이 만드는 화면이 데이터에 따라 변경됩니다. 또 아무 데이터가 아니라 이 상태(state)로 관리되는 데이터가 변경되면 화면이 바뀝니다.
UI = component(state) 이 공식은 즉, 사용자 화면(UI)은 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다를 뜻합니다.
useState 활용 데이터를 각각의 컴포넌트 안에서만 관리하는 것을 상태 관리 한다 라고 합니다. (useState 라는 훅을사용) 따라서 데이터를 앞으로는 상태라고 부릅니다. 상태 관리할 땐, 리액트에서 제공해주는 방식대로 진행해야하는데 useState를 사용합니다. 1) 앞서 불러온 더미데이터 data.json 을 상태에 넣어 보겠습니다. 👉초기 상태값을 세팅 할 땐, useState(data.diary) 안에 넣어 시작한다는 것을 주목하세요! () 괄호 안에 리스트, 숫자형, 문자형, 딕셔너리형 등의 데이터를 넣으면 state는 해당 데이터를 갖게되는 변수의 성격을 갖게 됩니다.
✔그럼 실제 JSX 문법 상에서 이 데이터를 가지고 반복문을 실행하여 값을 사용할 수 있습니다. 이 상태 값을 변경 할 땐, 코드상의 setState 함수를 사용해야합니다. 이름은 임의로 정할 수 있습니다. 가령 chagneState도 된다는 뜻입니다. (앞의 state도 dataState로 바꿀 수도 있습니다) 이는 useEffect와 같이 살펴보겠습니다.
[리액트 기초 복습&활용] 자세히 알아보는 useEffect
화면이 그려진다음 가장 먼저 실행되는 함수, useEffect(=훅) 빈 리스트가 [] useEffect안에 있으면 한번만 실행됨
useEffect, 그렇다면 왜 중요할까? 👉보통 useEffect는 데이터를 준비할 때 사용합니다 데이터를 준비한다는 것은, 데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(state)에 반영한다는 것을 뜻합니다. 이런 순서로 말이죠.
1) 화면이 그려진다. 2) useEffect가 데이터를 준비한다. 3) 상태 데이터가 업데이트 되었으니 화면이 다시 그려진다.
화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후, 화면을 다시 그릴 때 주로 사용되는데요! 아주 일반적인 패턴이므로 여러분들도 금방 이해하고 익숙해지게 됩니다!
useEffect 활용 👉 useState(data.diary)로 세팅했던 부분은 화면이 그려지기 전에 상태 값을 세팅한 모습입니다. 따라서 로딩 상태를 구현할 때는 적합하지 않습니다.
화면이 그려지고 → 데이터가 세팅되서 → 다시 화면이 그려지는 흐름을 위해서 useEffect 를 사용해야합니다.
1주차 끝 & 숙제 설명 👉 배운 내용을 토대로 복습 + 응용 할 수 있는 문제를 풀어보고자 합니다 간단한 +, - 카운터를 만드는 예제 인데요! 리액트를 배우게되면 꼭 한번 구현하고 넘어가는 유명한 예제입니다.
