💻💭🎧🌏

이번 프로젝트 중에 젤 막혔던 문제... 문제가 어디서 발생했냐.. 하면은 원래 구글 소셜로그인의 A to Z를 백엔드에서 담당하도록 구현을 했다. 오랜만에 시퀀스 다이어그램도 그려봤는데 아래와 같다. (draw. io 는 그리기는 참 편리한데 저장할 때 화질이 조금만 더 개선되면 좋을 것 같다.. .ㅎ..) 로그인 요청부터 Authorization Code를 받아 사용자 정보 요청하는 것까지 서버에서 진행을 하고 최종 accessToken 또는 사용자 정보를 클라이언트 측으로 반환하도록 구현했었다. (회원이면 인증/인가를 위한 accessToken만, 비회원이라면 회원가입을 바로 진행할 수 있도록 사용자정보 (name, email, picture) 을 담아보낸다. 근데 정말 예상치도 못하게 프론트(Re..

FlatList 코어 컴포넌트 사용하기 똑같은 컴포넌트를 여러 개 렌더링할 때는 FlatList를 사용하는 것이 속도가 빠르다. import {FlatList} from 'react-native' keyExtractor 속성 item과 index 값이 매개변수인 콜백 함수를 지정해 renderItem에 설정한 콜백 함수가 반환하는 컴포넌트의 key 속성에 설정할 값을 얻음 } keyExtractor={(item, index) => item.id} /> ✅ 화살표 함수는 함수명이 없어도 됨 ✅ id 같은 속성이 없다면 index.toString()을 반환해도 됨 ItemSeparatorComponent 속성 이 속성에 설정한 콜백 함수가 반환하는 컴포넌트를 아이템과 아이템 간의 구분자 역할을 하는 컴포넌트..

flex:1 과 height: '100%'의 차이 const styles = StyleSheet.create({ view: { flex: 1, height: '100%', padding: 5, backgroundColor: MD2Colors.lightBlue500, }, text: {fontSize: 20, color: 'white'}, }) flex: 1 ➡️ 형제 요소의 높이가 반영된 부모 컴포넌트의 높이의 여분을 가져옴 height: '100%' ➡️ 형제 요소의 높이와 무관하게 부모 컴포넌트의 높이를 모두 가져옴 ✅루트 view의 Dimensions.get('window').height 와 같은 것 flexDirection 스타일 속성 부모 컴포넌트가 고정일 때 자식 컴포넌트를 자신의 영역에 배치..

ImageBackground 코어 컴포넌트 사용하기 import {ImageBackground} from 'react-native' ImageBackground 사용법

Platform과 Dimensions API 실행 OS 확인 import {Platform{ from 'react-native' console.log(Platform.OS) ✅ 앱이 실행되는 폰이 안드로이드폰인지 아니면 아이폰인지를 확인한다. ✅ 위의 코드를 실행하면 android 또는 ios 라고 결과가 나온다. Dimension API import {Dimension} from 'react-native' const {width, height} = Dimensions.get('window') ✅ width, height 는 폰을 가로로 회전하더라도 변하지 않는다. 뷰 컴포넌트의 backgroundColor 스타일 속성 ➡️ 이름에 'View' 가 들어간 뷰컴포넌트는 backgroudColor 스타일 속..

스타일 객체 설정 안쪽 중괄호 부분 : 객체를 의미한다. 바깥쪽 중괄호 부분 : JSX 구문에서 자바스크립트 코드를 설정할 때 쓰는 문법이다. ✅ 컴포넌트의 style 속성에는 배열을 설정할 수 있다. StyleSheet API import {StyleSheet} from 'react-native' 스타일 객체를 style 속성에 설정하는 것 : 인라인 스타일 이 외에도 StyleSheet API를 지정해서 사용할 수 있다. 스타일 객체 생성하는 방법 : StyleSheet의 create 메서드 사용 const styles = StyleSheet.create({ 키_이름1: 스타일_객체1, 키_이름2: 스타일_객체2, ... }) 인라인 스타일과 StyleSheet 스타일의 차이 인라인 스타일 방식 : ..

버튼을 누르면 대화상자가 나타나는 기능 구현하기 버튼 컴포넌트 import react from 'react'; import {SafeAreaView, Alert, Button} from 'react-native'; export default function App() { return ( Alert.alert('home pressed.', 'message')} /> ); } Button 코어 컴포넌트는 onPress 속성을 제공한다. ➡️ 콜백 함수를 지정해야 함. 콜백 함수의 형태 : () => {/* 함수 몸통 */} 리액트 네이티브는 Alert API (Application Programming Interface) 를 제공한다. Alert API 가 제공하는 alert 정적 메서드 : static a..

이번 글에서는 02-1 리액트 네이티브 프레임워크의 작동 원리 / 02-2 JSX 구문 탐구하기 파트를 공부해봅니다 ... 1. 리액트 네이티브 프로젝트 만들기 npx react-native init 프로젝트 디렉토리명 --template react-native-template-typescript 2. npm start ※ 이때 알맞은 프로젝트 디렉토리에서 npm start를 실행하지 않으면 아래와 같은 오류가 발생할 수 있다. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/parkseyeon/React-Native/package.json npm ERR! errno -2 npm ERR! enoent Could not read packag..