hooney.log

리액트 쓸 때 거의 무조건 쓰게 되는 훅 중 하나가 useEffect다. 처음에는 "컴포넌트 마운트 될 때 실행되는 함수 아니야?" 하고 쉽게 생각할 수 있는데, 막상 실제로 쓰다 보면 언제 호출되는지 헷갈리는 경우가 꽤 많다. 이번 글에서는 useEffect가 정확히 언제 호출되는지, 그리고 디펜던시 배열에 따라 어떻게 달라지는지 정리해봤다. ✅ useEffect 기본 구조useEffect(() => { // 실행할 코드}, [/* 의존성 배열 */]); 의존성 배열(dependency array)에 뭐가 들어가느냐에 따라서 실행 타이밍이 달라진다. 아래에서 하나씩 살펴볼게. 1️⃣ 의존성 배열이 없는 경우useEffect(() => { console.log('렌더링 이후마다 실행됨')..

JavaScript에서 코드를 작성하다 보면 “변수를 선언하기 전에 썼는데 왜 오류가 안 나지?” 하는 경험을 해봤을 것이다. 이 현상의 정체가 바로 호이스팅(Hoisting)이다. 이번 포스팅에서는 호이스팅이 정확히 무엇인지, 어떤 요소들이 호이스팅되는지, 그리고 실무에서 어떻게 안전하게 코드를 작성해야 하는지까지 깔끔하게 정리해본다. 🧠 호이스팅(Hoisting)이란? "선언부가 코드의 맨 위로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징" 실제로 코드가 이동하는 건 아니지만, 자바스크립트 엔진이 실행 전에 변수와 함수의 선언을 ‘미리 메모리에 등록’해놓기 때문에 발생하는 현상이다. 🔍 예제를 보며 이해해보자 ✅ 변수 호이스팅 (var)console.log(a); // undefined..

React에서 컴포넌트를 만들다 보면 useEffect와 useLayoutEffect라는 두 훅(Hook)을 마주하게 된다. 이름은 비슷하지만 실행 타이밍과 용도, 그리고 렌더링 성능에 미치는 영향까지 완전히 다르다. 이번 포스팅에서는 이 둘의 차이점, 실행 순서, 사용 시 주의점, 그리고 실전 예제까지 한 번에 정리해본다. 📌 핵심 요약항목useEffectuseLayoutEffect실행 시점화면 그린 뒤 (비동기)화면 그리기 직전 (동기)렌더 차단 여부❌ 렌더 차단 안 함✅ 렌더 차단함목적API 호출, 로깅 등 비 UI 작업DOM 측정, 스타일 조정 등 UI 관련 작업성능 영향렌더링 후 실행 → 퍼포먼스에 유리렌더링 전에 실행 → 렌더 지연 가능성SSR(Server Side Rendering)S..

리액트를 쓰다 보면 "렌더링"이라는 말을 자주 접하게 된다. 하지만 리액트의 렌더링 과정은 단순히 return 하는 걸로 끝나는 게 아니다. React의 내부 렌더링은 두 단계, Render Phase와 Commit Phase로 나뉘며, 이 둘을 명확히 이해해야만 예상치 못한 사이드 이펙트나 성능 문제를 피할 수 있다. 이번 포스팅에서는 이 두 단계가 각각 무엇을 하는지, 왜 나뉘어 있는지, 개발 시 주의할 점은 무엇인지까지 깔끔하게 정리해본다. 🎬 리액트 렌더링 프로세스의 큰 그림리액트의 렌더링은 다음과 같이 이루어진다: - Render Phase (렌더 단계): 어떤 UI를 보여줄지 계산하는 단계 - Commit Phase (커밋 단계): 계산된 결과를 DOM에 실제 반영하는 단계 이 둘..

React로 리스트를 렌더링하다 보면 .map() 안에서 key 값을 필수로 지정하게 된다. 이때 초보자부터 숙련자까지 흔히 하는 실수가 바로 index를 key로 사용하는 것이다. // 흔히 하는 실수items.map((item, index) => {item.name}); 간단해 보이지만, 이 코드는 예기치 않은 버그의 원인이 된다. 이번 포스팅에서는 왜 index를 key로 쓰면 안 되는지, 그리고 어떨 때는 써도 되는지를 예제와 함께 정리해본다. 📌 key란 무엇인가? React는 리스트를 렌더링할 때 어떤 항목이 추가되었는지, 삭제되었는지, 혹은 순서가 바뀌었는지를 파악하기 위해 key라는 식별자를 사용한다. 이 key는 각 요소를 고유하게 식별해야 하고, 이를 기반으로 효율적으로 DOM..

🔷 들어가며 React를 사용하다 보면 라는 컴포넌트를 본 적이 있을 것이다. 보통 index.js 파일에서 루트 컴포넌트를 감쌀 때 사용한다. 하지만 정확히 어떤 역할을 하는지, 왜 사용하는지에 대해선 모호한 경우가 많다. 이번 글에서는 StrictMode가 실제로 어떤 일을 하는지, React 18에서 어떤 변화가 있었는지, 그리고 우리가 코드에서 어떻게 대응해야 하는지까지 정리해보려한다. ✅ StrictMode란?StrictMode는 React에서 잠재적인 문제를 사전에 감지할 수 있도록 도와주는 개발용 유틸리티 컴포넌트이다. - 개발 모드에서만 동작 - 실제 UI에는 아무 영향도 주지 않음 - 앱 전체 또는 일부분에만 적용 가능import React from 'react';import Rea..

JS의 클로저에 대해서 알아보자 ✅ 한 줄 정의클로저는 함수가 자신이 선언될 때의 스코프(변수 환경)를 기억하고, 그 외부 함수가 종료된 이후에도 그 변수들에 접근할 수 있는 함수. 📌 기본 예시 function outer() { let count = 0; // outer의 지역 변수 return function inner() { count++; console.log(count); };}const counter = outer(); // outer는 실행되고 종료됨, 하지만 inner는 리턴됨counter(); // 1counter(); // 2counter(); // 3 outer() 실행 시, count 변수와 함께 inner() 함수가 생성됨. inner()는 co..

jQuery에 대해서 이어서 알아보자 1. 선택자(Selector)선택자는 HTML 요소를 찾아서 조작할 수 있게 해주는 중요한 부분이다. jQuery에서는 CSS 선택자와 비슷한 방식으로 요소를 선택할 수 있다. 예시 ID 선택자: $("#id") 해당 ID를 가진 요소를 선택.$("#myDiv") // ... 선택 클래스 선택자: $(".class") 해당 클래스를 가진 모든 요소를 선택.$(".myClass") // ... 선택 태그 선택자: $("tag") 해당 태그를 가진 모든 요소를 선택.$("p") // 모든 태그 선택 자식 선택자: $("parent child") 부모 요소 아래에 있는 특정 자식 요소를 선택.$("ul li") // 모든 내부의 요..

1. jQuery란?jQuery는 자바스크립트(JavaScript) 라이브러리 중 하나다. 2006년에 John Resig가 만들었고, "더 적은 코드로 더 많은 것을 하자"는 슬로건 아래, 자바스크립트를 쉽고 간결하게 쓸 수 있게 도와주는 도구다. 2. 핵심 기능들1. DOM 조작 HTML 요소를 선택하고, 변경하거나 추가/삭제하는 작업을 간편하게 할 수 있다. 예:$("#title").text("Hello jQuery!"); 2. 이벤트 처리 클릭, 키보드 입력 같은 이벤트를 쉽게 다룰 수 있다. 예:$("#btn").click(function() { alert("버튼 클릭됨!");}); 3. AJAX 요청 비동기 통신도 간단하게 할 수 있다. 예:$.get("/data", f..

제목 어그로 통했나요? GPT의 작품입니다.  간단하게 next & typescript로 프로젝트 생성 알아보겠습니다.   1. 프로젝트 생성 명령어npx create-next-app@latest --ts next-study  이렇게 하면 최신 버전의 nextjs와 typescript를 이용해서 프로젝트가 생성됩니다.    2. 취향 정하기 위 명령어를 입력하면 몇 가지 질문을 합니다.하나씩 알아보면- Would you like to use ESLint? ... No / YesESLint를 사용할거야? - YES! - Would you like to use Tailwind CSS? ... No / YesTailwind CSS 사용할거야? - YES! - Would you like your code ins..