BelieveCom

파이썬(Python)은 간단하게 강력한 기능을 구현할 수 있는 좋은 언어입니다. 오늘은 파이썬(Python)을 사용해서 WEB 매크로 기능을 구현해보겠습니다. 간단하게 네이버 검색 창에서 오늘 날씨를 입력하고 확인하는 매크로를 작성하겠습니다. 매크로를 만들기 전에 필요한 ChromeDriver 및 selenium을 설치해야 합니다.

먼저 pip 기능을 사용해서 selenium을 설치합니다. 셀레늄(selenium)을 사용해서 ChromeDriver를 제어할 수 있습니다.

https://chromedriver.chromium.org/downloads

ChromeDriver 홈페이지에서 사용중인 크롬과 동일한 버전을 다운로드해주세요. 메이저 버전만 확인하면 됩니다. 다운로드 후 압축을 해제하면 ChromeDriver.exe를 확인할 수 있습니다.

먼저 간단하게 코드를 사용해서 네이버 사이트를 방문하겠습니다.

from selenium import webdriver
driver = webdriver.Chrome("D:/chromedriver.exe")
url = "https://www.naver.com"
driver.get(url)

selenium을 import 진행 후 webdriver.chrome 메서드를 사용해서 Chromedriver.exe를 로드합니다. driver.get(url) 적용 후 컴파일을 진행하면 Chromedriver.exe가 실행되면서 네이버 메인 페이지로 이동합니다.

ChromeDriver.exe가 실행되면서 별도 브라우저로 이동합니다. 매크로를 실행하기 위해서는 html 요소에 따른 내용을 확인할 수 있어야 합니다. ChromeDriver는 "//태그[@속성="속성값"]" 으로 HTML 태그를 인식할 수 있습니다.

먼저 검색 창 요소를 찾기 위해서 마우스를 이동합니다. 툴팁으로 "검색어 입력"을 확인할 수 있습니다.

Chrome를 실행 후 F12를 눌러주면 개발자 모드를 확인할 수 있습니다. 개발자 모드로 이동해서 Ctrl + F 키를 사용해서 "검색어 입력"을 검색해서 동일한 태그로 이동해주세요.

"검색어 입력" 테크를 확인하면 이제 xPath 경로를 설정해야 합니다.

xPath 경로를 확인하기 위해서는 태그를 선택하고 마우스 우크릭에서 "Copy" -> "Copt XPath"를 선택하면 태그 xPath를 확인할 수 있습니다. 검색창 태크 xPath는 "//*[@id='query']"입니다.

이제 검색 버튼 클릭 이벤트를 생성하기 위해서 검색 이미지 태그를 확인합니다. 마우스를 사용해서 "검색" 항목을 확인할 수 있습니다.

동일하게 태그를 선택하고 xPath를 복사합니다. 검색 버튼 xPath는 "//*[@id='search_btn']" 입니다.

    url = "https://www.naver.com"
    driver.get(url)

    xpath = "//*[@id='query']"
    input_window = driver.find_element_by_xpath(xpath)    
    input_window.send_keys("오늘 날씨")

    xpath2 = "//*[@id='search_btn']"
    text_panel = driver.find_element_by_xpath(xpath2)
    text_panel.click()

driver.find_element_by_xpath를 사용해서 xpath를 확인합니다. 텍스트를 입력하기 위해서 send_keys를 사용해서 "오늘 날씨"를 입력합니다. 두 번째 xpath를 확인하고 click 메서드를 사용해서 태그 클릭 이벤트를 발생합니다.

컴파일을 진행하면 네이버 페이지를 오픈하고 "오늘 날씨" 입력 후 검색 버튼이 클릭되는 모습을 확인할 수 있습니다. 파이썬(Python)은 복잡한 매크로 기능을 쉽게 제어할 수 있게 구조화되어 있어 누구나 손쉽게 간단한 매크로를 구현할 수 있습니다. ChromeDriver.exe는 독립적인 실행으로 웹에서 발생하는 쿠키 정보 및 부가 정보를 삭제하기 때문에 웹 매크로를 구현하기 매우 편리합니다. 태그 요소에 부합한 xPath는 Chrome 개발자 기능으로 한 번에 확인이 가능해서 더욱더 개발을 쉽게 도와줍니다. 매크로 기능 개발에 관심이 있다면 지금 바로 파이썬(Python)으로 ChromeDriver 확인해보세요.

