FrontEnd :-)

React Navtive 스터디 7week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (6장 다이어리 앱 만들기 ①-①) 6.1 프로젝트 준비하기 6.2 Context API 사용하기 6.3 새 글 작성하기 6.4 글 목록 보여주기 6.5 Animated로 애니매이션 적용하기 6.6 정리 6.1 프로젝트 준비하기 스택 내비게이터, 하단 탭 내비게이터 라이브러리 설치, 아이콘 라이브러리 설치 npx react-native init DayLog cd DayLog yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-..

React Navtive 스터디 6week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (5장 리액트 내비게이션으로 여러 화면 관리하기 ②) 5.1 설치 및 적용하기 5.2 기본적인 사용법 5.3 다양한 내비게이터 5.4 내비게이션 Hooks 5.5 정리 5.3 다양한 내비게이터 5.3.1 드로어 내비게이터 @react-navigation/drawer : Drawer Navigator 는 좌측 또는 우측에 사이드바를 만들고 싶을 때 사용하는 내비게이터. 사이드바를 모바일 앱에서는 드로어(Drawer)라고 함. https://reactnavigation.org/docs/drawer-navigator/ yarn add @react-navigation/drawer react-native-ges..

React Navtive 스터디 6week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (5장 리액트 내비게이션으로 여러 화면 관리하기 ①) 5.1 설치 및 적용하기 5.2 기본적인 사용법 5.3 다양한 내비게이터 5.4 내비게이션 Hooks 5.5 정리 여러 화면으로 구성된 애플리케이션을 만들려면 내비게이션 관련 서드 파티 라이브러리를 사용해야 한다. 내비게이션과 관련해 사용할 수 있는 라이브러리 2가지 1) react-navigation : 리액트 네이티브 커뮤니티에서 관리. 사용률이 가장 높음. 리액트 공식 메뉴얼에서도 이 라이브러리로 화면을 전환하는 방법을 소개. 내비게이션 기능이 자바스크립트로 구현되어 있음. 사용법도 2)보다 쉽고, 별도 API가 아닌 리액트 컴포넌트를 사용해 ..

React Navtive 스터디 5week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (4장 할일 목록 만들기 ②-③) 4.1 불변성을 지키면서 객체와 배열 업데이트하기 4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기 4.3 새 항목 등록하기 4.4 할일 완료 상태 토글하기 4.5 항목 삭제하기 4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기 4.7 정리 AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소. iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드에서는 네이티브 코드와 SQLite를 기반으로 구현되어 있음. 브라우저에서 사용하는 locatStorage와도 꽤 비슷. 값을 저장할 때는 문자열 타..

React Navtive 스터디 5week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (4장 할일 목록 만들기 ②-②) 4.1 불변성을 지키면서 객체와 배열 업데이트하기 4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기 4.3 새 항목 등록하기 4.4 할일 완료 상태 토글하기 4.5 항목 삭제하기 4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기 4.7 정리 4.3 새 항목 등록하기 onInsert 함수 구현 => //새로 등록할 항목의 id 구하기, 등록된 항목 중에서 가장 큰 id를 구하고 + 1, 리스트 비었으면 1을 id로 //App.tsx const onInsert = (text: string) => { const nextId = todos.l..

React Navtive 스터디 5week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (4장 할일 목록 만들기 ②-①) 4.1 불변성을 지키면서 객체와 배열 업데이트하기 4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기 4.3 새 항목 등록하기 4.4 할일 완료 상태 토글하기 4.5 항목 삭제하기 4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기 4.7 정리 4.1.1 불변성을 지켜야 하는 이유 리액트에서 불변성을 지켜야 하는 이유는 렌더링 성능 최적화 방식 때문입니다. 리액트에서는 부모 컴포넌트가 리렌더링되면 기본적으로 자식 컴포넌트들 또한 리렌더링됩니다. ... 컴포넌트의 렌더링 성능을 최적화하기 위해서는 이전에 컴포넌트가 들고 있던 Props와 새..

React Navtive 스터디 4week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (3장 할일 목록 만들기 ①) 3.1 프로젝트 기반 다지기 3.2 TextInput으로 사용자 키보드 입력받기 3.3 정리 키보드 안 보이면, command + K 3.2.1 KeyboardAvoidingView로 키보드가 화면을 가리지 않게 하기 //App.tsx import React from 'react'; import {KeyboardAvoidingView, Platform, StyleSheet} from 'react-native'; import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context'; import AddTo..

React Navtive 스터디 4week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (3장 할일 목록 만들기 ①) 3.1 프로젝트 기반 다지기 3.2 TextInput으로 사용자 키보드 입력받기 3.3 정리 3.1.3.1 react-native-safe-area-context 서드 파티 라이브러리 사용하기 특정 부분의 여백만 비활성화하고 싶다면 react-native-safe-area-context 서드 파티 라이브러리* 사용. *서드 파티 라이브러리 ? 커뮤니티에서 오픈 소스로 공개한 라이브러리 yarn add react-native-safe-area-context cd ios pod install cd ../ yarn ios yarn android 안드로이드의 경우에는 yarn a..