I'm sw engineer!

JSX란

✅ JSX란?JSX (JavaScript XML) 는 JavaScript 안에서 HTML처럼 보이는 문법입니다.주로 React에서 UI를 구성할 때 사용됩니다.📌 정의: JSX는 JavaScript에 XML/HTML 문법을 결합한 확장 문법(Syntax Extension)🧩 왜 JSX를 사용하는가?React는 UI를 컴포넌트 단위로 구성하는데, JSX는 컴포넌트의 구조를 보기 쉽게 표현해줍니다.예를 들어:jsxconst element = Hello, world!;위 코드는 보기엔 HTML 같지만 실제로는 JavaScript 코드입니다.Babel 같은 도구가 이 코드를 다음과 같이 변환합니다:jsconst element = React.createElement('h1', null, 'Hello, worl..

Babel 이란

✅ Babel이란?Babel은 JavaScript 컴파일러로, 최신 JavaScript 문법을 구형 브라우저나 환경에서도 사용할 수 있도록 구버전 JavaScript 코드로 변환해 주는 도구입니다.🔧 왜 Babel이 필요한가?문제:최신 JavaScript(예: ES6+, ES2020 등)는 오래된 브라우저나 환경에서 지원되지 않음예를 들어, async/await, let, const, class, import/export, optional chaining 같은 문법은 구형 브라우저에서 동작하지 않음해결:**Babel이 이 문법들을 구버전 코드로 변환(transpile)**해서 브라우저 호환성 문제를 해결해 줌📦 Babel 주요 기능기능설명코드 트랜스파일최신 JS → ES5 스타일로 변환플러그인 시스템..

🔹 단축키:기능 Windows/LinuxmacOS정의로 이동 (Go to Definition)Ctrl + B 또는 Ctrl + ClickCmd + B 또는 Cmd + Click선언으로 이동 (Go to Declaration)Ctrl + B 또는 Ctrl + ClickCmd + B 또는 Cmd + Click구현으로 이동 (Go to Implementation)Ctrl + Alt + BCmd + Alt + B 👀 인라인 미리보기 (Quick Definition)🔹 단축키:기능Windows/LinuxmacOS정의 미리보기 (Quick Definition)Ctrl + Shift + ICmd + Y 또는 Cmd + Shift + I 예: 함수 이름 위에 커서를 두고 이 단축키를 누르면 팝업창으로 함수 정의가..

**“정의로 이동(Go to Definition)”**은 프로그래밍에서 함수, 변수, 클래스 등 식별자의 선언 위치로 이동하는 기능이에요. function sayHello() { console.log("Hello!");}sayHello(); // 커서를 여기 두고 F12 누르면... sayHello();에 커서를 두고 F12를 누르면위에 선언된 function sayHello() { ... }로 자동으로 점프합니다.✅ 이 기능이 왜 유용할까?코드 구조를 빠르게 파악할 수 있어요.라이브러리나 모듈에서 정의된 내용을 추적할 때 필수예요.함수나 변수의 정의 위치를 찾느라 스크롤할 필요가 없음.💡 팁:F12: 정의로 이동Alt + F12: 정의를 인라인으로 미리 보기Ctrl + Click / Cmd + Cl..

🧠 IntelliSense / 자동완성기능Windows/LinuxmacOS코드 자동완성Ctrl + SpaceCtrl + Space정의로 이동F12F12정의를 옆에 열기Ctrl + ClickCmd + Click빠른 수정 제안Ctrl + .Cmd + .

📁 파일 탐색/제어 기능Windows/LinuxmacOS파일 열기Ctrl + PCmd + P전체 검색Ctrl + Shift + FCmd + Shift + F파일 내 검색Ctrl + FCmd + F줄 이동Ctrl + GCmd + G사이드바 토글Ctrl + BCmd + B

✂️ 편집 관련 단축키기능Windows/LinuxmacOS줄 삭제Ctrl + Shift + KCmd + Shift + K줄 복사Shift + Alt + ↓/↑Shift + Option + ↓/↑줄 이동Alt + ↑/↓Option + ↑/↓자동 줄 정렬 (포맷)Shift + Alt + FShift + Option + F여러 줄 커서Alt + ClickOption + Click동일한 단어 선택 추가Ctrl + DCmd + D전체 동일한 단어 선택Ctrl + Shift + LCmd + Shift + L

✅ sessionStorage vs localStorage vs cookie항목sessionStoragelocalStoragecookie유지 기간탭/창 닫을 때까지영구 (명시 삭제 전까지)만료일 설정 가능저장 용량약 5MB약 5MB약 4KB접근 범위같은 탭 내전체 브라우저전체 브라우저서버 전송 여부❌ ❌ ✅ O (자동 포함됨)용도일시적 상태 유지사용자 설정, 로그인 유지인증, 서버 통신용 식별

✅ sessionStorage란?sessionStorage는 브라우저에서 제공하는 클라이언트 측 저장소(Web Storage) 중 하나입니다.웹 페이지에서 데이터를 일시적으로, 탭(세션) 단위로 저장할 수 있게 해줍니다.📌 주요 특징항목내용저장 위치사용자의 브라우저 (클라이언트) 에 저장유효 범위현재 브라우저 탭(또는 창) 에서만 접근 가능유지 시간탭(또는 창)을 닫을 때까지 유지됨 (새로고침은 유지)데이터 형식문자열(string)만 저장 가능 (객체는 JSON.stringify로 변환 필요)저장 용량일반적으로 약 5MB (브라우저마다 다를 수 있음)보안HTTP 요청에 포함되지 않으며, 서버에 자동 전송되지 않음 ✅ 언제 사용하나요?sessionStorage는 다음과 같은 임시 데이터 저장에 적합합니다..

✅ Diff 화면에서 유용한 단축키 정리동작Windows/LinuxmacOS설명🔍 Diff 보기Ctrl + DCmd + D선택한 파일의 변경 사항 비교 (현재 vs 이전 커밋 등)↔️ 변경 적용 (왼쪽/오른쪽)Alt + ← / Alt + →Alt + ← / Alt + →왼쪽 또는 오른쪽의 변경 내용을 현재 파일에 적용⬆️⬇️ 이전/다음 변경 블록F7 / Shift + F7F7 / Shift + F7변경된 블록 간 이동📂 버전 비교 열기Ctrl + Shift + A → "Compare with..."Cmd + Shift + A → "Compare with..."원하는 브랜치/커밋과 비교