jonbeo 님의 블로그

안녕하세요 😊웹페이지에서 공지사항, 이미지 확대, 로그인 창 등을 띄울 때모달 팝업은 정말 자주 사용됩니다.이번 글에서는 jQuery로 간단하게 모달 팝업을 구현하는 방법을 단계별로 안내드립니다.📍 1. 기본 HTML 구조모달 열기 × 모달 제목 여기에 내용을 작성하세요. .modal : 모달 전체 영역 (기본적으로 숨김).modal-content : 팝업 내부 내용.close : 닫기 버튼📍 2. CSS 스타일.modal { display: none; /* 기본 숨김 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0..

안녕하세요 😊웹페이지를 구성할 때 메뉴, 사이드바, 보조 정보 영역을 만들다 보면“이건 로 해야 하나, 로 해야 하나?” 고민되는 경우가 있습니다.두 태그는 비슷해 보이지만 의미와 목적이 다릅니다.이번 글에서는 와 의 차이, 사용 예시, 접근성 팁을 정리해보겠습니다.📍 1. 태그란?페이지의 보조 콘텐츠를 나타내는 태그메인 콘텐츠와 직접적인 관련은 없지만 참고·보조 정보 제공사이드바, 광고 영역, 관련 글 목록, 인용구 등에 사용예시 관련 글 HTML5 시맨틱 태그 정리 CSS Flexbox 완벽 가이드 📌 특징메인 콘텐츠 흐름과 독립적메인 영역 외에도, 글 안의 참고 자료·팁 상자도 가능📍 2. 태그란?페이지나 사이트 내의 탐색 링크 집합을 나타냅니다.메뉴, 카테고리, 목..

안녕하세요 😊React를 사용하다 보면“이 계산은 매번 다시 하지 않아도 되는데…”“렌더링이 되어도 이 값은 유지하고 싶다…”이럴 때 유용한 Hook이 바로 **useMemo**와 **useRef**입니다.이번 글에서는 두 Hook의 차이점과실무에서 어떻게 활용할 수 있는지 예제와 함께 정리해드리겠습니다.📍 1. useMemo – 계산 결과 메모이제이션기본 개념의존성 배열이 변할 때만 함수를 실행하고, 그 외에는 이전 계산값을 재사용 예제import { useMemo, useState } from "react";export default function ProductList({ products }) { const [filter, setFilter] = useState(""); const filte..

안녕하세요 😊비동기 처리(Asynchronous)는 현대 JavaScript 개발에서 빼놓을 수 없는 핵심 개념입니다.특히 API 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업을 효율적으로 다루기 위해Promise와 async/await는 필수 문법입니다.이번 글에서는 초보자도 쉽게 이해할 수 있도록Promise → async/await 변환과 실무에서 깔끔하게 쓰는 패턴을 정리해보겠습니다.📍 1. Promise 기본 구조function getData() { return new Promise((resolve, reject) => { setTimeout(() => resolve("데이터 로드 완료"), 1000); });}getData() .then((res) => console.log(..

안녕하세요 😊Git을 쓰다 보면 “이 코드 누가, 언제, 왜 변경했지?”라는 궁금증이 생길 때가 많죠.그럴 때 강력한 힘을 발휘하는 VS Code 확장 프로그램이 바로 GitLens입니다.GitLens는 단순한 Git 플러그인이 아니라,코드 히스토리·기여자·변경 이유까지 상세하게 보여주는 Git 슈퍼툴입니다.📍 1. GitLens란?VS Code 전용 Git 확장 프로그램커밋 히스토리, 기여자 정보, 변경 이력 등을 IDE 안에서 바로 확인Blame 주석으로 해당 줄의 마지막 수정자·수정 시점 표시코드 비교, 파일 이력 탐색, 커밋 검색까지 지원📍 2. 설치 방법VS Code 왼쪽 Extensions(확장) 패널 클릭GitLens — Git supercharged 검색설치 후 VS Code 재시작상..

안녕하세요 😊이번 글에서는 실무에서 가장 많이 쓰는 SCSS 핵심 문법 6가지를 한 번에 정리해보겠습니다.예제 위주로 설명드리니, 그대로 복붙해서 사용하셔도 됩니다!1) 변수(Variables) – 테마/반복 값 관리에 필수$primary: #1abc9c;$radius: 12px;.button { background: $primary; border-radius: $radius;}색상, 간격, 라운드 값 등 재사용 값을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.2) 중첩(Nesting) – 구조가 보이는 SCSS.card { padding: 16px; .title { font-weight: 700; } .desc { color: #666; } &:hover { box-shadow: 0..

안녕하세요 😊HTML5에서는 문서 구조를 더 명확히 하기 위해 의미론적(Semantic) 태그들이 있습니다.그중에서도 과 은 초보자들이 헷갈리기 쉬운 태그인데요,이번 글에서 차이점과 올바른 활용 방법을 쉽게 정리해드리겠습니다.📍 1. 태그란?문서의 주제별 구역을 나누는 태그제목(~)과 함께 쓰이는 경우가 많음같은 주제의 콘텐츠를 묶어 구조적으로 표현할 때 사용예시 회사 소개 우리 회사는 2020년에 설립되었습니다... 📌 포인트주제별 덩어리 구분여러 이 모여 문서를 구성📍 2. 태그란?독립적으로 배포하거나 재사용 가능한 콘텐츠를 나타냄기사, 블로그 글, 포럼 글, 댓글, 제품 카드 등에 사용예시 HTML5 태그 가이드 이 글에서는 HTML5 구조 태그에 대해 설명합니다... 📌 포인트..

안녕하세요 😊사업을 시작하거나 확장할 때 가장 먼저 고민하는 것이 사무실 임대입니다.하지만 겉모습만 보고 계약했다가사업자 등록이 안 되거나, 예상치 못한 비용이 발생하는 경우도 많습니다.이번 글에서는 사무실 계약 전에 꼭 확인해야 할 핵심 체크리스트를 정리해드리겠습니다.📍 1. 건물 용도 확인 (사업자 등록 가능 여부)건축물대장에서 건물 용도를 확인하세요.사업 목적에 맞는 용도(예: 2종 근린생활시설, 업무시설 등)여야 사업자 등록이 가능합니다.1종 근린생활시설, 주택 전용 면적은 업종 제한이 많으니 주의하세요.📍 2. 임대차 계약 조건 명확히보증금, 월세, 관리비, 부가세 포함 여부계약 기간 및 중도 해지 조건보증금 반환 조건 (특약으로 명확히)월세 인상률 제한 규정(상가건물 임대차보호법) 확인?..

안녕하세요 😊이번 글에서는 jQuery를 사용해 탭(Tab) 메뉴를 만들어보겠습니다.탭 메뉴는 한 화면에서 콘텐츠를 구분해 보여줄 때 가장 많이 쓰이는 UI 패턴입니다.기본 구조 → 스타일 → jQuery 로직 순서로 차근차근 진행하고,마지막엔 접근성(ARIA) 과 애니메이션/딥링크(해시) 까지 확장해보겠습니다.1) 기본 HTML 마크업탭은 보통 탭 버튼 목록 + 패널 영역으로 이루어집니다. 공지사항 이벤트 FAQ 공지사항 내용… 이벤트 내용… FAQ 내용…role, aria-* 속성으로 스크린리더에서도 의미가 전달되도록 합니다.처음에는 첫 번째 패널만 보이고, 나머지는 hidden 처리합니다.2) 기본 CSS 스타일보기 좋고, 클릭 영역이 넉넉한 탭을 만듭니다..tabs { display..

안녕하세요 😊이번 글에서는 React 18 이후 도입된 동시성(Concurrency) 관련 Hook인 **useTransition**을 알아보겠습니다.useTransition은 덜 중요한 상태 업데이트를 **비동기 전환(transition)**으로 표시하여, 사용자의 타이핑/클릭 같은 긴급한 인터랙션이 느린 렌더링에 막히지 않도록 도와줍니다.1) useTransition 한 줄 정의긴급도 낮은 업데이트를 “전환”으로 표시해, UI가 끊기지 않게 만드는 Hook반환값: [isPending, startTransition]isPending: 전환 중인지 여부 (로딩 스피너, 로딩 텍스트 등에 활용)startTransition(cb): cb 안의 상태 업데이트를 낮은 우선순위로 실행2) 언제 쓰면 좋은가요?검..