사이드 프로젝트의 기능 중 달력을 만드는 부분이 있었다. 달력 레이아웃은 많이 구현했기 때문에 문제가 없을 것이라고 생각했는데, 정말 예상치 못한 오류가 있었다.  달력을 배치하는 부분에서 아주 미세하게 7등분으로 나눠지지 않는 문제가 있었다. react native에서 화면을 가득 채우는 간단한 방법은 flex 속성을 사용하는 것이다. 여기서도 복잡한 기능이 있는게 아니다.  부모 요소에게 flex: 1을 주고 자식 요소에게도 flex: 1을 주면 간단하게 해결된다. 지금까진 전혀 문제가 없었다. 그래서 동일하게 작업을 한 결과는 다음과 같다. 붉은 배경은 Children에 해당하는 요소에게 배경색을 줬다. 보는 것처럼 얇은 하얀색 여백을 확인할 수 있다. 이론대로라면 꽉차서 전..

react나 react native나 폰트를 적용하는 것은 생각보다 귀찮다. react의 경우 google fonts를 사용한다면 public에 있는 index.html에 링크를 추가해주면 되지만 생각보다 react native는 귀찮았다. 그러다가 이번에 간단하게 처리하는 방법을 알아서 정리한다. 폰트 저장 먼저 원하는 폰트를 /assets/fonts 폴더에 저장한다. 기본적으로 assets 폴더도 없을 것이고 fonts 폴더는 더더욱 없을 것이다. 그러니 해당 폴더를 만들고 내부에 사용할 폰트 파일을 추가해주면 된다. 라이브러리 사용 npm i react-native-asset 원래는 android 폴더 등에 설정을 해야하는데 그런 작업을 간단하게 해주는 라이브러리가 바로 react-native-as..

Expo가 아닌 React Native에서 빌드하는 방법을 작성하려고 한다. Window 환경에서 진행하며 iOS는 유감이지만 진행하지 않고 Android 만 진행할 계획이다. 서명 키 생성 빌드를 하기 위해서는 서명키가 필요하다고 한다. 현재 개발 환경에서 android / app 폴더로 이동해서 명령어를 통해 서명키를 발급받는다. keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 Enter keystore password: Re-enter new password: What is your first and last name? [Unknown]: Wha..

오늘은 간단하게 Styled Component와 폴더 구조 등을 잡으려고 한다. react native에서 styledcomponent를 사용하는 방법이 괜찮아? 본격적으로 사용하기 전에 react native에서 styled-component를 사용하는 방법이 괜찮은지 물어봤다. 혹시라도 styled-component 외 emotion이라던지 다른 라이브러리가 인기가 있을 수 있다는 생각이기 때문이다. 오케이 전혀 문제 없다고 한다. 그러므로 바로 설치했다. import {createGlobalStyle} from 'styled-components/native'; 이렇게 작성하니 undefined is not Funtion이라고 하는데 뭐가 문제일까? 전역 스타일을 설정하기 위해서 createGloba..

들어가며. Todo 앱 - Context & AsyncStorage_1편과 이어지는 내용입니다. 앞선 부분을 보지 않으셨다면 확인하시는 것을 추천드립니다. 4. 개발 10. AddTodo 컴포넌트 import React, {useState} from 'react'; import AddButton from './AddButton'; import TodoInput from './TodoInput'; interface Props {} const AddTodo = ({}: Props) => { const [showInput, setShowInput] = useState(false); return ( setShowInput(true)} /> {showInput && setShowInput(false)} />} )..

0. Context API & AsyncStorage? Context API React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 즉, 부모 컴포넌트에서 자식 컴포넌트로, 위에서 아래로 한 방향으로만 데이터가 흐르게 된다. 하지만 Context API는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이, 전역으로 사용되는 데이터를 다룬다. 전역 데이터를 저장한 후, 컴포넌트에서 필요한 데이터를 불어와 사용한다. AsyncStorage React에서 Props와 State, Context는 모두 휘발성으로 데이터가 메모리에만 존재하며, 물리적으로 데이터를 저장하지는 않는다. AsyncStorage는 앱 내에서 키 값 ..

0. 들어가며 들어가기에 앞서 개발환경 구성은 앞선 React Native 개발환경 구성 부분을 확인하시길 바랍니다. 1. 프로젝트 생성 React Native CLI를 사용해서 React Native 프로젝트를 생성한다. react-native init FirstApp 명령어를 사용하면 자동으로 최신 리액트 네이티브 버전으로 프로젝트가 생성된다. 하지만, 이번 버전을 사용하거나, 특정 프로젝트와 동일한 버전으로 프로젝트를 생성하고 싶은 경우에는 react-native init -version 0.59.10 FirstApp -version 옵션을 사용하면 지정할 수 있다. 프로젝트 구성이 다 된 경우에 IOS의 경우 yarn ios // or react-native run-ios 명령어를 통해서 프로젝트..

1. 초코렛티 설치 윈도우에서 초코렛티는 패키지를 설치하고 관리할 수 있는 패키지 매니저다. Install을 클릭해 설치 페이지로 이동한다. 초코렛티는 powershell, 즉 powershell의 관리자 권한으로 설치를 해야 한다. 명령어를 복사하고 powershell를 관리자 모드로 킨다. 설치를 하고 cmd에서 choco -v 명령어를 실행했을 때 버전이 나오면 정상적으로 설치가 완료된 것이다. 2. node 설치 node 설치 부분은 이미 React 개발 환경에서 진행 하였기 때문에 참고하세요. https://bum-developer.tistory.com/entry/%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%..