eslint 와 Prettier 설정에 대한 내용입니다.

npm install eslint babel-eslint prettier --save-dev 
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev 
npm install husky lint-staged  --save-dev

 

Package.json 에 추가

"lint-staged": {
  "*.js": ["eslint . --fix", "prettier --write"]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

 

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'prettier',
    'prettier/react',
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'script',
  },
  rules: {
    'import/no-unresolved': 'off',
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
        printWidth: 100,
      },
    ],
  },
  plugins: ['prettier'],
};

vscode 설정

좌측 하단에 톱니바퀴 모양을 눌러 settings

Edit in settings.jso

 

settings.json

{
    "editor.tabSize": 2,
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "editor.codeActionsOnSave": {
        // For ESLint
        "source.fixAll.eslint": true
    },
  "prettier.eslintIntegration": true
}

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

추가로 

사용하는 Package.json, vsCode/settings.json, .eslintrc.js, prettierrc.js 을 따로 첨부해서 나중에 사용해야겠네요. ^^;

{
  "name": "SomeAppName",
  "version": "0.0.1",
  "private": true,
  "lint-staged": {
    "*.js": [
      "eslint . --fix",
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/drawer": "^5.12.4",
    "@react-navigation/material-top-tabs": "^5.3.14",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "1.10.3",
    "react-native-reanimated": "2.0.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "2.18.1",
    "react-native-tab-view": "2.15.2",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "7.13.8",
    "@babel/runtime": "7.13.9",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.21.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "6.15.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.1.2",
    "eslint-plugin-react": "7.22.0",
    "husky": "5.1.3",
    "jest": "26.6.3",
    "lint-staged": "10.5.4",
    "metro-react-native-babel-preset": "0.65.2",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

settings.json

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "eslint.workingDirectories": [
    
    ],
    "prettier.tabWidth": 2,
    "prettier.eslintIntegration": true,
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        // For ESLint
        "source.fixAll.eslint": true
    },

    "eslint.alwaysShowStatus": true,
    //"prettier.disableLanguages": ["js"],
    //"files.autoSave": "onFocusChange",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 300000,
    "bracket-pair-colorizer-2.activeScopeCSS": [
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}",
        "opacity: 0.5"
    ],
    "editor.multiCursorModifier": "ctrlCmd",
}

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'prettier',
    'prettier/react',
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  'no-use-before-define': ['error', { variables: false }],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'import/no-unresolved': 'off',
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
        printWidth: 100,
      },
    ],
  },
  plugins: ['prettier'],
};

 

.prettierrc.js

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  semi: true,
  useTabs: false,
  tabWidth: 2,
  printWidth: 80,
};

 

행복한 고수되셔요.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
LIST
Posted by woojja

댓글을 달아 주세요

지난 Post 와 관련하여 React Navigation V5 설치에 관해 다시 정리한다.

 

먼저

react-native init 프로젝트명

으로 React native 기본 App 을 생성한다.

 

cd 프로젝트명

으로 생성한 App 의 Directory 로 이동한다.

 

cd ios

podfile 의 내용을 다음과 같이 수정한다.

  #use_flipper! <== 주석처리
  use_flipper!({ 'Flipper-Folly' => '2.3.0' }) # <= 추가
  
  post_install do |installer|
    flipper_post_install(installer)
  end

xcode 12.4 를 사용하는 경우에 위와 같이 처리해주어야 Build 시 오류가 발생하지 않는다.

그리고 pod 를 Update 해준다.

pod update

pod update 이전에 npm install 이 실행되어야 할 수도 있다.

npm install
npm install @react-navigation/native --save
npm install @react-navigation/stack --save

//추가 navigation
npm install @react-navigation/drawer
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

cd ios
pod install

다음과 같이 설치가 되었다면 코드를 작성하고 실행해 본다.

// Screens/HomeScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const HomeScreen = (props) => {
    return (
        <View
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
        >
            <Text>Home Screen</Text>
        </View>
    );
};

export default HomeScreen;
import React from 'react';
import { View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './Screens/HomeScreen';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};
export default App;
react-native run-ios 또는 npm run ios

 

행복한 고수되십시오.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
LIST
Posted by woojja

댓글을 달아 주세요

React Native 개발을 시도하면서 많은 시행착오를 겪고 있습니다.

그 중 가장 큰 하나는 "Big Sur" 입니다.

 

최신 맥북을 샀다고 즐거워 한 것은 잠시 였습니다.

잘 된다고 하는 소스를 받아 실행을 시켜보면 여지없이 오류가 났으며

Googling 을 통해 안 것은 "Big Sur" 에 관한 것이었습니다.

"Big Sur" 가 나오면서 XCode 버전업이 되었으며

그 버전업으로 인해 Third Party 중 몇몇 package 들이 오류를 일으키고 있었습니다.

 

