모바일 개발 썸네일형 리스트형 React- Navigation을 이용한 이동 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.. 더보기 React - Navigation 용어 정리 아직 어떤 내용이 어떻게 작용하는지 알지도 못하는 상태에서 글 공부하듯 외우는 것은 의미가 없다고 본다. 그래서 현재까지 이해한 내용만 정리하고 나머지 개념들은 직접 해보면서 감을 잡고 정리하도록 하겠다. 1. 네비게이터, screen 구조도 2. React 내의 생명주기 (간략하게) 이것 이외의 더 많은 과정들이 있지만, 일단 강의에서 배운 주요 내용들로만 생명주기를 정리 하겠다. 이외의 과정들을 보고 싶은 사람들은 다른 블로그를 참고하기 바란다. (1) Constructor 컴포넌트 생성자 매소드, 컴포넌트가 생성되면 가장 먼저 실행되는 매소드 이다. (2) render 적힌 컴포넌트들을 화면에 그리는 것을 render라고 한다. (3) componentDidMount render를 끝낸 후 (즉 화.. 더보기 인라인 스타일 CSS를 스타일 컴포넌트로 변경 원래 태그 이름을 쓰는 곳에 스타일 컴포넌트 이름으로 바꿔치기. 그리고 styled. 원래태그 이름을 넣어서 인수를 받는 태그 - 스타일컴포넌트 - 해당 컴포넌트가 원래 해야하는 기능이 연결됨. 더보기 갤러리 앱 클론코딩 - 디바이스마다 제각각인 가로 길이 대응 해당 앱을 사용하는 장치마다 가로길이가 천차만별이다. 그런데 Flatlist의 columnNum을 3으로만 고정해놓으면, 어떤 화면에서는 행 당 차지하는 사진의 크기가 클 것이고, 어떤 화면에서는 작을 것이다. 우리는 디바이스의 화면 크기마다 한 행에 표시되는 사진 수를 다르게 해서, 사진 하나 하나의 크기가 너무 커지거나 작아지지 않도록 해볼 것이다. 1.로직 2. 코드리뷰 3. 새롭게 알게 된 것 (1) Math.floor는 인수의 내림 값을 반환한다. (2) Flatlist의 onLayout FlatList의 너비를 알고 싶을 때 onLayOut 속성에서 해당 함수를 이용한다. e.nativeEvent.layout.width를 찍어보면 flatlist의 너비가 나온다. (3) 이벤트 핸들러에 대하여.. 더보기 갤러리에 저장된 이미지와 앨범을 DB에 넣고 관리 지금까지는 이미지 리스트와 앨범 리스트를 상태변수에만 저장하고 사용했다. 그래서 앱을 껐다 키면 상태 변수에 저장해놓은 리스트들이 다 날아갔다. 상태변수에 넣은 값은 앱을 종료할 시 전부 삭제되어 초기화 됨으로, 앱을 종료해도 삭제되지 않는 DB에 해당 값들을 넣어놓고, 앱을 시작할 때 전처리기를 통해 해당 값들을 불러오는 작업이 필요하다. 1. 로직 2. 코드리뷰 DB에서 원하는 데이터를 찾는데 필요한 키 값은 따로 관리한다. 물론 "images", "albums"로 쓸 수도 있지만, 오타 쳐서 setItem을 다른 걸로 해버리는 순간 내가 원하는 데이터가 엉뚱한데 들어가서 못 찾을 수 있다. 해당 경우처럼 객체로 처리하면 호출 시 점 표기법이 원하는 Key 값을 자동완성으로 써주기 때문에, 오타 내는.. 더보기 이미지 크게 보는 모달 좌우로 1. 로직 2. 코드리뷰 (1) 화살표의 Onpress 기능 내부 구현 filteredImage 선언 이후에 적어줘야 한다. 왜냐하면 컴파일은 위에서부터 순서대로 읽기 때문에, 선언부 보다 호출을 먼저 해서 사용하면 에러가 일어난다. 그리고 해당 내용을 보면 previousImageIdx나 nextImageIdx가 각각 0보다 작거나 배열 끝 값보다 커지는 경우, -1이 되는 경우 해당 기능에서 더 이상 아무것도 하지 않고 그냥 반환 하라는 예외처리를 적어주었다. 분명 밑에서도 할 것이지만, 배열의 양 끝으로 갔을 때, 화살표를 지워버리는 로직을 넣어줬는데도, 백엔드적 부분에서 한번 더 예외처리를 해주었다. 이는 2중 보안과 같이 생길 수 있는 예외를 원천 차단하기 위함이다. nextImageIdx에서 .. 더보기 큰 이미지 보이게 하는 Modal(팝업창) 만들기 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로 줘서 부모 컴포넌트의 크기 만큼 부모 컴포넌트로 .. 더보기 이전 1 2 3 4 5 ··· 7 다음
