jonbeo 님의 블로그

1. 자주 묻는 질문 (FAQ)Q1. VS Code는 무료인가요?👉 완전히 무료입니다! 오픈소스 기반이라 기업에서도 사용 가능해요.Q2. 터미널이 안 열려요.👉 Ctrl + ~ 단축키 확인!메뉴에서 [터미널 > 새 터미널] 클릭해보세요.그래도 안 될 땐 VS Code 재시작 또는 설정 초기화.Q3. 확장 프로그램이 설치가 안 돼요.👉 인터넷 연결 확인 → 좌측 메뉴의 Extensions 아이콘 클릭 → 로그 확인경우에 따라 방화벽이 막고 있을 수도 있어요.Q4. 테마가 갑자기 바뀌었어요.👉 [파일 > 기본 설정 > 테마]에서 확인 및 재설정 가능Q5. 디버깅 시작했는데 멈추질 않아요.👉 Breakpoint가 없는 경우 전체 코드가 실행됨디버깅 중지: Shift + F5 2. VS Code 실전 ..

온라인 셀러라면 매년 5월이면 찾아오는 종합소득세 신고, 꼭 해야 할 의무입니다.이번 글에서는 스마트스토어, 쿠팡, 네이버 셀러, 무신사 셀러 등 1인 사업자 또는 부업자 셀러 기준으로,종합소득세를 언제, 어떻게, 얼마를 신고해야 하는지 꼼꼼히 정리해드립니다.✅ 종합소득세란?한 해 동안 개인이 벌어들인 모든 소득을 합산하여 신고하고 세금을 납부하는 제도입니다. 사업소득(스마트스토어, 쿠팡 수익) 뿐 아니라근로소득(회사 월급), 이자소득, 배당소득, 기타소득도 합산해서 신고해야 합니다.📌 신고 대상: 개인사업자, 프리랜서, 온라인 셀러, 유튜버 등📌 신고 기간: 매년 5월 1일 ~ 5월 31일📌 납부 기한: 5월 31일까지 (연장 시 6월 말까지) ✅ 온라인 셀러는 왜 신고해야 하나요?온라인 쇼핑몰에..

온라인 셀러라면 한 번쯤은 고민해봤을 질문,“스마트스토어나 쿠팡 운영하면 4대 보험 가입해야 하나요?”이번 포스팅에서는 직장 재직 중인 셀러, 퇴사 후 셀러, 이제 막 시작한 초보 셀러 3가지 상황으로 나눠서,4대 보험 가입 여부와 건강보험 조정 방법, 예상 금액까지 실제 사례 위주로 정리해볼게요. ✅ 1. 회사 다니면서 부업으로 셀러 운영 중인 경우✅ 4대 보험 추가 가입 필요 없음→ 회사 다니는 동안엔 이미 직장가입자로 4대 보험이 처리되므로,부업으로 스마트스토어나 쿠팡을 운영해도 건강보험/국민연금 지역가입은 비대상이에요.✅ 단, 부수입이 발생하면 세무 신고는 필수→ 종합소득세 신고 시 부업 수익 포함해서 신고해야 해요.→ 세금은 더 낼 수 있지만 4대 보험에는 영향 없음. ✅ 2. 퇴사 후 전업 셀..

지금까지 MUI와 Ant Design의 기본 사용법과 커스터마이징 방법을 배워봤다면,이번엔 그걸 직접 관리자 페이지 레이아웃에 적용해보는 실습을 해볼 차례입니다.사이드바 + 상단바 + 콘텐츠 영역으로 구성된 기본적인 대시보드 틀을 구현해볼게요.✅ 구조 설계 미리보기+-------------------------------+| Header Bar |+------------+------------------+| Sidebar | Main Content |+------------+------------------+ ✅ MUI 버전 예제import { Box, AppBar, Toolbar, Drawer, Typography } from '@mui/material'..

Ant Design v5부터는 기존 Less 기반 커스터마이징 방식에서 CSS-in-JS 기반의 Token 시스템으로 바뀌었습니다.이제는 JavaScript 코드 안에서 직접 테마를 설정하고, 전역 스타일을 간편하게 커스터마이징할 수 있습니다.이번 포스팅에서는 색상, 폰트, 라운딩 등 핵심 스타일을 어떻게 내 맘대로 바꾸는지 정리해볼게요! ✅ 테마 커스터마이징 기본 구조npm install antdimport { ConfigProvider, theme } from 'antd';const customTheme = { token: { colorPrimary: '#FF6F61', borderRadius: 8, fontFamily: 'Pretendard, sans-serif', },};fun..

MUI의 강력한 장점 중 하나는 바로디자인 시스템을 손쉽게 커스터마이징할 수 있다는 점입니다.이번 포스팅에서는 createTheme()과 ThemeProvider를 활용해서전역 스타일, 색상, 폰트, 버튼 디자인 등을한 번에 관리하는 방법을 정리해보겠습니다. ✅ 기본 구조: 테마 만들기 & 적용하기import { createTheme, ThemeProvider } from '@mui/material/styles';const theme = createTheme({ palette: { primary: { main: '#FF6F61', }, secondary: { main: '#4ECDC4', }, }, typography: { fontFamily: 'Pret..

이번 포스팅에서는 **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(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..

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

이제까지 Grid의 핵심 속성들과 고급 기능들을 배워봤다면,이번엔 그걸 활용해서 반응형 카드 갤러리 레이아웃을 직접 만들어볼 차례예요!auto-fit + minmax + gap + grid-template-columns이 조합으로 깔끔하고 유연한 그리드 레이아웃을 완성할 수 있어요. ✅ 목표 레이아웃가로폭이 넓을 땐 4~5열 카드좁아지면 자동으로 3열 → 2열 → 1열로 유연하게 변신카드 간격은 gap, 크기는 minmax()로 관리 🧱 HTML 구조 1 2 3 4 5 6 🎨 CSS 스타일.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 20..