티스토리

meaningless
검색하기

블로그 홈

meaningless

meaningless-life.tistory.com/m

-

구독자
1
방명록 방문하기

주요 글 목록

  • [React.js] Class component vs Functional component 이번에는 Class component와 Function compoent의 차이점을 알아 보겠습니다. Functional component [특징] - 제공하는 기능이 한정적임 - 코드가 간단해짐 - 성능이 빠름 import React from 'react' export default function Hello() { return ( hello? ) } Class component [특징] - 많은 기능들을 사용 가능 - 코드가 길어지고 복잡해짐 - 성능 면에서 조금 느려짐 import React, { Component } from 'react' export default class Hello extends Component { return() { ( hello? ) } } Functional Functi.. 공감수 0 댓글수 0 2020. 6. 4.
  • [React.js] Client와 Server를 동시에 시작할 수 있는 모듈 서버와 클라이언트를 같이 만들 경우에는 서버/클라이언트를 독립적으로 실행해 줘야 한다. 서버 cmd 창에서 스크립트 치고, 클라이언트 cmd 창에서 스크립트를 치기 귀찮았는데 동시에 실행할 수 있는 모듈이 있었다. 바로 'Concurrently'라는 모듈이다. npm install concurrently --save 위와 같은 명령어로 모듈을 설치한 다음, 최상위에 있는 pakage.json에서 스크립트를 작성한다. 나의 React 폴더는 아래와 같은 구조로 되어 있다. - client - server - pakage.json pakage.json ... "scripts": { "start" : "node server/index.js" ... } client/pakage.json ... "scripts:.. 공감수 0 댓글수 0 2020. 6. 2.
  • [React.js] Default 코드를 자동으로 생성해주는 모듈 React로 js를 계속 만들다 보면 Default Componet를 생성할 때 기본적으로 적어줘야 하는 코드들이 있다. import React from 'react' function TestPage() { return ( TestPage ) } export default TestPage 대충 위와 같은 형식인데... 여러 Componet를 만들다 보면 손수 코딩하기 매우 귀찮은 지경이다. 이러한 불편함을 감수시키기 위해 VS Code 에서는 확장 모듈을 제공해 준다. 바로 es7이라는 것인데... 위와 같이 VS Code에서 저 네모 테트리스 블럭... 같은 것을 선택하고 es7을 치면 ES7 React를 설치한다. 다음 js를 돌아와 아래와 같은 rfce를 치고 입력을 누르면 기본적인 코드가 출력된다.. 공감수 1 댓글수 0 2020. 6. 1.
  • [Node.js] 서버를 재시작하지 않아도 실시간 코드가 반영되는 Nodemon Node.js를 공부하면서 가장 불편했던 점이 코드들을 변경해도 실시간으로 반영되지 않아 서버를 재시작해야 한다는 점이었다. 하지만 이런 단점을 극복하는 모듈이 있어 설치를 해 보게 되었다. NodeMon을 설치하려면 프롬포트 창에서 아래의 명령어를 입력하면 된다. npm install nodemon --save-dev -dev의 명령어는 개발 전용으로만 사용하겠다는 것이니 빼면 release 모드에서도 사용할 수 있을 것이다. 각자 선택해서 사용하기를 바란다. package.json에서 nodemon으로 사용할 수 있는 script를 하나 추가해 주었다. "scripts": { ... "dev": "nodemon index.js", }, 그리고 명령 프롬포트 창에서 npm run dev를 사용하면 아래.. 공감수 0 댓글수 0 2020. 5. 26.
  • [React Native] apk release export error apk를 추출하는 방법은 아주 쉽다. releae를 하려면 서명 키가 필요하다. keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 이렇게 키를 생성한다. 그리고 apk를 만들고자 하는 파일에 build.grdle로 가서 아래의 코드를 추가한다. signingConfigs { release { if (project.hasProperty('RELEASE_STORE_FILE')) { storeFile file(RELEASE_STORE_FILE) storePassword RELEASE_STORE_FILE_PASSWORD keyAlias RELEASE_STOR.. 공감수 0 댓글수 0 2020. 2. 27.
  • [React-Native] Circular Progress Bar/ 원형 상태바 추가하는 법 RN에서 원형 프로그레스바를 그리는 방법은 다양하게 있다. 지금까지 개발하면서 느낀 점은 RN은 모듈화가 굉장히 잘 되어 있는 편이라서 원하는 모듈을 다운 받아서 설치하기만 하면 되기 때문에 개발이 간편하다고 생각이 든다. (익숙해진다면) 위와 같은 원형 바를 사용하기 위해서 선택한 모듈은 이것이다. react-native-circular-progress 모듈을 사용하기 위해서 설치부터 시작해 보겠다. yarn add react-native-circular-progress react-native-svg react-native link react-native-circular-progress react-native-svg react-native-circular-progress 만 설치하게 된다면 오류가 나게.. 공감수 0 댓글수 0 2020. 2. 3.
  • [React Native] 인터넷 연결 확인법 react native의 인터넷 연결 확인은 NetInfo 라이브러리로 가능하다. import { NetInfo } from 'react-native'; 로 라이브러리를 import 해 주었다. Warning: NetInfo has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/netinfo' instead of 'react-native'. See https://github.com/react-native-community/react-native-netinfo 만약 실행시 이 오류가 뜬다면 Ne.. 공감수 0 댓글수 0 2020. 1. 15.
  • [React Native] 언어 변경 언어 변경하는 것에는 여러가지 방법이 있는데... 아주 간단하게 i18n-js 라이브러리를 쓰는 것이다. 이것을 사용하면 현재 사용되는 언어를 가져올 수도 있고, 언어를 아주 손쉽게 바꿀 수도 있다. I18n.locale = 'ko' // 한국어로 변경 deviceLanguage = I18n.currentLocale(); // 현재 언어 출력 root폴더에 i18n이라는 폴더를 만들고 index.js를 만들었다. import i18n from 'i18n-js'; import { I18nManager } from 'react-native'; import * as RNLocalize from 'react-native-localize'; import en from './locales/en'; import ko.. 공감수 3 댓글수 0 2020. 1. 15.
  • [React Native] 개발 환경 설정 (2) React Native의 IDE는 뭐가 좋을까? FaceBook에서는 Atom과 FaceBook에서 개발한 nuclide 플러그인 조합을 추천한다고 한다. 그럼 환경 설정을 해 보자. Atom은 여기서 깔 수 있다. 그럼 Atom을 실행하고 nuclide를 설치해 보자. # Clone the source $ git clone https://github.com/facebook/nuclide.git $ cd nuclide # Install dependencies $ npm install # Link the 'nuclide' package to Atom's package directory $ apm link 설치가 제대로 됐는지 확인하는 방법은 아래와 같다. Open Atom. Go to Atom | Pref.. 공감수 0 댓글수 0 2020. 1. 10.
  • [React-native ] react-native start 오류 해결법 Opening DevTools in the browser... (press shift-d to disable) error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details. 이런 오류가 뜬다면 node 호완성 문제이다. 해당 폴더의 \node_modules\metro-config\src\defaults\blacklist.js로 이동한다... 공감수 1 댓글수 0 2020. 1. 10.
  • [React Native] 프로젝트 빌드 오류 해결법 만약 프로젝트를 빌드 시켰는데 이런 오류가 난다면? error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 Unable to install E:\Rocket.Chat.ReactNative.. 공감수 3 댓글수 0 2020. 1. 9.
  • [React Native] 개발 환경 설정 (1) React Native (RN) FaceBook에서 개발한 웹사이트 개발용 라이브러리를 React라고 하는데, 이것을 모바일로 확장한 오픈소스 프로젝트이다. javaScript로 모바일 앱을 개발할 수 있으며 Android, ios를 둘 다 개발할 수 있다는 장점이 있다. 우리가 javaScript로 코딩하면 RN을 거쳐 안드로이드, ios 코드로 변환이 되는 개념인 것이다. 개발 설정을 하기에 앞서 Expo CLI 와 React Native CLI 두 가지의 방법이 있는데 Expo CLI는 라이브러리의 제약이 있다고 하여 React Native로 개발할 것이다. 그럼 환경 설정을 해 보자! 먼저 Window PowerShell 을 키고 윈도우 파일 매니저인 chocolatey를 설치한다. 중요한 것은 .. 공감수 0 댓글수 0 2020. 1. 8.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.