jonbeo 님의 블로그

Ant Design 설치부터 버튼·테이블·폼까지 – 실전으로 배우는 기본 컴포넌트

이번 포스팅에서는 **Ant Design(antd)**의 기본 사용법을 소개합니다.MUI보다 Business UI에 강하고, 기능이 풍부해서관리자 페이지나 백오피스 제작에 많이 사용되는 프레임워크입니다.지금부터 설치부터 실전 예제까지 한 번에 살펴볼게요! ✅ antd 설치하기npm install antd 그리고 스타일을 직접 import 해줘야 합니다:import 'antd/dist/reset.css'; // v5 기준 ✅ 1. Button 사용해보기import { Button } from 'antd';function App() { return ( Primary Default Dashed Text );} 타입설명primary강조 버튼default일반..

MUI 설치부터 버튼·카드·모달까지 – 실습으로 배우는 기본 컴포넌트

MUI(Material UI)는 리액트에서 가장 많이 쓰이는 UI 프레임워크 중 하나입니다.이번 포스팅에서는 MUI를 설치하고,실제로 자주 사용하는 버튼, 카드, 모달 컴포넌트를 직접 다뤄보며 사용법을 익혀보겠습니다. ✅ MUI 설치하기npm install @mui/material @emotion/react @emotion/styled💡 MUI는 Emotion을 기본 스타일 엔진으로 사용하기 때문에 위 세 개를 함께 설치해야 합니다. ✅ 1. MUI 버튼 사용해보기import Button from '@mui/material/Button';function App() { return ( Contained Outlined Text );} 타입설명contained..

MUI vs Ant Design – 어떤 UI 라이브러리를 선택해야 할까?

리액트로 프로젝트를 하다 보면 가장 먼저 부딪히는 고민,“UI 라이브러리를 뭘 쓸까?” 입니다. 대표적인 두 가지는 바로MUI(Material UI) 와 Ant Design(antd) 이번 포스팅에서는이 두 라이브러리를 기능, 디자인, 학습 난이도, 생태계 등 기준으로 비교해보고,어떤 프로젝트에 어떤 선택이 더 적합한지 정리해볼까 합니다. ✅ MUI(Material UI)란?구글의 Material Design 가이드라인을 기반으로 만들어진 UI 프레임워크빠르고 직관적인 컴포넌트 구성공식 웹사이트: https://mui.com장점컴포넌트 스타일이 모던하고 깔끔Theme 커스터마이징이 강력함TypeScript 지원이 뛰어남단점Material Design에 익숙하지 않으면 다소 낯설게 느껴질 수 있음일부 고급..

React를 공부하다 보면 fetch로 JSON 데이터를 가져온다, props로 JSON 넘긴다 이런 말들을 자주 보게 됩니다.처음엔 “그 JSON이라는 게 도대체 뭐지?” 하고 막막하셨을 거예요.이번 포스팅에서는 JSON이 뭔지, 왜 React에서 자주 쓰이는지, 그리고 실제로 어떻게 사용하는지 예제를 통해 하나씩 살펴보겠습니다.✅ JSON이란?**JSON(JavaScript Object Notation)**은 데이터를 주고받을 때 사용하는 가벼운 텍스트 형식입니다.간단하게 말하면, 정보를 담기 위한 약속된 문장 구조예요.{ "name": "홍길동", "age": 28, "isStudent": false} 위처럼 중괄호 {} 안에 "key": value 쌍으로 이루어진 데이터 구조를 JSON이라고..