BelieveCom

파이썬(python)을 사용해서 코딩을 하다 보면 복잡한 내용을 정리해야 하는 경우가 있습니다. 기본적으로 코딩 외에 글은 주석으로 처리해서 컴파일과 무관하게 기록할 수 있습니다. 오늘은 파이썬(python)에서 한줄, 여러 줄 주석 다는 법을 알아보겠습니다.

파이썬(python) 한 줄 주석

파이썬(python)은 기본적으로 '#'을 사용해서 주석을 설정할 수 있습니다. '#' 주석은 코드 위치와 상관없이 '#' 위치부터 주석으로 인정됩니다.

파이썬(python) 여러 줄 주석

'#'을 사용하면 한줄 주석이 가능하지만, 개행을 할 경우 주석이 소멸되는 문제가 있습니다. 그래서 파이썬(python)에서는 여러 줄을 주석하기 위해서 큰따옴표(""") 연속 3개와 작은 따옴표(''') 연속 3개를 사용할 수 있습니다. 주석을 달고 싶은 문장 처음 부분에 연속 큰따옴표를 입력하면 뒤쪽으로 주석 처리가 진행됩니다. 문장 끝쪽에 다시 큰따옴표를 3개 사용하면 주석이 종료됩니다.

작은따옴표도 동일하게 3개를 사용하면 여러줄 주석 처리가 가능합니다. 여러 줄 주석은 긴 문장을 주석할 수 있기 때문에 소스 코드 상단에 사용하기 좋습니다.

파이썬(python) 주석 단축키

한 줄 및 여러 줄을 간편하게 주석하기 위해서는 단축키를 사용해서 주석 처리가 가능합니다.

PyCharm을 사용하는 기준으로 Windows에서는 CTRL + / 이고, MAC에서는 Command + /입니다.

주석을 달기 위해서 라인을 선택하고 CTRL + /을 클릭하면 '#'이 생성되면서 주석 처리가 진행됩니다.

개행된 문장을 주석처리하는 방법도 동일하게 문장을 선택하고 CTRL + /을 클릭하면 한 줄마다 '#' 처리되어 주석으로 변경됩니다.

파이썬(python) 주석 처리 주의사항

파이썬(python) 주석 처리에서 가장 중요한 내용은 주석을 취소할 경우 "들여 쓰기" 오류가 발생하는 문제가 있습니다. 파이썬(python)은 "들여 쓰기"에 따라서 컴파일이 실행되기 때문에 주석을 풀 경우 들여 쓰기를 다시 확인해야 합니다. 코드 부분에 주석을 사용할 경우 하단에 빨간색 줄이 보이면 "들여 쓰기"를 다시 한번 확인해주세요.

개발에서 주석은 매우 중요한 부분입니다. 파이썬(python)은 다양한 알고리즘을 기본으로 사용하기 때문에 다른 언어보다 많은 주석이 필요하다고 생각됩니다. 오늘부터 주석을 습관화하면서 코드 가독성을 높여보세요.

감사합니다.

리액트(React)를 사용하면 클라이언트에서 다양한 기능을 실행할 수 있어 서버에 부하를 최소화할 수 있습니다. 오늘은 증감, 감소 버튼을 사용해서 서버 연결 없이 클라이언트에서 카운트를 실행할 수 있는 리액트(React) Component를 만들어 보겠습니다.

먼저 리액트(React)를 사용해서 기본적으로 접근할 수 있는 함수를 만들어 보겠습니다.

function formatName(user : any){
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName: '365',
    lastName: ' talk'
};

formatName 함수는 user 메서드 firstName, lastName를 사용해서 이름을 생성하는 함수입니다.

<h1>
    Hello,{formatName(user)}!
</h1>

'{' 기호를 사용해서 formatName 함수를 호출하면 user 이름을 확인할 수 있습니다.

리액트(React)는 간단하게 함수를 만들 수 있고, 태그를 사용해서 함수에 접근 가능합니다. 출력 결과 user 이름을 확인할 수 있습니다. 기본적으로 함수 및 Component를 만들어서 다양한 기능을 개발할 수 있습니다.

증감, 감소 기능을 구현하기 위해서 useState를 사용해서 counter를 진행하겠습니다.

const [counter, setCounter] = useState(0)

useState는 리액트(React)에 사용되는 Hook 입니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해 줍니다. 간단하게 말하면 내장 Hook 기능으로 선언된 변수를 클라이언트에서 지속적으로 접근 변경이 가능한 컴포넌트(Component)입니다.

이젠 선언된 counter을 사용해서 버튼에 연동하겠습니다.

<h4> You clicked { counter } times</h4>
<div>
    <button onClick={()=> setCounter(counter + 1)}> Increase</button>
    <button onClick={()=> setCounter(counter - 1)}> Decrease</button>
</div>

counter state를 사용해서 증감 연산에 따른 변수를 출력하고 두개의 버튼을 사용해서 setCounter 함수를 호출합니다. state로 선언된 counter에 증감, 감소를 적용해서 counter 내용을 변경합니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [counter, setCounter] = useState(0)
    function formatName(user : any){
        return user.firstName + ' ' + user.lastName;
    }
    const user = {
        firstName: '365',
        lastName: ' talk'
    };

  return (
    <div className="App">
      <header className="App-header">
          <h1>
              Hello,{formatName(user)}!
          </h1>
          <div>
              <h4> You clicked { counter } times</h4>
              <div>
                  <button onClick={()=> setCounter(counter + 1)}> Increase</button>
                  <button onClick={()=> setCounter(counter - 1)}> Decrease</button>
              </div>
          </div>

      </header>
    </div>
  );
}

export default App;

컴파일을 실행 후 Increase, Decrease 버튼을 클릭하면 변수가 증감, 감소하는 것을 확인할 수 있습니다. 클라이언트 재 실행 없이 state에 접근할 수 있어 Ajax보다 편리하게 사용할 수 있습니다.

이번에는 증감, 감소 버튼을 출력하는 컴포넌트(Component)를 만들어 보겠습니다.

먼저 TypeScript File 메뉴를 선택해서 jsx 파일을 생성합니다.

두 개의 타입을 선택할 수 있는데 아래쪽에 있는 jsx 파일을 선택하고 이름을 입력하면 .jsx 파일을 확인할 수 있습니다.

import React, {Component} from 'react';

class Count extends Component {
    constructor(props : Count) {
        super(props);
        this.Increase = this.Increase.bind(this);
        this.Decrease = this.Decrease.bind(this);
    }
    state=
        {
            counter : 0
        }
    Increase = ()=>{
        this.setState({
            counter:this.state.counter+1
        })
    }
    Decrease = () =>{
        this.setState({
            counter:this.state.counter-1
        })
    }
    render() {
        return (
            <div>
                <div>number {this.state.counter}</div>
                <button onClick={this.Increase}>Increase</button>
                <button onClick={this.Decrease}>Decrease</button>
            </div>
        );
    }
}

export default Count;

Component를 상속 받고 constructor을 사용해서 컴포넌트(Component) 실행 시점에 초기화를 진행합니다.

state에 counter을 0으로 초기화하고 Increase, Decrease 함수를 선언합니다. 각 함수는 counter을 사용해서 내부 state에 접근 후 증감, 감소를 실행합니다.

2개의 버튼을 사용해서 onClick 이벤트에 Increase, Decrease 함수를 연동합니다. 이제 Count 컴포넌트(Component)가 완성되었습니다. 이제 완성된 Count 컴포넌트(Component)를 App.tsx에 호출해보겠습니다.

import Count from './Count'

상단에 import를 사용해서 Count.tsx 위치를 설정합니다.

컴포넌트(Component)는 태그를 사용해서 호출이 가능합니다.

<div>
    <h4>
        Count Component
    </h4>
    <Count> </Count>
</div>

하단에 <Count> </Count> 태그를 선언하고 컴파일을 진행합니다.

App.tsx 메인에 저장된 버튼 아래쪽에 Count 컴포넌트(Component)가 위치하는 것을 확인할 수 있습니다. 기존과 동일하게 동작하는 것을 확인할 수 있습니다. 리액트(React)는 컴포넌트(Component)를 사용해서 다양한 UI를 빠르게 전환할 수 있습니다. 내장 HOOK은 브라우저 새로고침 없이 state에 접근이 가능해서 서버 통신을 최소화할 수 있습니다. UI를 컴포넌트(Component) 기반으로 댜앙하게 개발하면 재 사용을 높일 수 있어 빠른 개발에 도움을 줍니다. 

감사합니다.

리액트(React)를 사용하면 클라이언트에서 다양한 코드를 사용할 수 있어 Web 화면 변화에 따라서 다양한 구성이 가능합니다. 오늘은 리액트(React)를 사용해서 이미지 업로드 전에 이미지를 미리 보는 방법을 알아보겠습니다. 

URL.createObjectURL() 객체를 사용해서 이미지를 확인하겠습니다. createObjectURL() 메서드는 URL을 DOMString으로 반환합니다. 반환된 정보를 사용해서 이미지 정보를 저장하고 이미지를 출력하겠습니다.

기본 구조는 매우 간단하게 "파일 선택", "미리 보기 이미지", "삭제"로 구성하겠습니다.

먼저 리액트(React) 컴포넌트 useState를 사용해서 값 변화를 관리하겠습니다.

import React, {useState} from 'react';

상단에 useState 컴포넌트를 import 합니다.

useState를 사용하기 위해서 이미지 변수를 선언합니다.

const [fileImage, setFileImage] = useState("");

리액트(React) useState 컴포넌트를 호출하면 배열을 반환합니다. 첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 Setter 함수입니다.

  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };

이미지 정보를 저장하기 위해서 HTMLinputElement 이벤트가 발생하면 URL.createObjectURL을 사용해서 DOMString을 setFileImage Setter 함수를 사용해서 저장합니다.

  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };

마지막으로 저장된 이미지를 삭제할 수 있는 deleteFileImage를 정의합니다. URL.revokeObjectURL 메소드를 사용해서 객체를 초기화하고, setFileImage Setter 함수를 사용해서 useState 컴포넌트를 초기화합니다.

이제 선언한 메서드를 사용해서 HTML를 구성해보겠습니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [fileImage, setFileImage] = useState("");
  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };
  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };
  return (
      <>
        <h1>이미지 업로드 </h1>
          <div style={{
              alignItems: "center",
              justifyContent: "center", }} >
              <input
                  name="imggeUpload"
                  type="file"
                  accept="image/*"
                  onChange={saveFileImage} />
            </div>
              <div>
                <h1>미리보기 이미지</h1>
              </div>
                <div>{fileImage && ( <img alt="sample" src={fileImage}
                                           style={{ margin: "auto" }} /> )}
                <button style={{
                  width: "50px",
                  height: "30px",
                  cursor: "pointer", }}
                        onClick={() => deleteFileImage()} > 삭제 </button>
              </div>
      </>
  );
}
export default App;

input 태그를 이용해서 파일을 선택하고 saveFileImage 메서드를 호출해서 useState를 저장합니다.

저장된 useState는 img 태그 src에 연결해서 이미지를 화면에 출력할 수 있습니다.

업로드하기 위한 이미지를 선택하면 미리 보기 이미지 아래쪽에 선택한 이미지를 확인할 수 있습니다. 이미지를 먼저 확인이 가능해서 업로드 시 매우 편리하게 사용할 수 있는 기능입니다.

삭제 버튼을 클릭하면 deleteFileImage를 호출해서 메모리를 초기화하고 저장된 이미지를 삭제합니다.

리액트(React) useState를 사용해서 화면 전환에 따른 값을 저장할 수 있어 다양한 기능을 사용할 수 있는 정말 편리한  기능입니다. 리액트(React) 공부 지금 바로 시작하세요.

감사합니다.