반응형 IT/React33 React 개발환경설정 1. 리액트 앱 생성npx create-react-app test-mocha2. 모카 설치# yarn 으로 설치 yarn add mocha --dev # npm 으로 설치 npm install mocha --save-dev3. 모카용 assertions 설치# yarn 으로 설치 yarn add chai chai-enzyme enzyme enzyme-adapter-react-16 cheerio --dev # npm 으로 설치 npm install chai chai-enzyme enzyme enzyme-adapter-react-16 cheerio --save-dev4. Babel 설치, 리액트 앱 용 Babel preset 설치# Commonjs 를 위한 babel 설치 # yarn 으로 설치 yarn a.. 2022. 9. 20. React Native 4가지 팁 키보드 숨기기 import {Keyboard} from 'react-native' Text 컴포넌트 내에 줄 바꿈\n 뉴라인 사용하면 됩니다{`Hi,\nMy Name Is Bora!`}로그 남기기console.log("data")Android:npx react-native log-androidiOS:npx react-native log-iosComponents 숨기고 보이고React Hook 에서 사용할 때const [showComponent, setShowComponent] = useState(false) return( {showComponent && (Hello)} {setShowComponent(true)}}>Click me )React Hook 없이 사용{this.state.isHidden ? :.. 2022. 9. 14. RN(ReactNative) ThemeProvider Jest 적용법 현상 테마 적용하겠다고 react native elements 를 설치해서 적용했더니 테스트가 전부 실패 원인 단위 테스트 할 경우에 ThemeProvider 가 적용되지 않아서 입니다 해결방법 jest 테스트 를 진행할 때 ThemeProvider 로 감싸 주도록 util 을 만들어서 사용합니다 //src > utils > test-utils.js import {render} from '@testing-library/react-native'; import { ThemeProvider, createTheme, lightColors, darkColors, } from '@rneui/themed'; const AllTheProviders = ({children}) => { const theme = creat.. 2022. 8. 22. RN(ReactNative) SafeAreaProvider Jest 적용법 현상 SafeAreaProvider 를 적용했더니 Jest 의 테스트가 전부 실패 getByText 같은 간단한 것도 못 가져온다고 실패 원인 SafeAreaProvider 를 jest 로 테스트 할 경우에 못 읽어옴 import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context'; ...생략... return ( ); ... 해결방법 mocking 하면 됩니다. 공식문서에서는 jest 설정파일에 아래 두줄 추가 하라고 했는데 저는 해결이 안되어서 import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'; jest.mock('react-native-saf.. 2022. 8. 22. RN(ReactNative) TDD TODO 앱 디버깅하기 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #8 RN(ReactNative) TDD TODO 앱 만들기 #8 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #7 RN(ReactNative) TDD TODO 앱 만들기 #7 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #6 RN(ReactNative) TDD TODO 앱 만들.. skyksit.tistory.com 이전에 만들어 둔 앱을 디버깅 하려고 합니다 성능 개선을 위해서는 먼저 성능이 어떤지 측정합니다 테스트 케이스 'Build a React Native app' 을 추가 합니다 .. 2022. 8. 16. RN(ReactNative) 디버거 설정하기 ReactNative 는 웹이 아니라서 디버깅 하려면 다른 방법을 이용해야 합니다 react-native-debugger 라는 유용한 라이브러리가 벌써 있네요 PC 에 설치용 어플리케이션 입니다 설치 #homebrew 버전확인 brew --version #homebrew 2.6.0 이상 brew install --cask react-native-debugger React Native Debugger 설치 결과 React Native Debugger 를 실행하고 React Native 로 만든 앱을 애뮬레이터나 시뮬레이터로 실행하고 개발자 도구를 켜야 한다 2022. 8. 16. RN(ReactNative) TDD TODO 앱 만들기 #8 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #7 RN(ReactNative) TDD TODO 앱 만들기 #7 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #6 RN(ReactNative) TDD TODO 앱 만들기 #6 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5 RN(ReactNative) TDD TODO 앱 만들.. skyksit.tistory.com Task 수정기능 추가하기 수정기능이 가장 복잡하지만 일단 생각나는 테스트 케이스 추가 TaskItem-test.js 에 테스트 케이스 추가 describe('Edit Task.. 2022. 8. 12. RN(ReactNative) TDD TODO 앱 만들기 #7 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #6 RN(ReactNative) TDD TODO 앱 만들기 #6 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5 RN(ReactNative) TDD TODO 앱 만들기 #5 2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4 TaskList 에 있는 체크박스 클릭시.. skyksit.tistory.com coverage 한번 확인하고 시작합니다 HomeScreen-test 에 지난번에 만든 checkbox 확인용 테스트 케이스 추가 초기 데이터가 2개니 첫번째 체크박스 클릭하면 첫번째만 b.. 2022. 8. 12. RN(ReactNative) TDD TODO 앱 만들기 #6 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5 RN(ReactNative) TDD TODO 앱 만들기 #5 2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4 TaskList 에 있는 체크박스 클릭시에 해당 Task 가 완료 되도록 기능 추가 합시다 TaskItem 에 체크박스 클릭 기능 추가 TaskItem-test.js 에.. skyksit.tistory.com Code Refactoring 일단 데이터를 지칭하는 것 부터 맞추려고 합니다. 개발새발 여기저기서 코드 참고하면서 개발하니 변수가 조금씩 달라서 보기 안좋네요. todo app 을 만드는 것이니 Task : 할일, 단수 Tas.. 2022. 8. 12. RN(ReactNative) TDD TODO 앱 만들기 #5 2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4 TaskList 에 있는 체크박스 클릭시에 해당 Task 가 완료 되도록 기능 추가 합시다 TaskItem 에 체크박스 클릭 기능 추가 TaskItem-test.js 에 체크박스 아이콘을 클릭하면 이벤트가 호출되는지 테스트 케이스를 추가합니다 //TaskItem-test.js ...생략... describe('TaskItem interaction', () => { beforeEach(() => { props = { key: '1', data: {id: '1', subject: 'Learn React Native', done: false}, onToggleCheckbox: jest.fn(), }; w.. 2022. 8. 12. RN(ReactNative) TDD TODO 앱 만들기 #4 2022.08.10 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #3 RN(ReactNative) TDD TODO 앱 만들기 #3 2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기 2022.08.10 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #2 이전 테스트시에 한가지 Warning 이 보이는데 Warning: Each child.. skyksit.tistory.com 데이터에 unique 한 id 를 부여하기 이전에 초기 데이터의 id 를 1,2,3 이렇게 넣었는데 좀 더 고유한 id 를 넣기 위해서 shortid 라는 라이브러리를 사용합니다 const initia.. 2022. 8. 11. RN(ReactNative) TDD TODO 앱 만들기 #3 2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기 2022.08.10 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #2 이전 테스트시에 한가지 Warning 이 보이는데 Warning: Each child in a list should have a unique "key" prop. TaskList 는 여러 개의 Task 가 쌓이면 스크롤이 생기도록 ScrollView 를 사용하고 있는데 ScrollView 내부의 리스트에 unique 한 key 를 prop 로 넣어달라는 것이다 TaskList 에 key 추가 TaskList-test.js 의 초기 데이터에 id 를 추가한다 //TaskList-test.js.. 2022. 8. 10. RN(ReactNative) TDD TODO 앱 만들기 #2 2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기 Home 스크린 추가 App.js 에 작성된 것들을 HomeScreen.js 로 화면을 빼줍니다 화면은 screens 로 컴포넌트는 components 아래 만들어 줍니다 src > screens > HomeScreen.js 추가 import React from 'react'; import {Text, TextInput} from 'react-native'; export default function App() { return ( Todo TDD Learn React Native ); } 기존 text 와 textInput 을 HomeScreen.js 로 옮기고 App.js 를 레이아웃만 남깁.. 2022. 8. 10. RN(ReactNative) 앱 이름 변경하기 change app name ReactNative 명칭 변경 app.json 명칭 변경 { "name": "reactNativeTodos", "displayName": "reactNativeTodos" } 안드로이드 명칭 변경 build.gradle 내의 applicationID 변경 프로젝트루트 > android > app > build.gradle android { ...생략... defaultConfig { applicationId "com.reactnativetodos" ...생략... 안드로이드 앱 이름 변경 프로젝트 루트 > android > app > src > main > res > values > strings.xml reactNativeTodos iOS APP 명칭 변경 Xcode 로 프로젝트 열어서 Display.. 2022. 8. 9. RN(ReactNative) TDD 설정 및 TODO 앱 만들기 react-native CLI 로 프로젝트를 생성하면 테스트를 위해서 기본적으로 jest 와 react-test-renderer 가 설치 됩니다 거기에 unit 이나 컴포넌트 테스트를 위해서 enzyme 또는 react-native-testing-library 를 추가해서 사용하고 e2e 테스트용으로는 detox 를 설치해서 사용합니다 유닛 테스트를 더 편하게 # 테스트를 위해서 enzyme 또는 react-native-testing-library 를 설치합니다 npm install --save-dev @testing-library/react-native # 별도의 matcher 를 사용하려면 추가해주세요 npm install --save-dev @testing-library/jest-native rea.. 2022. 8. 9. RN(ReactNative) 앱 실행방법 안드로이드 앱 실행방법 리엑트 네이티브 안드로이드 앱을 실행하려면 안드로이드 실물 기기 또는 안드로이드 가상 기기가 필요합니다 실물기기 준비하기 핸드폰 설정 설정 > 개발자 옵션 > USB 디버깅 활성화 (기기마다 메뉴 구조가 조금씩 틀리다) 각 기기들의 USB 디버깅 활성화를 찾아서 해놔야 합니다 핸드폰과 mac 을 USB 로 연결 핸드폰에 USB 디버깅 활성화 메시지가 나타납니다 # 물리적인 디바이스 확인 adb devices # 안드로이드 앱으로 설치 실행 npx react-native run-android 가상기기 준비하기 안드로이드 스튜디오 실행 VDM (Virtual Device Manager) 를 실행 a. Virtual Device Manager 선택 b. Create Device 선택 원.. 2022. 8. 8. RN(ReactNative) 프로젝트 만들기 2022.08.08 - [IT/React] - RN(ReactNative) 개발환경 설정 RN(ReactNative) 개발환경 설정 개발환경설정 node 16 설치 nvm 으로 설치 하거나 homebrew 로 설치 # nvm 으로 설치 nvm install 16.16.0 nvm use 16.16.0 # homebrew 로 설치 brew install node@16 watchman 설치 brew install watchman JDK 설.. skyksit.tistory.com 개발환경을 설정했으니 react-native init 프로젝트 명으로 프로젝트를 생성합니다 2022년 기준으로 reactNative 0.69 버전입니다 # 이전버전 react-native-cli 삭제 npm uninstall --loc.. 2022. 8. 8. RN(ReactNative) 개발환경 설정 개발환경설정 node 16 설치 nvm 으로 설치 하거나 homebrew 로 설치 # nvm 으로 설치 nvm install 16.16.0 nvm use 16.16.0 # homebrew 로 설치 brew install node@16 watchman 설치 brew install watchman JDK 설치 brew install —cask adoptopenjdk/openjdk/adoptopenjdk13 # 또는 brew tap homebrew/cask-versions brew install --cask zulu13 안드로이드 개발 환경 설정 A. 안드로이드 스튜디오 설치 android studio 사이트에서 다운받아서 설치 B. Android SDK 설치 Android Studio 설치 중에 SDK 설치.. 2022. 8. 8. RN(ReactNative) libRNVectorIcons.a 에러 날 경우 (iOS App) react-native-vector-icons 를 사용하고 있는데 안드로이드 APP 에서는 문제가 없는데 iOS APP 에서 실행할 때 RNVector ... libRNVectorIcons.a 라이브러리 설정이 안되었다면서 에러가 났다 원인 react-native-vector-icons 를 iOS 에 수동으로 설정해줬는데 그게 문제가 되는 것 같다. 해결방법 CocoaPods 를 이용해서 설치하는 방법으로 변경해서 설치했더니 문제 해결 With CocoaPods 로 react-native-vector-icons 를 설치하는 방법은 1. 프로젝트 폴더 > ios > podfile 에 다음 문구 추가 ... 생략 ... target 'reactNativeTodos' do config = use_native_.. 2022. 8. 8. RN(ReactNative) error Parsing error Unexpected token < 수정 리액트 네이티브에서 eslint error 가 다음과 같이 나올 경우 error Parsing error Unexpected token 2022. 8. 8. RN(ReactNative) jsx 파일 사용하기 ReactNative 프로젝트에서 jsx 파일을 import 해서 사용하면 import 안된다는 에러 메시지가 나옵니다 원인 metro 에서 jsx 파일을 읽어오지 못해서 발생되는 것입니다 해결방법 프로젝트 폴더 root 에 있는 metro.config.js 파일에 jsx 파일을 읽어 올 수 있게 수정합니다 /** * Metro configuration for React Native * https://github.com/facebook/react-native * * @format */ const {getDefaultConfig} = require('metro-config'); module.exports = (async () => { const { resolver: {sourceExts}, } = awai.. 2022. 8. 8. RN (ReactNative) 사용자 폰트 적용하기 1. 폰트 다운받아서 2. 프로젝트 asset 으로 폰트를 등록 3. compnents 폴더에 text.jsx 또는 text.tsx 만들어서 import React from 'react'; import { Text as ReactText, StyleSheet, StyleProp, TextStyle, } from 'react-native'; type TextProps = { children: React.ReactNode; style?: StyleProp; }; export const Text = ({style, children}: TextProps) => { return {children}; }; const styles = StyleSheet.create({ font: { fontFamily: 'Nunit.. 2022. 8. 8. 개발시 사용하는 벡터 아이콘 모음 https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io 벡터 아이콘 모음집이라고 보면 됩니다. Todo 앱 만들때 Feather 의 square, check-square, delete, edit-2 아이콘 사용했습니다. 아주 좋아요 2022.08.05 - [IT/React] - React Native 벡터 아이콘 사용하기 vetor-icon 2022. 8. 5. React Native 벡터 아이콘 사용하기 vetor-icon React Native 에서 벡터 아이콘을 사용하기 위해서 react-native-vector-icons 라이브러리를 사용한다 설치 npm install --save react-native-vector-icons 환경별 설정 react native 는 iOS, ANDROID 앱으로 만들어지다 보니 iOS 와 Android 용으로 각각 설정해줘야 한다 iOS App 에 폰트 추가 1. Fonts 그룹 만들기 XCode 로 해당 프로젝트를 실행해서 File > New > Group 으로 Fonts 라는 그룹을 만들어 준다 2. 폰트 파일 복사해오기 Finder 로 react-native-vector-icons > Fonts 밑의 파일을 드래그 해서 Xcode 에 만들어 놓은 Fonts 그룹으로 드롭한다 팝업.. 2022. 8. 5. React 18 에는 enzyme 사용하지 마세요 https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl Enzyme is dead. Now what? A warning from the maintainer of React 17 Enzyme adapter. dev.to React 17 용 비공식 enzyme 어댑터를 제작한 사람의 글 입니다 React 18 용 enzyme 어댑터를 만들기 위해서는 작업량이 무척 많다는 거고 공식 채널에서는 아직도 React 16 용 어댑터에서 멈춰 있습니다. React 18 사용시에는 Enzyme 을 사용 못 할 것으로 보이네요. 오픈소스가 이래서 사용하기 어려운거 대체안으로는 React Testing Library 사용하라고 하네요. 2022. 8. 1. REACT NATIVE UI COMPONENT ReactNativ vs Android vs IOS 의 UI 비교 ReactNative Android IOS WEB A non-scrolling 스크롤이 없는 View 텍스트를 보여줄 때 이미지 보여줄 때 스크롤이 있는 View 텍스트 입력을 받을 때 2022. 8. 1. Context API React 리액트는 데이터를 위에서 아래로 전달한다 1번 컴포넌트에서 2,3 번으로 state 를 전달할 때는 props 를 사용하면 된다 1번에서 4번으로 보낼 때도 문제 되지 않는다 문제점 4번 컴포넌트에서 7번으로 보낼 때는? (4 => 2 => 1 => 3 => 7 을 순차적으로 거쳐야 하면서 Prop-drilling 이라는 현상이 나옴) 6번 컴포넌트에서 7번과 state 를 공유하고 싶을 때는? Context API Prop 를 이용해서 전달하기 어려울 때 해결방법으로 나온게 Context API 이다. Provider 를 사용하여 Prop 사용없이 값을 전달 할 수 있다 Context API 사용방법 createContext 를 사용해서 context 를 생성한다 생성한 context 를 이용하여 Re.. 2022. 8. 1. React Components React 에서 Hello World! 을 injecting 하려면 import React from 'react' import ReactDOM from 'react-dom' ReactDOM.render(Hello World!, document.getElementById('app')) ReactDOM.render( React.DOM.h1(null, 'Hello World!'), document.getElementById('app') ) 커스텀 컴포넌트 // hooks 방식 const BlogPostExcerpt = () => { return ( Title Description ) } // class 방식 import React, { Component } from 'react' class BlogPostEx.. 2022. 7. 27. React JSX JSX jsx 는 React 가 사용하는 표현 기술 const element = Hello, world! //속성 추가가 쉽다 const myId = 'test' const element = Hello, world! 자바스크립티 예약어인 아래 두가지는 다르게 표현해야 합니다 class 는 className for 는 htmlFor 로 표현해서 사용해야 합니다 하나의 div 로 묶여야 합니다 (render 가 단일 node 만 반환하므로 여러개의 노드는 하나의 div 로 묶어주면 됩니다) // JSX 표현 ReactDOM.render( A title A paragraph , document.getElementById('myapp') ) // PlanJS 로 표현 ReactDOM.render( React.D.. 2022. 7. 27. React 기본개념 SPA SPA 의 장단점 필요한 부분만 렌더링 하기 때문에 MPA (Multi Page Application) 대비 로딩이 빠르다 서버 측에서 레이아웃 빌드 대신에 API 제공에 집중할 수 있기 때문에 서버는 리소스 소모가 덜하다 (CSR : Client Side Rendering, SSR : Server Side Rendering 은 또 다른 이야기) PWA 로 전환이 쉽다 (Progressive Web APP) 단점은 SEO (검색 엔진 최적화) 가 어렵다. SEO 가 중요한 블로그 만들때는 JAM 스택 기반의 정적인 페이지로 만든다 (SEO 에 강점) 네이게이션을 수동 관리 React Router 로 URL 을 관리 해줘야 한다 Declarative approach (선언적 접근) DOM 을 직접 .. 2022. 7. 27. 이전 1 2 다음 반응형
