📌 My Life 140

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <icon>

위 예시 코드입니다.😉 import "./styles.css"; import React from "react"; import { AccessAlarm, Face } from "@mui/icons-material"; export default function App() { return ( ); } 프로젝트에서 아이콘 사용은 거의 필수적이죠! https://mui.com/material-ui/icons/ React Icon Component - Material UI Guidance and suggestions for using icons with MUI. mui.com 00. Icons https://mui.com/material-ui/material-icons/ Material Icons - Materia..

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <반응형 size>

간편하게 반응형 크기를 설정해봅시다! 위 예시 코드입니다. index.js import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; import "./styles.css"; import { createGlobalStyle } from "styled-components"; const GlobalStyles = createGlobalStyle` html { font-size: 62.5%; } `; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.rend..

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <font>

메테리얼 디자인의 기본 폰트는 Roboto 입니다. 이는 영문 전용 폰트이기 때문에, 따로 한국어 기본 폰트를 지정해줘야 합니다. https://fonts.google.com/specimen/Roboto Google Fonts: Roboto Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While fonts.google.com 00. 한국계 Roboto 기본 폰트 https://fonts.google.com/noto/specimen/Noto+Sans+KR Google Fonts:..

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 theme를 커스터마이징하기>

https://mui.com/material-ui/customization/theming/ Theming - Material UI Customize MUI with your theme. You can change the colors, the typography and much more. mui.com theme를 정의하면, 컴포넌트를 만들 때마다 일일이 색이나 폰트 등을 지정해줄 필요없이 본인이 지정한 테마대로 바로 사용가능합니다. 이를 이용해 light, dark모드를 간편하게 설정할 수도 있고, 편하게 일관성을 지킬 수 있습니다.🤩🤩 00. 메테리얼 디자인 theme 기본값 https://mui.com/material-ui/customization/default-theme/ Default theme ..

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 theme에서 컴포넌트 커스터마이징하기>

기본 컴포넌트를 사용하는 방법에 대한 설명입니다. 🔥 https://avoc-o-d.tistory.com/43 [Material Design] Material-UI(MUI)로 react & styled component 사용하기 https://mui.com/material-ui/getting-started/overview/ 컴포넌트들은 왼쪽 사이드바에서 Components에 있습니다. 🎆 00. 컴포넌트 사용하기 예를 들어, 버튼을 사용하고 싶을 때 Button 으로 들어갑니다. https.. avoc-o-d.tistory.com 00. Styled Component styled 할 컴포넌트를 import 합니다. (저는 예를 들어 버튼을 import 하겠습니다!) 그리고 styled를 하기 위해, st..

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 컴포넌트 사용하기>

https://mui.com/material-ui/getting-started/overview/ 컴포넌트들은 왼쪽 사이드바에서 Components에 있습니다. 🎆 00. 컴포넌트 사용하기 예를 들어, 버튼을 사용하고 싶을 때 Button 으로 들어갑니다. https://mui.com/material-ui/react-button/ React Button component - Material UI Buttons allow users to take actions, and make choices, with a single tap. mui.com 각 버튼들을 어떻게 사용할 수 있는지에 대해 소개되어 있습니다. 현재는 핵심적인 부분만 간단하게 코드로 보여주고 있지만, 더 자세하게 보기 위해선 해당 (Show the..

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <MUI소개 & npm 설치>

- 본 메테리얼 디자인 소개는 Material Design 2 를 기준으로 작성했습니다. 😄 (3은 web 릴리즈 개발 진행 중이라서!) https://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. material.io 00. Material-UI(MUI) 란? https://mui.com/ MUI: The React component library you always wanted MUI provides a s..

20220909 - 추석🍅

2022년은 추석이 9월 9,10,11 인 덕분에 9일 ~ 12일 동안의 긴 연휴가 생겨따 이 중 9일날, 바로 오늘 있었던 일을 끄적이려 한다. 어,, 사실 저번 달엔.,. 기차표 티켓팅이 있었다. 꼭 8일날 출발해야겠다는 마음으로 기차표를 예매하려는데 8월 16~18일 동안 열리고, 심지어 16일은 IT 취약계층을 위해 열린 날이어서 꼭 17일날 성공했어야 했다. 근데 까먹고 놓쳐ㅂ..ㅓ리.ㅁ......(사실 까먹음) 어,,,,,,,,,, 안돼,,,.. 추석 때 혼자 있으면 안 된다!!!는 간절한 마음으로 버스를 예매하려고 보니, 생각보다 텅텅 비어있어서 안심하고 예매했다. 😄 덕분에 ! 어제 오후 11시쯤에 집에 무사히 도착^~^ 새벽동안엔 9일날 오전엔 제삿상에 올리기 위한 전을 부치고, 오후엔 ..

백준 - 2056 : 작업

https://www.acmicpc.net/problem/2056 2056번: 작업 수행해야 할 작업 N개 (3 ≤ N ≤ 10000)가 있다. 각각의 작업마다 걸리는 시간(1 ≤ 시간 ≤ 100)이 정수로 주어진다. 몇몇 작업들 사이에는 선행 관계라는 게 있어서, 어떤 작업을 수행하기 위해 www.acmicpc.net 연산 - 최소시간을 구하는 문제이기 때문에, dp를 갱신할 때 max로 해주어야 한다. - 모든 작업이 끝났을 때의 최소시간으로 갱신을 해주어야 한다. queue 가 비었을 때 즉, 모든 작업이 끝났을 때의 바로 직전의 for문으로 들어가기 전 시점에서 갱신을 한다. 그렇게 된다면, 다음에 탐색할 node는 없으니까 이 시점이 마지막 작업이 된다. #include #include #inc..

백준 - 1516 : 게임 개발

https://www.acmicpc.net/problem/1516 1516번: 게임 개발 첫째 줄에 건물의 종류 수 N(1 ≤ N ≤ 500)이 주어진다. 다음 N개의 줄에는 각 건물을 짓는데 걸리는 시간과 그 건물을 짓기 위해 먼저 지어져야 하는 건물들의 번호가 주어진다. 건물의 번호는 1부 www.acmicpc.net 입력 i번째 건물이 지어지기 위해 먼저 지어져야하는 건물을 입력할 때, -1이 들어오면 바로 입력에서 빠져나와야 한다. 연산 - 이 문제에서 위상정렬과 함께 DP를 활용할 때엔, 초기화해주는 단계에서 각 건물의 dp엔 각 건물이 지어지기 위한 시간으로 초기화 해준다. 누적되는 시간을 구하기 위함이다. - 다음 노드를 탐색할 때, max로 갱신을 해준다. * 최소 시간 = 건물을 동시에 ..