반응형 앱 개발21 [RN] ScrollView와 FlatList의 차이점 리액트네이티브에서 많은 양의 데이터를 렌더링할 때 ScrollView와 FlatList를 사용할 수 있다. 아무 생각없이 썼었는데 책에서 정리가 잘 되어있어서 나중에 꺼내먹으려고 두개의 차이점과 사용할 때를 기록한다. ScrollView FlatList 렌더링 방식 렌더링해야 하는 모든 데이터를 한꺼번에 렌더링함. 화면에 적절한 양의 데이터만 렌더링하고, 스크롤의 이동에 맞춰 필요한 부분을 추가로 렌더링함. 이럴때 사용하세요 렌더링해야 하는 데이터의 양을 알고 있을 때 사용. 데이터의 길이가 가변적이고 양을 예측할 수 없을 때 사용. [출처] 처음 배우는 리액트 네이티브 - 김범준 2022. 10. 12. 처음 배우는 리액트 네이티브 9장 채팅 어플리케이션 firebase.js 코드 에러 해결 9장 채팅 어플리케이션의 src/utils/firebase.js의 코드는 아래와 같다. import * as firebase from "firebase"; import config from "../../firebase.json"; const app = firebase.initializeApp(config); const Auth = app.auth(); export const login = async ({ email, password }) => { const { user } = await Auth.signInWithEmailAndPassword(email, password); return user; }; 이렇게 실행하면 에러가 난다. While trying to resolve module `firebase.. 2022. 10. 7. node_modules 폴더 관리자 권한 없이 삭제 방법 1. 터미널 오픈 window + r cmd 입력 후 enter 2. 패키지 설치 npm install rimraf -g 3. node_modules 폴더 삭제 rimraf node_modules 이렇게 하면 폴더 권한 설정 없이도 폴더 삭제가 가능하다! 2022. 7. 4. [react-native] 지역 선택 : select되면 함수로 state 변경해서 안내 글자 바꾸기 앱을 처음 실행하면 지역을 선택하게끔 하려고 페이지를 작업하다가 여전히 늘 그렇듯 에러를 만났다.^^ 구글링해보니까 input에서 입력이 되면 그 값을 가지고 오는 함수들은 많던데 정작 내가 필요한건 읍쓰.. 문제점 구현하고 싶은 기능의 순서는 1. 지역을 select하지 않고 [다음] 버튼을 누른 경우 하단에 '입력이 필요합니다'라는 안내 문구를 띄운다. 2. 그 다음 지역을 select하면 invalid가 없어지면서 'OK'라는 안내 문구를 띄운다. 였는데, NativeBase의 예시 코드에는 저런 기능은 없었고... 1번 수행은 잘 하지만 그 이후 err에 담긴 state가 계속 남아있으면서 invalid에서 err을 자꾸 데려와서 이후 로직을 방해했다. 제대로 선택했음에도 불구하고 invalid .. 2022. 6. 21. [react-native] NativeBase 설치 및 처음 시작하기 개인 프로젝트로 작업 중인데 아무래도 혼자 하다보니 화면 설계하는 데에 시간이 많이 걸릴 것 같아서 디자인 라이브러리를 찾다가 NativeBase가 괜찮은 것 같아서 도입하기로 했다. 그런데 이런 라이브러리를 나 스스로 적용했던 적이 없어서(응애 나 초보) 설치부터 기본 코드 작성하는 데에 애를 많이 먹었고 하루하루 삽질의 연속이었다ㅠㅠ 그래서 NativeBase를 사용하고자 하려는 다른 분들에게 저같이 삽질하지 마시었으면 하는 마음에 (여러분들의 시간은 소중해용) 조금이나마 도움이 될까 싶어서 처음 설치방법과 시작하는 과정을 적어본다. 모든 라이브러리는 그들만의 조립설명서(?)가 있는데 개발하는 사람들은 이걸 Docs(독스, 공식문서)라고 부른다. 사용하기 전에 조립설명서를 보면서 '아 이건 이런 기능.. 2022. 6. 20. [react-native expo] 페이지 이동 기능 구현 (navigation, stackNavagator) 지역별로 해당 검색어에 맞는 지역의 언어치료센터 리스트를 불러오는 것 까지 성공했다. 코드가 좀 지저분해진 것 같긴 하지만 일단은 구현 먼저! 코드 정리는 나중에!ㅋㅋㅋ [카테고리 기능이 구현된 모습] 오늘은 예전에 만들어 놓은 상세보기 페이지를 이용해서 메인에서 리스트를 클릭하면 해당 상세보기 페이지로 이동하는 것을 구현할 예정이다. 1. 네비게이션을 이용하기 위한 기본 라이브러리 설치하기 react-navigation 공식문서 : https://reactnavigation.org React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org @첫번째 설치 yarn add @r.. 2022. 6. 15. [react-native] 특정 문자를 포함한 데이터를 찾아 카테고리별 다른 화면 보여주기 스파르타코딩클럽에서 나온 예제를 토대로 나만의 앱을 만드는 중인데, 여기서는 state에다 filter()를 사용해서 해당 카테고리에 해당하는 리스트만 보여주는 형식이었다. data.json에 {category:"전체보기", category:"생활".....} 이런 식으로 항목이 딱딱 정해져 있음. 그리고 구현 코드. const [state, setState] = useState([]) const [cateState, setCateState] = useState([]) useEffect(() => { setTimeout(() => { setState(tip); setCateState(tip); setReady(false); }); }, 1000); }, []); const category = (cate).. 2022. 6. 15. [react native] 엑스포 Expo object console 값 보는 법 state 개념이 헷갈려서 공부하다가 현재 state 값이 궁금해져서 console.log(state)로 찍어봤다. 그랬더니 아주 보기 좋게 잘 나옴. (아깐 [Object Object]로 나오더니..) 원래 자바스크립트에서 [Object Object]로 나온 데이터의 값을 확인하고 싶을 때는 console.log(JSON.stringify(state))로 찍어야 값이 나오는데.. 이렇게 찍을 때는 더 보기 어렵게 나온다 ㅋㅋㅋㅋㅋㅋ 리액트가 이러는 건지 엑스포가 이러는 건지 몰라서 구글링을 해봤는데 (도와죠 구글!) stackoverflow에는 관련 내용이 없고 Grepper라는 사이트가 있는데 모든 언어의 답변을 올려놓은 사이트로 약간 백과사전 느낌이 난다. 아래는 Javascript의 React 섹.. 2022. 6. 14. [react-native] ScrollView로 감싸져 있는 View의 flex가 안 먹힌다...! 상세페이지를 만들다가 어플 화면의 기본은 스크롤이 가능해야 할 것 같아서 최상단의 감싸는 태그를 로 하고 하위 태그에 flex를 주었더니 안 먹힌다. 웬지 ScrollView로 감싸는게 어색해서 구글링을 해봤는데 를 최상단으로 감싸고 시작하는 코드는 없더군...(여기서 초보 티가 나져ㅋㅋㅋㅋㅋ) 혹시나 해서 를 태그로 바꿔 실행해보니 잘 된다 ㅋㅋㅋㅋㅋㅋ 화면을 처음 시작하는 최상단 코드는 무조건 태그로 감싸자! ++ 추가 ScrollView로 감싸면 절대! 안되는 것이 아니고 사용해도 되나 ScrollView에서는 flex가 의미가 없는 것이다. 보여지는 화면을 몇등분 하지 않고 화면에 넣은 컨텐츠 모두를 보여주기 위해 스크롤 기능이 있는 것이 ScrollView이기 때문. ScrollView로 감싸야.. 2022. 6. 8. [react-native] json가져와서 일단 예쁘게 꾸미기 오늘의 목표는 ▶▶ 1) 이전 포스팅에서 엑셀 파일을 json 파일로 바꾼 것을 임포트(import)해서 리스트에 뿌리기 2) 뿌려진 리스트를 보기 좋게 꾸미기 json파일을 import해서 리스트에 뿌리기 우선 변환된 json 파일을 작업하고 있는 폴더에 넣어야 한다. 왼쪽 메뉴에서 아무것도 없는 부분을 클릭한 후 [오른쪽 마우스 - NewFile]을 클릭하여 새로운 파일(data.json)을 만든다. 만들어진 data.json 파일에 json으로 만든 전국 언어치료센터 데이터를 복사+붙여넣기 한다. 데이터가 잘 들어간 것을 확인 후, 상위 center_info로 모든 데이터를 묶어준다. (원하는 명칭 아무거나 가능) 이렇게 묶는 이유는 나중에 firebase 함수로 데이터에 접근하기 쉽게 하기 위해서.. 2022. 6. 8. 이전 1 2 3 다음 반응형
