본문 바로가기
반응형

전체 글166

[MUI] MUI 예제: 3. `sx` Prop을 이용한 커스터마이징 MUI 예제: 3. sx Prop을 이용한 커스터마이징MUI v5부터 도입된 sx prop은 컴포넌트에 직접 CSS를 적용하는 매우 강력한 방법입니다. 테마의 값에 접근할 수 있어 일관성을 유지하기 좋습니다.기본 사용법CSS 속성을 객체 형태로 전달합니다.import * as React from 'react';import Box from '@mui/material/Box';export default function SxProp() { return ( );}반응형 스타일링sx prop 내에서 배열을 사용하여 breakpoint별로 다른 스타일을 적용할 수 있습니다.배열의 값은 xs, sm, md, lg, xl 순서에 해당합니다.import Button from '@mui/material/Butt.. 2025. 9. 26.
[MUI] MUI 예제: 2. 레이아웃 MUI 예제: 2. 레이아웃MUI는 강력한 레이아웃 시스템을 제공합니다.Grid반응형 레이아웃을 위한 12컬럼 그리드 시스템입니다. xs, sm, md, lg, xl prop을 사용하여 breakpoint에 따른 컬럼 수를 지정할 수 있습니다.import * as React from 'react';import { styled } from '@mui/material/styles';import Box from '@mui/material/Box';import Paper from '@mui/material/Paper';import Grid from '@mui/material/Grid';const Item = styled(Paper)(({ theme }) => ({ backgroundColor: theme.pa.. 2025. 9. 26.
[MUI] MUI 예제: 1. 기본 컴포넌트 MUI 예제: 1. 기본 컴포넌트MUI는 다양한 기본 UI 컴포넌트를 제공합니다.Buttonvariant prop으로 버튼의 스타일을 지정할 수 있습니다. (contained, outlined, text)import * as React from 'react';import Stack from '@mui/material/Stack';import Button from '@mui/material/Button';export default function BasicButtons() { return ( Text Contained Outlined );}TextField표준 입력 필드입니다. label과 variant를 지정할 수 있습니다.import * as React fr.. 2025. 9. 26.
[Bootstrap] 부트스트랩 주요 기능 정리 Bootstrap 주요 기능 정리Bootstrap은 반응형, 모바일 우선 웹사이트를 빠르게 개발할 수 있도록 도와주는 세계에서 가장 인기 있는 프론트엔드 프레임워크입니다. HTML, CSS, JavaScript로 구성되어 있으며, 다양한 UI 컴포넌트와 강력한 그리드 시스템을 제공합니다.핵심 특징1. 반응형 그리드 시스템 (Grid System)Bootstrap의 가장 핵심적인 기능으로, 웹 페이지를 최대 12개의 컬럼으로 나누어 레이아웃을 구성합니다.클래스 기반: container, row, col-* 클래스를 조합하여 복잡한 레이아웃도 쉽게 만들 수 있습니다.반응형: 화면 크기(breakpoint)에 따라 레이아웃이 자동으로 변경되도록 col-sm-*, col-md-*, col-lg-* 등의 클래스를.. 2025. 9. 26.
[MUI] Material UI 주요 기능 정리 MUI (Material-UI) 주요 기능 정리MUI는 구글의 Material Design을 구현한 React UI 라이브러리입니다. 풍부하고 일관된 디자인의 컴포넌트를 제공하여 개발자가 빠르고 미려한 UI를 구축할 수 있도록 돕습니다.핵심 특징1. 포괄적인 컴포넌트 시스템MUI는 UI 개발에 필요한 거의 모든 종류의 컴포넌트를 제공합니다.Layout: Grid, Box, Container, Stack 등 반응형 레이아웃을 쉽게 구성할 수 있습니다.Inputs: Button, TextField, Select, Checkbox, Slider 등 다양한 입력 폼을 만들 수 있습니다.Navigation: AppBar, Tabs, Drawer, Menu, Breadcrumbs 등 앱의 네비게이션 구조를 담당합니.. 2025. 9. 26.
[Spring] 도서 대여 콘셉트 트랜잭션 실습과 피드백 마크다운 실습3 : 도서 대출 및 반납 트랜잭션 적용하기 [조건1] AppStart , BookController , BookService , BookMapper (DTO 선택) [조건2] 도서대출 : 1. 대출 요청 시 해당 책의 재고를 1 감소한다. 재고가 0이면 예외발생 2. 재고 감소 후 대출기록을 (등록) 처리한다. 대출기록 처리가 실패하면 예외발생 3. 예외가 발생하면 전체 SQL 실행은 rollback한다. 도서반납 : 1. 반납 요청 시 해당 책의 재고를 1 증가한다. 만약 없는 책이면 예외발생 2. 재고 증가 후.. 2025. 9. 26.
차세대 Apple, NVIDIA, Tesla를 이을 미국 기업 예측 차세대 Apple, NVIDIA, Tesla를 이을 미국 기업 예측Apple, NVIDIA, Tesla는 각자의 분야에서 혁신을 통해 시장을 재정의하고 막대한 부가가치를 창출한 기업입니다. 이들의 뒤를 이을 차세대 기업은 단순히 기술력이 뛰어난 것을 넘어, 새로운 생태계를 창조하고, 기존 산업의 패러다임을 바꾸며, 대중의 삶에 깊숙이 파고들 잠재력을 가져야 합니다.본 문서는 현재 기술 트렌드와 시장 잠재력을 바탕으로 '제2의 Apple, NVIDIA, Tesla'가 될 가능성이 있는 미국 기업들을 예측하고 그 논리를 설명합니다.1. 스페이스X (SpaceX)유사 기업: Tesla (산업의 파괴적 혁신), NVIDIA (새로운 시대의 인프라 제공)선정 논리스페이스X는 재사용 가능한 로켓 기술을 통해 우주 .. 2025. 9. 25.
퓨리오사AI의 성장성과 대한민국 AI 기술 주권 분석 퓨리오사AI의 성장성과 대한민국 AI 기술 주권 분석들어가는 말: 우리만의 'AI 밥그릇'은 튼튼한가?미국 중심의 세계 경제가 흔들릴 때 수출주도국가가 타격을 입는 것처럼, AI 기술 또한 특정 국가에 대한 의존도가 심화될 경우 국가의 안보, 경제, 사회 전반이 위협받을 수 있다는 우려는 매우 타당합니다. 이러한 관점에서 '기술 주권' 확보는 핵심 과제이며, 이는 AI 시대의 '우리 밥그릇'을 지키는 것과 같습니다. 본 문서는 이러한 문제의식을 바탕으로, 한국의 대표적인 AI 반도체 팹리스 기업 퓨리오사AI의 성장 가능성을 진단하고, 더 나아가 대한민국 AI 기술의 전반적인 현주소를 분석하여 우리가 기회와 위기 속에서 어디에 서 있는지를 조명합니다.1. AI 반도체 팹리스 '퓨리오사AI'의 잠재력과 도전.. 2025. 9. 24.
반응형

티스토리툴바