본문 바로가기

전체보기

 (286)
리액트 네이티브에서 화면이 상태바 영역을 넘어가지 않게 하는 방법 핸드폰에서 상태바 영역도 화면으로 취급되기 때문에 margin 값을 주지 않으면 컴포넌트가 겹치게 되어 지저분하게 보인다. 그렇다고 일정한 margin 값을 주더라도 기기마다 상태바의 높이가 다르기 때문에 올바른 해결 방법이 될 수 없다. 아이폰의 경우 View 대신 SafeAreaView를 쓰면 간단히 해결할 수 있다. 그러나 안드로이드는 안 먹히기 때문에 다른 방법을 찾아야 한다. 이를 해결하기 위해 expo-constants를 설치하자. npm i expo-constants 모듈에 있는 statusBarHeight 속성을 이용하면 기기의 상태바 높이를 구할 수 있다. import Constants from 'expo-constants'; // Constants로 불러온다. function App()..
리액트 네이티브에서 리스트를 구현하는 방법 - FlatList 리액트 JS에서 map 메소드를 이용해 배열에 각 컴포넌트를 담아 렌더링하는 것과 달리 리액트 네이티브에서는 FlatList를 이용해서 리액트 JS와 유사하게 리스트를 구현한다. FlatList의 data 속성에 배열을 담고 keyExtractor에는 유니크한 key를, renderItem에 렌더링될 컴포넌트를 넣는다. map 메소드를 쓰는 것과 유사한 형태다. import React from 'react'; import { FlatList } from 'react-native'; import ListItem from './listItem' const messages = [ { id: 1, message: 'hello' }, { id: 2, message: 'bye' } ]; function App() ..
안드로이드와 iOS 환경에 따라서 다른 컴포넌트를 불러오는 방법 리액트 네이티브를 이용하면 안드로이드와 iOS 앱을 동시에 만들 수 있다. 리액트 네이티브가 알아서 각 환경에 맞춰 빌드해주기 때문이다. 그러나 안드로이드에서만 적용되거나 iOS에서만 적용되는 경우도 있어서 각 환경에 따른 분기를 종종 해줘야 한다. 예를 들어 Courier라는 폰트는 iOS에서만 쓸 수 있고 Roboto라는 폰트는 안드로이드에서만 쓸 수 있다. 이런 경우 분기를 해주려면 Text 컴포넌트의 스타일에 Platform.OS를 이용해서 환경에 따라 다른 fontFamily를 적용할 수도 있지만 사용자 Text 컴포넌트를 따로 만드는 게 깔끔할 것 같다. // AppText.ios.js import React from 'react'; import { StyleSheet, Text } from ..
리액트 네이티브에서 아이콘 넣는 방법 엑스포를 이용해서 리액트 네이티브 프로젝트를 만들었다면 다음과 같이 아이콘 모듈을 불러올 수 있다. import { MaterialCommunityIcons } from '@expo/vector-icons'; 아래 링크에서 고를 수 있다. https://icons.expo.fyi/ 예를 들어 MaterialCommunityIcons라는 아이콘 카테고리에서 arrow-right 아이콘을 넣고 싶다면
핸드폰의 화면 회전에 따라 레이아웃을 다르게 만드는 방법 리액트 네이티브에서 핸드폰을 90도로 돌렸을 때 레이아웃이 달라지도록 설정하면 화면이 좌우로 길어져서 모양이 다 망가진다. 때문에 핸드폰을 세로로 놓았을 때와 가로로 놓았을 때의 경우를 둘 다 처리해줘야 한다. 이를 위해 핸드폰의 방향이 바뀌었을 때 호출되는 함수가 필요한데 useDeviceOrientation() 훅스를 쓰면 아래의 객체를 리턴해서 핸드폰의 놓인 상태에 따라 레이아웃을 다르게 표현해줄 수 있다. { landscape: false, portrait: true } 이 훅스를 쓰려면 다음 모듈을 설치해야 한다. npm i @react-native-community/hooks 아래처럼 추가해서 쓸 수 있다. import { useDimensions, useDeviceOrientation } f..
Prettier와 ESlint 함께 사용하기 prettier와 ESlint는 코드를 깔끔하게 해주는 툴이다. 둘이 비슷한 역할을 해서 개발을 처음 접했을 때 구분하기 쉽지 않았다. prettier는 저장할 때 설정에 따라서 자동으로 코드의 형태를 바꿔준다. (VSCode의 설정 중 format on save가 체크 됐을 때) 예를 들어 세미 콜론을 채워준다든지 특정 길이 이상일 때 줄바꿈을 해준다든지 등의 설정을 할 수 있다. ESlint는 설정에 따라서 스타일에 맞지 않을 경우 밑줄을 그어준다. 예를 들어 let 키워드로 변수를 선언하고 한 번도 변수를 바꿔주지 않을 경우 const를 사용하라고 줄을 쳐준다. 1. 먼저 둘을 VSCode에서 사용하려면 프로젝트 폴더에서 다음 명령어를 입력해 설치한다. npm i -D prettier eslint ..
알고리즘 어떻게 준비할까? 알고리즘이란 어떤 문제를 해결하기 위한 절차나 방법을 말합니다. 꼭 컴퓨터 세계에서만 쓰이는 단어는 아닙니다. 수학을 포기한 학생이 수학 시험 답안을 적을 때 12345라는 일정한 패턴을 쓴다면 이것도 알고리즘이라고 할 수 있습니다. 컴퓨터는 사람들의 반복적인 일을 빠르고 정확하게 처리해줍니다. 이렇게 블로그에 글자를 입력하는 것도 사람이 어떤 자판을 눌렀을 때 바로 화면에 그려준다는 점에서, 이 입력과 출력 사이에 컴퓨터 내부적으로 동일한 패턴이 이뤄진다는 점에서 알고리즘이라고 할 수 있습니다. 이 단순한 입출력 말고도 컴퓨터의 모든 부분이 알고리즘으로 되어 있습니다. 때문에 컴퓨터를 다루는 개발자가 되기로 마음먹었다면 알고리즘은 반드시 공부해야 합니다. 그러면 이 알고리즘은 어떻게 해야 잘할 수 있을..
Expo 설치, React Native 프로젝트 생성 1. 다음을 입력해서 expo를 글로벌로 설치한다. sudo npm i -g expo-cli 2. 다음을 입력해서 프로젝트를 생성한다. expo init 프로젝트이름 2-1. expo 명령어를 인식하지 못하는 경우 아래 링크를 참고해서 ~/.bash_profile에 export PATH=$PATH:~/.npm-global/bin를 추가해서 다시 실행하니 됐던 것 같다. 참고 : https://forums.expo.io/t/expo-cli-looks-installed-but-expo-command-not-found/14535 3. Managed workflow의 blank를 선택한다.

티스토리툴바