본문 바로가기

내마음대로만들어보자326

[공식 문서] React 시작하기 React 공식문서의 안내서에 나와 있는 거의 모든 코드들은 아래 CodePen에서 수정이 가능하다고 한다. https://codepen.io/pen?&editors=0010 Create a New Pen ... codepen.io 시작하기에 앞서 공식문서를 보는 방법에 대해서도 알아야할 것 같다. 내게 필요한게 무엇이고 어떤 내용을 참조해야하는지 알아야 빠르게 내가 필요한 부분만 확인하여 테스트해볼 수 있을 것 같다. 공식문서에서 엘리먼트와 컴포넌트로 이루어져 있는 React앱의 구성 블록들을 이해해보면 복잡한 앱을 만들 수 있을거라고 한다! React는 자바스크립트 라이브러리이며, 자바스크립트의 기본적인 이해가 필요하므로 해당부분도 별도로 공부해두자. https://developer.mozilla.o.. 2021. 8. 23.
[앱 화면 만들기] 콘텐츠 위치 - Flex 앱 화면을 구성할 때 영역의 레이아웃을 결정할 수 있는 flex에 대해 알아보자. flex는 상대적이다. 가상 최상위의 container 스타일을 가져가는 View 엘리먼트는 디바이스 전체 화면의 영역을 가져가며, 안 쪽의 containerOne 스타일이 부여된 View 엘리먼트는 전체를 3등분 한 뒤 1/3을 가져가고 containerTwo는 2/3를 가져간다. 같은 레벨의 엘리먼트들의 flex 합을 각자의 flex 속성값 대로 가져간다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity,.. 2021. 8. 22.
[앱 화면 만들기] - 구성한 화면 꾸미기, Styles 태그 스타일을 주는 방식 또한 리액트 네이티브에서 제공하는 stylSheet 기능을 가져와 적용한다. styleSheet는 결국 객체(딕셔너리)를 하나 만드는데, 이 객체에 사용법 대로 생성한 다음 잘 정리해두면 JSX엘리먼트에서 가져다가 사용만 하면된다. 사용할 땐 모든 태그에 공통적으로 있는 style속성에 아래서 만든 객체 키 값을 부여하여 적용한다. 이렇게 연결해주면은 스타일을 적용시킬 수 있다. * 자주 사용하는 스타일 속성 import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } f.. 2021. 8. 22.
mouseover() / mouseout() / hover() mouseover() 이벤트 메서드는 선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseover이벤트를 강제로 발생시킨다. mouseout() 이벤트 메서드는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 강제로 이벤트를 발생시킨다. hover() 이벤트 메서드는 선택한 요소에 마우스 포인터가 올라갈때와 선탁한 요소에서 벗어날때 각각 이벤트를 발생시킨다. * 예제 Mouse Over/Mouse Out 내용1 Hover 내용2 2021. 8. 22.

티스토리툴바