jonbeo 님의 블로그

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..

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 (..

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.📌 1. 기본 문법 A:has(B) { ... } 👉 A 요소가 B를 포함하고 있다면 스타일 적용📌 2. 폼 검증 스타일링 /* input이 비어있으면 빨간 테두리 */form:has(input:invalid) { border: 2px solid red;} 📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능📌 3. 드롭다운 메뉴 제어 .dropdown:has(:hover) .menu { display: block;} 📌 부모에 :hover가 있으면 자식 메뉴 표시📌 4. 카드 UI – 버튼..

웹 보안은 단순한 기술이 아니라 서비스 신뢰성과 사용자 보호의 핵심입니다.특히 실무에서 자주 접하는 HTTPS, CORS, CSRF, XSS는 반드시 이해해야 하는 개념입니다.🟢 1. HTTPS (보안 프로토콜)HTTP + SSL/TLS 암호화데이터 전송 중 도청/변조 방지SEO에도 유리 (구글은 HTTPS 사이트를 우선 랭킹)📌 실무 팁Let’s Encrypt 무료 인증서 활용서버/클라우드 배포 시 기본적으로 HTTPS 적용🔵 2. CORS (Cross-Origin Resource Sharing)브라우저의 보안 정책: 다른 도메인 요청 차단예: https://myapp.com → https://api.other.com 요청 시 제한📌 해결 방법서버에서 Access-Control-Allow-Ori..

데이터를 직관적으로 보여주려면 시각화 도구가 필요합니다.Chart.js는 가볍고 직관적인 API를 제공하여,막대 그래프, 선 그래프, 원형 차트, 레이더 차트 등 다양한 차트를 쉽게 구현할 수 있습니다.⚙️ 1. 설치 및 기본 세팅설치 npm install chart.jsHTML 예시 JS 예시 import { Chart } from "chart.js";const ctx = document.getElementById("myChart").getContext("2d");new Chart(ctx, { type: "bar", // 차트 타입 data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple"], datasets: [{ label: "..

React의 상태 관리는 프로젝트 규모와 요구사항에 따라 달라집니다.단순히 useState로 충분한 경우도 있지만, 전역 상태 관리가 필요해지면 선택지가 다양해집니다.이번 포스팅에서는 대표적인 세 가지 접근법을 살펴봅니다.🧩 1. Context APIReact 기본 제공 전역 상태 관리 도구✅ 특징React에 내장 → 별도 라이브러리 설치 불필요createContext + useContext 사용전역 상태를 Provider로 감싸서 하위 컴포넌트에서 접근 가능📌 예시 const ThemeContext = React.createContext();function App() { return ( );}function Toolbar() { const theme = React.us..

TypeScript(이하 TS)는 **JavaScript(이하 JS)의 상위 집합(Superset)**입니다.즉, JS 문법을 그대로 사용하면서 타입 시스템을 추가한 언어입니다.👉 "JS는 자유롭고, TS는 안전하다" 라고 이해하면 쉽습니다.📌 1. TypeScript를 쓰는 이유✅ 타입 안정성: 런타임 에러를 컴파일 단계에서 방지✅ 코드 가독성 & 유지보수성: 협업에서 타입이 문서 역할✅ IDE 지원 극대화: 자동완성(IntelliSense) 강화✅ 대규모 프로젝트 필수: 규모가 커질수록 버그 줄이고 개발 속도 ↑📌 2. JavaScript vs TypeScript 비교JS 예시 (타입 자유로움) function add(a, b) { return a + b;}console.log(add(10, ..

기존의 웹사이트는 URL 변경 시 서버에서 새로운 페이지를 로드하는 방식이었습니다.하지만 SPA에서는 실제 HTML은 하나(index.html)만 존재하고,페이지 전환은 자바스크립트로 UI를 바꿔주는 방식으로 이루어집니다. 👉 이 과정을 쉽게 구현해주는 게 React Router입니다.⚙️ 1. React Router 설치 npm install react-router-dom 📌 2. 기본 구조 import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";function App() { return ( ..

웹에서 이벤트를 처리할 때, 보통 요소마다 이벤트를 직접 등록합니다.하지만 요소가 많아질수록 메모리 낭비 + 성능 저하 문제가 생깁니다.이를 해결하는 방법이 바로 **이벤트 위임(Event Delegation)**입니다.🧠 1. 이벤트 위임이란?하위 요소에 이벤트를 직접 걸지 않고, 상위 요소에서 이벤트를 처리하는 기법 브라우저의 이벤트 버블링(Event Bubbling) 원리를 이용합니다.즉, 이벤트가 발생하면 부모 요소까지 이벤트가 전파되므로,부모에서 한 번만 이벤트를 등록해도 자식들의 이벤트를 감지할 수 있습니다.📌 2. 기본 예제 – 잘못된 방식 document.querySelectorAll(".item").forEach(item => { item.addEventListener("click"..