코딩가딩가딩

앱을 처음 실행시키면 나오는 로딩 화면에서 아이콘이 움직이는 애니메이션 기능을 넣고 싶었다. 여러가지 방법이 있지만 useState와 SetInterval을 이용해 이미지를 연속적으로 반복해서 보여주는 방법을 이용했다. App.js 파일에서는 3초 동안 로딩 화면을 보여주고 메인 페이지로 넘어가도록 되어있다. 그리고 로딩 화면을 구성하는 Loading.js 파일. 하나하나 설명을 해보자면, 필요한 Hooks이나 라이브러리 등을 import 해준다. 여기는 디자인적인 부분. 보통 Reac Native로 앱 개발을 하면 StyleSheet로 디자인을 많이 하지만, 나는 styled-components를 이용해서 디자인을 해주었다. 아직은 디자인이라고 할 정도는 아니지만, 배경색과 정렬 정도를 해줬다. sty..

각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 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

각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 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

- 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 설치 : 안드로이드 개..

각 장 마무리 기록: '프로젝트 > 영어 단어 추천 앱(모바일) - 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

본격적인 앱 개발에 앞서 앞 글에서 이야기 한 책으로 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 ..

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

1) export(내보내기) -> export 하는 모듈은 "use strict" - named: 모듈을 특정 이름으로 export export {myFunction}; //먼저 선언한 함수 내보내기 export const foo = Math.sqrt(2); //상수 내보내기 - default: 모듈을 이름 없이 export export default function(){} //기본 함수 내보내기 export default class{} //기본 클래스 내보내기 +) 차이점 → 하나의 모듈(파일)에서는 하나의 default export만 가능 → named export는 동일한 이름으로 가져올 수 있고, 이름을 바꾸려면 as 사용 import {a as b} from "module.js" → {}구분으로..

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라는 이름으로 저장되어 있는 데이터를 불러오고 있다. 만약 이..

리액트 네이티브에서는 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..