그 중 디버깅에 사용하는 Flipper 의  Folly 가 가장 자주 만나는 녀석입니다.

 

해결방법은 ios directory 에 있는 Podfile 의 내용을 다음과 같이 수정하는 것입니다.

 

  #use_flipper!
  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

 

그리고 Navigator 사용하는데 오랜시간을 보내게 되었습니다.

createStackNavigator 와 createAppContainer 때문인데요.

 

문제는 다음의 import 문입니다.

import { createStackNavigator, createAppContainer } from 'react-navigation';

하지만 오류를 만나게 됩니다.

(오류를  capture 하지 않았네요... 귀차니즘 발동으로 그냥 넘어가겠습니다. ^^;)

 

내용은 대충 "createStatckNavigator 는 react-navigation-stack 으로 옮겨졌다.

 

그럼 당연히 

npm install react-navigation-stack --save

로 설치하고 아래와 같이 바꿔줘야겠지요?

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

그런데 이상하게도 다른 오류들이 나타납니다.

react-native-gesture-handler 가 없다느니 react-native-safe-area-context 가 없다느니...

당연히 다시 설치해주고 Rebuild 해줘도 오류가 나옵니다.

 

아항... 메모장에 옮겨놓은 오류가 있어서 붙여놓습니다.

여튼... 

하라는 대로 해봤지만 별 소용이 없습니다.

 

서너시간은 npm install, npm uninstall  로 보내버렸네요... ㅡㅡ;

해당부분을 모두 지우고 다시 설치를 계속 반복하다가...

 

차근차근 해보자는 생각에 

다음과 같이 진행했습니다.

다음 공식 page 를 참고했구요.

reactnavigation.org/docs/4.x/getting-started

reactnavigation.org/docs/4.x/hello-react-navigation

 

먼저 react-navigation 과 관련된 모든 package 들은 uninstall 해줍니다.

 

그리고 ios directory 로 이동하여 

pod update 해줍니다.

cd ios
pod update
cd ..

그리고 다음과 같은 실행해 줍니다.

npm install react-navigation --save
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save

npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context --save

 

@react-native-community/masked-view react-native-safe-area-context 부분은 중복되지만 그냥 실행해줬습니다.

cd ios
pod install
cd ..

이 부분을 찾아 내느라 몇번의 시행착오를 거쳤지만 결국엔 오류없는 화면을 봤습니다. ^^;

IOS 개발도 낯선대다가 Expo 사용하지 않고 React Native CLI 를 사용하여 작업하려니 시행착오가 많네요.

얼마나 많은 퀘스트 들이 기다리고 있을지 기대가 됩니다.

 

제가 잘못알고 있는 점이 있다면 알려주십시오.

여러분의 소중한 작은 충고가 React Native 개발자로 나아가는데 큰 도움이 되리라 생각합니다.

 

행복한 고수되십시오.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
LIST
Posted by woojja

댓글을 달아 주세요


이동통신사이동통신사 
이동통신사 SKT
외관사양외관사양 
기본 형태 Full Touch Bar
크기 (mm) 117(L) × 59.8(W) × 13.4(H)
무게 (g) 141
LCD 크기 (Main) 3.7 형
LCD 컬러 (Main) 65K Color (DMB, 미디어플레이어 16M 지원)
LCD 종류 (Main) AMOLED
LCD 해상도 (Main) 480 X 800 WVGA
COLOR 구성 Rose Black
배터리 사양배터리 사양 
배터리 용량 1,500mAh
연속통화시간 약 440 분
연속대기시간 약 580 시간
연속통화시간(GSM모드) 약 650 분
연속대기시간(GSM모드) 약 650 시간
기본기능기본기능 
지원사양 WCDMA/GSM
무선인터넷 기능 지원
천지인 한글 지원
영상전화 지원
외장메모리 MicroSD
멀티태스킹 지원
통화편의기능통화편의기능 
소곤소곤 지원
한뼘통화 지원
통화 중 메시지 보내기 지원
통화 중 메모 작성 지원
4자리 퀵 다이얼링 지원
초성으로 전화번호 바로검색 지원
특정번호 수신거부 지원
통화녹음 기능 지원
비행기 탑승 모드 지원
블루투스 헤드셋으로 통화 지원
화면/소리화면/소리 
리듬믹스 벨 지원
화음 MP3벨
서체 변경 지원
화면 밝기 조정 지원
터치스크린 지원
전화번호부/메시지전화번호부/메시지 
전화번호부 그룹 관리 지원
포토폰북 기능 지원
문자 확대/축소 (볼륨키로 동작) 지원 (X)
SMS 수신 지원
스팸 메시지 차단기능 지원
멀티미디어/엔터테인먼트멀티미디어/엔터테인먼트 
DMB 지상파
블루투스 헤드셋으로 DMB 청취 지원
Anycall DMB Player 지원
DMB 화면 밝기 조절 지원
DMB 중 멀티태스킹 (SMS,전화) 지원
무선랜 지원
MP3 지원
MP3 이퀄라이저 지원
카메라 화소 500만
카메라 이미지센서 CMOS
Auto Focus 지원
손떨림 보정/자동촬영 지원
반셔터 지원
플래시 지원
특수효과 촬영 지원
파노라마 촬영 지원
동영상 편집기 지원
게임 지원
전자다이어리전자다이어리 
전자사전 지원
일정관리 지원
단위환산 지원
메모장 지원
계산기 지원
모닝콜 반복알림 지원
세계시간 (서머타임) 지원
스톱워치 지원
지하철 노선도 지원
편의/보안편의/보안 
이동식디스크 지원
모바일 프린팅 지원
음성메모 녹음 지원
GPS 지원
파일 뷰어 지원 (Mobile Office)
손전등 지원
S/W 업그레이드 지원
내장 매뉴얼 지원
외부장치 연계외부장치 연계 
핸즈프리/이어폰 통화 지원
폰 데이터 PC 호환 지원
블루투스 지원
통신사 서비스 (SKT)통신사 서비스 (SKT) 
GSM 지역 로밍 지원
MMS 지원
Mobile Web Internet 지원
E-mail 지원
모바일 메신저 지원
주소록 자동저장 지원
T-MAP 지원
기본 항목 외 추가 기능 My Smart, 파자마5, RAD

