기록하고 나누는 행복

JSX(JavaScript XML) JSX 문법을 사용함으로써 가독성과 편의성을 높일 수 있습니다 JSX를 사용하지 않았을 때의 코드 예시 render() { return ( React.createElement(View, {style: styles.container}, React.createElement(Text, {style: styles.welcome}, 'Welcome to React Native!'), React.createElement(Text, {style: styles.instructions}, 'To get started, edit App.js'), React.createElement(Text, {style: styles.instructions}, instructions) ) ); } JS..

Faker.js는 임의 데이터를 랜덤하게 생성하는 JavaScript 라이브러리 패키지 설치 방법 npm install faker npm install faker@5.5.3 npm install @types/faker@5.5.3 @5.5.3 : 페이커 설치 시 버전 지정 (버전 문제 해결) @types/faker : 타입스크립트(Typescript)를 위한 faker Components의 타입 정의 파일 패키지 import import faker from 'faker'; faker 데이터 생성 faker.datatype.uuid() faker.name.findName() faker.internet.email() faker.date.recent() faker.lorem.paragraph() faker.in..

1. 크롬 React Developer Tools 확장 프로그램(디버깅 툴) 설치 1) 아래의 Url로 이동하여 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 82762bea5 on 3/10/2022. chrome.google.com 2) React Developer Tools를 설치 3) 확장프로그램 chrome://extensions/ 으로 이동 4) 세부정보 클릭 5) 파일 URL에 대한 액세스..

1. 스타일 컴포넌트 (Styled Components) Styled Components는 리액트와 리액트 네이티브의 스타일링 적용을 도와주는 오픈소스 라이브러리로 리액트와 리액트-네이티브에 동일한 스타일 코드 적용 등 다양한 장점도 있지만 빌드 후 배포할 때 용량이 커진다는 단점도 가지고 있다 Styled Components 사용을 위한 라이브러리 설치 ※ 스타일 컴포넌트 설치 명령은 필히 해당 프로젝트 경로에서 실행 npm install --save styled-components npm install --save-dev @types/styled-components-react-native 또는 npm install --save styled-components@5.1.0 npm install --sav..

본문의 이미지들은 vcode(비쥬얼스튜디오 코드)에서 프로젝트 소스를 오픈한 예시 좌측은 Typescript templae 프로젝트로 생성된 앱의 폴더 구조로 React와 크게 다르지 않으며, ios와 android를 위한 폴더와 파일들이 추가된다는 것이 다른 점입니다. 1. index.js 리액트 네이티브 프로젝트의 시작 파일 (앱을 npx react-native run-android (Mac의 경우 npx react-native run-ios)로 수행할 경우 최초로 실행) 이 파일을 시작으로 리액트 네이티브의 자바스크립트 코드가 번들링(Bundling) 된다. 번들링(Bundling) 이란 "어떤 것들을 묶는다"라는 의미로 기능별로 모듈화 했던 자바스크립트 파일들을 묶어준다는 뜻이다. /** * @f..

안드로이드 스튜디오(android studio) 애뮬레이터 실행시 아래와 "Unable to locate adb" 에러가 발생하는 경우가 있다 [해결방법] File > Project Structure... 메뉴로 이동해서 Project의 Project SDK: 를 아래와 같이 Android API를 택 후 애뮬레이터를 다시 실행 시키면 에러 없이 실행된다.

리액트 네이티브(React Natice) Typescript 템플릿 프로젝트 생성 리액트 네이티브는 기본적으로 플로우(Flow)라는 정적 타입 분석기를 사용한다. 하지만 문법의 가독성과 편의성 등 여러 장점이 많은 타입스크립트 사용을 권장한다. react-natice-cli를 사용한 Typescript templae 프로젝트 생성하기 npx react-native init TypescriptTestApp --template react-native-template-typescript 프로젝트에 필요한 styled, babel 라이브러도 같이 설치해 주자 cd TypescriptTestApp npm install --save styled-components npm install --save-dev @type..

react-native-cli를 이용하여 타입스크립트(typescript)를 사용하는 프로젝트를 생성할 때 아래와 같이 오류가 발생하는 경우 문제 해결 방법은 react-native-cli를 삭제 후 새로운 버전으로 다시 설치하면 된다. npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/react-native-template-react-native-template-typescript - Not found npm ERR! 404 npm ERR! 404 'react-native-template-react-native-template-typescript@*' is not in this registry. npm ERR! 404 ..