# react native
react-native-webview (1) 웹뷰를 통해 웹과 앱 사이에서 데이터 주고 받기
회사에서 프론트엔드 코드를 다시 쓰는 리빌딩 프로젝트를 진행 중이다.가장 큰 목적 중 하나는 개발 생산성을 높이는 것인데, 이를 위해 nextjs로 웹 개발을 하고 앱은 React Native와 react-native-webview를 사용해서 nextjs 프로젝트를 띄
[RN] firebase storage를 이용한 로고 적용
스토리지에 파일을 업로드하고 이름을 클릭하면 해당 파일의 url을 얻을 수 있다.쿼리스트링에서 토큰 부분을 제외하고 사용하는 것을 주의하자로그인 화면에서는 로그인 전이기 때문에 토큰 없이 접근이 가능해야하기 때문이다.적용 완료!!!하지만 이러한 에러가 뜬다. 힝.스토리
[React Native] 개발 환경 설정 (feat. TypeError, Xcode error code 65)
앞으로 다닐 회사에서 React Native를 사용할 예정이기 때문에 사전에 익숙해지고자 개발 환경을 설정해봤다. 이전에 과제를 할 땐 Expo를 사용했었는데, RN CLI를 사용하는 것은... 참 스트레스 받는 여정이었다. 😢 그래도 어찌어찌 ios 환경까지는 설
[React Native] react-native-zoomable-view binderToBorder prop 사용시 문제점
React 에서 확대/축소 기능을 사용할 일이 생겼다.React 에서 이런 사용자의 터치 동작을 추적하고 그에 따른 이벤트를 발생시킬 수 있는 기능은 react-native 패키지의 PanResponder 라는 기능을 사용한다.확대/축소 기능 또한 PanResponde
React-native 도전기 - 1
웹 개발에 어느정도 익숙해지고 채용시장에서의 기술스택을 살펴보던 중 React-native라는 용어를 보게 되었습니다. React만 알고 있어도 비교적 쉽게 앱을 만들 수 있다는 설명에 솔깃해 React-native에 도전해보기로 했습니다.리액트 네이티브는 페이스북에서
[React Native] 팝업창(Modal) 연습
메인화면에서 버튼을 누르면 팝업이 뜨는 기능 Modal.js 컴포넌트를 따로만들어서 관리 App.js Modal.js
React Native와 PWA 사용한 React 비교
리액트네이티브와 PWA는 모두 리액트(React) 라이브러리를 기반으로 한 웹 애플리케이션 개발 방식입니다. 그러나 두 기술은 서로 다른 목적을 가지고 있으며, 각각의 장단점이 있습니다.React Native는 JavaScript와 React를 사용하여 iOS 및 An
실제 개발할때 순수네이티브보다 리액트네이티브가 공수가 높게 느껴지는 이유는 뭘까?
실제 개발에서 리액트 네이티브가 공수가 높게 느껴지는 이유는 몇 가지가 있습니다.첫째, 리액트 네이티브는 웹 개발자들이 빠르게 익힐 수 있는 자바스크립트를 기반으로 하기 때문에, 처음에는 쉽게 접근할 수 있어 보일 수 있습니다. 하지만, 실제로 앱을 개발하면서 복잡한
리액트네이티브와 하이브리드앱의 장단점 비교
리액트네이티브는 모바일 앱 개발을 위한 오픈소스 프레임워크이며, JavaScript와 React를 기반으로 작동합니다. 하이브리드앱은 웹 기술을 사용하여 여러 플랫폼에서 실행되는 앱입니다. 두 기술을 비교하여 장단점을 살펴보면 다음과 같습니다.리액트네이티브의 장점:네이
리액트 네이티브와 순수 네이티브 성능, 공수, 유지보수 관점에서 분석
리액트 네이티브와 순수 네이티브를 비교할 때, 다음과 같은 세 가지 측면에서 비교해볼 수 있습니다.성능 측면리액트 네이티브는 자바스크립트 엔진에서 실행되기 때문에, 네이티브 앱보다 느릴 수 있습니다. 하지만 최근의 업데이트로 인해, 성능이 많이 향상되었습니다. 또한,
Expo custom-updates-server 구현 : 실험실 기능 (1)
실험실 기능을 켜고, 끄고...해당 상태를 가지고 분기를 태워서 기능을 보여주고 숨기고...이런 실험실 기능은 유지보수하기 쉽지않다.이렇게 말고 codepush 기능을 이용해서 실험실 기능을 구현할 수 있지 않을까? 라는 생각이 문득 들었다.하지만 Expo를 사용해서
Flex
지난 번에 제작한 todo 에서 많은 텍스트를 추가할 경우추가된 텍스트가 모바일 화면에 다 담기지 않는다.react native에서 각 요소의 크기 비율을 flex를 통해 지정할 수 있다고 함.flexbox개념이나 justifyContent, alignItems 등은
Alert, Keyboard(dismiss)
지난 번에 만든 todo 에서 글자 수가 3이하일 경우 alert를 띄우게 하기 alert의 매개 변수를 설정하여 제목, 메시지, 확인 버튼, 확인 버튼 터치 후 실행할 명령 등을 지정 가능초기입력 글자수 3이하일 때참고 : https://www.youtube
Todo(add, delete)
지금까지 배웠던 것들로 todo 리스트 작성텍스트를 터치하면 삭제되고textInput을 통해 새로운 텍스트를 추가할 수 있다.참고 : https://www.youtube.com/watch?v=oVA9JgTTiT0&list=PL4cUxeGkcC9ixPU-QkSc
📆 23.03.23 - 대충 React-Native Cli 맛보던 내용
원래 같았으면 이전 포스트 다음으로 바로 성능 개선에 관한 이야기를 다루려고 했는데, 어떠한 기업에서 RN으로 실시간 과제를 본다고 해서 호다닥 공부해 봐야되기에 다음으로 미루겠습니다 ; (위에서 짧게 말했듯이 오늘은 처음으로 맛보는 React Native 초기 설정에