[HCI & AI] HYOZ WIKI

[Front-end/React] npm start 명령어 실행 오류

마크 주쿼버그 — Tue, 25 Jun 2024 17:29:29 +0900

1. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

npm i -g react-scripts

react-scripts가 설치되어 있지 않아 발생한 문제로 npm install을 수행해주면 된다.

2. Error: Cannot find module 'react'

npm i react react-dom

react가 설치되지 않아 발생한 문제로 마찬가지로 react, react-dom을 설치해주면 된다.

[Front-end/React] MUI(Material UI) 사용하기

마크 주쿼버그 — Mon, 24 Jun 2024 16:38:04 +0900

MUI는 Material Design을 적용하기 쉽게 만든 라이브러리로, 사용하기 위해서는 터미널에서 아래 명령어를 통해 설치해주어야 한다. 이 코드에서 --legacy-peer-deps는 충돌이 날 경우 무시하고 설치하라는 명령어이다.

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled --legacy-peer-deps

위 코드를 실행해주면 MUI의 아이콘을 포함한 디자인을 활용할 수 있다.

Material Design 혹은 MUI가 궁금하다면 아래 링크를 통해 확인해보자.

- Material design

https://m3.material.io/

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

- MUI

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.

mui.com

[Front-end/React] Google Fonts의 무료 폰트 사용하기

마크 주쿼버그 — Mon, 24 Jun 2024 16:06:38 +0900

Google Fonts에서는 무료로 사용할 수 있는 여러 폰트를 제공하고 있다. 나는 'Roboto' 폰트를 가져왔다.

가져오는 방법은 Google Fonts에서 사용할 폰트를 클릭하여 상세 페이지로 들어간 후, 'Get embed code' 버튼을 클릭한다. 그런 다음 @import 옵션을 선택하고 Copy code를 해준 다음 index.css 파일에 붙여 넣는다. (style 태그는 제거한다)

Google fonts 가져오기

[Front-end/React] BrowserRouter 라이브러리 사용하기

마크 주쿼버그 — Mon, 24 Jun 2024 16:06:04 +0900

React는 SPA(Single Page Application)으로, 하나의 페이지를 동적으로 활용하여 웹 페이지를 구성하는 방식을 의미한다. 사용자의 동작에 대해 자원을 동적으로 관리하여 효율적으로 기능하도록 하는 것이 목적이다.

따라서 React는 URL 마다 새로운 페이지를 호출하는 것이 아니라, Router를 통해 변경될 부분의 코드만 불러온다.

이 때 사용하는 React Router는 여러 종류가 있지만, 우리는 BrowserRouter 라이브러리를 활용하려고 한다.

이 라이브러리를 사용하기 위해서 아래 코드를 터미널에 실행하여 설치하여 준다.

npm i -s react-router-dom

그리고 index.js 에서 </App> 코드를 <BrowserRouter>로 감싸준다.

index.js 코드의 전체 코드를 확인해보면 아래와 같다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

[KT AIVLE] 빅프로젝트 개발일지 1일차: 리액트 대시보드 구현

마크 주쿼버그 — Mon, 24 Jun 2024 16:05:56 +0900

이 글에서는 프로젝트의 개요, 본격적인 개발을 진행하기에 앞서 어떻게 내용을 구성하고 설계하였는지에 대해 간단히 기술하였다. 또한 대시보드 구현을 하면서 중요한 부분은 무엇이었는지, 그 결과 내가 배우고 느낀 것이 무엇이었는지에 대해 정리해보았다. 상세 개발 내용에 대해서는 이 글에 담기엔 글이 너무 길어질 것 같아 별도 포스팅을 게시한다.

1. 프로젝트 개요

(1) 프로젝트의 목적 및 나의 역할

이 글은 KT 에이블스쿨 수업의 마지막 단계인 빅프로젝트에 대한 내용을 기재하기 위해 작성되었다.

나는 팀장으로 전체 프로젝트 흐름에 대해 설계하고, 프론트와 데이터 분석, AI 모델링을 중점으로 진행한다.

(2) 현재 상황

지난 주에 팀원들과 함께 요구사항 및 UI/UX 설계서 작성을 포함하여 전체 프로젝트를 설계하였고, 이번 주부터는 지난 주에 작성되었던 내용을 기반으로 웹 서비스를 구현한다. 그러나 아직 지난 주에 올렸던 심의 요청에 대한 결과가 나오지 않았다. 혹시 통과되지 않았을 때를 대비하여 활용 가능한 데이터셋과 핵심 기능을 추가적으로 탐색함과 동시에 웹 개발의 토대가 될 프론트/백엔드 서버 구축을 진행한다.

(3) 개발 개요: Front-end

