728x90
반응형
SMALL

React 17

[리액트 네이티브] react-native react와의 태그 비교

react와 react-native의 차이점 리액트는 페이스북에서 만든 프론트엔드 javascript 라이브러리 ​ 리액트 네이티브는 react의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈소스 프레임 워크 ​ ​ 리액트 네이티브는 html문법을 사용하지 않는다 ​ 그래서 이번 포스팅에서는 이것을 다룰것이다 ​ html은 많이 있는데 기본의 css도 지원하지 않는다 ​ 일단 대표적인 태그들을 비교해보겠다 html React Native div img span, p ul/ol, li 태그가 다르다 이부분도 꼭 기억해줘야한다! 헷갈리면 안돼,,,! ​ ​ 상태바를 조작할 수 있다! style을 조작하여 상태바를 조절할 수 있다 https://docs.expo.dev/versions/latest/s..

[React] 프로젝트 생성하기(1)_일주일 프로젝트

오늘은 헤커톤 가기 전 웹 프로젝트를 생성해 볼건데 웹은 react native하기 전에 먼저 접했었다! 근데 지금 거의 까먹으려고 해서 다시 시도하려고 한다..! 왜냐하면 헤커톤에 나가면ㄴ 어플보다는 웹페이지를 더 많이 만들것 같아서이다!! 그리고 백도 공부해야하니까ㅏ 웹페이지도 함께 만들면서 일주일 개인 프로젝트를 진행할 예정이다!! 1. vscode 설치하기 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applicati..

[리액트 네이티브]react-native 현재 위치 가져오기

일단 처음이기 때문에 니콜라스 쌤 수업을 들으면서 진행하려고 한다! #2.8 Weather (15:32) – 노마드 코더 Nomad Coders All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 이 영상을 보면서 따라했다! 필수!! expo install expo-location import * as Location from "expo-location"; import { StatusBar } from "expo-status-bar"; import React, { useEffect, useState } from "react"; import { View, Text, Dimensions, ActivityIndicat..

[리액트 네이티브] react-native 전화번호 인증하기

https://github.com/iamport/iamport-react-example/blob/master/manuals/CERTIFICATION.md GitHub - iamport/iamport-react-example: 리액트 환경에서 아임포트 결제 및 휴대폰 본인인증 연동을 위한 리액트 환경에서 아임포트 결제 및 휴대폰 본인인증 연동을 위한 예제입니다. Contribute to iamport/iamport-react-example development by creating an account on GitHub. github.com https://www.npmjs.com/package/iamport-react-native iamport-react-native 리액트 네이티브용 아임포트 결제/본인인증..

[리액트 네이티브] react-native 로그인 회원가입

로그인 회원가입 UI ​ 팀원들과 같이 ui를 제작 ​ https://balsamiq.com/ react native 되면 바로 코드를 제작하려고 했는데 ​ 전 팀플이 있어서 ​ node 버전 문제로 다음으로 미뤘다 ​ UI ​ - 로그인 UI ​ 로그인과 비밀번호를 입력하면 로그인 성공 카카오톡, 네이버로 로그인 만약에 카카오톡이랑 네이버로 회원가입을 안했으면 회원가입 창으로 이동 카카오톡이랑 네이버 소셜 로그인하는 부분은 따로 포스팅하겠움!! ​ - 회원가입 아이디는 이메일 형식으로 입력 다른 부분은 모두 동일 아이디와 닉네임은 중복 검사 주소는 찾기로 찾아봄 전화번호는 인증 ​ 4,5번은 구현가능할지 모르겠다 주소와 전화번호로 인증하기가 가능한지 찾아봐함 ​ ​ ​ 지금!! >>>>다음 포스팅에서!..

[리액트 네이티브] react-native 리액트 네이티브 파일 프로젝트 생성하기(2)

expo 설치를 할건데 책은 cli라 유투브로 보기로 했다! https://www.youtube.com/watch?v=TkJtqgd1mKM 1.리액트 네이티브 페이지로 이동 https://reactnative.dev/docs/environment-setup 해당 페이지 setting페이지로 넘어간다 ​ ​ 2. expo와 react native CLI를 골라서 설치할 수 있다 cmd창에서 프로젝트를 생성할 수 있다 ​ AwesomeProject라는 이름을 가진 expo 파일을 만든다! 라는 뜻이다 ​ 나는 최종 프로젝트 이기도 하고 나중에 깃허브로 다같이 파일명이 어차피 바뀔 거니까 Final로 적기로 했다! ​ 전에 했던 react 파일과 충돌이 날까봐 무섭긴 한데 그냥하기로 했,,다! ​ 3. npx..

[리액트 네이티브] react-native 파일 프로젝트 생성하기(1)

리액트 기반으로 앱을 개발하려면 react native를 사용할 수 있는데 대부분 사람들은 안드로이드 스튜디오를 사용한다 ​ 하지만 최종 프로젝트로는 expo를 사용하여 react-native로 개발한다ㅏ ​ react native를 개발하기 전에 프로젝트를 생성하는 것부터 시작함! ​ ​ 그전에 ​ expo cli와 react native cli가 있다 ​ 책을 보고 react native를 보면 cli를 설치했지만 유투브 강좌에서는 expo cli를 설치했다 ​ 이점에서 둘의 차이점을 살펴보게 되었다! ​ ​ Expo CLI react native 개발을 개발자가 쉽게 할 수 있도록 도와주는 툴이다 expo는 기본적인 설정이 다 구성되어 있으며 native 파일을 숨겨놓고 관리해줌 Expo CLI R..

728x90