천천히 차근차근

https://nodejs.org/ko/download/ node 설치 typescript 설치 npm i typescript -g ts 파일 콘솔 출력하는 방법 npm i ts-node -g ts파일을 js파일로 컴파일하는 방법 tsc 파일명 tsconfig.json 파일 생성 tsc --init js파일로 compile이 제대로 되지 않을 때 관리자 권한으로 visual studio code를 실행하여 터미널에서 위의 명령어를 입력한다. Set-ExecutionPolicy RemoteSigned 관리자 권한으로 실행하기 위한 Get-ExecutionPolicy 확인하기 위한 명령어

wikim.tistory.com/245 발생원인은 환경변수 경로 설정문제였다. 해결과정 중 늘상 환경변수란 말을 쓰면서 실제로 환경변수가 정확히 어떤 것인지에 대해 정확히 알지 못했음을 반성했다. ㅠㅠ 에러 발생원인 윈도우 -> 고급 시스템 설정 -> 환경 변수 -> Path확인 결과 1) C:\Program Files\nodejs (존재하지 않음) 2) C:\Users\~~~~~\AppData\Roaming\npm : (존재) [npm은 node js 패키지 모듈이기 때문에 /node js 에서 사용가능한 모듈들을 패키지화 시켜 모아 둔 것.] 1) 번을 path에 추가하니 문제 해결. 둘의 차이점 : 1) 번은 노드 실행파일, 2)번은 node js패키지 모듈(npm : node package mod..

아래와 같이 실행을 하니, this.setState는 함수가 아니다?? 정의되지 않았다?? 라는 오류 발생. Test () { //this.state.data.is_refresh = true; this.setState({is_refresh: true}); ~~~~~ } 해결 방법 아래와 같이 작성을 하니 실행됨. 함수를 시작하는 뜻일까... AsyncFavoriteList = () => { this.state.data.is_refresh = true; ~~~~~~ }

css를 만지다 보면 최대 너비로 하고싶을때 이상하게 width:100%가 안될때가 있다 난 초보라 왜그런지모른다 이럴땐 width를 screen 너비로 해주면 참 좋은데 알아보자 reactnative의 기본 api이다 import해주자 import {Dimensions} from 'react-native'; 상단에 아무때나 변수를 초기화 해주자 Dimensions.get('window'). 를 이용하면 된다. const Width = Dimensions.get('window').width; //스크린 너비 초기화 const Height = Dimensions.get('window').height; //스크린 높이 초기화 예시: 예를들어 이런 버튼이 있다 양쪽으로 꽉 차게 하고싶다.

Picker combo box처럼 여러가지 선택지가 있고 원하는 값을 고르는 기능이다. 굉장히 간단하다. react-native module에서 import하는게 아니다.

iOS / 안드로이드 default로 제공되는 각 플렛폼의 native 속성이 다르다. react-native는 data flow가 무조건 부모에서 자식이다. 자식이 가지고 있는 값을 자식이 부모한테 보내줄 수 없다. 자식인 input.tsx를 App.tsx에서 import 받아 쓴다. 자식의 데이터를 부모가 사용할 방법이 없는 것이다. 그래서 필요한 자료들을 복사해서 App.tsx에서 사용하는 것이다.

enum enum은 export만 할 수 있다. (export default를 할 수 없음) export한 것은 import를 할 때 중괄호로 감싸주어야 한다.

TextInput self closing property value : 입력받는 값 onChangeText : 텍스트를 입력받을 때마다 발생하는 이벤트를 발생시키는 multiline : true, false 문자 길이가 길어지면 아래로 개행해주는 maxLength : 글자수의 제한 autoCapitalize editable : 편집 가능 여부 (readOnly 같은걸 선택하는)

방법 1 import React, { Component } from 'react'; import { View, Text, StyleSheet, Button, Alert } from 'react-native'; let context: any; class Test extends Component { constructor(props: any) { super(props); context: this; state: { text: 'test' } } componentDidMount() { //setTimeout(() => { this.props.navigation.navigate('wallpaper') }, 3000 ); } render() { return (..

git reset --hard commitNumber 위 명령어로 입력하면 특정 원하는 commit으로 돌아간다.

import React, {Component} from 'react'; import {View, Text, Alert, StyleSheet} from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; import NumList from './src/numList'; class App extends Component { state = { appName: 'My First App', random: [23, 11] } onAddRandomNum = () => { const randomNum = Math.floor..

import React, {Component} from 'react'; import {View, Text, Alert, StyleSheet} from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; import NumList from './src/numList'; class App extends Component { state = { appName: 'My First App', random: [23, 11] } onAddRandomNum = () => { const randomNum = Math.floor..

Button /> 의미 : 셀프 클로징(self closing) Button tag에는 title이라는 property가 필수로 들어가야 한다. Button Tip Android, iOS Button default 값이 다르다. import React from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; const Generator = (props:any) => { return ( props.add()} /> ) } const styles = StyleSheet.create({ generator: { width: '100%', backgroundColor: '#fafafa..

exampleFunction = () => { } exampleFunction = () => ( ) 괄호의 차이 중괄호( {} ) : return되는 JSX Component가 없는 것. 소괄호( () ) : JSX를 return 할 수 있다. 소괄호 끝에 빨간줄이 보이는 것은 return해야 하는데 return 값이 없어서 빨간 라인이 보이는 것이다. JSX JavaScriptXML의 약자 javascript의 확장 문법 TouchableWithoutFeedback Props TouchableOpacity와 똑같은데 투명해지지 않는 것. View에 아무런 변화를 일으키지 않는다. TouchableWithoutFeedback을 사용하는 경우, view에는 아무런 영향을 주지 않기 때문에 style을 입힐..

src 폴더를 생성하고 그 안에 header.tsx를 만든다. header로 사용할 함수를 만들어서 export 한다. App.tsx에서는 Header를 import 한다. header에서 사용할 내용을 import한 Header태그를 이용하여 값을 넘긴다. Header에서는 props로 값을 받아 사용한다.

View, Text import React, { Component } from 'react'; react라는 module에서 Component class를 import하는 의미. 그 Component를 상속받는 App이라는 클래스를 생성하는 순서 App 클래스 화면을 렌더링하는 함수가 있고(render() 함수) 그 안에 return 되는 것들이 화면을 구성하게 된다. import { View, Text } from 'react-native'; 'react-native'라는 module에서 View, Text 클래스를 import하는 것이다. Button, Image 등 다양한 클래스를 가져와서 사용할 수 있다. Text, Button, Image 등 화면에 출..

git commit --amend 저장 : ctrl + o 빠져나오기 : ctrl + x 나의 경우, git commit --amend 명령어를 입력하니 vscode에서 git 편집 파일이 열려서 수정하고 ctrl+s로 저장 후, git bash에서 git log 입력해서 commit 내역을 확인해보니 수정이 잘 되어 있었다. 위에 적어 놓은 저장, 빠져나오기 명령어는 상황에 따라서..? 사용하면 될 것 같다.

Props 01 수정이 불가한 readOnly 읽기 전용 property이다. 부모자식 관계가 형성되어야 의미가 있다. 부모로부터 자식한테 데이터가 전해진다. 부모로부터 Props 데이터를 받아 자식 컴포넌트 내에서 수정, 변경되지 않고 그대로 쓰게 된다. 왜 쓰는가? 반복해서 똑같은 내용을 작성하는건 비효율적이다. 부모가 가지고 있는 정보가 완벽하게 똑같이 100명의 자식에게 간편하게 전달되는 장점. Props가 코드에서 어떻게 사용되는지. 부모가 가지고 있는 데이터를 자식에게 굉장히 간편하고 손쉽게 전달되는 방법 부모입장에서 보면 자식에게 데이터를 줄건데 어떤 데이터인지 정해준다. 자식이 부모의 데이터를 받아서 본연의 데이터를 훼손하지 않고 자유롭게 사용할 수 있다. 자식은 const 로 정의한다. ..

비동기성 setState 메소느는 비동기로 state를 업데이트 한다. state는 조심해서 다뤄야 한다. setState를 통해 값 변경할 때, 현재 버전을 카피한 다음에 업데이트를 하게 된다. onAdd = () => { this.setState(prevState => { return { sampleNum: prevState.sampleNum + 1 } }) } prevState(callback)를 사용해서 state를 변경한 다음에 실행되도록 한다.

setState 01 state를 정의하는 것은 초기화 하는 것. state는 값을 직접 바꿔주면 안된다. state 값을 변경해주는 작업을 해야 한다. 쉽게 변경되면 안된다는 의미이다. changeState = () => { if ( !this.state.sampleBoolean ) { this.setState({ sampleText: 'Text Changeddddddd!!', sampleBoolean: true }) } else { this.setState({ sampleText: 'Hello World', sampleBoolean: false }) } } this.state 의 값을 변경해주면서 텍스트를 클릭할 때마다 이벤트를 걸어 글자를 변경해줄 수 있다.