일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- php
- button
- 풀스택
- 비전공자
- effect
- 비전공 개발자
- 자바스크립트
- Animation
- iOS 개발자
- css3
- javascript
- react
- IOS
- front-end
- image
- MAC
- iPhone
- 프론트엔드
- CSS
- keyframes
- ipad
- hover
- SWIFT
- 애니메이션
- html5
- jQuery
- 백엔드
- 개발자
- xcode
- HTML
- Today
- Total
목록React & React Native (16)
비전공자 개발일기
컴포넌트(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. 컴포넌트(Component): 재사용할 수 있는 조립 블록 화면에 나타나는 UI 요소 2. 와이어프레임(wireframes): 최종 화면에서 구성될 콘텐츠를 간단히 요약해서 보여주는 것 3. JSX 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능가독성이 높고 작성하기도 쉽고, XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있음 (하나의 부모) 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 함 export default function App() { return ( Open up App.js to start working on your app! ); } ----------------------------------------------..
환경 설정 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..
React(React.js): 사용자 인터페이스 및 웹 애플리케이션 구축을 위해 만든 프론트엔드 웹과 서버에서 실행되는 것을 지원하는 JS ReactDOM.render( Hello, world!, document.getElementById('root') ); Component 뛰어난 Garbage Collection, 메모리 관리, 성능 서버 사이드 렌더링과 클라이언트 렌더링 둘 다 지원 간편한 UI 수정과 재사용이 용이 다른 프레임워크나 라이브러리와 혼용해서 사용가능 데이터 모델링, Routing, Ajax 등의 기능 제공 x IE 8 버전 이하에서 사용 불가 React - Native: 기본 앱 구성 요소로 컴파일되는 모바일 프레임워크, 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크 im..
/*eslint-disable*/ import {useState} from 'react'; import './App.css'; function App() { let [title, setTitle] = useState(["React", "Javascript", "SCSS"]); let [like, setLike] = useState([0, 0, 0]); let [modal, setModal] = useState(false); let [pushTitle, setPushTitle] = useState(0); // function changeTitle() { // let subject = [... title]; // subject[0] = "여자 코트 추천"; // setTitle(subject); // } f..
import logo from './logo.svg'; import './App.css'; function App() { let posts = "강남 고기 맛집"; function fnc() { return 100 } return ( 개발 Blog {posts+fnc()} ); } export default App; 1. class 명 작성 -> className 2. 데이터 바인딩(Javascript data를 html에 넣는것) 하는 법 -> {변수명, 함수, 스타일 속성 값, 이미지 경로 등} 3. JSX에서 style 속성 사용 -> style = {object 자료형으로 만든 스타일} ex) 개발 Blog 1) 속성명 -> camelCase로 작성 2) 속성값 -> 문자열로 값 부여 (' ' o..
class Codelab extends React.Component { render() { let text = "I'm IRONMAN" let style = { backgroundColor: "aqua" } return( {text} ); } } class App extends React.Component { render() { return( ) } } ReactDOM.render(,document.querySelector("#root")) ------------------------------------------------------------------- class Codelab extends React.Component { render() { return( Hello {this.props.name..
1. node.js 설치 2. create-react-app로 리액트 프로젝트 생성 3. npm init react-app 또는 폴더를 VS Code로 열고 터미널에서 npm init react-app . 4. 개발모드 실행: npm run start 5. react 개발자 도구: chrome 확장프로그램 [react developer tools] JSX: 자바스크립트의 확장 문법 import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); 속성명은 카멜 케이스로 작성 ex) onClick,,onBlur, onFocus, onMouseDown, onMouseOver, tabIndex import Re..