JavaScript29 [RN] React Native Google Map 프로젝트 생성 $ create-react-native-app GMAP => 'minimal' 모드로 선택 실행 확인 $ cd GMAP $ yarn ios > 빌드 에러 "error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening GAMPOverlays.xcodeproj" > 해결방법 $ cd ios $ pod install React Native Maps 설치 $ yarn add react-native-maps $ react-native link.. 2019. 10. 22. [RN] expo is out of date uninstall and run again to upgrade Create React Native App (이하, CRNA)를 사용하여 프로젝트 생성 후 실행시킬때 ios simulator 에서 아래와 같이 에러가 나는 경우가 있다. > 시뮬레이터 에러 "There was a problem loading the requested app. It looks liek you may be using a LAN URL. Make sure your device is on the same network as the server or try using a tunnel." > 터미널 에러 "expo is out of date uninstall and run again to upgrade" 결국엔 시뮬레이터에서 사용중인 expo의 버전이 맞지 않으니 업그레이드 하라는 말이다. 시뮬레.. 2019. 10. 2. [RN] 리액트 네이티브 프로젝트 시작하기 create-react-native-app (CRNA) 설치 및 실행 CRNA는 리액트 네이티브 프로젝트를 만드는 데 선호되는 도구이다. 개발자 커뮤니티에 의해 생성됐으며 리액트 프로젝트를 만들기 위한 create-react-app과 동일한 목표를 지향한다. 리액트 또는 리액트 네이티브 앱을 실행하는 데 필요한 보일러플레이트 코드를 생성할 수 있다. npm install -g create-react-native-app 어디서든 명령어를 실행시킬 수 있어야하므로 글로벌로 설치해준다. 리액트 네이티브 앱 생성 create-react-native-app my-project 어떤 형식으로 프로젝트를 생성할지 선택하고 프로젝트를 생성한다. 나는 blank 형식으로 생성했다. 프로젝트 생성 후에 필요 라이브러리들을.. 2019. 10. 1. [RN] 왜 리액트 네이티브인가 장점 하나의 언어로 두가지 플랫폼(Android, iOS) 제공 가능 비용 및 시간 절감 JSX 사용 (리액트 개발자가 이미 알고 있는 언어로 개발이 가능) 단점 유지보수를 위해 리액트 네이티브 개발자가 있어야 함 iOS 와 달리 JavaScript에서는 변수나 함수의 파라미터의 타입을 지정하지 않음 (=> 이 부분은 TypeScript로 해결 가능) React Native 동작 방식 웹 용으로 사용되는 동일한 리액트 라이브러리를 리액트 네이티브가 사용하며 JavaScriptCore 내에서 동작한다. 메시지는 네이티브 플랫폼 API에 비동기적으로 보내지며 성능을 위해 배치로 수행된다. 리액트 네이티브는 HTML 요소인 컴포넌트 대신 모바일 플랫폼을 위해 구현된 컴포넌트를 제공한다. JavaScriptCo.. 2019. 10. 1. [ReactJS] 재사용할 수 있는 컴포넌트 제작 이 페이지는 재사용할 수 있는 컴포넌트 제작에 대해 설명하며 리액트 & 리액트 네이티브 통합 교과서를 기반으로 작성했습니다. 일체형 컴포넌트의 어려움 특정 기능에 대해 하나의 컴포넌트만 구현한다면 작업이 간소화된다. 최소한 유지해야 할 컴포넌트가 많지 않고 모든 것이 컴포넌트의 내부에 있기 때문에 데이터의 통신 경로가 많지 않을 것이다. 그러나 이 개념은 팀 개발의 협업을 어렵게 하고 컴포넌트가 커질 수록 추후 리팩토링하는 것이 더 어려워진다. (나의 경우는 퍼블리셔가 있는 회사에서 HTML을 주면 일체형 컴포넌트를 만들게 되는 점이 있었다...이제 이걸 잘 나누자) JSX 마크업 구현하고자 하는 일체형 컴포넌트를 작성하자. 너무 길어서 깃헙 주소로 대체 - https://github.com/PacktP.. 2019. 9. 17. [ReactJS] 이벤트 핸들링 - 리액트 방식 이 페이지는 책(리액트 & 리액트 네이티브 통합 교과서)과 리액트 공식 사이트(ko.reactjs.org)를 참고하여 정리한 페이지입니다. 이벤트 처리 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매유 유사합니다. 몇 가지 문법적인 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어, HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를.. 2019. 9. 17. [React-Native] console.error: "React Native version mismatch. react-native init AwesomProject 로 프로젝트를 만들어서 빌드를 하면 실행이 안된다. RN의 버전이 안맞아서 그렇다고 해서, rm -rf node_modules/ rm package-lock.json rm -rf ios/build/ 까지 지우고 npm install react-native run-ios 를 실행했는데도 안된다.. react-native -v 으로 확인도 하고 package.json 의 react-native 버전도 확인했는데 안됐다.. 그래서 결국 init 할 때 버전을 픽스해서 세팅했다. react-native init App --version 0.52.0 위 방법으로 최신 버전인 0.60.0 으로 했는데 안되는걸로 보아.. 뭔가 이상하다!! 2019. 8. 29. [React + TypeScript] TypeScript 적용하기 이 페이지는 React에 TypeScript를 적용하는 방법에 대해 설명하고 있습니다. React에서 PropTypes로 충분히 타입 체킹이 가능하지만 state, function parameters 등의 타입 체킹은 할 수 없다. 그래서 TypeScript를 적용해보고자 합니다. 해당 프로젝트는 React 관련 기본 세팅이 되어있다고 가정하고 설명합니다. CRA를 사용할 경우 옵션을 통해 쉽게 세팅할 수 있다. create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts 설치 npm i typescript ts-loader @types/react -D React에서 사용되는 TypeScript Loader에는 두가지가 유명하.. 2019. 8. 6. 이전 1 2 3 4 다음
