양갱의 개발 블로그

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 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..

일단 처음이기 때문에 니콜라스 쌤 수업을 들으면서 진행하려고 한다! #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..

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 리액트 네이티브용 아임포트 결제/본인인증..

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

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

로딩창 만들기 페이지 변환하거나 글을 작성했던 것을 저장할 때!! 아무것도 없으면 사용자 시점에서는 변화하고 있는게 없어 보이기 때문에 해당 시스템을 꺼버리기 마련이다! 이런 휴먼에러를 줄이기 위해서!! 로딩창을 만들어 진행중임을 사용자에게 보여준다ㅏ 그럴때 사용하는 것이 로딩임ㅁ 로딩 화면 만들기 위해서는 react native에 있는 값이 있긴하다! 내 snack에서 실행 코드가 있음!! 참고하시구 https://snack.expo.dev/@yeonji1013/activity-indicator 학교에서 수업 들으면서 실습했던 코드이당 이런 식으로 결과값이 나오고 하단에 있는 저 로딩창이 있다 저저 파란거ㅎㅎ,, 색도 변화할 수 있는데 좀 맘에 안들면!! 구글링해서 무료 gif 값을 넣어도 무방하다아 ..