반응형

오늘은 파이썬(python)에서 requests 객체를 사용해서 GET, POST 메시지를 보내는 방법을 알아보겠습니다. requests 객체는 WEB 데이터 정보를 확인할 수 있는 객체로 크롤링에 많이 사용됩니다.

먼저 GET, POST 메시지 처리가 가능한 html를 작성했습니다. RGB 색상을 입력받아 텍스트로 확인할 수 있는 WEB 페이지입니다.

입력된 RGB 정보를 텍스트로 출력합니다. 메시지 정보는 color1, color2, color3로 설정했습니다.

get 메시지는 requests get 메서드를 사용해서 전송합니다. 기본 get parameter 정보를 텍스트 배열 형태로 저장하고, requests.get 메서드에 URL, params 정보를 입력합니다.

출력 결과 form-action.php 파일을 호출하면서 GET에 입력된 정보가 HTML BODY 부분에 출력되는 것을 확인할 수 있습니다.

post 메시지는 request post 메서드를 사용해서 전송합니다. parameter 정보는 data로 입력이 가능합니다. get 정보와 동일하게 배열을 생성 후 requests.post 메서드에 data 정보를 입력해서 URL을 호출합니다.

출력 결과 POST 정보를 확인 후 body에 color1 ~ color3 정보가 출력되는 것을 확인할 수 있습니다. requests는 WEB 크롤링부터 GET, POST 메시지를 전송할 수 있어 다양하게 많은 정보 접근이 가능한 매우 편리한 객체입니다. WEB 정보 확인이 필요하다면 파이썬(python)을 사용해서 한번 확인해보세요.

감사합니다.

반응형
반응형

사이트 정보를 가져오기 위해서는 다양한 기술을 사용할 수 있습니다. 파이썬(python)에서는 Requests를 사용해서 사이트 정보를 가져올 수 있습니다. 간단하게 설치 후 사용할 수 있어 매우 편리하게 WEB 정보를 확인할 수 있어 크롤링에 많이 사용됩니다.

먼저 requests를 설치해야 합니다. pip 명령어를 사용해서 requests를 install 해주세요.

처음 설치하면 정상적으로 설치됩니다. 전 이전에 설치되어 있어 오류 메시지가 출력되었습니다.

requests는 간단하게 get 메서드를 사용해서 사이트 정보를 확인할 수 있습니다. get 메서드에 사이트 정보를 입력합니다. status_code를 확인하면 정상적인 상태 사이트 확인이 가능합니다.

출력 결과 200 코드를 확인할 수 있습니다.

사이트 정보를 확인할 수 없는 내용을 사용할 경우 404 오류 코드를 리턴합니다.

출력 결과 404 에러를 확인할 수 있습니다. 처음 사이트 정상 유무를 먼저 확인하고 사이트 텍스트를 확인하는 게 가장 좋은 방법입니다.

text 속성을 사용하면 UTF-8로 인코딩된 사이트 텍스트 정보를 확인할 수 있습니다.

개발자 모드로 확인할 수 있는 사이트 HTML 정보를 한 번에 확인할 수 있습니다. 그런데 모든 코드가 포함되어 매우 복잡한 구조입니다.

content 속성을 사용하면를 바이너리 타입으로 변경되어 쉽게 사이트 텍스트 확인 가능합니다.

text 속성과 비교하면 매우 간결한 내용을 확인할 수 있습니다. 파이썬(python) requests 객체는 사이트 정보를 확인해서 다양한 정보를 빠르게 추출할 수 있어 매우 편리합니다. 간단한 속성으로 사용으로 빠르게 사이트 접근이 가능해서 WEB 자동화 프로그램을 개발할 때 꼭 필요한 객체입니다.

감사합니다.

반응형
반응형

크롤링 기술은 html 내용을 검색해서 다양한 정보를 빠르게 확인할 수 있는 기술입니다. 일반적으로 크롤링은 python에서 beautifulsoup를 사용해서 간단하게 html을 파싱 할 수 있어 많이 사용합니다. 오늘은 python 처럼 간편하게 HtmlAgility를 사용해서 C#에서 html 파싱 하는 방법을 알아보겠습니다.

