jonbeo 님의 블로그

안녕하세요 😊다국어·다지역 서비스를 만들 때는 날짜/숫자/통화 표기가 국가마다 다릅니다.Intl 네임스페이스는 이를 손쉽게 처리하는 표준 국제화 API입니다.1) 날짜/시간 – Intl.DateTimeFormat const d = new Date("2025-09-04T14:30:00Z");const ko = new Intl.DateTimeFormat("ko-KR", { dateStyle: "long", timeStyle: "short", timeZone: "Asia/Seoul"}).format(d);// 예: 2025년 9월 04일 오후 11:30const us = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month:..

안녕하세요 😊온라인 판매를 시작하려는 분들이 자주 물어보는 질문 중 하나가 바로“창고 건물을 임대해서 스마트스토어 사업자 등록이 가능할까?” 입니다. 상품을 보관하려면 창고가 필요하고, 사무실 임대료를 아끼려는 분들은“그냥 창고 주소로 사업자 등록하면 되지 않나?” 하고 생각하시는데요.결론부터 말씀드리면, 순수 창고 용도로만 등록된 건물은 사업자 등록이 거의 불가능합니다. 오늘은 그 이유와 예외, 해결 방법까지 정리해드리겠습니다.📍 1. 창고 건물의 법적 용도건축법상 창고시설은 물품을 보관하기 위한 건물입니다.대표적으로 택배 물류창고, 보관 창고, 물류센터 등이 이에 해당됩니다.즉, “사무 업무”나 “전자상거래업”과는 전혀 관련이 없습니다.👉 따라서 건축물대장에 ‘창고시설’로만 등록된 건물은세무서에..

안녕하세요 😊HTML5에서는 날짜와 시간을 시맨틱하게 표현할 수 있도록 태그를 제공합니다.이 태그는 브라우저, 검색 엔진, 보조기기(Screen Reader) 등이 날짜/시간 정보를 정확히 인식할 수 있게 합니다.📍 1. 기본 문법2025년 9월 03일datetime 속성: ISO 8601 형식으로 날짜·시간을 지정 (YYYY-MM-DD, HH:MM:SS)태그 안의 내용: 사용자가 읽기 쉬운 형식으로 표시📍 2. datetime 속성 값 형식 유형 예시 설명 날짜2025-09-03연-월-일시간05:30시:분 (24시간제)날짜+시간2025-09-03T05:30연-월-일 + 'T' + 시:분주2025-W33연-주차월2025-09연-월📍 3. 실제 예제A. 블로그 게시일 게시일: 2025년 9월 ..

안녕하세요 😊사무실을 구하실 때 공인중개사로부터 “여긴 근린생활시설이고, 저 건물은 업무시설이에요”라는 말을 자주 들으셨을 겁니다.처음 접하는 분들은 “둘 다 그냥 사무실 아닌가?” 하고 헷갈리실 수 있는데요. 사실 근린생활시설과 업무시설은 건축법상 전혀 다른 개념이며,특히 사업자 등록 가능 여부와 실제 사용 목적에서 큰 차이가 있습니다. 오늘은 두 시설의 차이, 장단점, 그리고 계약 전 꼭 확인해야 할 포인트까지 꼼꼼하게 알려드리겠습니다.📍 1. 근린생활시설이란?생활과 밀접한 업종이 들어갈 수 있는 건물 용도입니다.건축법 시행령에 따라 1종·2종 근린생활시설로 나뉩니다.1종 근린생활시설 예시소규모 점포(편의점, 세탁소, 미용실)슈퍼마켓독서실, 작은 학원일반 음식점(일부)2종 근린생활시설 예시대형 음..