감사합니다.

오늘은 C# ML.NET 머신러닝 중 회귀를 사용한 값 예측을 구현해보겠습니다. 먼저 ML.NET를 설치해주세요. ML.NET 설치 방법은 아래 글을 확인해주세요. 

ML.NET 설치 상태에서 C# Console 빈 프로젝트를 생성합니다.

프로젝트 속성에서 마우스 우클릭 후 추가 메뉴를 선택하고 "Machine Learning Model"을 추가해주세요.

모델 이름은 클래스 형태로 구성되므로, 사용하기 편리한 이름으로 지정하면 됩니다.

mbconfig 파일을 생성하면 머신러닝 학습을 구성할 수 있습니다. 두 번째 내용인 값 예측을 선택합니다.

가장 먼저 ML.NET 머신러닝 환경을 선택합니다. 기본적으로 로컬을 선택하면 됩니다. 환경 선택 후 "다음 단계" 버튼을 클릭하고 데이터 추가 단계로 이동합니다. 데이터 단계에서는 기본 학습에 필요한 기본 데이터가 있어야 합니다.

microsoft.com 가격 예측 페이지로 이동해서 아래쪽으로 내려가면 데이터 준비 및 이해 아래쪽에 "taxi-fare-train.csv" 파일을 다운로드할 수 있습니다.

"taxi-fare-train.csv" 파일을 선택하면 GitHub로 이동 후 "Download"를 눌러주면 파일을 다운로드할 수 있습니다.

"taxi-fare-train.csv"를 선택하고 예측할 열(레이블)에서 "fare_amount"를 선택합니다.

고급 데이터 옵션을 사용해서 불필요한 여측 값을 제외할 수 있습니다.

이제 로드된 데이터를 사용해서 학습을 시작합니다. 학습 시간은 10분으로 설정하고 학습 시작 버튼을 클릭합니다.

회귀 분석이란 데이터 값이 평균과 같은 일정한 값으로 돌아가려는 경향을 이용한 통계학 기법입니다. 저장된 택시 비용을 통계학 기법을 적용해서 학습합니다.

10분 후 학습이 완료되었습니다. 최적 품질은 학습 시간에 따라서 변경됩니다.

평가 모델에서 예측 값을 입력하면 fare_amount 결과 값을 확인할 수 있습니다.

이제 사용하기 위해서 코드를 복사하거나, Add to solution 버튼을 클릭해서 솔루션에 새 프로젝트를 생성합니다.

신규로 생성된 프로젝트를 사용해서 컴파일이 가능합니다.

코드를 사용해서 직접 값 예측이 가능합니다.

using System;
using ConsoleApp1;

var sampleData = new MLModel.ModelInput()
{
    Vendor_id = @"CMT",
    Rate_code = 1F,
    Passenger_count = 1F,
    Trip_time_in_secs = 1271F,
    Trip_distance = 3.8F,
    Payment_type = @"CRD",
};

MLModel.ModelOutput result = MLModel.Predict(sampleData);

Console.WriteLine("예측 결과 요금 : {0} ",result.Score);

ModelInput를 사용해서 학습 데이터를 생성하고 ModelOutput을 사용해서 결과를 예측할 수 있습니다.

반환된 결과는 Score를 사용해서 확인이 가능합니다.

ML.NET 회귀를 사용한 값 예측 방법은 다양한 회귀모델을 구현할 수 있어 머신러닝에 기초로 사용하기 매우 편리합니다. 기본적으로 데이터를 선 분석해서 사용하기 때문에 누구나 쉽게 머신러닝을 접근할 수 있는 좋은 개발 형태입니다. 머신러닝에 관심 있고 코딩을 잘 모른다면 C# ML.NET를 이용한 머신러닝 공부 지금 시작하세요.

감사합니다.

머신 러닝은 다양한 Open API를 사용해서 공부할 수 있습니다. 가장 많이 사용하는 언어는 Python입니다. Python은 머신 러닝을 하기 위해서는 좋은 선택이지만, 완전한 프로그램을 개발하기 위해서는 타 언어와 연동이 필요합니다. 오늘은 머신 러닝 및 프로그램 UI까지 쉽게 개발 가능한 ML.NET 머신 러닝 기본을 공부해보겠습니다.

