[챕터 2-1 ] 카운터 환경구성

2020. 2. 20. 14:00ㆍReact Native/React Native 카운터 앱

반응형

웹스톰, VSCode 둘중 하나를 선택해서 환경구성

웹스톰

 

 

웹 스톰 터미널

 

npm install --save styled-components 
npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import

 

 

Counter > tsconfig.json 생성

 

더보기 
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

절대경로 컴포넌트 추가
- babel.config.js 수정

 

더보기 
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
  ],
};

 

자바스크립트 소스코드 관리

src 폴더 생성 후,

App.js 파일을 복사해서

src/App.tsx 으로 파일명 변경 후 복사


/src/App.tsx

 

더보기 
import React, {Fragment} from 'react';
import {StatusBar, SafeAreaView} from 'react-native';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Styled from 'styled-components/native';
const ScrollView = Styled.ScrollView`
 background-color: ${Colors.lighter};
`;
const Body = Styled.View`
 background-color: ${Colors.white};
`;
const SectionContainer = Styled.View`
 margin-top: 32px;
 padding-horizontal: 24px;
`;
const SectionDescription = Styled.Text`
 margin-top: 8px;
 font-size: 18px;
 font-weight: 400;
 color: ${Colors.dark};
`;
const HighLight = Styled.Text`
 font-weight: 700;
`;
interface Props {}
const App = ({}: Props) => {
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <Header />
          <Body>
            <SectionContainer>
              <SectionDescription>Step One</SectionDescription>
              <SectionDescription>
                Edit <HighLight>App.js</HighLight> to change this screen and
                then come back to see your edits.
              </SectionDescription>
            </SectionContainer>
            <SectionContainer>
              <SectionDescription>See Your Changes</SectionDescription>
              <SectionDescription>
                <ReloadInstructions />
              </SectionDescription>
            </SectionContainer>
            <SectionContainer>
              <SectionDescription>Debug</SectionDescription>
              <SectionDescription>
                <DebugInstructions />
              </SectionDescription>
            </SectionContainer>
            <SectionContainer>
              <SectionDescription>Learn More</SectionDescription>
              <SectionDescription>
                Read the docs to discover what to do next:
              </SectionDescription>
            </SectionContainer>
            <LearnMoreLinks />
          </Body>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};
export default App;

 

 

 

index.js 파일 수정

 

...
import App from '~/App';
...

 

 

VSCode

 

터미널(cmd, powershell, gitbash 등)에서 C:\dev 에서 작업

 

1. Counter 앱 프로젝트 생성 

react-native init Counter



2. 개발에 필요한 각종 라이브러리 확장 

cd Counter 
npm install --save styled-components 
npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import

 

여기서부터  VSCode 로 생성된 카운터 작업폴더를 열어서 시작.

3. 타입 스크립트 설정
- tsconfig.json 파일 생성 

{ 
  "compilerOptions": { 
    "allowJs": true, 
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true, 
    "isolatedModules": true, 
    "jsx": "react", 
    "lib": ["es6"], 
    "moduleResolution": "node", 
    "noEmit": true, 
    "strict": true, 
    "target": "esnext", 
    "baseUrl": "./src", 
    "paths": { 
      "~/*": ["*"] 
    } 
  }, 
  "exclude": [ 
    "node_modules", 
    "babel.config.js", 
    "metro.config.js", 
    "jest.config.js" 
  ] 
}



4. 절대경로 컴포넌트 추가
- babel.config.js 수정

 

module.exports = { 
  presets: ['module:metro-react-native-babel-preset'], 
  plugins: [ 
    [ 
      'babel-plugin-root-import', 
      { 
        rootPathPrefix: '~', 
        rootPathSuffix: 'src', 
      }, 
    ], 
  ], 
};


5. 자바스크립트 소스코드 관리 : src 폴더 생성 후, App.js => App.tsx 으로 파일명 변경 후 이동


/src/App.tsx 

import React, {Fragment} from 'react';
import {StatusBar, SafeAreaView} from 'react-native';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Styled from 'styled-components/native';
const ScrollView = Styled.ScrollView`
 background-color: ${Colors.lighter};
`;
const Body = Styled.View`
 background-color: ${Colors.white};
`;
const SectionContainer = Styled.View`
 margin-top: 32px;
 padding-horizontal: 24px;
`;
const SectionDescription = Styled.Text`
 margin-top: 8px;
 font-size: 18px;
 font-weight: 400;
 color: ${Colors.dark};
`;
const HighLight = Styled.Text`
 font-weight: 700;
`;
interface Props {}
const App = ({}: Props) => {
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <Header />
          <Body>
            <SectionContainer>
              <SectionDescription>Step One</SectionDescription>
              <SectionDescription>
                Edit <HighLight>App.js</HighLight> to change this screen and
                then come back to see your edits.
              </SectionDescription>
            </SectionContainer>
            <SectionContainer>
              <SectionDescription>See Your Changes</SectionDescription>
              <SectionDescription>
                <ReloadInstructions />
              </SectionDescription>
            </SectionContainer>
            <SectionContainer>
              <SectionDescription>Debug</SectionDescription>
              <SectionDescription>
                <DebugInstructions />
              </SectionDescription>
            </SectionContainer>
            <SectionContainer>
              <SectionDescription>Learn More</SectionDescription>
              <SectionDescription>
                Read the docs to discover what to do next:
              </SectionDescription>
            </SectionContainer>
            <LearnMoreLinks />
          </Body>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};
export default App;


6. index.js 파일 수정 

... 
import App from '~/App'; 
...

 

7. 실행환경 설정 : Debug Android 추가






반응형

'React Native > React Native 카운터 앱' 카테고리의 다른 글

[챕터 2-2] 카운터  (0) 2020.02.20

관련글

댓글 0

티스토리툴바