본문 바로가기
반응형

IT314

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.
VSCode 저장시 자동으로 eslint 적용되게 settings.json 에 다음 문구 추가하자 { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript"] } 일일이 문제 해결할 필요없이 파일 저장될 때 eslint 해결되어 적용됩니다 2022. 8. 5.
개발시 사용하는 벡터 아이콘 모음 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.
포코폰 개발자모드 변경 device is temporarily restricted 3-3 해결 포코폰 개발자모드는 설정 > 휴대전화 정보 MIUI 버전 (For POCO) 를 연타 하면 개발자 권한을 받을 수 있습니다. 계속 연타하면 `이미 개발자 입니다` 라는 토스트 메시지가 뜰겁니다. 그 후 개발자 옵션 > USB 디버깅 모드를 활성화 USB 로 설치 활성화 하려는데 device is temporarily restricted 3-3 라는 메시지가 뜨면서 활성화 안됨 USB 디버깅 (보안 설정) 도 동일하게 활성화 안됨 해결방법은 중국 VPN APP 을 설치 후에 VPN 지역을 China, Beijing 선택한 후에 USB로 설치 USB 디버깅 (보안 설정) 활성화 잘 됩니다. 중국 VPN 앱은 VPN China 라는 앱을 잠시 깔아서 사용했습니다. 2022. 8. 4.
여러버전의 JDK 쉽게 관리하기 설치된 Java 버전 확인하기 /usr/libexec/java_home --verbose 현재 사용하는 Java 버전 확인하기 java -version 자바의 버전관리는 shell profile 에서 합니다. zshell 을 설치한 저는 .zprofile 에서 환경설정을 합니다 .zprofile 설정내용들 # Setting PATH for Python 3.8 # The original version is saved in .zprofile.pysave PATH="/Library/Frameworks/Python.framework/Versions/3.8/bin:${PATH}" export PATH # ADD javaHome export JAVA_HOME_13=$(/usr/libexec/java_home -v1.. 2022. 8. 2.
Mac 용 무료 JDK 설치 하기 Java 로 개발하기 위해서 JDK 를 설치해야 하는 경우가 발생되는데 오라클이 유료로 전환한 후에는 무료 JDK 를 찾는 경우들이 많습니다. 설치 하는 방법은 여러 가지가 있습니다 Homebrew 를 이용해서 openjdk 설치 하는 방법 azul 에서 공개하는 JDK 설치 하는 방법 aws 에서 공개하는 Corretto 를 설치하는 방법 Homebrew 를 이용해서 openjdk 설치 하는 방법 2022년 기준으로 homebrew 로 검색해보면 openjdk@17 까지 adoptopenjdk16 까지 나와있습니다 brew install —cask adoptopenjdk/openjdk/adoptopenjdk13 설치내역 확인 /usr/libexec/java_home --verbose azul 에서 공개.. 2022. 8. 2.
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.
React 를 위한 자바스크립트 컨셉 이해하기 변수 var 특징 ES2015 전까지 변수 정의는 var 만 사용했습니다 var 은 여러 번 선언이 가능합니다 변수의 초기값을 주지 않으면 `undefined` 값을 갖게 됩니다 함수 외부에서 초기화된 var 은 global scope 를 가집니다 함수 내부에서 초기화된 var 은 local scope 을 가집니다 var 은 block scope 이 아닌 function scope 을 가지기에 함수가 생성될 때 새 범위를 가집니다 //초기값이 없으면 undefined var a //typeof a === 'undefined' //변수를 여러 번 다시 선언이 가능 var a = 1 var a = b // function iHaveScope() { var secret = 42; } secret; // Ref.. 2022. 7. 27.
React 개발 환경 설정 [ ] node, react , react-dom 라이브러리 설치 [ ] package.json 내부에 프로젝트 설정 정보 업데이트 [ ] webpack.config.js 설정 정보 업데이트 [ ] Hot reloading 적용 node 설치 //nvm 설치 후 node 설치 nvm install 16.15.1 //설치한 node 선택 nvm use 16.15.1 프로젝트 초기설정 //npm 초기화 npm init react, react-dom 설치 npm install --save react react-dom webpack, webpack-cli 설치 (dev) npm install --save-dev webpack webpack-cli webpack.config.js 파일 생성 entry, modul.. 2022. 7. 26.
React 간단하게 사용하기 React 는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 state 를 변경하면 정보가 DOM 에 반영 된다 React 의 기본 컨셉 Components : 컴포넌트 JSX : React 만의 문법 (XML 같은) State : 상태 변경으로 화면의 데이터 변경 Props : Components 로 정보 전달 React 적용하는 방법 WEB 페이지에 직접 로딩 하는 방법 //like_button.js 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } rende.. 2022. 7. 26.
소나큐브 비용 (소나클라우드) 청구 방식 https://sonarcloud.io/pricing Plans and Pricing | SonarCloud Get all the SonarCloud features and functionality for free on your open-source projects. If you need privacy for your code, we have a pricing plan to fit your needs. sonarcloud.io 소나클라우드의 가격을 꽁꽁 숨겨놔서 링크 걸어둡니다. 분석 비용을 계산하는데에 환경도 생각하셔야 합니다. 개발, 테스트, 운영 환경으로 분리해서 프로젝트 나누고 소스를 관리하면 곱하기 3으로 생각해야 합니다. 소스의 Line of Code 로 비용 계산을 하는데 LOCs are c.. 2022. 7. 25.
Escape Characters 리스트 mermaid 로 flow 그릴때 escape 문자를 지원하기에 리스트를 정리해봅니다. Number Symbol Entity Name Code Description 9 Tab &Tab; Tab 10 New Line &NewLine; New Line 32 Space Space 33 ! ! Exclamation mark 34 “ " " Quotation mark 35 # # Number sign 36 $ $ Dollar sign 37 % % Percent sign 38 & & & Ampersand 39 ‘ &#39; Apostrophe 40 ( ( Opening/Left Parenthesis 41 ) ) Closing/Right Parenthesis 42 * * Asterisk 43 + + Plus sign.. 2022. 7. 22.
두 정수 사이의 합 문제 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한조건 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다. 입출력 예 a b result 3 5 12 3 3 3 5 3 12 풀이방향 두 정수의 합을 구하는 방법은 두 정수의 차이를 구하는 방법과 같습니다. 문제풀이 function sumOfTwoIntegers(a, b) { let answer = 0; let smallNumber = (a b) ? a : b; for.. 2022. 7. 14.
약수의 합 문제 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한조건 n은 0 이상 3000이하인 정수입니다. 풀이방향 입력된 값의 약수를 구하고 약수를 합계하여 리턴 입출력의 예 n return 12 28 5 6 문제풀이 function sumOfDivisor(num) { //약수의 합 let sum = 0; for (let i = 1; i { it("should return 28 as the sum of divisor of 12", () => { expect(sumOfDivisor(12)).toBe(28); }); it("should return 6 as the sum of divisor of 5", () => { expect(sumOfDivisor(5)).t.. 2022. 7. 14.
행렬의 덧셈 문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 풀이방향 행렬 배열을 받아서 행끼리 합, 열끼리 합산 해준다 풀이 function sumMatrix(arr1, arr2) { let answer = []; arr1.forEach((row, i) => { answer[i] = []; row.forEach((col, j) => { answer[i][j] = arr1[i][j] + arr2[i][j]; }); }); return answer; } export { s.. 2022. 7. 14.
수박수박수박수박수박수? 문제 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한조건 n은 길이 10,000이하인 자연수입니다. 입출력 예 n return 3 수박수 4 수박수박 풀이방향 수박을 반복하는 문자열을 만들어서 리턴하면 된다. 문제풀이 function subak(n) { let answer = &#39;&#39;; let str = "수박"; for (let i = 0; i < n; i++) { if (i % 2 === 0) { answer += str.slice(0, 1); } else { answer += str.slice(1, 2); } } return an.. 2022. 7. 14.
문자열을 정수로 바꾸기 문제 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 풀이방향 문자열을 정수로 전환 문제풀이 function string2Integer(str) { return parseInt(str, 10); } export { string2Integer }; import { string2Integer } from "../src/string2Integer"; describe("string2Integer", () => { it("Should return 1234 from &#39;+1234&#39; ", () => { e.. 2022. 7. 14.
반응형

티스토리툴바