ML.NET은 .NET Core를 사용하여 Windows, Linux 및 macOS에서 실행되거나 .NET Framework를 사용하여 Windows를 실행됩니다. 기본적으로 C#문법을 사용해서 컴파일 가능합니다.

ML.NET의 핵심은 기계 학습 모델입니다. ML.NET를 사용하기 위해서 먼저 Visual studio 2022 설치 후 .NET 데스크톱 개발 항목에서 ML.NET Model Builder를 체크해야 합니다.

https://dotnet.microsoft.com/en-us/learn/ml-dotnet/get-started-tutorial/intro

간단하게 개발하기 위해서 콘솔 앱을 선택하고 프로젝트를 생성해주세요.

생성된 프로젝트에서 마우스 우클릭을 실행하고, 추가 항목에서 Machine Learning Model을 클릭 후 mbconfig파일을 생성합니다.

도움말 서비스가 실행되면서 사용자 데이터 학습 옵션을 확인할 수 있습니다. 이번 시간에는 부정적 감성을 인지하는 예측 모델을 만들어보겠습니다. Data Classification을 선택해주세요.

환경은 로컬을 선택하면 됩니다. 

데이터를 학습하기 위해서 기본 예측 데이터를 위 사이트에서 다운로드해주세요.

압축을 해제하면 텍스트 정보를 확인할 수 있습니다.

압축 폴더에서 yelp_lebelled.txt를 선택하고, 예측할 열을 col1로 설정하면 데이터를 미리 볼 수 있습니다.

이제 학습 단계로 이동해서 학습 시간을 60초로 선택하고 학습을 시작해주세요. 60초 정도 학습하게 되면 최적 정확도가 80.28%나옵니다.

학습 시간이 길어지면 최적 정확도가 높아집니다. 학습 데이터가 1GB 이상일 경우는 3시간 이상 학습이 필요합니다.

학습이 완료되면 col0 값을 입력 후 예측하면 결과를 확인할 수 있습니다. 1은 긍정적인 값이고, 0은 부정적인 값입니다. 

"Wow Loved This place"를 입력하면 92% 긍정적으로 판단됩니다.

예측까지 완료되면 모델이 압축되어 컴파일 위치에 저장됩니다. 이제 사용하기 위해서 코드를 복사하거나, 아래 항목에서 "Add to solution"을 선택하면 프로젝트가 추가됩니다.

추가된 프로젝트를 컴파일하면 정상적으로 확인됩니다.

기존 프로그램에 모델을 적용하기 위해서 생성한 모델을 참조하고 Col0 정보에 예측 정보를 입력해주세요.

컴파일 결과 "This restaurant was wonderful." 문장은 96.75%로 긍정인 것을 확인할 수 있습니다.

ML.NET는 무료 Visual Studio를 사용해서 간단하게 학습 후 모델을 사용할 수 있는 프레임워크입니다. 머신 러닝에 관심 있다면 간단하게 테스트할 수 있는 ML.NET 한번 설치해보세요.

감사합니다.

리액트(React)는 다양한 UI를 사용해서 스크립트를 작성할 수 있습니다. 오늘은 가장 많이 사용하는 리액트(React) UI 라이브러리인 Material-UI 설치 방법을 알아보겠습니다.

Material-UI는 구글 메테리얼 디자인을 기반으로 제작된 UI라이브러리입니다. 다양한 레퍼런스가 있어 참고하기 좋고 커스터마이징도 잘되어 있어 쉽게 사용할 수 있습니다. 테마 기반으로 제작도 가능하기 때문에 UI 전체를 빠르게 변경할 수 있습니다.

https://mui.com/

리액트(React) UI라이브러리 material-ui 설치는 홈페이지에서 바로 확인할 수 있습니다.

설치 하고 싶은 프로젝트에서 "npm install @material-ui/core" 명령어를 사용해서 UI 라이브러리를 설치합니다.

material-ui 아이콘도 사용하고 싶다면 "npm install @material-ui/icons" 명령어를 사용해서 아이콘을 설치합니다.

설치된 UI 라이브러리는 node_modules 폴더에서 확인이 가능합니다.

