앱 화면 만들기
-
복습 겸, 공부 겸 메인화면을 다음 화면처럼 바꾸어보자! flex는 flex 1과 flex 5로 화면이 나눠져 있다면 flex 1인 곳은 6/1 그리고 flex 5인 것은 6/5로 이렇게 화면을 분할해서 생각하는 개념으로 화면의 구역을 나누는 기술이다. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 된다. 목 바로 밑에 이미지를 해당 이미지를 넣어야 된다. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 된다. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야 할까? 공식문서를 찾아보고, 수평은 영어로 Horizontal. 주어진 데이터는 문자이므로 Text 태그에 넣어야 된다. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표..
앱 화면 만들기 메인화면 꾸미기복습 겸, 공부 겸 메인화면을 다음 화면처럼 바꾸어보자! flex는 flex 1과 flex 5로 화면이 나눠져 있다면 flex 1인 곳은 6/1 그리고 flex 5인 것은 6/5로 이렇게 화면을 분할해서 생각하는 개념으로 화면의 구역을 나누는 기술이다. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 된다. 목 바로 밑에 이미지를 해당 이미지를 넣어야 된다. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 된다. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야 할까? 공식문서를 찾아보고, 수평은 영어로 Horizontal. 주어진 데이터는 문자이므로 Text 태그에 넣어야 된다. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표..
2022.09.08 -
sparta-myhoneytip-hyuk 프로젝트를 VSCode 에디터로 열고, VSCode 에디터 내의 터미널을 연 다음 expo start 명령어를 실행! expo start로 열린 Expo 개발 도구 화면에서, 좌측의 QR 코드를 휴대폰 카메라로 비춘 뒤, 여러분 휴대폰에 설치했던 Expo 클라이언트 앱을 실행한다. App.js expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인할 수 있다. "Open up App.js to start working on your app!" 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수이다. 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을..
앱 화면 만들기 JSX 문법sparta-myhoneytip-hyuk 프로젝트를 VSCode 에디터로 열고, VSCode 에디터 내의 터미널을 연 다음 expo start 명령어를 실행! expo start로 열린 Expo 개발 도구 화면에서, 좌측의 QR 코드를 휴대폰 카메라로 비춘 뒤, 여러분 휴대폰에 설치했던 Expo 클라이언트 앱을 실행한다. App.js expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인할 수 있다. "Open up App.js to start working on your app!" 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수이다. 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을..
2022.09.07