메뉴에서 Nuget 패키지 관리자를 실행하고 "HtmlAgilityPack"를 검색해주세요. 프로젝트를 선택하고 설치 버튼을 클릭하면 프로젝트에 HtmlAgilityPack이 설치됩니다.

정상적으로 설치되면 출력 내용에서 설치 경로를 확인할 수 있습니다.

HtmlAgility를 사용하기 위해서는 기본적으로 xpath를 알아야 합니다. Chrome 브라우저에서 개발자 모드를 실행하고 크롤링하고 싶은 경로에 XPath를 저장합니다.

간단하게 naver.com 전체 내용을 확인하는 코드입니다.

string url = "https://www.naver.com";
HtmlWeb web = new HtmlWeb();
HtmlDocument doc = web.Load(url);
HtmlNode node = doc.DocumentNode.SelectSingleNode("/html/body");
Console.WriteLine(node.InnerText);

url 설정 후 HtmlWeb 객체를 사용해서 html 내용을 확인할 수 있습니다.

출력 결과 html에서 텍스트만을 확인할 수 있습니다. 간단하게 전체 내용을 확인할 수 있어 사용하기 매우 편리합니다.

이번에는 네이버 페이지에서 모든 이미지 주소를 확인하는 코드를 작성해보겠습니다.

중복되는 정보는 SelectNodes 메서드를 사용해서 접근이 가능합니다.

            HtmlNodeCollection nodes = doc.DocumentNode.SelectNodes("//img");

            HtmlNode firstNode = nodes.First();

            for( int i = 0; i < nodes.Count; i++)
            {
                Console.WriteLine(nodes[i].Attributes["src"].Value);
            }

처음에 저장된 doc 객체에서 Selectnodes를 사용해서 하단에 있는 모든 img 태그를 확인합니다. 최대 nodes 개수를 확인하고 Attributes를 사용해서 "src" 내용을 모두 확인할 수 있습니다.

간단한 코드를 사용해서 html에 포함된 이미지 소스 정보를 한눈에 확인할 수 있습니다. 사용법은 매우 간단하지만, 기본적으로 html 기본 구조를 알고 있어야 크롤링 기술을 사용하기 편리합니다. C#을 사용해서 간단하게 크롤링 할 수 있어 다양한 정보를 수집하기 좋습니다. python보다 C#을 좋아한다면 지금 확인해보세요.

감사합니다.

반응형
반응형

오늘은 C#을 이용한 Chrome 매크로를 제어할 수 있는 셀레니움(Selenium) 설치 방법에 대해서 알아보겠습니다. 셀레니움(Selenium)은 ChromeDriver를 사용해서 Chrome 브라우저에서 다양한 제어할 수 있는 패키지 모듈입니다.

먼저 C# Console 프로젝트를 하나 생성해주세요.

상단 메뉴에서 도구를 선택하고 "NuGet 패키지 관리자"에서 "솔루션 NuGet패키지 관리" 메뉴를 선택합니다.

"찾아보기" 항목 아래쪽에 검색창에 "selenium"을 입력하면 설치 가능한 패키지를 확인할 수 있습니다.

"Selenium.WebDriver"를 선택하면 우측에 프로젝트 설치 항목을 확인할 수 있습니다. selenium 체크 버전 선택 후 설치 버튼을 클릭합니다.

정상적으로 프로젝트에 셀레니움(Selenium)이 설치되었습니다.

이젠 직접 Chrome을 제어할 수 있는 Driver을 설치해야 합니다.

검색 항목 아래쪽에 "Selenium.WebDriver.ChromeDriver"를 선택하고 우측에서 버전 선택 후 설치 버튼을 클릭합니다.

Chrome을 제어하기 위한 ChromeDirver가 정상적으로 설치되었습니다.

설치됨 항목에서 "Selenium.WebDriver","Selenium.WebDriver.ChromeDriver" 내용을 확인할 수 있습니다.

이제 코드를 입력해서 정상 동작을 확인하겠습니다.

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;


