반응형

분류 전체보기 123

12. React-Native Text, TextInput, TouchableOpacity

1. TextText는 텍스트를 표현하기 위한 컴포넌트이다. React-Native에서 기본적으로 제공하는 컴포넌트에서는 Text와 TextInput을 사용해야지 텍스트를 삽입 가능하기 때문에 필수적인 컴포넌트 중 하나이다. —Exampleimport React from 'react'; import {View, StyleSheet, Text} from 'react-native'; const App = () => { return ( I am bold and red ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, baseText: { fontWeight: ..

React-Native 2021.01.29

[Programers] 124나라의 숫자(Javascript)

출처https://programmers.co.kr/learn/courses/30/lessons/12899 ❓Question—문제 설명124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다.124 나라에는 자연수만 존재합니다.124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다.예를 들어서 124 나라에서 사용하는 숫자는 다음과 같이 변환됩니다. 124 나라 숫자10진법124나라1122344115126147218229241041자연수 n이 매개변수로 주어질 때, n을 124 나라에서 사용하는 숫자로 바꾼 값을 return 하도록 solution 함수를 완성해 주세요. —제한사항n은 500,000,000이하의 자연수 입니다. —입출력 예nresu..

CodingTest 2021.01.28

10. React-Native padding, margin

10-1 개요padding과 margin은 레이아웃을 할 때 공백을 어느정도 줄껀지를 설정하는 함수이다.여백을 너무 많이주거나 적게 주게되면 App의 디자인에 문제가 생긴다.적절한 여백을 통해서 깔끔한 App 디자인을 만들어야 되는데 이 때 중요한 요소가 바로 padding과 margin이다. https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf 10-2 Marginmargin은 부모컴포넌트나 같은 부모 컴포넌트 안에 있는 자식들과의 여백을 지정하는데 사용한다. —Exampleimport React from 'react'; import {Text, View, StyleSheet, SafeAreaView} from 'react-native'..

React-Native 2021.01.28

[Programers] 스킬트리(JavaScript)

출처 https://programmers.co.kr/learn/courses/30/lessons/49993 ❓Question—문제 설명 선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다.예를 들어 선행 스킬 순서가 스파크 → 라이트닝 볼트 → 썬더일때, 썬더를 배우려면 먼저 라이트닝 볼트를 배워야 하고, 라이트닝 볼트를 배우려면 먼저 스파크를 배워야 합니다.위 순서에 없는 다른 스킬(힐링 등)은 순서에 상관없이 배울 수 있습니다. 따라서 스파크 → 힐링 → 라이트닝 볼트 → 썬더와 같은 스킬트리는 가능하지만, 썬더 → 스파크나 라이트닝 볼트 → 스파크 → 힐링 → 썬더와 같은 스킬트리는 불가능합니다.선행 스킬 순서 skill과 유저들이 만든 스킬트리1를 담은 배열 skill_tre..

CodingTest 2021.01.27

4.[Objective-C] Function(함수)

4-1 개요함수를 진행한 뒤에 클래스를 하는 것이 맞았는데 거꾸로 포스팅을 한 것 같다.Objective C의 함수는 C언어와 거의 유사한 구조를 가지고 있다. 4-2 함수 선언#import @interface MyClass : NSObject //instance { int myAge; NSString *myName; NSString *mySubject; } //property @property (nonatomic, assign) int myAge; @property (nonatomic, retain) NSString *myName; @property (nonatomic, retain) NSString *mySubject; //instanceMethod - (void) instanceMethod; - (..

Objective-C 2021.01.27

9.React-Native Layout(justifyContent, alignItems)

9-1 Layout DirectionLayout Directiondms 계층 구조에서 자식요소와 텍스트가 배치되어야 하는 방향을 지정한다.레이아웃의 방향은 양끝을 나타내는 start와 end를 통해 나타내는데 기본적으로 React Native는 LTR 레이아웃 방향으로 되어있다. LTR 모드에서는 start는 왼쪽 끝을 의미하고 end는 오른쪽 끝을 의미한다. LTR(default) : 텍스트와 자식 요소들이 왼쪽에서 오른쪽으로 배치된다. margin과 padding 속성도 왼쪽에 적용이 된다.RTL : 텍스트와 자식 요소들이 오른쪽에서 왼쪽으로 배치된다. margin과 padding 속성도 오른쪽에서 왼쪽으로 적용이 된다. 9-2 justifyContent자식 컴포넌트를 부모 컴포넌트 flexDirec..

React-Native 2021.01.27

8.React-Native Layout(flex, flexDirection)

8-1 개요 없는 App이 없는 오늘날 같은 시대에서는 디자인이 정말 중요하다. 같은 기능을 하는 App이 2개가 있다면 소비자는 디자인, 효율성, 부가기능들을 따져서 둘중에 하나를 선택할 것이다.React-native를 시작할 때 디자인 쪽을 공부하고 진행을 하면 더욱 빠르게 습득이 가능할 것 같아서 가장 먼저 디자인의 레이아웃 부분을 다룰 것이다. 8-2 Flexflex는 크기를 비율로 설정하는 것이다. —Example1import React from 'react'; import {Text, View, StyleSheet} from 'react-native'; const App = () => { return ( ) } const styles = StyleSheet.create({ container: ..

React-Native 2021.01.27

[Programers]기능개발(JavaScript)

출처 https://programmers.co.kr/learn/courses/30/lessons/42586 ❓Question 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다.또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다.먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. —제한 사항작업의 개수(progresses, spee..

CodingTest 2021.01.26

7. React-Native 튜토리얼

7-1 프로젝트 구조 1. index.js프로젝트를 실행할 때 가장 먼저 실행되는 기점이다.App.js를 가져와서 컴포넌트로 등록한다. 2. app.js실제 디바이스에 표시되는 코드가 App.js에 작성되어 있다. 3. android/안드로이드 네이티브 모듈을 담당하고 있는 부분이다.react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다. 4. ios/ios 네이티브 모듈을 담당하고 있는 부분이다.react-native에서 지원하지 않는 기능들을 사용하기위해서는 네이티브모듈을 직접 구현해야 한다. 5. node_modules/react-native 프로젝트와 관련된 모듈이다.npm을 통해 설치한 모듈들이 이곳에 위치한다.모듈을 찾지 못하는 에러가 발생하면 ..

React-Native 2021.01.26
반응형