반응형

전체 글 106

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

6. React-Native 설치(Mac OS)

6-1 React-Native란?React-Native는 페이스북이 개발한 오픈소스 모바일 애플리케이션 프레임워크이다. Android, IOS, Web, UWP용 애플리케이션을 개발하기 위해 사용된다. 6-2 Rn과 ExpoReact-Native 프로젝트를 생성할 때 총 2가지 방법을 제공한다. expo Cli와 react-native Cli가 있는데 이것은 각각의 장점과 단점이 있다. —Expo장점배포하기 편하다.빠르고 간단하게 설치가 가능하다.xCode, Android 스튜디오 없이 본인의 휴대폰으로 테스트 가능하다.단점Java, Kotlin, Objective-C, Swift로 작성이 불가능하다.빌드 파일의 크기가 크다.블루투스 이용불가 —RN장점자기가 원하는 언어로 추가로 작성이 가능하다.(bri..

React-Native 2021.01.26

2. [Objective-C] Class(1) Property

2-1 Class.h—선언@interface MyClass : NSObject //insert here... @end→ @interface와 @end 사이에 클래스안에 넣을 변수나 생성자 메서드를 삽입하면 된다. —인스턴스 변수@interface MyClass : NSObject //instance { int myAge; NSString *myName; NSString *mySubject; } @end→ 현재 클래스 안에는 myAge란 정수형 변수와 myName, mySubject라는 문자형 변수 2개를 가지고 있다. —property@interface MyClass : NSObject //instance { int myAge; NSString *myName; NSString *mySubject; } /..

Objective-C 2021.01.26

[Programers]1차 다트게임(JavaScript)

출처 https://programmers.co.kr/learn/courses/30/lessons/17682 ❓문제 설명카카오톡에 뜬 네 번째 별! 심심할 땐? 카카오톡 게임별~ https://programmers.co.kr/learn/courses/30/lessons/17682카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다.다트 게임은 총 3번의 기회로 구성된다.각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다.점수와 함께 Sin..

CodingTest 2021.01.25

1. [Objective-C] NSLog, 변수

1-1 개요Objective-C는 프로그래밍 언어에 스몰토크 스타일의 메시지 구문을 추가한 객체지향 언어이다. Swift가 만들어지기 이전에 애플의 매킨토시의 OS인 OSX와 아이폰의 운영체제인 IOS에서 사용되었다. 원래는 배울 생각이 전혀 없었는데 회사에서 Objective-C 기반의 코드를 Swift로 변환을 해야된다고 그래서 공부를 하기로 결심했다. IOS를 개발하면서 나쁠건 없다고 생각하기 때문에 포스팅을 시작하려고 한다. 1-2 NSLogconsole에 출력하는 함수이다.NSLog(@"포맷문자", 인자)로 사용하면 된다. 포맷문자는 C언어랑 똑같다. 정수형 : %d, %u(unsigend), %ld, %lu(unsigned)실수형 : %f, %e(지수형)16진수, 8진수 : %x, %o객체형 ..

Objective-C 2021.01.25

5. React useContext, useRef, useLayoutEffect, useRuducer

5-1 개요전 시간까지 가장 보편적이고 많이 쓰이는 Hook을 알아보았습니다. 이제는 그 외에 Hook함수들을 공부하면서 React Hook을 마무리 짓는 시간을 갖겠습니다.5-2 useContext()컴포넌트 외부 어딘가에 존재하는 context 객체(React.reactContext)를 받아 그 context의 현재 상태(state)를 변환한다.💡context : App이나 객체의 현재 상태를 나타내주는 역할context의 상태는 useContext Hook을 호출하는 컴포넌트를 감싸고 있는 Provider의 value prop에 의해 결정된다.const value = useContext(MyContext);컴포넌트에서 가장 가까운 Provider가 갱신(렌더링)되면 useContext Hook은 M..

React-Native 2021.01.25

4. React memo(), useCallback()

4-1 목적리액트를 이용해서 개발을 하게되면 가장 중요한 요소 중 하나가 렌더링 호출 시점입니다. 불필요한 렌더링이 발생하게되면 그만큼의 시간이 계속 낭비하게 되고 효율성이 떨어져 사용자에게 불편함을 느끼게 할 수 있습니다. 이 때 불필요한 리렌더링을 방지하기 위해 useCallback과 React.Memo를 사용하게 되는데 언제 어떤식으로 사용하는지 알아보겠습니다. 4-2 ReferenceReact.memo와 useCallback()을 공부하기 전에 참조라는 개념을 알아야 더욱 이해하기 쉽기 때문에 한번 짚고 넘어가겠습니다. pass by reference : 한쪽에 커피를 채우면 다른 한쪽에도 동일한 커피가 채워진다.(얕은 복사)pass by value : 실제로 새로운 컵이 생겨난 것이기 때문에 한..

React-Native 2021.01.25
반응형