namespace ChromeAgent
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello, World!");
                                 
            IWebDriver driver = new ChromeDriver();
            driver.Url = "https://www.naver.com";            
            driver.Manage().Window.Maximize();
                      
            string cmd = Console.ReadLine();
            
        }
    }
}

ChromeDriver 클래스를 생성하고 Url를 입력하면 ChromeDriver가 동작하면서 naver.com으로 이동합니다.

컴파일을 진행하면 정상적으로 동작하지 않고, ChromeDriver.exe가 종료됩니다. 내용을 확인하면 버전 문제가 있습니다.

"Selenium.WebDriver.ChromeDriver"은 설치된 Chrome 버전을 확인해서 동일한 버전일 경우만 정상적으로 동작합니다. 기본적으로 설치 시 Driver 버전을 설치된 Chrome 매이저 버전에 맞추거나, Chrome을 업데이트해서 최신 버전으로 변경하면 문제 없이 동작합니다.

 

Chrome 버전이 동일하면 정상적으로 ChromeDriver가 실행되면서 naver.com으로 이동합니다. ChromeDriver는  Python을 사용해서 실행 도 가능하지만, C#을 주로 사용한다면 솔루션 패키지 설치 후 Chrome을 자유롭게 제어할 수 있습니다.

감사합니다.

반응형
반응형

파이썬(python)에서 selenium을 사용해서 xpath를 사용하면  DeprecationWarning 오류가 발생합니다.

발생하는 오류와 상관 없이 컴파일에는 문제가 없습니다. 하지만 오류는 그냥 넘기면 문제가 발생할 수 있어 그냥 지나가면 안 됩니다. 내용을 확인하면 find_element_by_xpath 사용해서 명시적이지 않게 접근하는게 문제인 거 같습니다.

find_element_by_xpath 함수 대신 find_element 함수를 사용하라고 합니다.

from selenium.webdriver.common.by import By

find_element 함수를 사용하기 위해서는 옵션 설정 by를 참조해야 합니다. 상단에 selenium.webdriver.common.by를 import 해주세요.

xpath = "//*[@id='tab']/table/tr[1]/td[2]"

path = driver.find_element_by_xpath(xpath)

기존 사용하던 함수를 find_element로 변경하면 됩니다.

xpath = "//*[@id='tab']/table/tr[1]/td[2]"
path = driver.find_element(By.XPATH, xpath)

이제 컴파일하면 정상적으로 오류 없이 xpath element를 사용할 수 있습니다.

감사합니다.

반응형
반응형

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

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

https://chromedriver.chromium.org/downloads

 

ChromeDriver - WebDriver for Chrome - Downloads

Current Releases If you are using Chrome version 102, please download ChromeDriver 102.0.5005.27 If you are using Chrome version 101, please download ChromeDriver 101.0.4951.41 If you are using Chrome version 100, please download ChromeDriver 100.0.4896.60

chromedriver.chromium.org

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 설치 방법은 아래 글을 확인해주세요. 

 

 

C# ML.NET 사용한 머신 러닝 Data Classification

머신 러닝은 다양한 Open API를 사용해서 공부할 수 있습니다. 가장 많이 사용하는 언어는 Python입니다. Python은 머신 러닝을 하기 위해서는 좋은 선택이지만, 완전한 프로그램을 개발하기 위해서는

believecom.tistory.com

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

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

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

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

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

 

 

자습서: 회귀를 사용하여 가격 예측 - ML.NET

이 자습서에서는 ML.NET을 사용하여 가격(특히, 뉴욕 시 택시 요금)을 예측하기 위한 회귀 모델을 빌드하는 방법에 대해 설명합니다.

docs.microsoft.com

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

 

ML.NET Tutorial | Get started in 10 minutes | .NET

Step-by-step instructions for building a simple prediction model with ML.NET on Windows, Linux, or macOS. ML.NET is a machine learning framework for .NET.

dotnet.microsoft.com

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

생성된 프로젝트에서 마우스 우클릭을 실행하고, 추가 항목에서 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/

 

MUI: The React component library you always wanted

MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster.

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를 확인할 수 있습니다.

감사합니다.

반응형

+ Recent posts