jonbeo 님의 블로그

반응형 웹디자인 ✅ 모바일 퍼스트 전략과 실무 설계법

요즘 웹사이트는 모바일 사용률이 70% 이상입니다.그래서 이제는 “데스크탑 기준으로 줄여가는 방식”이 아니라👉 모바일 기준으로 확장해가는 설계 (Mobile First) 가 표준입니다.🌱 1. 모바일 퍼스트란?모바일 퍼스트(Mobile First) 는 디자인과 개발을 “가장 작은 화면”에서 시작하여,점점 화면이 커질 때마다 스타일을 확장하는 접근 방식입니다. 📌 핵심 개념:❌ “큰 화면을 줄이는 것” → ✅ “작은 화면을 확장하는 것”📏 2. 기본 단위 설계 – 뷰포트 기준 html { font-size: 16px; /* 기준 단위 */}.container { width: 100%; max-width: 1200px; margin: 0 auto;} 📌 모바일에서는 항상 100% 기반 레이아..

CSS Grid는 2차원(행 + 열) 레이아웃을 완벽하게 제어할 수 있는 강력한 도구입니다.이 포스팅에서는 단순한 정렬을 넘어서, 실무에서 자주 쓰는 패턴 예시를 소개해봅니다.🧱 1. 기본 레이아웃 패턴 (Header / Main / Aside / Footer) Header Sidebar Main Footer​ .grid-layout { display: grid; grid-template-areas: "header header" "aside main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr 60px; gap: 10px;}header { grid-area: header;..

기존 pages/ 라우터와 달리, App Router는 디렉터리 구조 자체가 라우팅 규칙이 됩니다.app/ 디렉토리 안의 폴더마다 페이지, 레이아웃, 로딩, 에러 처리, 메타데이터를 담당하는 파일이 존재하죠.🧩 1. App Router 기본 구조 app/ ├─ layout.tsx # 공통 레이아웃 ├─ page.tsx # 루트 페이지 ├─ loading.tsx # 로딩 상태 ├─ error.tsx # 에러 페이지 ├─ about/ │ ├─ page.tsx # /about │ ├─ layout.tsx # about 전용 레이아웃 │ ├─ loading.tsx # about 로딩 UI │ └─ error.ts..

오늘은 자바스크립트(JavaScript)를 활용한 시간 제어 함수인setTimeout과 setInterval에 대해 자세히 알아보겠습니다.이 두 함수는 웹 개발 실무에서 매우 자주 사용되며,타이머 관련 기능을 구현할 때 유용하게 활용됩니다.✅ 1. setTimeout이란?setTimeout은 일정 시간이 지난 후에 단 한 번 특정 작업을 실행하도록 예약하는 함수입니다. setTimeout(() => { console.log('3초 후에 실행됩니다!');}, 3000); 📌 위 코드는 3초(3000ms) 후에 콘솔에 메시지를 출력합니다.✅ 2. setInterval이란?setInterval은 일정 시간 간격으로 계속 반복해서 특정 작업을 실행하도록 예약하는 함수입니다. setInterval(() => ..

React로 만든 SPA(Single Page Application)는 기본적으로 클라이언트 렌더링(CSR) 방식입니다.하지만 이 방식은 SEO, 초기 로딩 속도에서 한계가 있었죠.Next.js는 이런 단점을 보완하기 위해 다양한 렌더링 옵션을 제공합니다 👇💻 1. CSR (Client-Side Rendering)📌 렌더링 위치 → 브라우저(클라이언트)📌 예시 → 순수 React 앱 (create-react-app) function App() { const [data, setData] = useState(null); useEffect(() => { fetch("/api/data").then(res => res.json()).then(setData); }, []); return {dat..

Git은 단순한 버전 관리 도구가 아니라,시간을 되돌리고, 수정 내역을 재정렬하고, 다른 브랜치에서 필요한 커밋만 뽑아올 수 있는 아주 강력한 시스템입니다.이번엔 실무에서 자주 쓰이는 3대 명령어를 깔끔하게 정리해보겠습니다 👇🌱 1. git rebase – 커밋 이력 정리의 왕✅ 개념rebase는 커밋을 다른 브랜치 위로 옮겨 붙이는 명령입니다.즉, 브랜치의 시작점을 새로 정리해서 커밋 히스토리를 깔끔하게 만듭니다.📌 예시 # main 브랜치 최신 커밋으로 feature 브랜치 재배치git checkout featuregit rebase main 👉 결과:main의 최신 커밋 이후에 feature 커밋들이 재정렬됨. 📌 주의: 이미 공유된 브랜치(rebase 후 push) 는 충돌을 유발할 수 ..

VS Code는 기본 상태로도 훌륭하지만,필요한 확장 프로그램을 잘 설치하면 생산성, 코드 품질, 디자인 감각까지 모두 향상됩니다.2025년 기준으로 실무 프론트엔드 개발자들이 가장 많이 쓰는 플러그인 10가지를 소개합니다 👇⚡ 1. ESLint🧠 코드 품질 관리 필수자바스크립트 문법, 포맷 오류 자동 검출npm install eslint --save-dev.eslintrc 설정으로 팀 코드 스타일 통일📌 추천 조합 → Prettier + ESLint🎨 2. Prettier – Code Formatter🖋️ 코드 자동 정렬저장 시 자동으로 코드 포맷팅들여쓰기, 세미콜론, 따옴표 통일formatOnSave: true로 설정🧩 3. Path Intellisense🔗 경로 자동 완성import 경..

**CI/CD (Continuous Integration / Continuous Deployment)**는개발자가 코드를 push하면 자동으로 빌드/테스트/배포까지 처리하는 자동화 프로세스입니다.GitHub Actions는 GitHub에서 제공하는 무료 워크플로우 도구로,코드 변경 → 테스트 → 빌드 → 배포 과정을 자동화할 수 있습니다.📌 1. GitHub Actions 기본 구조프로젝트 루트에 .github/workflows/ci.yml 파일 생성 name: CI Pipelineon: push: branches: [ main ] # main 브랜치 푸시 시 실행jobs: build: runs-on: ubuntu-latest steps: - name: Checkout Re..

JavaScript는 싱글 스레드 언어입니다.그런데도 여러 작업을 동시에 처리하는 것처럼 보이는 이유는 이벤트 루프(Event Loop) 덕분입니다.📌 1. Call Stack (콜 스택)자바스크립트 엔진이 실행하는 함수 호출 기록 저장소LIFO(Last In First Out) 구조함수 실행 → 스택에 push, 종료 → pop function a() { console.log("a"); }function b() { a(); console.log("b"); }b();// 실행 순서: a → b📌 2. Web APIs & Task Queue브라우저는 JS 엔진 외에도 **Web APIs (DOM, Timer, HTTP 요청)**를 제공합니다.비동기 함수(setTimeout, fetch)는 Web API..

자바스크립트에서 객체를 다룰 때 가장 흔한 에러는 “Cannot read property of undefined” 같은 오류입니다.이를 해결하기 위해 나온 문법이 Optional Chaining이며,또한 값이 null이나 undefined일 때만 기본값을 지정하는 Nullish Coalescing이 함께 자주 사용됩니다.🧩 1. Optional Chaining (?.)객체 프로퍼티 접근 시 null 또는 undefined가 나오면 에러 대신 undefined를 반환 const user = { profile: { name: "홍길동" }};console.log(user.profile?.name); // "홍길동"console.log(user.address?.city); // undefined (..