본문 바로가기

전체 글124

[0807~0808] React-Native 강의 정리 Section 7 : How to Handle Screen Layout Layout Systems : 3가지 종류가 있음. 1. Box Object Model : 높이와 너비, element를 둘러싼 공간을 중심으로 하나의 element를 배치할 때 사용. 2. Flex Box : 부모 내에 자식 몇 개의 element들을 배치할 때 사용. 3. Position : 부모 내에 하나의 element를 배치할 때 + Box Object Model과 Flex Box를 override 하고 싶을 때 사용. ◎ Box Object Model → Content와 Padding : Background 색상을 보여줌. → Border와 Margin : Background 색상을 보이지 않음. → 각각의 요소에 다른 s.. 2021. 8. 9.
[0806] React-Native 강의 정리 Section 6 : State Management in React Components Q. 실질적으로 변수의 값을 바꿀 자식 컴포넌트와, 변수 값을 읽고 띄워야 하는 부모 컴포넌트 중 어디에 state를 선언해야 하는가? → 일반적으로는 state 값을 읽거나 변경해야 하는 부모 컴포넌트에 생성함. → 자식 컴포넌트가 state를 읽어야 할 경우, 부모 컴포넌트에서 prop으로 자식 컴포넌트에 전달할 수 있음. ※ 변수 이름을 모두 대문자로 작성하는 경우 → prop이 아니고 컴포넌트 내에서 configuration option처럼 기능할 변수애 대해 이와 같이 명명. 변수의 변화를 확인하기 1. set~ 함수 실행 시마다 검사하기. → 모든 콜백에 대해 검사 코드를 작성해야 해서 비효율적. 2. 검사.. 2021. 8. 7.
[0805] React-Native 강의 정리 Section 6 : State Management in React Components Props : 부모 컴포넌트에서 자식으로 데이터를 넘길 수 있는 시스템 State : 하나의 데이터를 추적하는(track) 시스템. 데이터가 변경되면 앱에서 다시 'render'하게 됨. → 리액트는 자동적으로 변수의 변화를 감지하고 반영하지 않음. → 따라서 변화를 감지하고 이 변화를 실제로 반영시키기 위해 state를 사용함. State 사용에서 생각할 점 1. 어떤 데이터가 변경될 것인가? 2. 데이터의 타입은 무엇인가? 3. 해당 데이터의 초기 값은 무엇인가? //state를 사용하기 위해서는 react 라이브러리에서 가져옴. import React, { useState } from 'react'; import.. 2021. 8. 6.
[0804] React-Native 강의 정리 Section 3 : List Building - With Style! React에서 어떻게 List를 표현할 것인가? : React Native에서 제공하는 Primitive Element인 FlatList 사용 FlatList : 배열을 받아서 Element의 리스트로 변환함. → data와 renderItem prop을 필요로 함. → data : 리스트 형태로 표현할 데이터들 → renderItem : 각 item을 element로 바꿀 함수 const Screen = () => { const fruits = [ { name: 'Fruit 1' }, { name: 'Fruit 2' }, { name: 'Fruit 3' }, { name: 'Fruit 4' }, { name: 'Fruit 5' },.. 2021. 8. 5.
[0803] React Native 강의 정리 좋은 기회가 생겨 React Native를 공부하고, 강의를 듣게 되었다. Notion에 필기를 하며 듣기로 했기 때문에 틈틈이 기록한 내용을 블로그에 백업하기로. Section 2 : Working with Content Component : 사용자에게 content를 보여주기 위해 사용. → 프로젝트 내 여러 파일을 통해 만들어짐. 컴포넌트 파일의 구성 1. 컴포넌트를 만드는 데에 필요한 라이브러리를 Import. 2. 'JSX'를 반환하는 함수를 통해 컴포넌트 생성. 3. 컴포넌트에 대한 StyleSheet 작성. 4. 프로젝트 내에서 사용할 수 있도록 컴포넌트를 Export. import React from 'react'; //react 라이브러리 전체를 가져오기 위해 import { Text, .. 2021. 8. 4.
The emulator process for ~ was killed 에러 The emulator process for [AVD 명] was killed. n년 전 안드로이드 스튜디오를 공부할 때만 해도 멀쩡하던 AVD... 그러나 올해 다시 안드로이드 개발을 잡았을 때 갑자기 AVD 관련 문제가 생기기 시작했다. 졸업 작품을 할 때도 말썽이었지만, 그 때는 졸작 개발에 집중하느라 폰으로 빌드를 진행해서 AVD 없이도 큰 불편이 없었는데... 이번에 다시 앱 개발을 공부하게 되어서, 아예 AVD 문제를 뿌리 뽑아보고자 오류 해결의 대장정을 펼쳤다. 아래는 인터넷 서치를 통해 시도해본 방법들. 대체로 사용자 이름이 한글로 되어있어서 (or 무언가의 경로에 한글이 포함되어 있어서) 생기는 오류가 많다. 1. AVD 폴더가 있는 경로에 한글이 있음. AVD 폴더가 있는 경로에 한글이.. 2021. 7. 31.

티스토리툴바