* 제품의 외관, 사양 등은 제품 개선을 위해 사전예고 없이 변경될 수 있습니다.

 

 

※ 제품의 외관, 사양 등은 제품 개선을 위해 사전예고 없이 변경될 수 있습니다.
※ 상기의 특장점 이미지는 제품의 기능을 이해하기 쉽게 만든 이미지로, 실제 제품 기능 구현과 차이가 있을 수 있습니다


 행복한 고수되셔요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\
 
반응형
LIST

'MOBILE' 카테고리의 다른 글

[Mobile] SCH-M710 (옴니아 2) Spec  (0) 2009.11.01
[MOBILE] Samsumg Mobile Phones  (0) 2009.10.26
[MOBILE] 옴니아2 (SCH-M710) 에서 MAC Address 찾기  (1) 2009.10.23
Posted by woojja

댓글을 달아 주세요


여기에서 발췌했습니다.

Name

Model name

OS

Browser

Resolution

Screen size

Tocco

F480i

SHP

Access, Dolfin

QVGA

240*320

Omnia

I900

WM

Opera

WQVGA

240*400

Pixon

M8800

SHP

Access, Dolfin

WQVGA

240*400

Star

S5230

SHP

Dolfin

WQVGA

240*400

UltraTOUCH

S8300

SHP

Access

WQVGA

240*400

BeatDJ

M7600

SHP

Access

WQVGA

240*400

OmniaHD

I8910

S60

OSS

QHD

360*640

Preston

S5600

SHP

Dolfin

QVGA

240*320

Jet

S8000

SHP

Dolfin

WVGA

480x800

OmniaⅡ

I8000

WM

Opera

WVGA

480x800

Pixon12

M8910

SHP

Dolfin

WVGA

480x800

 
제폰은 Omnia II 입니다. 우하하하 ^^
행복한 고수되셔요.

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
LIST

'MOBILE' 카테고리의 다른 글

[Mobile] SCH-M710 (옴니아 2) Spec  (0) 2009.11.01
[MOBILE] Samsumg Mobile Phones  (0) 2009.10.26
[MOBILE] 옴니아2 (SCH-M710) 에서 MAC Address 찾기  (1) 2009.10.23
Posted by woojja

댓글을 달아 주세요


메인메뉴 > 설정 > 고급설정 탭 > 시스템 > 버전 정보 > 장치

를 클릭해서 들어가시면 Wi-Fi 항목에 MAC Address 가 적혀 있네요...


캬캬캬

겨우겨우 찾았습니다.
(제글이 도움이 되셨다면 글 남겨주셔요... 저만 이 고생하고 있었는지 궁금하네요...
다른 분들은 고생하지 않았으면 하는 바램에서... ^^)

행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\
반응형
LIST

'MOBILE' 카테고리의 다른 글

[Mobile] SCH-M710 (옴니아 2) Spec  (0) 2009.11.01
[MOBILE] Samsumg Mobile Phones  (0) 2009.10.26
[MOBILE] 옴니아2 (SCH-M710) 에서 MAC Address 찾기  (1) 2009.10.23
Posted by woojja

댓글을 달아 주세요

  1. 2009.12.14 16:39

    언니야폰 사셨네요... 부럽습니다.

이전버튼 1 이전버튼
반응형