개발야 기하하자

저번에는 파이썬으로 echo 명령어로 출력만 해봤는데요 이번에는 .py 확장자를 가진 파이썬 파일을 실행시켜 볼 것 입니다!

일단 저는 vsc (비쥬얼 스튜디오 코드)에서 파이썬 파일을 생성하고 코딩해봤습니다. 다른 편집기를 사용하시는 분들은 같은 방식으로 해도 상관은 없을 것 같아요 파이썬은 아톰을 많이 사용하시더라구요 

code.visualstudio.com/

atom.io/

TMI 이지만 저는 js를 사용할 때 vsc를 많이써서 익숙해져있어서 vsc를 사용했습니다.

이전 포스팅에서 파이썬을 설치했다는 가정하에 vsc에 들어가  제일 상단 왼쪽에있는 File을 누른뒤  New File을 해줍니다.

그리고 test.py라고 이름을 변경후 오른쪽 아래 빨간 네모박스처럼 MagicPython으로 변경을 해줍니다. 

그리고 경로를 잡아줍니다. 저는 D드라이브에 test.py 라는 파일을 생성하고 

print("Hello, world!")

print("헬로우 월드!")

라는 코드를 입력해줬습니다.

print("Hello, world!")
print("헬로우 월드!")

이렇게 완료가 되었으면 

vsc 나 다른 편집 툴을 사용하신다면 터미널을 여시거나 cmd, 윈도우 쉘 등 커멘드 라인에 들어가

내가 생성한 경로에서 python 내가 만든 파이썬파일이름.py  명령어를 입력해줍니다. 그러면 아래처럼 결과가 나옵니다.

파일을 만들어 실행시켜 보기를 해봤습니다. 감사합니다 :) 

안녕하세요 오늘은 python을 설치하고 출력까지 하는 환경세팅을 할 것 입니다!

제 OS는 Window 이므로 window 기준으로 작성을 하겠습니다.

www.python.org/downloads/

에서 파이썬 최신버전을 다운로드합니다.

이거를 누르시면 설치가 됩니다.

저는 이미 설치가 되어있어서 이렇게 뜨는데 설치가 안되신 분들은 

이렇게 뜰겁니다 !  

다운이 완료되면

윈도우키를 누르시고 입력창에 py 라고 검색하시면 이렇게 검색될겁니다!

그러면 Python 3.9( 64bit) 를 클릭하면

이런식으로 shell이 뜰 거에요 !

그러면 이제 설치는 완료됐습니다 !!!! 축하드립니다. 짝짝짝

그럼 테스트로

print(' 설치 완료 ') 

복사용 : print(' 설치 완료 ') 

이렇게 입력해보면

 이렇게 뜨는걸 확인할 수 있습니다.

파이썬으로 기초부터 크롤링까지 딥하게 점점 하나하나 공부하며 적어가보도록 하겠습니다.

읽어주셔서 감사합니다 :)

reactnative.dev/docs/imagebackground

react-native에서 백그라운드 이미지를 넣어봅시다 !

rn에서는 내장함수로 ImageBackground 가 있습니다. js 같은 경우는 스타일에서 background-image: url( ~); 이렇게 주면 백그라운드 이미지가 들어가는데 rn은 

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

이런방법으로 사용해야합니다.

저의 같은 경우는 

<ImageBackground style={styles.imgWrapper} source={require('../assets/test.png')} >
      <Text>테스트</Text>
</ImageBackground>

이렇게 사용했습니다.

여기서 중요한점은 style을 사용해줘야 에러가 안납니다. 

감사합니다.

github.com/react-native-svg/react-native-svg

매번 assets 폴더에서 import 해오다가 svg 라이브러리를 사용해봤습니다.

일단 위에 설명이 있지만 다시한번 사용법을 적어봅니다. 

yarn add react-native-svg

expo install react-native-svg

npm install react-native-svg

를 통해 라이브러리를 설치합니다.

react-native 0.60 이상을 오토링크가 되므로 환경세팅을 할 필요가 없어서 바로 import 시켜서 사용하면 됩니다.

만약 이하 버전을 사용하면 위 링크에 들어가 세팅을 해줍니다.

import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/

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

export default class SvgExample extends React.Component {
  render() {
    return (
      <View
        style={[
          StyleSheet.absoluteFill,
          { alignItems: 'center', justifyContent: 'center' },
        ]}
      >
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle
            cx="50"
            cy="50"
            r="45"
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          />
          <Rect
            x="15"
            y="15"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </Svg>
      </View>
    );
  }
}

이렇게 Circle, Ellipse, G, Text, TSpan, TextPath, Path, Polygon, Polyline, Line, Rect, Use, Image, Symbol, Defs, LinearGradient, RadialGradient, Stop, ClipPath, Pattern, Mask 같은 도형 같은 것들도 사용할 수 있네요 SVG로

저는 웹에서 svg를 불러오는 용도로 사용할거라서

import * as React from 'react';
import { SvgCssUri } from 'react-native-svg';

export default () => (
  <SvgCssUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/svg/accessibility.svg"
  />
);

이 방법으로 사용했습니다.

저 같은 경우는 클릭했을 때 브라우저를 띄워주고 싶어서

 <TouchableOpacity onPress={() => Linking.openURL('https://www.naver.com/')}>
       <SvgCssUri width="160" height="60" style={styles.ImgStyle} uri="https://s1.econotimes.com/assets/images/econotimes/mobile/about/imgLogoNaver.svg"/>
 </TouchableOpacity>

이렇게 사용했습니다.

그러면 네이버 svg 로고가 나올 것이고 로고를 클릭했을 때 react-native의 내장 함수인 Linking으로 naver가 핸드폰 브라우저에 뜹니다. 

스타일은 width, height를 줄 수 있고 스타일드컴포넌트를 사용할 경우 style= { styles.스타일 이름 }으로 주셔도 됩니다.