내가 맡은 프론트의 경우에는 리액트 프레임워크를 사용하기로 했다.

프론트를 구현하기 위한 프레임워크로는 리액트를 선택했다. 팀원들이 개발 경험이 적고, 프로젝트의 퀄리티 향상을 위해서는 웹 개발 시간을 단축해야 하는 상황이나, 리액트는 컴포넌트를 재사용 가능하기 때문에 이러한 팀원들이 웹 프론트 개발을 빠르게 진행할 수 있도록 필요한 컴포넌트를 구현하려고 한다.

또한 우리는 휴대 전화, 태블릿, PC 에서 모두 사용 가능한 플랫폼을 구현하여야 하므로 반응형 웹 화면을 구축한다.

2. 개발 진행에 앞서...

앞으로 작성될 포스트들은 React 서버 구축과 Github 연동이 완료되었다는 것을 전제로 진행된다.

대시보드는 Github에서 오픈소스로 제공되고 있는 Dashboard template을 차용하였으며, 적절한 코드만 추출하여 우리가 원하는 형식에 맞게 변경하여 적용하였다. 참고한 템플릿은 최하단 References에 기재하겠다.

리액트 환경 구축 및 프로젝트 생성은 아래 링크를 참고하도록 하자.

https://street-developer.tistory.com/36

React.js 환경 구축

목차0. Environment1. Installation2. Start a react project3. References 0. Environment- OS: Windows- 그 외 특이사항 없음 1. Installation(1) Nodejs 설치: v20.15.0 (LTS, 2024.06.24 기준)아래 링크로 접속하여 LTS 버전의 Node.js

street-developer.tistory.com

또한 해당 프로젝트는 Visual studio code와 Github을 연동하였다. 전체 코드는 아래 링크에서 확인할 수 있다.

https://github.com/dev-hjJoo/inventory-helper

GitHub - dev-hjJoo/inventory-helper

Contribute to dev-hjJoo/inventory-helper development by creating an account on GitHub.

github.com

React.js 환경 구축

마크 주쿼버그 — Mon, 24 Jun 2024 10:40:46 +0900

0. Environment

- OS: Windows

- 그 외 특이사항 없음

1. Installation

(1) Nodejs 설치: v20.15.0 (LTS, 2024.06.24 기준)

아래 링크로 접속하여 LTS 버전의 Node.js를 설치한다. 별도로 클릭할 것 없이 동의하고 모두 Next 버튼을 눌러준다.

Installation 버튼까지 눌렀다면 설치가 진행되고 있는 상황이 Status bar로 나타날 것이다.

모두 설치가 끝난 후 Finish 버튼을 눌려주면 Node.js 설치는 완료되었다.

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

만약 설치가 잘 되었는지 확인하고 싶다면 파워쉘에서 'node -v'와 'npm -v'를 실행해보자.

버전 정보가 나온다면 잘 설치가 되었다고 할 수 있다.

$ node -v
$ npm -v

(2) Visual Studio Code 설치

나는 Visual studio code를 이미 설치해서 별도 설치 방법은 작성하지 않았다.

설치하지 않았다면 아래 링크로 들어가서 설치한다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

2. Start a react project

(1) 프로젝트 폴더 생성 및 Visual Code에서 열기

1단계에서 설치를 잘 완료하였다면 내가 프로젝트를 진행할 폴더를 만든 후, 해당 폴더로 진입한다.

그리고 아래 코드를 입력하여 리액트 프로젝트를 시작한다.

npx create-react-app (프로젝트 이름)

만약 실행되지 않고 에러가 발생한다면 create-react-app을 지웠다가 설치해보도록 하자.

제거 및 재설치 코드는 아래와 같다.

npm uninstall -g create-react-app
npm install -g create-react-app

프로젝트를 시작하면 내가 지정한 프로젝트 이름으로 폴더가 하나 생겼을 것이다.

생성된 react app

해당 폴더를 앞서 설치한 visual code로 열어준다.

(2) 로컬 서버 생성하기

create-react-app 명령어를 실행해주었던 윈도우 파워쉘에서 생성한 프로젝트 폴더 안으로 진입한 후, npm start를 눌러준다. 그러면 폴더 내 package.json이 작동하여 방금 생성한 리액트 프로젝트가 열리며, 이를 통해 웹 사이트 형태로 확인할 수 있다.

여기까지 환경 구축에 대한 내용이었다. 참고한 사이트는 아래 References에 첨부해 두었다.

React 웹 개발과 관련해서는 다음 포스팅에서 게시하도록 하겠다.

그럼 끝!

3. Reference

- 필요한 프로그램 설치 및 진행: https://codingapple.com/unit/react1-install-create-react-app-npx/

- 생성한 React app 로컬 서버 실행: https://create-react-app.dev/docs/getting-started/

