기본 모드 모드 전환 방법 키설명iInsert 모드 (커서 위치)IInsert 모드 (줄 맨 앞)aInsert 모드 (커서 다음)AInsert 모드 (줄 맨 뒤)oInsert 모드 (아래 새 줄)OInsert 모드 (위에 새 줄)EscNormal 모드로 돌아가기Ctrl+[Normal 모드로 (Esc 대체)vVisual 모드 (문자 단위)VVisual 모드 (줄 단위)Ctrl+vVisual Block 모드:Command 모드 이동 (Motions) 기본 방향키 키설명h왼쪽j아래k위l오른쪽w다음 단어 시작W다음 단어 시작 (공백 기준)e다음 단어 끝E다음... Continue Reading →
개요 IntersectionObserver API를 사용하면 스크롤 이벤트 없이도 효율적으로 요소의 가시성을 감지할 수 있다. 이 특성을 활용하여 문서의 목차(TOC)를 구현하고, 현재 읽고 있는 섹션을 자동으로 하이라이트하는 기능을 만들 수 있다. IntersectionObserver란? IntersectionObserver는 타겟 요소와 상위 요소 또는 뷰포트 사이의 교차 영역 변화를 비동기적으로 관찰하는 API다. 스크롤 이벤트를 직접 다루는 것보다 성능이 우수하며, 코드도 더 간결하게 작성할... Continue Reading →
"Claude 생성 문서" Display 속성의 기본값 display 속성의 기본값은 요소마다 다릅니다. Block 요소 (display: block) <div>, <p>, <h1>~<h6>, <ul>, <ol>, <li> <header>, <footer>, <section>, <article> <form>, <table> Inline 요소 (display: inline) <span>, <a>, <strong>, <em>, <b>, <i> <code>, <small> Inline-block 요소 <img>, <button>, <input>, <select>, <textarea> 핵심: <div>는 기본값이 display: block이므로, 따로 지정하지 않아도 block으로... Continue Reading →
임베디드 기사 실기 기출문제 확장판 (2015-2023년) 본 문서는 2015년부터 2023년까지의 임베디드 기사 실기 기출문제를 주제별로 분류하고, 내용을 검증·수정·확장한 자료입니다. 📋 목차 메모리 관련 컴파일러 및 링커 주소 지정 및 데이터 표현 리눅스 파일 시스템 부팅 및 시스템 초기화 소프트웨어 개발 방법론 네트워크 프로그래밍 커널 관련 프로세스 및 스레드 동기화 기법 메모리 관리 디바이스 드라이버 UML... Continue Reading →
Nginx를 사용하면 특정 도메인 경로를 로컬 포트로 연결할 수 있습니다. 예를 들어 http://yourdomain.com/api를 http://localhost:3000으로 연결하는 것이 가능합니다. Nginx 설치 # Ubuntu/Debian sudo apt update sudo apt install nginx # CentOS/RHEL sudo yum install nginx 기본 설정 /etc/nginx/sites-available/myapp 파일을 생성합니다: server { listen 80; server_name yourdomain.com; location /api { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Host $host;... Continue Reading →
웹 개발을 하다 보면 HTTP 상태 코드를 자주 다루게 됩니다. 하지만 이 중 일부는 단순히 정보를 전달하는 것을 넘어서, 브라우저가 특정 동작을 자동으로 실행하도록 만듭니다. 예를 들어 301 Moved Permanently를 받으면 브라우저는 자동으로 새 주소로 이동하고, 401 Unauthorized를 받으면 로그인 팝업을 띄웁니다. 이런 "브라우저의 자동 동작"을 이해하면 더 효율적인 웹 애플리케이션을 만들 수 있습니다. 이... Continue Reading →
개인이나 팀에서 무료로 사용할 수 있는 온프레미스 칸반보드 솔루션들을 알아봤습니다. Notion을 사용 중이지만, 자체 서버에서 운영하면서 API도 제공하는 도구들을 찾아보았습니다. 오픈소스 칸반보드 옵션들 Wekan MIT 라이선스 오픈소스 Trello 클론으로 UI가 매우 유사 Docker로 간편 설치 REST API 제공 카드 댓글, 라벨, 체크리스트 등 기본 기능 제공 실시간 업데이트 지원 특징: 심플하고 가벼우며 Trello에서 데이터 마이그레이션... Continue Reading →
프론트엔드와 백엔드가 분리된 환경에서 구글 OAuth 로그인을 구현하는 방법 전체 아키텍처 사용자 → NextAuth (OAuth 처리) → 백엔드 API (사용자 정보 저장 + JWT 발급) → 이후 API 요청 시 JWT 사용 구현 단계 1. NextAuth 설정 프론트엔드에서 NextAuth를 사용해 OAuth를 처리하고, 로그인 성공 시 백엔드에 사용자 정보를 전송 // pages/api/auth/[...nextauth].js import NextAuth from 'next-auth'... Continue Reading →
캐시 vs 쿠키 많은 개발자들이 캐시와 쿠키를 혼동하는데, 이 둘은 완전히 다른 개념이다 캐시 (Cache) 저장 위치: 브라우저, CDN, 프록시 서버 등 목적: 성능 최적화 (같은 요청을 빠르게 처리) 저장 주체: 받는 쪽(클라이언트)이 자동으로 저장 데이터 종류: HTTP 응답 전체 (HTML, JSON, 이미지 등) 쿠키 (Cookie) 저장 위치: 브라우저의 쿠키 저장소 목적: 상태 관리 (로그인,... Continue Reading →
🎯 핵심 차이점 JavaScript에서 화살표 함수와 일반 함수의 가장 큰 차이점은 this 바인딩 방식 일반 함수: 호출 시점에 this 결정 (동적 바인딩) 화살표 함수: 정의 시점에 this 결정 (렉시컬 바인딩) 📋 일반 함수의 this 바인딩 function regularFunction() { console.log(this.name) } const obj1 = { name: 'Alice', fn: regularFunction } const obj2 = { name: 'Bob',... Continue Reading →
St991Cup's Blog 