[HCI & AI] HYOZ WIKI

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..