[HCI & AI] HYOZ WIKI

1. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.npm i -g react-scriptsreact-scripts가 설치되어 있지 않아 발생한 문제로 npm install을 수행해주면 된다.  2. Error: Cannot find module 'react'npm i react react-domreact가 설치되지 않아 발생한 문제로 마찬가지로 react, react-dom을 설치해주면 된다.

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 designhttps://m3.material.io/ Material DesignBuild beautiful, usable pro..

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

React는 SPA(Single Page Application)으로, 하나의 페이지를 동적으로 활용하여 웹 페이지를 구성하는 방식을 의미한다. 사용자의 동작에 대해 자원을 동적으로 관리하여 효율적으로 기능하도록 하는 것이 목적이다.따라서 React는 URL 마다 새로운 페이지를 호출하는 것이 아니라, Router를 통해 변경될 부분의 코드만 불러온다. 이 때 사용하는 React Router는 여러 종류가 있지만, 우리는 BrowserRouter 라이브러리를 활용하려고 한다.이 라이브러리를 사용하기 위해서 아래 코드를 터미널에 실행하여 설치하여 준다.npm i -s react-router-dom 그리고 index.js 에서 코드를 로 감싸준다.index.js 코드의 전체 코드를 확인해보면 아래와 같다.i..

이 글에서는 프로젝트의 개요, 본격적인 개발을 진행하기에 앞서 어떻게 내용을 구성하고 설계하였는지에 대해 간단히 기술하였다. 또한 대시보드 구현을 하면서 중요한 부분은 무엇이었는지, 그 결과 내가 배우고 느낀 것이 무엇이었는지에 대해 정리해보았다. 상세 개발 내용에 대해서는 이 글에 담기엔 글이 너무 길어질 것 같아 별도 포스팅을 게시한다.  1. 프로젝트 개요(1) 프로젝트의 목적 및 나의 역할이 글은 KT 에이블스쿨 수업의 마지막 단계인 빅프로젝트에 대한 내용을 기재하기 위해 작성되었다.나는 팀장으로 전체 프로젝트 흐름에 대해 설계하고, 프론트와 데이터 분석, AI 모델링을 중점으로 진행한다. (2) 현재 상황지난 주에 팀원들과 함께 요구사항 및 UI/UX 설계서 작성을 포함하여 전체 프로젝트를 설계..

목차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를 설치한다. 별도로 클릭할 것 없이 동의하고 모두 Next 버튼을 눌러준다.Installation 버튼까지 눌렀다면 설치가 진행되고 있는 상황이 Status bar로 나타날 것이다.모두 설치가 끝난 후 Finish 버튼을 눌려주면 Node.js 설치는 완료되었다.https://nodejs.org/en/ Node.js — Run JavaScript Ever..

AI 모델링 및 모델 평가 파트는 총 4~5문항으로 구성되며, 전체 배점은 총 40점이다. 가장 큰 배점을 가진다.상세 항목은 아래와 같이 구성되어 있다.1. Scikit-learn, Tensorflow 등을 활용하여 머신러닝/딥러닝 모델링2. 모델 성능 평가 및 그래프 출력 이번 게시물에서는 1번 내용과 2번 내용을 함께 정리해보도록 한다.총 두 개의 모델을 만들기 때문에, 다양한 모델을 생성 및 학습시킬 수 있어야 한다.  1. 머신러닝/딥러닝 모델링 및 성능평가(1) 의사결정나무 (Decision Tree): 회귀 모델 - MAE(Mean Absolute Error)from sklearn.tree import DecisionTreeRegressorfrom sklearn.metrics import m..

데이터 분석 파트는 총 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_splitX_..

데이터 분석 파트는 총 4~5문항으로 구성되며, 전체 배점은 데이터 탐색 파트와 동일하게 30점이다.상세 항목은 아래와 같이 구성되어 있다.1. 데이터 시각화 (상관분석 등) 2. 데이터 전처리 (결측치 처리, 라벨 인코딩/원핫 인코딩)3. xy 데이터 분리4. 데이터 정규분포화5. 표준화 이번 글에서는 1, 2를 중점적으로 정리하였다. 1. 데이터 시각화시각화 방법은 다양하므로, 샘플 문제에서 등장한 메소드를 중심으로 살펴보겠다. (1) 데이터 개수의 분포를 보여주는 countplot 그래프import seaborn as snssns.countplot(x='col1', data=df)  (2) 두 변수의 분포와 관계를 함께 나타내는 jointplot 그래프import seaborn as snssns.j..

데이터 탐색 파트는 총 5~6문항으로 구성되며, 전체 배점은 30점이다.상세 항목은 아래와 같이 구성되어 있다.1. 필요한 라이브러리 설치2. Tabular 데이터 가져오기3. 데이터의 구성 확인 AICE에서 제공하는 샘플 문제를 기반으로 하여 데이터 탐색 파트 풀이 방법을 구체적으로 알아보자.  1. 필요한 라이브러리 설치pandas, numpy, sklearn, matplotlib, seaborn 등 필요한 라이브러리를 import 하고 별칭을 할당하는 문제가 등장한다.이 때는 아래와 같이 문제에서 요구하는 라이브러리를 호출하고 별칭을 설정해주면 된다.import pandas as pd # pandasimport numpy as np # numpyimpor..