JinyJiny'-'

1. 반응형 디자인의 필요성 앱의 특성상, 앱을 사용하는 기기의 디스플레이 크기가 천차만별이니 component 등의 사이즈를 해당 크기에 맞게 정해줄 필요가 있다. 본인은 디자이너와의 협업을 위해 figma를 사용하는데, figma의 inspect 탭에서 다음과 같이 pixel 사이즈로 알려준다. (고정크기라 디스플레이화면 고려 X) 또, 퍼센트 단위는 styled-component에서 사용 불가하다. 2. React Native의 Dimensions import { Dimensions } from "react-native"; const WINDOW_WIDHT = Dimensions.get("window").width; // Dimensions.get("screen").width; const WINDO..

1. 이번 포스팅의 목적 Bottom-Tab Navigator가 메인화면에 있고, 어떤 Tab을 누르면(또는 어떤 Component를 누르면) 하단 탭 없이 화면을 전체 다 덮게 뜨게 하고 싶을 수 있다. (예를 들어보자면, 쿠팡앱에서 하단 탭에 "검색"을 누를 때, 메인에서 상품 하나를 눌렀을 때 등) 이때, navigation을 어떤 식으로 구성하면 되는지 알아보자. 예제는 styled-component, 반응형디자인([React Native] 10. 반응형 디자인 적용하기) 을 사용했습니다. 2. Bottom Tab Navigator 구성 Bottom Tab Navigator는 이전 포스팅_[React-Native] 8. Bottom Tab Navigator 사용하기_의 예제를 사용한다. 이전 포스..

이전 포스팅 [React-Native] 4. react-navigation V5 설정하기 에서 react-navigation을 설치하고, Material Bottom Tab Navigator의 간단한 예제를 실행해보았다. 이번 포스팅에선 Bottom Tab Navigator을 사용해보자! (공식 문서는 여기) 예제는 styled-component, 반응형디자인([React Native] 10. 반응형 디자인 적용하기) 을 사용했습니다. 1. Bottom Tab Navigator를 import 해준다. import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 2. Bottom Tab 생성 및 커스텀 const Tab = create..

보통 앱들을 보면 기본 상태바를 사용하는게 드물다( 그만큼 못생겼다😂 ) 그래서 프로젝트 기본 셋팅단계에서 상태바도 만져주었다. React-Native에선 기본으로 StatusBar에 대한 기능을 제공해준다. 공식 사이트 : reactnative.dev/docs/statusbar StatusBar · React Native Component to control the app status bar. reactnative.dev 1. StatusBar 사용 우선 필요한 라이브러리 import를 해주자. import {StatusBar} from "react-native"; 이제, 아래와 같이 사용해서 상태바를 조작해줄 수 있다. (구글링했을 땐 이것처럼 안 나오던데 아마 Typescript를 사용하고 있어서 ..

이전 포스팅에서 react-native-make 라이브러리를 설치해주었다. 제대로 설치가 됐다면! 1. 이미지 준비 우선 앱아이콘으로 사용할 이미지 파일(1024x1024 px 사이즈)이 필요하다. 요런 임시 이미지를 사용해주었다. 2. 앱아이콘 생성 # react-native set-icon --path [path-to-image] react-native set-icon --path [path-to-image] --background ["color"] [path-to-image] 에 이미지가 위치한 경로를 넣어주고 ["color"] 부분은 원하는 배경색값을 넣어준다. ex) "#FFFFFF" 그럼 아래처럼 앱아이콘이 변경된다! 이미지가 제대로 잘 보이려면 이미지파일에 상하좌우 여백이 적절히 있어야겠다.

react-navigation이란? React-native 애플리케이션의 네비게이션과 히스토리를 간단하게 관리할 수 있는 라이브러리이다. 쉽게 말해 스크린 간 이동을 도와주는 라이브러리! 공식 사이트: reactnavigation.org/ React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 1. 설치 아래 명령어들로 react-navigation v5 라이브러리와, 이것을 사용하기 위한 라이브러리를 설치해준다. npm install --save @react-navigation/native npm install --save react-native-reanimated re..

CSS in JS 관련 리액트 라이버리 중 가장 인기있는 라이브러리인 styled-components를 사용합니다. 아직까진 뭔지 잘 모르겠으나.. 글들을 읽어보면 유용한 라이브러리인 것 같아서 우선 설정하고 차차 익히는 걸로!! > 공식 사이트 : styled-components.com/docs/api#typescript styled-components: API Reference API Reference of styled-components styled-components.com 1. 라이브러리 설치 styled-components 라이브러리와, typescript를 함께 사용하기 위한 라이브러리를 아래 명령어로 설치해줍니다. npm install --save styled-components npm i..

✨Typescript의 특징! JS는 인터프리어 언어지만, TypeScript는 컴파일 언어로 코드 수준에서 미리 타입을 체크, 오류를 잡아낸다. 코드 어시스트 기능도 지원받을 수 있다. JS에 type이 추가되었다. type이 생겨 안정성 확보가 가능하고, 예외처리를 하지 않아도 된다. JS엔진의 최적화를 돕는다. 1. TypeScript 사용에 필요한 라이브러리 설치 npm install typescript @types/react @types/react-native --save-dev 2. 프로젝트 생성 npx react-native init {프로젝트이름} --template react-native-template-typescript 위 명령어로 프로젝트를 생성해보면 기존에 생성했던 프로젝트와 구조..

1. Chocolatey 설치 우선 윈도우 패키지 관리자인 Chocolatey를 설치해줍니다. cmd창을 관리자 권한으로 연 후, 아래와 같은 명령어를 입력합니다. @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin" 2. Node.js 설치 cmd창을 관리자 권한으로 실행한..