분류 전체보기

ScrollView import React from 'react'; import { Image, ScrollView, Text } from 'react-native'; const logo = { uri: 'https://reactnative.dev/img/tiny_logo.png', width: 64, height: 64 }; export default App = () => ( Scroll me plz If you like Scrolling down What's the best Framework around? React Native ); Component들을 위에서 아래로 쭉 나열하면 화면을 넘어가는 경우가 있다. ScrollView를 이용하면 Component들을 내려가며 볼 수 있다. 태그안에 Com..

Handling Text Input import React, { useState } from 'react'; import { Text, TextInput, View } from 'react-native'; const PizzaTranslator = () => { const [text, setText] = useState(''); return ( setText(text)} defaultValue={text} /> {text.split(' ').map((word) => word && '🍕').join(' ')} ); } export default PizzaTranslator; react native 공식문서에 있는 textinput을 다루는 코드이다. 공백으로 구분하여 한 단어당 피자를 출력해 준다. 태그에..

화면에 Component들을 원하는 위치에 정렬하기 위해 설정하는 값들이 있다. 우선 layout은 기본적으로 좌우로 Component들을 위치시킬 것인지, 상하로 위치시킬 것인지 정할 수 있다. 또한, Component들이 해당하는 layout에서 얼마정도의 크기를 점유할지 정하는 flex를 알아야 한다. Flex & FlexDirection flex는 부모 Component안에서 자식 Component 끼리 어느정도의 위치를 점유할 것인지를 나타낸다. import React from 'react'; import {View} from 'react-native'; const FlexDirectionBasics = () => { return ( ); }; export default FlexDirection..

React Native프로젝트를 생성하고 Terminal을 새로 만든다 (VScode를 사용하고 있다.) AVD를 실행시키고 Terminal에 react-native run-android를 입력하면, index.js를 최초로 접근하여 코드를 읽는다. import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); 위에는 index.js이다. 같은 폴더에 있는 APP.js를 import 해서 APP이라 하고 AppRegistry.registerComponent(appName, () =..

입력받은 수를 3으로 나누기, 2로 나누기, 1 빼기 이 세 가지 연산을 이용하여 1로 만드는 최소의 연산 횟수를 구하는 문제이다. 얼핏 보면, 3으로 나누는 연산이 가장 수를 많이 줄여주니까 3으로 나누고, 3으로 나누지 못하면 2로 나누고, 그러지 못하면 1을 빼는 식으로 구할 수 있는 간단한 문제인 것 같이 보인다. 하지만 이것은 탐욕 법으로 계산하는 방법이며, 항상 최적해를 구할 수 없다. 예를 들어, 10을 1로 만드는 방법을 탐욕법으로 구한다면 10 -> 5 -> 4 -> 3 -> 1으로 총 4회의 연산이 필요하다. 하지만, 동적 계획법으로 연산을 하면 10 -> 9 -> 3 -> 1 로 총 3회의 연산만으로 1로 만들 수 있다. 따라서, 모든 경우의 수를 살펴 보아야 한다. import ja..

동적 계획법이란? 문제를 풀기 위해서, 문제를 여러 개의 하위 문제로 나누어 푼 다음, 그것을 결합하여 최종적인 목적에 도달하는 것이다. 하위 문제의 해결책이 다른 하위 문제의 해결책과 같은 경우 유용하다. 탐욕 알고리즘과의 비교 탐욕 알고리즘은 문제가 발생하면 그 상황에서의 최적의 해를 선택하는 방식의 알고리즘을 말한다. 순간적으로 볼 때는 최적의 해를 반환하지만 전체적으로 보았을 때 그렇지만은 않은 상황이 존재한다. 예를 들어, 길을 찾는 문제가 주어졌다면 출발지부터 목적지까지 가는 중, 갈림길과 마주했을 때 그 순간 가장 짧은 길로 가는 것이다. 하지만 동적 계획법은 모든 갈림길을 살펴본 후 최적의 길을 탐색하게 된다. 동적 계획법은 모든 경우의 수를 살펴봐야 하기 때문에 시작시 조금의 시간이 걸릴..

Tic Tac Toe React Native tutorial에 안내되어 있는 tic tac toe 게임을 구현하며 React Native의 기본적인 사용법을 알아볼 것이다. function Square(props) { return ( {props.value} ); } class Board extends React.Component { renderSquare(i) { return ( this.props.onClick(i)} /> ); } render() { return ( {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquar..

React Native란? React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. React는 하나의 코드로 ios, android 환경에서 모두 구현이 가능하다는 장점을 갖고 있다. React Native rendering 원리 React는 VirtualDOM이라는 가상 DOM을 이용하여 화면을 수정하면 모든 화면 출력 flow를 실행하는 React와는 달리 실제 변화는 가상의 DOM에 적용시키고 최종적인 결과만 DOM에 적용시킨다. 가상의 DOM에서는 필요한 곳만 계산하고 필요한 최사한의 변경사항만 랜더링 하기에 매우 효율적이다. React Native workflow 리액트 네이티브 소스 -> Page render -> 리액트 컴포넌트 DOM에 마운..

React Native 시작하기 React Native를 시작하기 위해서는 node.js, Android studio 등 여러 가지 프로그램들을 설치하고 환경변수 및 여러 설정을 해야 한다. 이 과정은 다음 블로그를 참고하여 진행하였다. https://dev-imaec.tistory.com/8 [React-Native] React Native Android 무작정 시작하기(설치) React-Native 무작정 시작하기 요즘 react native를 공부하고 있습니다. 하나의 개발 플랫폼으로 안드로이드와 iOS 둘 다 대응할 수 있다는 점에서 굉장히 매력적입니다. react native에 대한 설명과 장단점 dev-imaec.tistory.com 프로젝트 생성하기 Git-bash를 이용하여 프로젝트를 생성..

퀵 소트란? 퀵 소트는 찰스 앤터니 리처드 호어가 개발한 정렬 알고리즘이다. 퀵 소트는 정렬 알고리즘 중 가장 빠르다고 하여 붙여진 이름이다. pivot을 선택하여 비교하며 정렬을 수행하는데 pivot으로 선택한 수가 가장 작거나 가장 크다면 최악의 경우로 정렬 수행 시간이 가장 오래 걸린다. 하지만 가장 오래 걸리더라도 O(n^2)의 시간 복잡도를 가지며 이 최악의 경우만 제외한다면 평균적으로 O(nlogn)의 시간 복잡도를 가진다. 퀵 소트은 분할 정복(divide and conquer) 방법을 통해 리스트를 정렬한다. 1. 리스트에서 임의의 수를 pivot으로 정한다. 2. pivot앞에는 pivot보다 값이 작은 모든 원소들이 오고, pivot 뒤에는 pivot보다 값이 큰 모든 원소들이 오도록 ..