Jun's TID

React Native에서 StyleSheet의 resizeMode 속성은 이미지의 크기 조정 방식을 결정하는 데 사용되는 것이다. 이 속성에는 여러 옵션이 있는데, 주요 옵션은 다음과 같다. - cover: 이미지가 컨테이너의 경계를 초과하지 않도록 조정되며, 비율은 유지된다. 이미지의 일부가 컨테이너에 맞지 않을 수 있다. - contain: 이미지가 컨테이너 안에 완전히 들어가도록 조정되며, 비율은 유지된다. 이미지의 너비나 높이가 컨테이너의 너비나 높이보다 작아질 수 있다. - stretch: 이미지가 컨테이너의 너비와 높이에 맞도록 늘어난다. 이 때 이미지의 원래 비율은 유지되지 않는다. - repeat: 뷰의 크기대로 이미지를 리사이징한다. 이 과정에서 이미지의 가로 세로 비율이 원본과 달라질..

거의 모든 웹/앱 개발 언어 실습의 고유 첫 프로젝트인 아주 간단히 버튼으로 숫자만 하나씩 증가/감소시킬 수 있는 카운터를 만들어보자. ◎components/Counter.js import React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; const Counter = ({count, onIncrease, onDecrease}) => { return ( {count} ); }; const styles = StyleSheet.create({ wrapper: { flex: 1, }, numberArea: { flex: 1, alignItems: 'center', justifyContent: 'center', }, n..

react-native를 공부한 지 얼마 지나지 않았지만, 벌써 마음에 든다. 바로 css 파일을 굳이 따로 만들지 않는다는 것! 개인적으로 css 파일을 따로 만들고 각종 셀렉터들을 막 찾아다니는 걸 정말 싫어해서... 이건 좀 반갑다. 간단하게 react-native에서 사용하는 StyleSheet의 특징과 예제 코드를 보자. CSS와 StyleSheet의 차이점 - 셀렉터라는 개념이 존재하지 않는다. - 모든 스타일 속성은 camelCase로 작성해야만 한다. - display 속성은 기본적으로 flex이며, 다른 값은 none 밖에 없다. - flexDirection 속성의 기본값은 웹에서는 row이지만, react-native 에서는 column이다. - react-native에서 스타일링할 때..

js를 많이 사용하는 사람들은 보통 ESLint로 조금 더 까다로운 문법 검사를 하면서 에러를 쉽게 찾는다고 하시길래.. 나도 한번 써보려고 한다. 기본으로 생성되는 config 파일을 그대로 두고 쓰려니까, 세미콜론도 못쓰게 하시길래. 내가 사용할 옵션들을 추가하고, 쓸데없는 옵션은 비활성화한 파일을 저장해두려고 한다. ◎.prettierrc.js module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', }; ◎.eslintrc.js module.exports = { root: true, extends: '@react-native',..

react를 한창 공부를 하던 때에 같이 했으면 참 좋았을 걸... 그때 괜히 Flutter가 더 좋대!라는 소리를 어디서 봐서 겉멋 부린다고 재낀걸 아주 후회하고 있다... 물론 flutter가 안좋다는 게 아니라, 회사 프로젝트 하나가 모바일을 react-native로 가는 바람에... flutter를 현재 딱히 쓸 곳이 없어졌다. 이제 새해도 왔고, 진짜 본격적으로 나만의 서비스를 하나 가지고 싶어서 리액트 숙련도가 많이 올라온 지금! 리액트 네이티브를 공부하려고 한다. Hello! react-native! 길벗 출판사의 react-native를 다루는 기술을 참고하여 차근차근 하나씩 해보려고 한다. 우선, 첫 프로젝트를 만들어보자! 새 프로젝트 생성 명령어 npx react-native init ..

핀치 제스처 또한 iOS에서 가장 많이 사용하는 동작 중 하나로, 두 손가락을 화면에 터치한 후 간격을 벌리고 좁히는 동작으로 화면을 확대, 축소할 때 많이 사용한다. 기본적으로 제스처를 다루는 방법은 앞서 진행했던 스와이프 제스처와 아주 비슷하기 때문에 그렇게 어려운 내용은 없다. 핀치 제스처로 폰트를 조절하는 예제와 이미지의 크기를 조절하는 예제를 다뤄보려고 한다. 우선, 텍스트의 폰트를 조절하기 위해 스토리보드에 레이블을 하나 올려두자. 코드도 굉장히 간단하다. import UIKit class ViewController: UIViewController { @IBOutlet var txtPinch: UILabel! var initialFontSize:CGFloat! override func view..

iOS는 다양한 제스쳐를 지원하는데, 그 중 가장 일반적으로 많이 사용되는 스와이프 제스처를 다루는 방법을 한번 알아보려고 한다. 이번 포스팅에서는 4개의 이미지 뷰를 놓고, 스와이프 제스처 이벤트를 처리하여 이미지를 바꿔보는 간단한 예제를 진행하려고 한다. 우선은 싱글 터치 제스처를 다루도록 코드를 작성하고, 이후에 멀티 터치 또한 인식하여 처리할 수 있도록 수정할 것이다. 바로 시작해보자. 우선 앱의 구성은 아래와 같이 위, 아래, 좌, 우 방향으로 이미지 뷰를 놓고 각 이미지 뷰에는 화살표 이미지를 셋팅한다. 싱글 제스처는 굉장히 간단하게 처리할 수 있다. 우선, 각 이미지 뷰에 초기 이미지를 셋팅하고, 빨간색 화살표 이미지와 검은색 화살표 이미지를 가지도록 UIImage 배열을 선언하여 초기화한다..

이번 포스팅은 사용자의 탭과 터치 동작을 받아서 처리하는 방법과 이를 이용하여 간단한 스케치 어플을 만들어 보려고 한다. 터치의 경우 View Controller에서 오버라이드 메서드를 제공하기 때문에 구현하기 아주 쉬운 이벤트이다. 바로 한번 들어가보도록 하자. 우선, Navigation Controller를 사용하여 2개의 View를 갖도록 할 것이다. 첫번째 뷰는 터치와 탭, 드래그와 같은 동작에 대한 이벤트를 처리하고 터치, 탭 카운트를 표시해주는 간단한 터치 View로 구성하고, 두번째 뷰는 간단하게 image view 위에 스케치를 할 수 있도록 구현한 스케치 View로 구성한다. 스토리보드는 각각 다음과 같다. ◎ ViewController 제약 조건은 아래와 같다. ◎DrawViewCont..

이번 포스팅은 iOS에서 제공하는 UIImagePickerController 클래스를 사용하여 카메라로 사진이나 동영상을 촬영하여 포토라이브러리에 저장하거나, 포토 라이브러리에 있는 사진이나 동영상을 어플로 불러오는 기능을 실습해보려고 한다. 아직 iOS 개발자로 등록하지 않아서 단말로 직접 카메라 테스트는 불가능하지만, 코드를 한번 익혀본다는 생각으로 진행하려고 한다. 바로 들어가보자. 우선 아래와 같이 이미지뷰 하나와 버튼 4개로 스토리보드를 구성하자. 모든 Item은 다음과 같이 스택뷰 내부에 삽입하였다. 코드는 아래와 같이 outlet 변수와 액션 함수를 먼저 선언해주고, 각 카메라에서 미디어를 가져오는지 라이브러리에서 가져오는 지 확인하기 위한 플래그와 필요한 변수들을 선언해준다. import ..

이번엔 아이폰 앱에서 비디오를 재생하는 방법을 알아보자. iOS에서 제공하는 AVPlayerViewController를 사용하면 앱 내부에 저장되어 있는 비디오 파일 뿐만 아니라 외부에 링크된 비디오 파일도 간단하게 재생할 수 있다. 간단한 예제이니, 바로 들어가보자. 우선, 아래와 같이 스토리보드를 구성하는데 위에서부터 레이블 버튼 레이블 레이블 버튼 으로 구성해준다. 그리고 버튼에 이미지를 삽입할 때는 반드시 아래 설정을 따라줘야 한다. 특히, Type 이 System일 때는 이미지가 표출되는 것이 아닌 Tint 배경색이 표시되니 주의하자. 이제 재생할 비디오 하나를 프로젝트 내부에 추가한다. 보통은 자동으로 삽입되지만, 반드시 프로젝트 클릭 > Target > Build Phases > Copy B..