가이드 1) 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 겠다 2) 제목 바로 밑에 이미지를 해당 이미지를 넣어야 겠다(이미지 제공 해드립니다 🙂) 3) 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 겠다 4) ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야할까? 공식문서를 찾아봐야지, 수평은 영어로 Horizontal 5) 주어진 데이터는 문자이므로 Text 태그에 넣어야 겠다. 6) 설명 글은 긴데 3줄이 넘어가면, 말 줄임표가 되네! Text 태그 속성에 이런 기능이 있는지 공식문서에서 찾아봐야겠다. 7) 피자 이미지와 글자 부분의 영역을 대~충 1 : 3정도로 분할하면 되겠네
얼추 영역 만들고, 텍스트만들고 가로 스크롤뷰에 막힘 + 일요일이라 빨리 완강해야해서 다음강의 들으러 갔는데,
김건희튜터님이 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
화만 내신분들도 오케이, 다 완성하신 분들도 오케이 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 왜 이거 왜 웃기죠 저는,,,,,,,,무튼 웃겼어요,,,,,,,,,,,,,,🤣🤣🤣🤣
자~ 메인 화면 꾸미러 가 볼까요 ╰(*°▽°*)╯설명이나 주석은 제 코드에 //로 붙여서 적어둘게요!
하나하나 설명할 순 없고 축약버전이라 봐주시면 될 것 같습니다 👍
코드 사진의 순서는 앱에서 보여지는 화면 + 제가 주석 설명은 단 화면 입니다!
[앱 화면 만들기] 메인화면 완성
준비 (●'◡'●)
라이브러리 임포트
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
기본 함수 골격 export default function App(){}
export default function App() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return ()
}
const styles = StyleSheet.create({})
1. 텍스트 추가하고 꾸미기 2. 이미지 추가하기 3. 버튼 리스트 만들기( 좌우로 스크롤 뷰!) 이렇게 세로 스크롤 중..이걸 가로(좌우)스크롤로 바꿔야해요horuzontal로 좌우 스크롤로 바꾸고~~
4. 리스트 만들기 필요한 텍스트와 영역을 먼저 넣어주고 borderWidth로 영역 확인해서 꾸미기 추가하기! numberOfLines <-말줄임표!! 위 오른쪽 화면처럼,,, 맨 위에 실습 화면 과 비슷하게 만들어져따..!!!!!!!
[앱&자바스크립트] 모듈과 반복문
1주차때 배웠던 모듈 시스템(module system) 1주차때 자바스크립트를 다루면서 여러 자바스크립트 파일이 있을 경우, 서로 다른 자바스크립트 파일에서 각 파일에 있는 함수를 불러오거나, 자바스크립트 파일 자체를 불러올 때 사용하는 모듈 시스템에 대해 배워봤습니다.
앱에서의 모듈 시스템 > 앱이라는 애가 화면을 그려줄 수 있는 기능을 가졌다면, 이거 자체를 외부에서 쓸 수 있게끔 export degaule 키워드가 붙어있게 되는 거였고, 결국 expo라는 앱을 쉽게 만들어다주는 도구가 'App()'이라는 함수를 가져다가 쓰고 있었던 것이었다 (╯°□°）╯︵
모듈 시스템으로 data.json을 불러오기 - 모듈 시스템은, 화면을 그리는 함수 말고도 데이터를 다룰 때도 유용하게 사용 됨! JSON파일(딕셔너리 + 리트스 복합 구조)을 넣어두고, App.js에서 가져와서 사용해볼 것이다. 아래처럼 준비된 데이터는 불러온 파일에서 언제든 사용이 가능함으로 반복문 다루기에서 사용해보도록 한다! 요기에 데이터를 넣으면 된다 'ㅅ'
데이터를 반복문 돌려보기 준비한 데이터를 자바스크립트 App.js 파일에서 불러올 땐 아래 코드 입력스!
import data from './data.json';
**Sparta HoneyTips!
data.json 반복 적용 모습 이거 하려는데 갑자기 전체코드를 다시 주셔서 나의 주석 빠이,, 저도 이제 제 티스토리로 재확인하러와야함 새로운 코드로 적용한 모습! JSX문법 규칙
변수를 쓸때는 {} 중괄호 표현식을 써주기
리액트 네이티브에서 반복문을 돌려서 여러 JSX문법을 바깥에 화면에 보일때는, 항상 유니크한 키 값을 가져야 한다. 반복문 돌릴 때 가장 최상위에 감싸는 애는 유니크한 키값이 주어져야함유니크 키 값? 인덱스 넘버가 유니크하며 중복이 없으니 i를 넣은 것!
[앱&자바스크립트] {} 표현식과 조건문
JSX 안에서도 자바스크립트 문법을, {} 표현식 {} 표현식은 JSX 문법 사이사이에서 자바스크립트 문법을 사용하기 위한 방식입니다. > 조금더 자세히 다루어보면, 자바스크립트 연산과 변수 사용도 쉽게 JSX 사이사이에서 가능합니다. 날씨 적용해보기
화면을 조건문으로 달리 표현해보기 화면을 표현 하다보면 조건에 따라 다른 모습을 보이거나, 연산을 진행하길 원할 때 조건문 사용하기!
홀수 팁만 노란색 바탕화면 적용 모습 삼항연산자
let result = 10 > 2 ? "참" : "거짓"
(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때
(예제)
let result = 10 == 9 ? true : false // result <-- false 값 할당
let result = 10 !== 9 ? true : false // result <-- true 값 할당
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당
//10은 2보다 큰가요 작은가요? 당연히 크죠? 그럴땐 ? 물음표 뒤의 값이 result에 담겨지게 됩니다.
//만약 앞의 10 > 2 부분의 조건이 거짓이게 된다면, : 콜론 뒤에 있는 값이 result에 담기게 되요!
//간단하죠? 이를 이용하면 {} 표현식 안에서도 간단히 조건문을 구성할 수 있습니다
