npm udate 하고 껐다 키기

Header buttons | React Navigation (1) Screen Component의 옵션 이용해서 헤더 버튼 달기 스크린 컴포넌트의 Options에서 headerRight, headerLeft key 값에다가 함수형 컴포넌트를 value로 기입한다. 그러면 해당 함수형 컴포넌트의 로직 대로 움직인다. 우리는 해당 함수형 컴포넌트가 태그를 반환하도록 만들었다. 를 따로 쓰지 않아도 돌아가는 것 보니, 저번 설명에서 처럼 Screen의 Header 전체를 감싸는 View 태그가 내장되어 있는 것 같다. function StackScreen() { return ( , headerRight: () => ( alert('This is a button!')} title="Info" color="#f..

1. React Navigation 설치 Getting started | React Navigation React Navigation reactnavigation.org 2. React Navigation에 대해, Hello React Navigation | React Navigation React Navigation reactnavigation.org 우리는 먼저 가장 쉽고 기본적인 Navigator인 Stack Navigator를 통해 화면 이동하는 방법을 습득하고, 다른 종류의 네비게이터를 알아보겠다. 네비게이터는 RN 내장 라이브러리가 아니라서 따로 설치해서 써야 한다. 각 Navigator 마다 고유 라이브러리가 다 따로 존재하니 참고 바란다. (1) Browser와 StackNavigator의..

사진은 react-native-web으로만 되는 경우를 가져왔다. (내가 해당 오류가 날 때 캡쳐를 하지 못했다.) 하지만 위의 경우 처럼 컴포넌트에 맞는 자동 import를 할 때, 'react-native'가 뜨지 않고, 다른 경우가 뜬다면 밑의 해결 방법으로 해결 할 수 있다. *프로젝트 디렉토리 밖에서 밑의 명령어를 터미널에 입력하여 실행한다. 위와 같은 문제가 일어나는 이유는, node-modules 안의 모듈들 간의 충돌로 인하여 일어난다고 한다. 따라서 @types/react-native를 다시 깔아주면 된다. 나는 프로젝트 디렉토리에서 계속 깔아봐도 문제가 해결되지 않아서 프로젝트 디렉토리의 부모 디렉토리로 넘어가서 해당 명령어를 실행 했더니 되었다. 이 문제로 인해 1시간 정도 디깅 했다..

1. Icon 별 거 없다. expo Vector Icon에 필요한 3가지 요소 name, size, color를 인수로 받아서 icon을 생성하면 끝이다. 2. Badge children은 앞에서도 설명했듯이 부모요소의 태그 사이에 들어가는 텍스트를 의미한다. 해당 컴포넌트는 텍스트 우측 상단에 위와 같이 알림 뱃지를 붙이는 태그이다. 하지만 위와 같이 알림 횟수를 카운트 하지 않고 new를 의미하는 N으로 대체한다. 위 컴포넌트는 겉의 View와 속의 View 이중 구조로 되어 있는데, 겉의 View에는 인수로 받은 children을 쓰고 속의 View에는 뱃지 내용을 썼다. 이렇게 View를 이중구조로 가른 이유는 뱃지를 우측 상단에 위치시키기 위함이다. 뱃지의 style에서 position: ab..

1. Text 컴포넌트 커스터마이징 (1) 코드리뷰 해당 컴포넌트는 color, fontsize을 커스터 마이징하는 Text 컴포넌트이다. 밑에는 Typography의 타입을 검사하는 PropTypes라는 속성을 사용했다. 해당 PropTypes 속성을 쓸려면 이걸 설치 해야한다. propTypes라는 타입 검사기의 내부는 {Property: PropTypes.원하는 타입 }형태로 쓰고 해당 속성의 인수로 원하는 타입이 들어오지 않았을 시 Warn 경고문을 화면에 띄운다. https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html 위 링크는 propTypes의 사용법에 대해 적혀 있다. 타입을 검사하는 방법이 다양하게 있다. 우리는 위의 예시..

1. 중복되는 코드를 컴포넌트 화 해버리는 이유 **컴포넌트 화 란? 중복되는 코드를 하나의 컴포넌트(함수)로 만드는 것을 의미한다. 컴포넌트 화 시키는 이유는, 첫 번째 전체 코드의 코드양이 줄어든다. 여러 줄 짜리 코드도 함수 하나를 호출하여 그 안에 인수를 집어넣는 방식으로 표현하면 코드 양이 훨씬 줄어 가독성이 좋아진다. 해당 return 내부의 필요한 모든 코드들을 컴포넌트 호출을 통해 표현했다. 컴포넌트 호출 6번으로 return 문 내부를 필요한 것을 전부 표현했는데, 만약 코드로 위 사항을 전부 다 표현했다면, 스크롤바를 한참 내렸어야 할 것이다. 두 번째, 유지보수가 용이하다. A란 코드가 5번 중복된다고 하자. 만약 2번째 4번째 A코드에서 버그가 발생하면 우리는 그 코드들을 찾아서 일..

이번에는 TabBarNavigation을 써보고 해당 TabBarNavigation을 다시 Stack Navigator안에 넣어서 표현 해보았다. TabBar 구조도 다를 것 없다. 기본 화면은 맨 왼쪽 탭이 나오고 나머지 탭들을 누를 때마다, focus가 옮겨져 해당 화면이 render 된다. 다른 화면으로 포커스를 옮겨도 이전 화면들이 unmount되어서 랜더 되었던 게 사라지는 것은 아니다. 다른 화면들은 처음 render된 후 그대로 유지된다. 1. 로직 구조도는 다음과 같다. 각 Navigator간의 계층이 밑과 같이 나누어져 있다. 위의 설명처럼 우리는 Level1 Stack의 첫번째 층인 BoomTab에서 Level3 Stack의 ScreenA를 보다가, ScreenA가 B를 호출함에 따라 ..

1. NavigationContainer와 Navigator , Screen에 관하여 https://reactnavigation.org/docs/getting-started Screen은 하나의 View 컴포넌트로서 우리가 화면 이동 시 쓸 화면들이다. Screen 하나 하나가 목적지 이다. Navigator는 Screen의 집합이다. Navigator 속에 Navigate란 함수가 있는데, 이를 이용하면 Navigator 내부에 정의된 Screen들 사이의 이동이 가능하다. NavigationContainer는 Navigator Tree를 관리하고, Navigatior의 상태들을 알려주는 컴포넌트이다. 해당 컨테이너가 모든 Navigator 구조를 감싸고 있어야 한다. 우리는 주로 출입 파일 (entr..

아직 어떤 내용이 어떻게 작용하는지 알지도 못하는 상태에서 글 공부하듯 외우는 것은 의미가 없다고 본다. 그래서 현재까지 이해한 내용만 정리하고 나머지 개념들은 직접 해보면서 감을 잡고 정리하도록 하겠다. 1. 네비게이터, screen 구조도 2. React 내의 생명주기 (간략하게) 이것 이외의 더 많은 과정들이 있지만, 일단 강의에서 배운 주요 내용들로만 생명주기를 정리 하겠다. 이외의 과정들을 보고 싶은 사람들은 다른 블로그를 참고하기 바란다. (1) Constructor 컴포넌트 생성자 매소드, 컴포넌트가 생성되면 가장 먼저 실행되는 매소드 이다. (2) render 적힌 컴포넌트들을 화면에 그리는 것을 render라고 한다. (3) componentDidMount render를 끝낸 후 (즉 화..

원래 태그 이름을 쓰는 곳에 스타일 컴포넌트 이름으로 바꿔치기. 그리고 styled. 원래태그 이름을 넣어서 인수를 받는 태그 - 스타일컴포넌트 - 해당 컴포넌트가 원래 해야하는 기능이 연결됨.

해당 앱을 사용하는 장치마다 가로길이가 천차만별이다. 그런데 Flatlist의 columnNum을 3으로만 고정해놓으면, 어떤 화면에서는 행 당 차지하는 사진의 크기가 클 것이고, 어떤 화면에서는 작을 것이다. 우리는 디바이스의 화면 크기마다 한 행에 표시되는 사진 수를 다르게 해서, 사진 하나 하나의 크기가 너무 커지거나 작아지지 않도록 해볼 것이다. 1.로직 2. 코드리뷰 3. 새롭게 알게 된 것 (1) Math.floor는 인수의 내림 값을 반환한다. (2) Flatlist의 onLayout FlatList의 너비를 알고 싶을 때 onLayOut 속성에서 해당 함수를 이용한다. e.nativeEvent.layout.width를 찍어보면 flatlist의 너비가 나온다. (3) 이벤트 핸들러에 대하여..

지금까지는 이미지 리스트와 앨범 리스트를 상태변수에만 저장하고 사용했다. 그래서 앱을 껐다 키면 상태 변수에 저장해놓은 리스트들이 다 날아갔다. 상태변수에 넣은 값은 앱을 종료할 시 전부 삭제되어 초기화 됨으로, 앱을 종료해도 삭제되지 않는 DB에 해당 값들을 넣어놓고, 앱을 시작할 때 전처리기를 통해 해당 값들을 불러오는 작업이 필요하다. 1. 로직 2. 코드리뷰 DB에서 원하는 데이터를 찾는데 필요한 키 값은 따로 관리한다. 물론 "images", "albums"로 쓸 수도 있지만, 오타 쳐서 setItem을 다른 걸로 해버리는 순간 내가 원하는 데이터가 엉뚱한데 들어가서 못 찾을 수 있다. 해당 경우처럼 객체로 처리하면 호출 시 점 표기법이 원하는 Key 값을 자동완성으로 써주기 때문에, 오타 내는..

1. 로직 2. 코드리뷰 (1) 화살표의 Onpress 기능 내부 구현 filteredImage 선언 이후에 적어줘야 한다. 왜냐하면 컴파일은 위에서부터 순서대로 읽기 때문에, 선언부 보다 호출을 먼저 해서 사용하면 에러가 일어난다. 그리고 해당 내용을 보면 previousImageIdx나 nextImageIdx가 각각 0보다 작거나 배열 끝 값보다 커지는 경우, -1이 되는 경우 해당 기능에서 더 이상 아무것도 하지 않고 그냥 반환 하라는 예외처리를 적어주었다. 분명 밑에서도 할 것이지만, 배열의 양 끝으로 갔을 때, 화살표를 지워버리는 로직을 넣어줬는데도, 백엔드적 부분에서 한번 더 예외처리를 해주었다. 이는 2중 보안과 같이 생길 수 있는 예외를 원천 차단하기 위함이다. nextImageIdx에서 ..

1. 로직 2. 코드리뷰 (1) 앨범 리스트에서 앨범 이름을 길게 누르면 삭제되는 로직에 대한 코드 리뷰 use-gallery 이후에는 해당 내용의 기능과 명세를 나누고 옮기는 것 뿐이라 따로 설명할 부분은 없다. (2) 이미지를 짧게 누르면 해당 이미지의 큰 버젼이 나오는 로직에 대한 코드 리뷰 a. flatlist의 원소인 이미지 하나를 누르면 modal이 열리는 로직 위에 보면 item을 image로 재명칭 했다. 원래는 item을 바로 id와 uri로 구조분해 해서 받았다. 하지만 OnpressImage라는 함수가 이미지 객체 자체 (id와 uri가 묶여 있는 것)를 받아야 함으로 Image 자체도 필요해졌다. 따라서 item을 Image로 재명칭 하고 ,id와 uri는 다시 image로부터 구조..

1. 로직 2. 코드리뷰 (1) Modal에서 키보드로 return 키 누를 시 앨범 이름이 앨범List에 추가되는 로직 albumTitle은 모달 속 TextInput의 onChangeText에 의해 사용자가 적은 값이 적힌다. (2) 상단 앨범 명 클릭 시 앨범의 리스트를 쫙 보여주는 로직 isDropdownOpen이 참일 때만 보이는 View 해당 View는 List 형태이므로, 현재 선택된 앨범 제목만 보여줬던 상단 Bar에 비해 크기가 크다. 그래서 List가 넓어질수록 부모 TouchableOpacity의 자리를 침범하는 일이 생겼다. 그래서 해당 View를 속박에서 자유로운 absolute 포지션으로 바꾸고, top을 headerHeight로 줘서 부모 컴포넌트의 크기 만큼 부모 컴포넌트로 ..

이번 강의에서 한 것은, 갤러리 상단 부에 현재 우리가 접속한 앨범 명 + 앨범 추가 화면 뜨도록 만들기 . 앨범 추가란 버튼 누르면 팝업이 뜨도록 하고, 해당 팝업에 text input을 두어서 사용자가 입력 할 수 있게 하기. 아직 입력 값이 전달되서 새로운 앨범이 만들어지는 것은 구현 하지 않았다. 1. 로직 2. 코드 리뷰 (1) use-gallery (customHook 부분) 쓰일 상태 변수 모음 selectedAlbum은 현재 선택된 앨범의 이름을 말하는 것이고, albumTitle은 사용자가 신규 입력한 앨범의 이름이 들어가는 곳이다. albums는 현재 저장된 앨범의 목록이다. modalVisible은 팝업창 on/off 용 상태변수이다. 신규 추가된 함수 : 모달이라는 팝업창 켜기 / ..

1. Device 내장 갤러리 접속 : expo의 imagePicker라는 로직이용 (1) 로직 (2) 코드리뷰 내부 코드들인데 async 함수, await 등 pickImage를 구현하는 내부 로직들 중 모르는 keyWord들이 많다. 해당 내용들을 알려면 promise 라는 키워드 부터 공부해야 한다. 이는 시간이 많이 걸리므로, 먼저 이번 강의 전 내용을 빠르게 정리한 후 돌아와서 공부하도록 하겠다. (3) 새롭게 알게 된 것 - image Picker 로직 분해를 통하여 https://docs.expo.dev/versions/latest/sdk/imagepicker/ 2. imagePicker가 하나의 사진 뿐만 아니라 여러 개의 사진을 가지고 있을 수 있도록 커스터마이징 + imagePicker..

앱을 나왔다가 다시 들어가도 내가 일전에 적었던 todoList는 그대로 저장되어 있어야 한다. 그걸 구현하기 위해 Stroage란 DB를 사용하여 프로그램이 랜더링 되고 있는 상황에서 update 시 바로 DB에 update 결과를 저장시켜 주도록한다. 그리고 프로그램이 다시 시작될 때, 해당 DB에서 내용물을 꺼내 오도록 한다. 1. 로직 2. 코드 리뷰 AsyncStorage - Expo Documentation AsyncStorage Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 먼저 여기서 AsyncS..

1. 로직 2. 코드리뷰 3. 새롭게 배운 것 JS 의 Array 함수 중 하나인 find find는 주어진 판별 함수를 만족하는 첫번째 요소를 반환한다. array = [5,12,23,45,13] const result = array.find(element => element > 10 ); console.log(result) // 결과는 12 알다시피, 0이 아닌 모든 숫자는 참 취급을 받는다. (그래서 위의 로직은 이를 이용해 boolean 값처럼 쓴 것이다.) 만약에 위의 함수에서 10보다 큰 숫자가 아무것도 없었다면, find 함수는 undefined를 반환한다.