728x90

공부/ReactNative 2

[ReactNative] 리액트 네이티브 build하기

react-native를 설치해준 후 vscode에서 생성한 폴더를 열어주었다. 다음으로 인스타 앱을 만드는 데 필요한 이미지와 비디오 파일들을 assets폴더에 넣어주었다. src폴더 안에 components와 screens 폴더도 생성해준 후 실질적으로 앱을 구성하는 데 사용하는 소스코드를 작성해줄 영역을 만들어줬다. 다음으로 screens폴더 안에 인스타 앱 스크린을 위한 파일들을 생성해준다. 생성한 각 파일안에 기본 구조를 다음과 같이 작성해주고 만약 에러 줄이 뜬다면 .eslintrc 파일에 prettier 조건을 작성해주면 된다. 'prettier/prettier': 0, 이로써 인스타 앱을 만들기 위한 전체 구조를 생성해줬다. 다음으로 react navigation을 이용해서 라우팅을 구현해..

공부/ReactNative 2024.04.11

[ReactNative] 리액트 네이티브 시작하기 (개발 환경 셋팅)

리액트 네이티브란? 리액트와 앱 플랫폼의 기본 기능을 사용해 안드로이드 및 ios 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크이다. 장점 1️⃣ Web view를 사용하는 다른 크롯 플랫폼과는 달리 실제 호스트 플랫폼의 표준 렌더링 API를 사용해 렌더링한다. => Web view를 사용하면 모방이 기본이기에 한계가 있다. => 그러나, 리액트 네이티브는 마크업 요소를 실제 네이티브 요소로 변환해서 사용한다. 2️⃣ 리액트와 대부분 비슷하기에 쉽다. (state, props가 변경되면 view를 렌더링하는 등) => 차이점 : 네이티브는 호스트 플랫폼의 UI 라이브러리를 활용해 이를 수행한다. 3️⃣ 대부분 비슷한 소스 코드로 ios, 안드로이드 모두를 위한 앱 개발이 가능하다. => 시간 절약 가..

공부/ReactNative 2024.04.02
728x90