[AICE] 5. AI 모델링 및 모델 평가

마크 주쿼버그 — Fri, 21 Jun 2024 09:39:48 +0900

AI 모델링 및 모델 평가 파트는 총 4~5문항으로 구성되며, 전체 배점은 총 40점이다. 가장 큰 배점을 가진다.

상세 항목은 아래와 같이 구성되어 있다.

1. Scikit-learn, Tensorflow 등을 활용하여 머신러닝/딥러닝 모델링

2. 모델 성능 평가 및 그래프 출력

이번 게시물에서는 1번 내용과 2번 내용을 함께 정리해보도록 한다.

총 두 개의 모델을 만들기 때문에, 다양한 모델을 생성 및 학습시킬 수 있어야 한다.

1. 머신러닝/딥러닝 모델링 및 성능평가

(1) 의사결정나무 (Decision Tree): 회귀 모델 - MAE(Mean Absolute Error)

from sklearn.tree import DecisionTreeRegressor
from sklearn.metrics import mean_absolute_error

dt = DecisionTreeRegressor(random_state=42, min_samples_split=3)
dt.fit(X_train, y_train)

y_pred_dt = dt.predict(X_test)
dt_mae = mean_absolute_error(y_pred_dt, y_test)

(2) 랜덤포레스트 (RandomForest): 회귀 모델 - MAE(MeanAbsolute Error)

from sklearn.ensemble import RandomForestRegressor

rf = RandomForestRegressor(random_state=42, min_samples_split=3)
rf.fit(X_train, y_train)

y_pred_rf = rf.predict(X_test)
rf_mae = mean_absolute_error(y_pred_rf, y_test)

(3) 딥러닝 모델

# 이진분류
from keras.models import Sequential
from keras.layers import Dense, Flatten, SimpleRNN, LSTM, Flatten
from keras.backend import clear_session
from keras.optimizers import Adam


model1 = Sequential( [Dense(32, input_shape=(n,), activation='relu'),
                    Dense(16, activation='relu'),
                    Dense(8, activation='relu'),
                    Dense(4, activation='relu'),
                    Dense(2, activation='relu'),
                    Dense(1, activation='sigmoid')] )

model1.summary()

model1.compile(optimizer=Adam(learning_rate=0.01), loss='binary_crossentropy')
history1 = model1.fit(x_train, y_train, epochs=50, validation_split=0.2).history

# 이진분류 Dropout 적용
from keras.models import Sequential
from keras.layers import Dense, Flatten, Dropout
from keras.backend import clear_session
from keras.optimizers import Adam


clear_session()

model2 = Sequential( [Dense(128, input_shape = (nfeatures,), activation= 'relu'),
                      Dropout(0.4),
                      Dense(64, activation= 'relu'),
                      Dropout(0.4),
                      Dense(32, activation= 'relu'),
                      Dropout(0.4),
                      Dense(1, activation= 'sigmoid')] )

model2.compile(optimizer= Adam(learning_rate = 0.001), loss='binary_crossentropy')
hist = model2.fit(x_train, y_train, epochs = 50, validation_split=0.2, verbose = 0).history

# LSTM을 이용한 시계열 모델링
from keras.models import Sequential
from keras.layers import Dense, Flatten, SimpleRNN, LSTM, Flatten
from keras.backend import clear_session
from keras.optimizers import Adam

clear_session()

model1 = Sequential([LSTM(16, input_shape=(timesteps, nfeatures), return_sequences=True),
                     LSTM(8, return_sequences=True),
                     LSTM(4, return_sequences=True),
                     Flatten(),
                     Dense(16, activation='relu'),
                     Dense(1)])

model1.summary()

model1.compile(optimizer=Adam(0.01), loss='mse')

history = model1.fit(x_train, y_train, epochs=100, verbose=0, validation_split=.2).history

[AICE] 4. 샘플 문제로 함께 알아보는 데이터 분석 파트 내용 정리하기 (2) xy데이터 분리, 데이터 정규분포화, 표준

마크 주쿼버그 — Thu, 20 Jun 2024 23:38:13 +0900

데이터 분석 파트는 총 4~5문항으로 구성되며, 전체 배점은 데이터 탐색 파트와 동일하게 30점이다.

상세 항목은 아래와 같이 구성되어 있다.

1. 데이터 시각화 (상관분석 등)

2. 데이터 전처리 (결측치 처리, 라벨 인코딩/원핫 인코딩)

3. xy 데이터 분리

4. 데이터 정규분포화

5. 표준화

이번 글에서는 이전 글에 이어 3~5를 중점적으로 정리하였다.

3. xy 데이터 분리

(1) xy 데이터 분리