간단하게  material-ui를 호출해보겠습니다. 먼저 라이브러리를 import해야 합니다.

"import { Button } from "@material-ui/core""를 코드를 사용해서 소스에 라이브러리를 import 해주세요.

3가지 타입 버튼을 구성하겠습니다.

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

간단하게 버튼 스크립트를 작성하면 3개의 버튼을 확인할 수 있습니다.

리액트(React) 기본 타입 아래쪽에 타입에 따른 material-ui button이 구성됩니다.

간단한 버튼 오브젝트이지만, 일반 버튼과 큰 차이가 있습니다. 간단하게 UI를 이쁘게 구성할 수 있어 material-ui 사용은 좋은 방법이라고 생각됩니다. 지금 바로 설치해서 사용해보세요.

감사합니다.

React를 사용해서 오래간만에 프로젝트를 생성하려고 하니까 오류가 발생하면서 프로젝트가 생성 안됩니다.

"You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1)" 내용으로 create-react-app을 삭제 후 다시 인스톨하라고 합니다.

"npm uninstall -g create-react-app" 명령어를 사용해서 careate-react-app을 삭제합니다.

정상적으로 삭제되면 아래 내용처럼 패키지를 삭제합니다.

두 번째 yarn을 사용해서 global create-react-app을 삭제해야 합니다. 그런데 yarn이 설치가 안되어 있습니다.

yarn은 자바스크립트 패키지 매니저로 npm을 사용해서 설치해줍니다.

"npm install --global yarn" 명령어를 사용해서 설치합니다.

yarn을 설치하고 "yarn global remove create-react-app" 명령어를 실행해서 create-react-app을 삭제합니다.

정상적으로 삭제 후 "npm add create-react-app" 명령어를 사용해서 create-react-app을 다시 설치합니다.

npx create-react-app 명령어를 사용해서 프로젝트를 생성하면 정상적으로 패키지가 설치됩니다.

1. npm uninstall -g create-react-app
2. yarn global remove create-react-app
3. npm add create-react-app
4. npx create-react-app createreact

4가지 명령어를 순차적으로 진행하면 react 버전 오류를 해결할 수 있습니다.

생성된 프로젝트는 정상적으로 컴파일되어 Learn React를 확인할 수 있습니다.

감사합니다.

파이썬(python)을 사용하다 보면 버전 변경에 정말 민감하게 반응합니다. 특정 버전에서 사용하던 함수가 없어지거나, 최신 버전에서만 사용 가능한 함수가 지원될 수 있습니다. 오늘은 PyCharm을 사용하면서 파이썬(python) 버전을 변경하는 방법을 알아보겠습니다.

파이썬(python)을 공부하면서 인터넷에 특정 소스를 확인할 경우 동일한 코드인데 오류가 발생하는 일이 종종 발생합니다. 이를 해결하기 위해서는 먼저 특정 소스 작성 일자를 먼저 확인해야 합니다. 너무 오래된 내용일 경우 함수가 사라진 경우이고, PyCharm 설치 시점보다 소스가 나중에 작성되었다면 최신 버전에서만 사용할 수 있는 내용입니다. match 함수를 사용하려고 하니까 fmmatch 함수만 확인되는 상황입니다. 홈페이지에서 내용을 확인하니까. match 함수는 파이썬(python) 버전 3.10 이상에서만 사용할 수 있는 함수였습니다. 그래서 파이썬(python) 버전업을 진행하기로 했습니다.

PyCharm에서 설정으로 이동 후 python 인터프리터 메뉴를 확인할 수 있습니다. PyCharm 버전이 최신일 경우 한글을 지원합니다. Python 인터프리터 항목에서 파이썬(python) 버전이 3.9만 확인됩니다.

파이썬(python) 홈페이지로 이동해서 최신 버전을 확인합니다. 최신 버전은 상단에 있는 버튼을 클릭하면 바로 다운로드 가능합니다. 최신 버전은 3.10.3 버전입니다. 설치 파일을 실행하고 경로를 선택하면 설치됩니다.

Python 인터프리터 메뉴로 이동하면 설치된 최신 버전을 바로 확인할 수 없습니다. 위 사진처럼 최신 버전을 확인하기 위해서는 버전을 등록해야 합니다. 리스트 상단에 있는 '+' 버튼을 클릭해서 Python 인터프리터 추가 메뉴를 활성화합니다.

