Lecture (20) 썸네일형 리스트형 React Navigation Hello React Navigation 웹에서는 a태그를 이용해서 쉽게 다른 페이지로 이동이 가능하다. 사용자가 링크를 클릭하면 해당 링크의 URL은 브라우저의 history 스택에 push된다. 사용자가 뒤로가기 버튼을 누르면, 브라우저는 현재 페이지를 stack에서 pop하고 그 아래에 있던 이전 페이지가 브라우저에 노출된다. 리액트 네이티브는 이와 같은 웹의 내부 기능을 사용할 수 없기 때문에 React Navigation과 같은 라이브러리가 필요하다. React Navigation의 네이티브 스택 네비게이터는 앱의 화면간 전환과 네비게이션 히스토리 관리 기능을 제공한다. 만약 하나의 스택 네비게이터만 사용한다면 웹과 개념적으로 비슷한 구조를 구축할 수 있다. React Navigation의 스택.. 2021-07-31 :: Typescript 내용 정리 자바스크립트에서 primitive는 객체도 아니고 메서드도 갖지 않는 값이다. 타입스크립트에서 type은 non-primitive 값이다. ts에서 타입을 지정할때 type이라는 키워드를 사용해서 지정한다. 컴포넌트의 속성 children은 ReactNode 타입이다. react로부터 import한 FC타입 안에는 children 속성이 이미 포함되어 있기 때문에 ReactNode 타입을 따로 지정해줄 필요는 없다. react에서는 ComponentProps라는 타입을 지원한다. 이 타입은 다음과 같은 구문을 통해 사용하는 제너릭 타입이고 컴포넌트의 속성 타입을 알아낼 수 있다. type TouchableOpacityProps = ComponentProps; react-native는 StyleProp 타.. React Native 시작하기 npx react-native init projectName npx react-native start npx react-native run-android npx react-native init projectName --template react-native-template-typescript npm start npm run android npx react-native init 명령어를 통해 프로젝트를 시작해도 터미널 상에서는 패키지등이 설치되는 듯 보였으나 디렉터리 안에 들어가보면 아무 파일이 없었다. 당연히 npm start 명령어도 먹히지 않았다. --template react-native-template-typescript 옵션을 추가했을 때, 파일은 생성되었으나 여전히 npm start 명령어를 .. 2021-07-18 :: React Native; Interaction Navigating Between Screens 모바일 앱은 보통 여러개의 화면으로 구성이 되어 있다. 여러개의 화면에 대한 표현과 전환은 navigator를 통해 컨트롤 한다. React Native Navigation installation npm install @react-navigation/native @react-navigation/stack npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view for iOS cd ios pod install cd .. react-native-g.. 2021-07-17 :: React Native; Design Style 리액트 네이티브에서는 JS를 이용해 어플리케이션을 스타일링한다. 모든 컴포넌트는 style이라는 prop을 가진다. style의 이름과 값은 카멜 표기법이 적용된다는 점을 제외하면 CSS와 흡사하다. 컴포넌트가 복잡해지면 아래 코드 컨벤션과 같이 StyleSheet.create를 이용하는 것이 편리하다. import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const LotsOfStyles = () => { return ( just red just bigBlue bigBlue, then red red, then bigBlue ); }; const styles = StyleSheet.create({ co.. 2021-07-17 :: React Native Official; The Basics https://reactjs.org/docs/forms.html#controlled-components Forms – React A JavaScript library for building user interfaces reactjs.org The Basics view 컴포넌트 안에 Text 컴포넌트를 삽입해서 사용한다. Using a ScrollView 스크롤링이 가능한 컨테이너이다. 스와이핑 제스쳐를 통해서 컨트롤이 가능하다. 데이터의 양이 스크린의 크기를 넘는다면 FlatList를 사용하자. FlatList는 데이터를 동적으로 로딩하여 최적화된 사용자 경험을 제공한다. FlatList의 사용 예시는 아래와 같다. } keyExtractor={(item, index)=> item.id} ItemSepa.. 2021-07-08 :: 메뉴와 모달 만들기3 라우터 주소 설계 콜론(:)기호를 이용해 라우터에서 URL 파라미터로 이용할 수 있다. Route역시 우선순위가 존재한다. 높은 우선순위를 가진 라우트를 항상 맨 위에 두도록 URL파라미터와 절대 경로를 같은 경로에 혼용하는 경우, 반드시 절대경로를 위쪽에 두어야 한다. 특정 조건을 만족하는 경우 특정 라우터로 이동하는 로직을 짤 때 if(isSatisfied) 와 같이 구현할 수 있다. create 요청을 Post를 통해 수행할 때. 3번째 인자 객체에 설정을 넣어 전달할 수 있다. 해당 설정에 withCredentials를 통해 쿠키를 공유할 수 있고, 해당 쿠키는 이 요청을 누가 했는지에 대한 정보가 담겨있다. URL 파라미터는 useParams();라는 훅을 통해 접근할 수 있다. URL 파라미터.. 2021-07-06 :: 메뉴와 모달 만들기2 모달 만들기 workspace.tsx 팝업, 사용자 초대기능 추가 fetch한 자신의 데이터 안에 workspace에 대한 정보도 저장 해 두어, 하나로 처리한다. import의 as, 비구조화 할당의 : 기호를 사용해 변수 이름을 사용자 지정할 수 있다. 백앤드 개발자가 전송하는 데이터에 대한 타이핑 역시 해준다. 브라우저의 dev툴에 리렌더링 시 하이라이트 여부에 대한 체크박스가 있다. 나중에 최적화할 때 참고할 자료가 된다. 워크스페이스 추가 모달; 해당 코드는 workspace 컴포넌트 안에 있다. show props에 대항하는 isOpen state를 둔다. 데이터를 다루는 사람이 백앤드이기 때문에 데이터에 대한 권한 자체는 백앤드가 더 크다. 모달은 전체 팝업 창처럼 가운데 뜨는 페이지를 의미.. 이전 1 2 3 다음