ReactNative15 [TIL] 내일배움캠프 React 과정 2023.01.04 Today I Learned React Native 심화 강의 수강 LinearGradient 사용하기 배경 이미지에 그라디언트 효과를 줄 때 LinearGradient를 사용한다. colors라는 porp을 넘겨서 배열 형태로 원하는 그라디언트 효과를 구현할 수 있다. ["transparent", "black"]는 투명에서 검은색으로 그라디언트 효과를 주고 싶다는 것을 의미한다. flex-end 속성 flex-end: 아이템들을 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽에 위치한다. 출처 https://studiomeal.com/archives/197 StyleSheet.absoluteFill // 동일한 코드 배경이미지 적용.. 2023. 1. 4. [TIL] 내일배움캠프 React 과정 2023.01.03_React Navigation Today I Learned React Native 실무 심화 강의 수강 터미널에서 expo 셋업하기 npx create-expo-app 폴더명 git bash에 입력 eas update:configure vscode로 폴더 열고 터미널창에 입력 -> expo 홈페이지에도 프로젝트가 생성된 것을 볼 수 있음 eas update 배포하기 App icon 변경하기 icon.png -> IOS 아이콘 adaptive-icon -> Android 아이콘 splash -> 로딩 화면 Figma 링크에 들어가서 아이콘을 만들고 png 파일로 저장한 후에 assets 폴더에 동일한 파일명으로 png 파일을 교체한다. 공식문서 https://docs.expo.dev/guides/app-icons/ react-navig.. 2023. 1. 3. [TIL] 내일배움캠프 React 과정 2022.12.31 Today I Learned React Native Firebase와 연결하기 React Native에서 Firebase 데이터 가져오기 // firebaseConfig.js import { initializeApp } from 'firebase/app'; // Optionally import the services that you want to use // import {...} from "firebase/auth"; // import {...} from "firebase/database"; // import {...} from "firebase/firestore"; // import {...} from "firebase/functions"; // import {...} from "firebase/st.. 2022. 12. 31. [TIL] 내일배움캠프 React 과정 2022.12.30 Today I Learned React Native로 CRUD 구현하기 if문으로 tap 버튼 구현하기 {todos.map((todo) => { // 카테고리가 같은 때만 return해라 if (category === todo.category) { return ( ) } }; 사망토론 팀프로젝트 때 최신순, 좋아요순 정렬을 구현하고 싶었는데 좋아요순 정렬을 구현하는 데까지만 성공하고 이걸 탭을 눌렀을 때 어떻게 처리해야 할지 몰라서 중간에 포기했었다. 근데 오늘 튜터님의 강의를 들으면서 state를 하나 만들어서 그 값에 따라 if문으로 처리할 수 있다는 것도 알게 됐다. 삭제 시 alert 띄우기 const deleteTodo = (id) => { Alert.alert("삭제", "정말 삭제하시겠습니다.. 2022. 12. 30. [TIL] 내일배움캠프 React 과정 2022.12.29 Today I Learned React Native 공부하기 EXPO 프로젝트 생성하기 EXPO 홈페이지에서 새로운 프로젝트를 생성한 후에 터미널에 한 줄씩 입력한다. 그리고 어플에서 진행 상황을 확인하려면 'expo start'를 입력한다. React-Native의 CSS 특징 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "white", alignItems: "center", justifyContent: "center", }, text: { color: "black", // 에러 발생 fontSize: '40px', // 정상 작동 fontSize: 40, } }); 텍스트에 폰트 사이즈를 지정하고 싶었는데 자꾸 해.. 2022. 12. 29. 이전 1 2 다음