"기본 인터프리터" 항목에서 폴더 선택 버튼을 클릭합니다.

최신 버전이 설치된 위치에서 phthon.exe를 선택하고 "확인" 버튼을 클릭합니다.

리스트에 파이썬(python) 최신 버전 3.10을 확인할 수 있습니다.

이제 리스트에서 최신 버전을 선택하고 "확인" 버튼을 클릭하면 최신 버전에 따른 Reload가 진행됩니다. 정상적으로 안될 경우 PyCharm을 재 실행하면 됩니다. 파이썬(python) 버전 변경은 매우 중요한 내용이기 때문에 꼭 숙지하시고 최신 버전에 따른 Release 노트도 시간이 되면 매일 확인해주세요.

감사합니다.

파이썬(python)은 다양한 제어문, 반복문을 사용해서 더욱더 쉽게 코드를 작성할 수 있습니다. 오늘은 파이썬(python)에서 자주 사용하는 제어문, 반복문을 알아보겠습니다.

if 문

파이썬(python)에서는 if문을 사용해서 변수를 확인할 수 있습니다. 기본적으로 if 문에서 정의된 내용을 기준으로 elif, else로 구분해서 코드 분기가 가능합니다. 파이썬(python)은 들여쓰기를 기준으로 컴파일되기 때문에 if문 사용 후 들여 쓰기가 적용되기 전까지 제어문으로 인식합니다.

value 값이 2로 입력 받아서 마지막 제어문 else를 실행한 결과입니다. 간단하게 매우 자주 사용하는 제어문입니다.

for 문

for 문은 배열에 저장된 순서로 루프를 돌면서 value 값을 확인할 수 있는 반복문입니다. 배열을 선언 후 특정 값으로 초기화하고 for을 사용했습니다.

출력 결과 words에 저장된 내용이 출력되는 것을 확인할 수 있습니다.

for문은 배열에 저장된 특정 키를 확인 후 복사 및 삭제가 가능합니다. sports 배열을 생성할 때 별도 키 값으로 현재 배열 상태를 구분합니다. copy() 메서드를 사용해서 items를 복사하고, status로 특정 키 값을 검색합니다. 특정 키와 status가 일치한다면 del 함수를 사용해서 sports에서 'inactive' 항목을 삭제합니다.

출력 결과 기존 항목에서 'invactive'가 삭제된 내용을 확인할 수 있습니다. 신규 배열을 선언하고, for 문을 사용해서 새로운 배열 생성도 가능합니다.

range

range는 파라메타(parameter)에 따라서 연속적인 내용을 리턴하는 함수입니다. 기본적으로 파라미터(patameter)에 입력된 내용을 기준으로 리턴하며, 두 번째 파라미터(patameter)를 사용할 경우, 첫 번째 파라미터(patameter)부터 두 번째 파라미터(patameter)까지 연속적인 내용을 리턴합니다. 세 번째 파라미터(patameter)를 사용할 경우 연속적인 내용 중에서 입력된 세 번째 파라미터(patameter)만큼 이동해서 값이 설정됩니다.

출력 결과 처음에는 연속적인 숫자이며, 두 번째는 설정 범위 내용을 출력하고, 세 번째는 증가분이 적용되는 것을 확인할 수 있습니다.

match 문

파이썬(python)에서는 match문을 사용할 수 있습니다. match문은 기존 C언어에서 사용하는 switch문과 동일한 구조로 사용 가능합니다. match문은 파이썬(python) 3.10 버전 이상부터 사용이 가능하기 때문에 match문을 사용하고 싶다면 파이썬(python) 버전을 최신 버전으로 변경해야 합니다. match 문은 기존 switch문과 동일하며 default 대신 '-'문자로 구분됩니다.

출력 결과 입력된 http_code가 없기 때문에 default로 선언된 "Code not fund"를 확인할 수 있습니다.

파이썬(python)은 다양한 제어문을 사용해서 코드를 작성할 수 있고 버전에 따라서 상이하기 때문에 사용하고 싶은 제어문 또는 반복문을 기능에서 확인 후 버전을 선택해주세요.

감사합니다.

파이썬(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) 공부 지금 바로 시작하세요.

감사합니다.