Root

Generic이란? 사용자에게 타입을 받아와서, 내부 요소의 타입을 지정하는 방식 ( 타입을 인자로 사용 ) Generic 사용하기 Generic 타입 사용 함수 // getText함수를 사용할때, getText 형식으로 타입을 받아와 해당인자의 타입을 검사한다. function getText(text: T): T { return text; } // getText 형식으로, 제네릭에게 타입을 전달한다 getText('hi'); getText(10); getText(true); Generic 타입 사용 클래스 // 제네릭 타입 클래스 생성 class MyArray { element!: T SetElement(element: T):void { this.element = element } getElement(..

React의 API란? JSX 구문에서 사용되지않고, OS의 javascript엔진에서 사용하는 모든 기능 React Native API Alert 대화 상자를 보여주는 API import {Alert} from 'react-native' // API 불러오기 Alert.alert("제목", "메시지") // React Native에서 함수형식으로 사용 StyleSheet API [React.js] React와 CSS React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 just defineall.tistory.com Platform ..

속성이란? 클래스의 멤버변수 ( 클래스 내부 다양한 타입의 변수 ) React 컴포넌트의 속성 컴포넌트는, UI를 구성하는 "클래스" 이므로, 속성을 가질 수 있다. 리액트는 컴포넌트의 속성이 바뀌면, 즉시 화면에 반영한다. ( 재렌더링 ) JSX는 XML이므로, 모든 속성(attribute)는 따옴표 혹은, 중괄호로 감싸져야 한다. 속성값이 객체일때는 중괄호를 하나 더 사용해, 새로운 객체를 만들 수 있다. 기본 속성 React와 React Native의 컴포넌트는 key, children, ref 등의 속성을 기본적으로 가진다. key 속성 React가 컴포넌트의 렌더링 속도를 최적화하기 위한 속성 style 속성 React가 컴포넌트의 스타일을 지정하기 위한 속성 ( 객체를 설정해야한다. ) ref..

👉 객체란? (Object) 프로그램을 구성하는 코드를 역할과 의미에 맞게 분리하여, 그에 맞는 여러가지 형태의 변수와 ( variable ) 그 변수들을 다룰 함수( function )를 한 군데 묶어서 저장해 놓은 묶음 이때 객체에 담은 변수를 "멤버변수"( property ) 라고 부르고, 객체에 담은 함수를 "메서드"( method ) 라고 부른다. 👉 클래스란? 같은 의미를 가진 객체를, 여러개 만들기 위한 설계도 클래스 만들기 // 동물 객체 틀(클래스) 만들기 class Animal { // 생성자 - 새로운 객체를 만들때, 그 객체의 상태를 설정하는 함수 // 클래스 실행시, 인자를 받고 처음 1번 실행된다. constructor(name, live) { console.log("constr..

컴포넌트란? React에서 UI를 담당하는 클래스 ( 여러 요소를 화면에 렌더링해주는 역할 ) 클래스 컴포넌트 작성 방식 import React, {Component} from 'react'; import {Text} from 'react-native'; // 클래스 컴포넌트는 React의 Component 클래스를 반드시 상속해야한다. export default class ClassComponent extends Component { render() { return Hello world!; } /* render() 메소드 사용해서 가상DOM을 물리DOM으로 바꾸어 화면에 표출 render() 메소드는, 반드시 null, undefined, React.createElement반환값, JSX구문을 반환해야..

npm run android 과정 앱 처음 실행시 필요한 ES5 javascript 코드를 전달하기위해, 메트로 서버 실행( npm start ) react native 프로젝트 내부의 android 폴더로 이동 ( cd android ) android/app/build.gradle파일을 참조해, 에뮬레이터에 앱 설치 ( ./gradlew installDebug ) - 빌드 설치완료시, node_modules/.../native_module.gradle 파일을 참조해, 안드로이드용 네이티브 모듈 설치 ( gradle에게 설치지시 ) npm run ios 과정 앱 처음 실행시 필요한 ES5 javascript 코드를 전달하기위해, 메트로 서버 실행( npm start ) react native 프로젝트 내..

JSX란? Javascript + XML ( JavaScriptXml ) 태그이름을 자유롭게 지을수 있는 XML javascript 문법에, XML구문이 있는 것처럼 사용하는, React의 문법 JSX 작동 과정 1. 사용자가 JSX 작성 2. ESNext 코드를 Babel 플러그인에게 전달 3. Babel 플러그인이 ESNext 코드를 평범한 React.createElement 함수를 호출하는 javascript로 변환 4. React가 변환된 javascript를 실행 JSX 장점 React.createElement 코드를, 단순하고 간결하게 만들 수 있다 JSX 사용법 (1) React Native JSX - 코어 컴포넌트 - 실제는 존재하지 않지만, XML 문법이 요구하는 부모 컴포넌트로 동작하도..

에러 발생 React Native 프로젝트를 생성하고, ios 가상기기를 빌드할때 발생 ( react-native run-ios ) 에러 발생 이유 해당 오류는 현재 사용중인 Node의 버전이 지정되어 있지 않아서 발생하는 오류이다. 해결 방법 1. 현재 사용하는 Node.js 버전 확인 node -v 2. 현재 사용하는 버전의 nvm 설치 ( 예시 ) nvm install v18.0.0 에러 전문 N/A: version "default -> N/A" is not yet installed. You need to run "nvm install default" to install it before using it. Command PhaseScriptExecution failed with a nonzero e..

👉 CocoaPods란? Swift 및 Objective-C Cocoa 프로젝트의 종속성 관리자. ( 패키지 관리자 ) ( Ruby로 만들어짐 ) CocoaPods 설치하기 ( 기본 Ruby ) sudo gem install cocoapods