FrontEnd :-)

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..

React Navtive 스터디 3week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (2장 컴포넌트) => 리액트를 다뤄봐서 어렵지 않았음 component = 구성 요소, 유저 인터페이스를 구성하는 요소 1.3장 새 리액트 네이티브 프로젝트 만들기 npx react-native init LearnReactNative 2장 컴포넌트 SafeAreaView : iPhone X 이상 기종에서 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지. View : 가장 기본적인 컴포넌트로 레이아웃 및 스타일 담당. Text : 텍스트를 보여주는 역할 2.1 나만의 컴포넌트 만들기 const Greeting = () => { … } function Greeting() { …..

[publishing our apps] ——————4.0 Introduction—————— 오류 1. localhost:19002 접속 불가 강의에 로컬호스트 19002에 접속해서 publish하라고 하는데, 연결 오류가 뜬다. 이것저것 설정을 알아보다가… localhost:19002가 expo 개발자 툴이었는데 지원이 끝났다고 한다. https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206 오류 2. ‘expo publish’ is not working. 터미널에서 expo publish 명령어를 입력하면 배포된다는 댓글이 있었는데, zsh: command not found: expo 라고 나온다. npx expo publish 라고 ..