React Native

이번엔 컴포넌트를 만들어보겠다. 파일을 만든 다음 가장 먼저 해야 할 일은 상단에 React를 불러오는 것이다. 다음으로 사용할 컴포넌트를 불러온다. import React from 'react'; import {Text, View} from 'react-native'; 그 다음 컴포넌트를 선언할 것인데, 선언하는 방법은 함수로 선언하는 방법과 클래스로 컴포넌트를 선언하는 방법 2가지가 있다. 클래스는 예전에 주로 사용하던 방법이고 주로 함수로 선언한다. import React from 'react'; import {Text, View} from 'react-native'; function hello() { return ( Hello World ); } export default hello; 함수로 선언..

ESLint는 자바스크립트 코드를 작성할 때 개발자 취향에 따라 탭을 쓸지, 스페이스를 쓸지, 몇 칸을 쓸지를 일관성있게 관리해 주는 도구이다. 만약 ESLint에 설정된 규칙에 맞지 않는 코드가 작성되었을때 오류로 표기되고 Prettier라는 도구로 한번에 정리할 수 있다. 이 두 확장프로그램은 VS Code에서 설치할 수 있다. 위 이미지처럼 탭이나 띄어쓰기가 설정된 규칙과 일치하지 않을때 오류로 표기해준다. 이럴때 F1을 누르고 Format Document를 선택하면 기본 포맷터를 선택하라고 나오는데 ESLint를 선택하면 된다. 이 설정을 활성화하면 저장할 때마다 코드를 자동으로 정리된다.

이전 글에는 React Native 프로젝트를 생성하고 에뮬레이터로 실행까지 해보았다. 생성된 프로젝트 파일을 살펴보자. index.js /** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); index.js 파일은 프로젝트의 엔트리 파일이다. 생성한 리액트 네이티브 앱은 이 파일에서 시작한다. 여기서 import 구문을 통해 코드들을 불러와 앱을 번들링 한다. 위에 코드는 App이라는 컴포넌트를 불러와서 AppRegistry.registerC..

사이드 프로젝트 진행 중에 React Native 하이브리드 앱을 개발하려고 하는데 같이 진행할 프론트 개발자를 구하지 못해 내가 허접하지만 진행이라도 해보려고 한다... 만약 사이드 프로젝트를 같이 진행하실 React Native 가능하신 프론트 개발자가 있으시다면 당장 댓글을...ㅎㅎ 한 2년정도 전에 조금 공부하기만 하고 프로젝트를 진행해본적은 없는데 이번 기회에 조금 개념이라도 알고 있으면 좋을 것 같아 하나하나 진행하며 정리하려고 한다. 1. Node.js 설치 노드 js 홈페이지에 접속해 Node.js를 다운받는다. 물론 homebrew를 이용해 설치도 가능하다. 설치 후 터미널에서 node -v 명령어를 실행하면 설치된 노드 버전이 출력된다. 2. React Native Cli 설치 $ np..