target = 'col1'
x = data.drop(target, axis=1)
y = data.loc[:, target]

(2) train / valid 데이터 분리 (80:20 비율, random_state=42)

from sklearn.model_selection import train_test_split

X_train, X_valid, y_train, y_valid = train_test_split(x, y, test_size=0.2, random_state=42)

4. 데이터의 정규분포화(=정규화, Normalization)

(1) RobustScaler: 평균과 분산 값 대신 중앙값과 사분위값을 활용하여 정규화 진행

from sklearn.preprocessing import RobustScaler

scaler = RobustScaler()
scaler.fit(X_train)
X_train = scaler.transform(X_train)
X_test = scaler.transform(X_valid)

5. 표준화 (Regularizaiton)

(추후 채워 넣을 예정)

[AICE] 3. 샘플 문제로 함께 알아보는 데이터 분석 파트 내용 정리하기 (1) 시각화, 전처리

마크 주쿼버그 — Thu, 20 Jun 2024 23:19:56 +0900

데이터 분석 파트는 총 4~5문항으로 구성되며, 전체 배점은 데이터 탐색 파트와 동일하게 30점이다.

상세 항목은 아래와 같이 구성되어 있다.

1. 데이터 시각화 (상관분석 등)

2. 데이터 전처리 (결측치 처리, 라벨 인코딩/원핫 인코딩)

3. xy 데이터 분리

4. 데이터 정규분포화

5. 표준화

이번 글에서는 1, 2를 중점적으로 정리하였다.

1. 데이터 시각화

시각화 방법은 다양하므로, 샘플 문제에서 등장한 메소드를 중심으로 살펴보겠다.

(1) 데이터 개수의 분포를 보여주는 countplot 그래프

import seaborn as sns
sns.countplot(x='col1', data=df)

(2) 두 변수의 분포와 관계를 함께 나타내는 jointplot 그래프

import seaborn as sns
sns.jointplot(x='col1', y='col2', data=df)

2-1. 데이터 전처리: 이상치 및 결측치 처리

df.isna().sum()                 # 결측치가 있는 열(Column) 확인
df_na = df_temp.dropna(axis=0)  # 결측치가 있는 행(Row) 제거

df.drop('Column', axis=1)          # 특정 열(Column) 제거
df.drop(['Col1', 'Col2'], axis=1)  # 여러 개의 특정 열(Column) 제거

2-2. 데이터 전처리: 원핫 인코딩/ 라벨 인코딩

(1) 원핫 인코딩

- 특정 열을 원핫인코딩 하는 방법

pd.get_dummies(df['col1'])

- object 타입의 전체 컬럼을 원핫인코딩 하는 방법

cols = df_del.select_dtypes(include='object').columns
df_preset = pd.get_dummies(df_del, columns=cols)

[AICE] 2. 데이터 탐색 파트 내용 정리하기

마크 주쿼버그 — Thu, 20 Jun 2024 22:45:06 +0900

데이터 탐색 파트는 총 5~6문항으로 구성되며, 전체 배점은 30점이다.

상세 항목은 아래와 같이 구성되어 있다.

1. 필요한 라이브러리 설치

2. Tabular 데이터 가져오기

3. 데이터의 구성 확인

AICE에서 제공하는 샘플 문제를 기반으로 하여 데이터 탐색 파트 풀이 방법을 구체적으로 알아보자.

1. 필요한 라이브러리 설치

pandas, numpy, sklearn, matplotlib, seaborn 등 필요한 라이브러리를 import 하고 별칭을 할당하는 문제가 등장한다.

이 때는 아래와 같이 문제에서 요구하는 라이브러리를 호출하고 별칭을 설정해주면 된다.

import pandas as pd             # pandas
import numpy as np              # numpy
import sklearn as sk            # scikit-learn
import matplotlib.pyplot as plt # matplotlib
import seaborn as sns           # seaborn

2. Tabular 데이터 가져오기

pandas 라이브러리를 이용하여 json 혹은 csv 형식으로 되어 있는 파일을 가져온다.

불러온 코드를 merge 함수를 이용하여 합칠 수 있으며, 이러한 경우 함수명과 파라미터명을 제시해주기도 한다.

df_a = pd.read_json('file1.json')
df_B = pd.read_csv('file2.csv')
df = pd.merge(df_a, df_b, on='col1', how='inner')

3. 데이터의 구성 확인

데이터의 구성을 살펴보는 방법은 pandas 라이브러리의 메소드를 활용하는 방법이 있다.

아래와 같은 메소드를 사용할 수 있다.

1. 데이터프레임의 상위 데이터를 살펴보는 head()

2. 데이터프레임의 하위 데이터를 살펴보는 tail()

3. 데이터프레임의 값 중 임의로 추려서 살펴보는 sample()