본문 바로가기
반응형

개발 공부/expo5

React 앱 생성 방법 및 초기 셋팅 방법 리액트 앱 생성 방법 및초기 셋팅 방법 1리액트 개발 폴더 만드는 방법개발 폴더 생성 후 생성 된 폴더로 이동mkdir home cd home홈 폴더 생성 후 홈 폴더로 이동* mkdir 명령어는 "make directory"의 약자로, 디렉토리(폴더)를 생성하는 명령어* cd 명령어는 "change directory"의 약자로, 현재 작업 디렉토리를 변경하는 명령어 2React 앱 생성 방법npx create-react-app ..을 붙이면 현재 폴더에 설치됩니다. 2~3분 정도 소요됨 3프로젝트 실행 확인npm start자동으로 브라우저가 열리며 http://localhost:3000에 “React 앱 기본 화면”이 보이면 성공! 4불필요한 코드 정리code .VS Code 실행 후 다음 파일.. 2025. 6. 23.
React Native + Expo 개발 환경을 위한 Node.js 설치하기 React + Expo는“웹 + 앱을 동시에 하나의 코드베이스로” 배포할 수 있는 실용적 선택임!이유설명개발 진입 장벽이 낮음React는 HTML/CSS를 조금이라도 아는 사람이라면 빠르게 적응 가능함Expo로 앱과 웹 동시에 배포 가능Expo는 React Native Web을 통해 Android/iOS + Web 동시에 지원강력한 웹 UI 생태계Tailwind, shadcn/ui, chart.js 등 다양한 고품질 UI 도구 사용 가능 이미 작성한 웹 코드 재사용 가능지금까지 작성한 JSX 기반 코드들을 거의 그대로 앱에서도 사용 가능 리액트 네이티브 + 엑스포로앱을 개발하기로 결정 했다면 1단계React 앱을 만들기 위해서Node.js 설치하기 ① Node.js 사이트에 접속 후② Node.js 다.. 2025. 6. 22.
왜 React Native + Expo로 개발하는가? 왜 React(React Native + Expo)로 개발하는가? 1한번에 세 플랫폼 개발웹, 안드로이드, iOS까지 React Native 자체만으로도 크로스플랫폼 개발이 가능하지만,Expo를 사용하면 추가 설정 없이 바로 웹과 모바일 앱을 만들 수 있음.하나의 코드로 세 가지를 다 커버함npx create-expo-app my-appcd my-appnpx expo start그리고 w, a, i를 누르면 웹, 안드로이드, iOS 미리보기까지! 2설정이 너무 쉽다React Native는 강력하지만,처음 설정할 때 Xcode, Android Studio, 환경 변수, CocoaPods... 이런 설정 지옥에 빠질 수 있으나Expo는 이 과정을 싹 생략하게 해줌. 설치하고 바로 개발, 바로 실행. .. 2025. 6. 21.
Expo / 기본 셋팅 파일 설명 1. 앱 개발 할 폴더 만들기 npx create-expo-app Victory // Victory = 앱이름 터미널에서 위 코드를 실행 시키면 기본틀 셋팅이 진행 됩니다. 2. 엑스포 기본틀 파일 설명 assets 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더 node_modules 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소 App.js - 리액트 네이티브 앱이 시작되는 출발선 및 진입점으로 웹으로 따지면 index.html 또는 main.html처럼 메인 파일 - 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소 - 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳으로 준비가 .. 2024. 4. 19.
Expo / 하이브리드 앱 & 웹앱 개발 초기 셋팅 1. Expo 회원가입 Sign Up — ExpoCreate an account for Expo here.expo.dev하이브리드 어플제작을 위해 Expo에 회원가입! 2. 개발 컴퓨터에 Expo 로그인 진행npx expo login...expo 이메일 or 아이디, 패스워드 입력 입력하면 로그인 완료!윈도우는 cmd 맥은 terminal에서 명렁어를 치고 엑스포에 로그인 합니다. 3. 비주얼 스튜디오 코드에서 앱 개발 관련 기본 셋팅 진행npx create-expo-app 앱이름 //npx create-expo-app 명령어로 기본 앱 생성터미널에서 개발할 앱 이름의 폴더를 만든 후 기본틀 셋팅이 진행됩니다.npx로 원격에 있는 명령어들 중 create-expo-app을 사용해서 앱을 초기화 진행(np.. 2024. 4. 17.
반응형