728x90

리액트네이티브 11

[ReactNative] 6장 - Hooks

각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 2021' 게시판 공부 내용 정리: '프로그래밍 > React Native' 게시판 5장은 Hooks에 대한 내용이다. 책에 나온 코드를 따라한 후 깃허브에 올려뒀다. https://github.com/jung0115/react-native-study/tree/main/6.Hooks GitHub - jung0115/react-native-study: React Native Study Code React Native Study Code. Contribute to jung0115/react-native-study development by creating an account on GitHub. github.com

[ReactNative] 5장 - 할 일 관리 애플리케이션

각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 2021' 게시판 공부 내용 정리: '프로그래밍 > React Native' 게시판 5장은 할 일 관리 애플리케이션을 직접 구현해보는 내용이다. 책에 나온 코드를 따라한 후 깃허브에 올려뒀다. https://github.com/jung0115/react-native-study/tree/main/5.Todo GitHub - jung0115/react-native-study: React Native Study Code React Native Study Code. Contribute to jung0115/react-native-study development by creating an account on GitHub. github.com

[ReactNative] 개발 환경 - 윈도우&맥

- Node.js 설치 : Node.js를 설치하면 노드 매니저 패키지인 npm도 함께 설치됨. npm을 통해 개발자들이 만든 패키지를 설치하고 사용 가능. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org : 위 사이트에서 환경에 맞는 파일 다운로드 후 실행(설치) node --version : 버전 확인 - 파이썬 설치 : 리액트 네이티브는 빌드할 때 파이썬 2 버전 필요 Python Release Python 2.7.18 The official home of the Python Programming Language www.python.org - JDK 설치 : 안드로이드 개..

[ReactNative] 4장 - 스타일링

각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 2021' 게시판 공부 내용 정리: '프로그래밍 > React Native' 게시판 4장은 스타일링에 대한 내용이다. 책에 나온 코드를 따라한 후 깃허브에 올려뒀다. https://github.com/jung0115/react-native-study/tree/main/4.Style GitHub - jung0115/react-native-study: React Native Study Code React Native Study Code. Contribute to jung0115/react-native-study development by creating an account on GitHub. github.com

[ReactNative] 3장 - 컴포넌트

본격적인 앱 개발에 앞서 앞 글에서 이야기 한 책으로 React Native를 공부해보고 있다. 책에 나온 코드를 따라하며 이해하는 중이다. 한 장을 공부할 때마다 티스토리에 기록하고 시간이 날 때마다 관련 내용을 정리하면서 공부하려고 한다. 각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 2021' 게시판 공부 내용 정리: '프로그래밍 > React Native' 게시판 3장은 컴포넌트에 대한 내용이다. 책에 나온 코드를 따라한 후 깃허브에 올려뒀다. https://github.com/jung0115/react-native-study/tree/main/3.Component GitHub - jung0115/react-native-study: React Native Study Code ..

[ReactNative] JSX

공부 도서: 처음 배우는 리액트 네이티브 / 김범준 / 한빛미디어 / 2021 ● JSX - 자바스크립트 확장 문법 - 객체 생성과 함수 호출을 위한 문법적 편의를 제공하고자 만들어진 확장 기능 - 리액트 프로젝트에서 사용됨. - 가독성이 높고 작성하기 쉬움. - 오류 검사에도 장점이 있음. - XML과 유사하여 중첩된 구조를 잘 나타낼 수 있음. 1. 하나의 부모 : JSX에서는 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 함. export default function App(){ return( Open App! ); } //와 가 하나로 감싸져 있지 않아서 오류 발생 위와 같은 에러를 해결하기 위해서는 컴포넌트로 감싸주면 된다. 하지만 View처럼 특정 역할을 컴포넌트로 감싸지 않으면..

[ReactNative] 리액트네이티브 책

앱 개발을 하는 창업동아리를 만들었다. 인공지능을 활용한 영어 단어 추천 앱을 만드는 것을 활동 목표로 잡고 있으며 동아리원은 나를 포함해 총 3명이다. 앱 개발을 하기에 앞서 리액트네이티브 공부를 하기 위해 책을 구매했다. 위 책을 이용해 리액트네이티브의 기초 공부를 하고, 앱 개발에 들어가려고 한다. 활동 진행 계획은 아래와 같다. 1) 리액트네이티브 공부 2) 영어 단어 추천앱의 기본 틀이 되는 앱 제작 3) 인공지능, 빅데이터 공부 4) 기본 앱에 인공지능을 활용한 기능 추가 5) 보완

[ReactNative] async와 await

async와 await는 비동기 처리 방식의 대표적인 예시라고 할 수 있다. - 사용 형태 async function Function_Name(){ await 비공개처리메소드명(); } - 사용 예시(AsyncStorage를 이용하여 저장한 데이터를 불러올 때) const Save_Data = async ()=>{ const data_D = await AsyncStorage.getItem('Dday_Data'); if (this._isMounted) { this.setState({Dday: data_D}); //스토리지 데이터는 return으로 값을 못 넘겨주기 때문에 state 이용 } } 2번 줄을 보면, 로컬 스토리지에서 Dday_Date라는 이름으로 저장되어 있는 데이터를 불러오고 있다. 만약 이..

[ReactNative 기초] StyleSheet 사용

리액트 네이티브에서는 StyleSheet를 이용하여 배치, 폰트 크기, 마진 등 다양한 스타일을 적용할 수 있다. 간단한 예시를 적어보고, 나중에 여유가 생기면 StyleSheet의 요소들을 정리해보도록 하자. const App = () => { return ( 안녕하세요 ); }; export default App; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 20, }, }); 위의 코드처럼 const styles = StyleSheet.create({});로 스타일을 지정하고, 적용하고 싶은 곳에 style={styles..

728x90