KassyLog

웹에서 개발할 땐 window.alert를 활용해서 간단한 안내나 경고 문구를 띄워주곤 하는데 이를 react-native에서는 어떻게 활용할까? Alert · React Native Launches an alert dialog with the specified title and message. reactnative.dev 위와 같은 컴포넌트가 역시 존재한다. Alert.alert("아이디와 비밀번호를 모두 입력해주세요", [{ text: "OK", onPress: () => console.log("OK Pressed") }]); 위 처럼 간단하게 코드를 작성할 수 있다. 여기서 특이점이 존재하는데, Alert.alert( "로그아웃 하시겠습니까", "클릭", [ { text: "아니오", onPress..

android와 iOS 모두 카메라 기능을 하기 전에 필수로 권한요청을 진행해야 한다. iOS 는 Info.plist에 작성 NSPhotoLibraryUsageDescrption $(PRODUCT_NAME) would like access to your photo gallery NSCameraUsageDescription $(PRODUCT_NAME) would like to use your camera NSPhotoLibraryAddUsageDescription $(PRODUCT_NAME) would like to save photos to your photo gallery android 는 AndroidManifest.xml에 작성 내가 찾아본 라이브러리는 총 3가지가 있었는데 그 중에서 내가 활용한 ..

리액트에서는 모달을 만들기위해서 따로 컴포넌트를 만들거나 css의 (나름) 공수를 들였어야 했는데 리액트네이티브에서는 자체적으로 제공하는 모달이 있어서 아주 편리하게 모달을 만들 수 있다. 개인적으로 react-native를 활용하면서 가장 편하다고 생각하는 부분이다. Modal · React Native The Modal component is a basic way to present content above an enclosing view. reactnative.dev import React, { useState } from "react"; import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native"; const App ..

react-native에는 버튼 태그가 따로 존재한다. { navigation.navigate("changePw"); }} /> 예시처럼 버튼 안에 title로 버튼의 이름을 지정할 수 있고 color로 글자 색깔을 지정할 수 있다. 다만 Button 태그 하나로는 color만 변경 가능하고 폰트 변경 및 사이즈 변경 불가하다는 커스텀의 한계가 있다. Button · React Native A basic button component that should render nicely on any platform. Supports a minimal level of customization. reactnative.dev 위 사이트에서 더 자세하게 알 수 있지만 커스터마이징을 하기 위해 내가 사용한 방법은 아래의..

id, class 등의 선택자 사용방식이 아닌 StyleSheet.create 메소드 활용 스타일 속성을 지정할 때 ;가 아닌 , 사용 스타일 속성명은 - 대신 CamelCase React Native에서는 축약형을 사용하지 않기 때문에 margin이나 padding을 사방으로 줄 수 없음. 그 대신 marginVertical, paddingHorizontal 등의 상하, 좌우 값을 한번에 적용할 수 있는 속성 존재 스타일 우선순위 차이 → 기존 CSS는 우선 순위 규칙에 따라 스타일이 나중에 선언된 값이 지정되는 반면, React native은 그것과 관계없이 나중에 전달하는 스타일이 항상 우선순위가 됨 React Native에서는 가상 클래스 등을 사용할 수 없음 React Native의 flex c..

나는 최근 한 두달 동안 리액트 네이티브를 활용해서 기능구현 및 코드를 작성한 경험이 있다. 그 기간 동안 자주 활용했던 태그들 중 TextInput에 대해 기록해보겠다. setPw(text)} /> 내가 작성한 코드를 간단하게 설명해보자면, style : input으로 변수명을 설정 후 작성한 스타일 코드 placeholder: input에 작성한 내용 autoCapitalize: 첫문자를 대문자를 설정할 지의 여부 maxLength: 최대 글자수 제한 그 외 설명은 아래에서 진행하겠다. HTML의 input 과 같은 역할이며 리액트와 다른 점은 키보드 타입을 정할 수 있다는게 가장 큰 차이점이다. 1. keyboardType 이메일을 작성하는 인풋의 경우: keyboardType="email-addr..

보통 개발할 때 console.log를 활용하여 데이터값이나 실행 순서등 확인하게 되는데 리액트 네이티브로 개발할 때에도 마찬가지이다. 하지만 네이티브로개발 할 때는 리액트처럼 우클릭 후 검사를 통한 개발자도구 열기가 아닌 'Flipper'라는 도구를 활용하면 더 편하게 확인할 수 있다. 터미널로 오류나 콘솔을 확인하기엔 한눈에 알아보기 쉽지 않은 경우가 있는데 이 때 Flipper를 활용하면 보다 편안해해진다~~☺️ 그렇지만, 설치를 하다보면 M1의 경우에는 에러를 퉤! 뱉을 경우가 있는데 이 때 아래의 코드를 작성하면 편안해진다~~ ☺️☺️ arch -arm64 brew install https://fbflipper.com/docs/getting-started/react-native/ React Na..

Xcode 설치 설치 시간이 꽤 오래걸리기 때문에 가장 처음으로 세팅하는 것을 추천! iTerm2 설치 https://iterm2.com 에서 설치 필수라기 보단 좀더 쉽게 M1에서 세팅 할 수 있는 터미널 우클릭을 해서 ‘정보가져오기’를 누르고 ‘Rosetta를 사용하여 열기’ 클릭 응용 프로그램(Intel)은 앱이 Intel 프로세서만 지원하며 Apple Silicon이 탑재된 Mac에서 작동하려면 Rosetta가 필요함 oh-my-zsh 설치 필수는 아니지만 사용하기 편하다고 하며 많은 사람들이 사용하기에 설치...! homebrew 설치 https://brew.sh/index_ko 에서 설치 brew --version 으로 설치 확인 맥에서 다양한 도구들을 설치할 수 있는 패키지 매니저 node,..