안녕하세요 😊오늘은 ES6에서 도입된 컬렉션 객체 **Map**과 **Set**을 정리해보겠습니다.Map은 키-값 저장소, Set은 중복 없는 값 집합으로, 기존 Object와 Array의 한계를 보완합니다.실무 예제와 함께 “언제 어떤 걸 써야 하는지”까지 알아보겠습니다.1) Map 한눈에 보기 – “모든 타입을 키로 쓰는 해시 맵”특징키에 어떤 타입이든 사용 가능(객체, 함수, NaN 포함)삽입 순서 보장크기: map.size반복: for...of, map.forEach() // 생성 & 기본 메서드const m = new Map();m.set('name', 'Kim');m.set({ id: 1 }, 'object-key');m.set(NaN, 'not-a-number');console.log(m...

안녕하세요 😊웹 개발에서 사용자의 데이터를 브라우저에 저장하는 기능은 매우 유용합니다.로그인 상태 유지, 장바구니 저장, 사용자 환경 설정 등이 대표적인 예입니다.이때 웹 스토리지(Web Storage) API인 localStorage와 sessionStorage를 사용하면간단하게 데이터를 저장하고 불러올 수 있습니다.📍 1. localStorage vs sessionStorage 차이 특징 localStorage sessionStorage 저장 기간브라우저를 닫아도 유지브라우저 탭을 닫으면 삭제저장 범위모든 탭·창에서 공유현재 탭에서만 유지용량약 5~10MB약 5~10MB데이터 형식문자열만 저장 가능문자열만 저장 가능 📍 2. 기본 사용법// 저장localStorage.setItem("user..

안녕하세요 😊React 컴포넌트가 렌더링될 때,값을 계산하는 로직이 복잡하거나 무거우면 매번 연산이 반복되어 성능이 저하될 수 있습니다.이럴 때 useMemo Hook을 사용하면 필요할 때만 연산을 실행하고 결과를 재사용할 수 있습니다.📍 1. useMemo란?메모이제이션(Memoization) 기능을 제공하는 React Hook**의존성(dependencies)**이 변경될 때만 콜백 함수를 다시 실행복잡한 계산, 큰 데이터 변환, 필터링, 정렬 등에 유용문법const memoizedValue = useMemo(() => { // 계산 로직 return 결과값;}, [의존성]);📍 2. 기본 예제import React, { useMemo, useState } from "react";export..

안녕하세요 😊웹 개발에서 서버와 데이터를 주고받는 일은 아주 흔합니다.예전에는 XMLHttpRequest를 사용했지만,이제는 더 간단하고 직관적인 fetch() API가 표준으로 자리 잡았습니다.이번 글에서는 fetch() API의 기본 사용법부터에러 처리, JSON 변환, POST 요청, async/await 활용까지 정리해보겠습니다.📍 1. 기본 사용법fetch("https://jsonplaceholder.typicode.com/posts/1") .then(response => response.json()) // JSON 변환 .then(data => console.log(data)) .catch(error => console.error("에러 발생:", error)); 📌 특징첫 번째 인..

안녕하세요 😊CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.📍 1. CSS 변수란?CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능--변수명 형식으로 선언, var(--변수명)으로 사용변수의 스코프(범위) 설정 가능📍 2. 기본 문법:root { --main-color: #4CAF50; --font-size-lg: 20px;}h1 { color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에 변수를 적용하는 전역 범위변수명은 ..

안녕하세요 😊UI/UX 디자인 도구인 Figma는 다양한 플러그인을 통해 기능을 확장할 수 있습니다.올바른 플러그인을 선택하면 작업 속도와 효율이 크게 향상됩니다.이번 글에서는 실무에서 자주 쓰이는 Figma 플러그인 5개를 추천드리겠습니다.📍 1. Unsplash – 고품질 무료 이미지 삽입기능: Unsplash의 무료 스톡 이미지를 바로 Figma에 삽입장점: 상업적 이용 가능, 검색 기능 제공활용 예시: 목업 제작, 배너 디자인, 프레젠테이션 시안📌 설치: Figma → Plugins → "Unsplash" 검색📍 2. Iconify – 100,000개 이상의 아이콘 라이브러리기능: 다양한 스타일의 아이콘을 검색·삽입 가능장점: Material Icons, Font Awesome 등 통합 제..