비전공자 개발일기

* { margin: 0; padding: 0; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; background-color: #F00; width: 10px; height: 10px; pointer-events: none; border-radius: 50%; } span::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #FFF; animation: moveParticles 2s linear infinite; } @keyframes ..

12 3 6 9 : : @font-face { font-family: "Digital-7"; font-style: normal; font-weight: 400; src: local("Digital-7"), local("Digital-7-Regular"), url(https://allfont.net/cache/fonts/digital-7_b73ef91485431ac0271f24009e14ccee.woff) format("woff"), url(https://allfont.net/cache/fonts/digital-7_b73ef91485431ac0271f24009e14ccee.ttf) format("truetype"); } :root { --clock-size: 300px; } * { box-sizing: b..

import React from "react"; import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; import { WebView } from "react-native-webview"; const MYLINK = "https://relaxed-turing-e7ea57.netlify.app"; export default function App() { return ( WEBVIEW ); } const styles = StyleSheet.create({ container: { marginTop: 40, padding: 30, flex: 1, alignItems: "center", ju..

Props: Properties의 줄임말, 부모 컴포넌트로부터 전달된 속성값 또는 상속받은 속성값 - 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 순 있지만 수정은 불가능 (수정을 원하면 부모 컴포넌트에서 수정) import React from 'react'; import { Text, View } from 'react-native'; import MyButton from './components/MyButton'; const App = () => { return ( Props alert('props')} /> alert('children')}> Children Props alert('default')} /> ); }; export default Ap..

색깔 이미지 항목명 값 색깔 이미지

컴포넌트(Component) 재사용이 가능한 조립 블록, 화면에 나타나는 UI 요소 부모로부터 받은 속성(Props)나 자신의 상태(State)에 따라 표현이 달라지고 다양한 기능을 수행 (내장 컴포넌트) https://reactnative.dev/docs/components-and-apis (View, Text 등) Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow scree..

환경 설정 1. node js 설치 - LTS(안정화) 버전 - 설치시 , npm도 같이 설치됨 2. Expo 설치 - npm install -g expo-cli https://expo.io/ Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. expo.dev 3. 파일 생성 - expo init 파일명 - 3가지 선택사항이 나오는데 상황에 맞게 선택(글쓴이의 경우 blank로 선택) 4. Hello World import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Te..

Single Single2 Multiple Multiple2 Multiple3 check1 check2 radio1 radio2