jonbeo 님의 블로그

안녕하세요 😊사무실을 구하실 때 공인중개사로부터 “여긴 근린생활시설이고, 저 건물은 업무시설이에요”라는 말을 자주 들으셨을 겁니다.처음 접하는 분들은 “둘 다 그냥 사무실 아닌가?” 하고 헷갈리실 수 있는데요. 사실 근린생활시설과 업무시설은 건축법상 전혀 다른 개념이며,특히 사업자 등록 가능 여부와 실제 사용 목적에서 큰 차이가 있습니다. 오늘은 두 시설의 차이, 장단점, 그리고 계약 전 꼭 확인해야 할 포인트까지 꼼꼼하게 알려드리겠습니다.📍 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 등 통합 제..

안녕하세요 😊웹에서 이미지를 넣을 때, 단순히 태그만 사용하는 경우가 많습니다.하지만 HTML5에서는 이미지와 그 설명(캡션)을 구조적으로 묶어 표현할 수 있는와 태그를 제공합니다. 이 태그들을 올바르게 사용하면접근성(Accessibility) 강화SEO(검색엔진 최적화) 개선코드 가독성 향상등의 효과를 얻을 수 있습니다.📍 1. 란?이미지, 코드 스니펫, 차트 등 독립적인 콘텐츠 블록을 나타내는 태그문서의 주 흐름에서 분리되어도 의미가 유지됨내부에 을 함께 쓸 수 있음기본 예제 📍 2. 란? 내부 콘텐츠에 대한 **설명(캡션)**을 제공하는 태그 내부에서 첫 번째나 마지막 위치에 배치 가능예제 서해안에서 촬영한 아름다운 노을📍 3. 시각 + 접근성 모두 챙기는 방법alt 속성 → 화면..

안녕하세요 😊React 프로젝트가 커질수록 초기 로딩 속도가 느려지는 문제를 겪게 됩니다.이럴 때 효과적인 방법이 바로 **코드 스플리팅(Code Splitting)**입니다. React는 기본적으로 import로 컴포넌트를 불러오지만,필요할 때만 해당 컴포넌트를 로드하도록 설정하면 초기 번들 크기를 줄일 수 있습니다.이때 사용하는 것이 **React.lazy()**와 ****입니다.📍 1. React.lazy()란?컴포넌트를 **지연 로딩(Lazy Loading)**하는 함수해당 컴포넌트가 실제로 필요할 때만 로드 → 초기 번들 크기 감소기본 문법const MyComponent = React.lazy(() => import("./MyComponent"));📍 2. Suspense란?lazy로 로드..

안녕하세요 😊웹 개발에서 날짜와 시간을 다루는 일은 정말 많습니다.게시글 작성일, 이벤트 마감일, 예약 시간 표시 등다양한 기능에서 JavaScript Date 객체는 필수적으로 사용됩니다.이번 글에서는 날짜·시간 생성, 포맷 변환, 계산, 국제화 처리까지Date 객체의 핵심 기능을 정리해보겠습니다.📍 1. Date 객체 생성하기// 현재 날짜·시간const now = new Date();console.log(now);// 특정 날짜·시간const specificDate = new Date("2025-08-11T10:30:00");console.log(specificDate);// 연, 월, 일 지정 (월은 0부터 시작 → 0=1월)const customDate = new Date(2025, 7, 1..