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

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