hooney.log

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

리액트를 쓰다 보면 "렌더링"이라는 말을 자주 접하게 된다. 하지만 리액트의 렌더링 과정은 단순히 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..

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

Expo FCM 푸시알림 구현하기!  설정은 여기서![RN] Expo FCM 푸시알림 구현하기 (1) (tistory.com) { const fcmToken = await messagi" data-og-host="devhooney.tistory.com" data-og-source-url="https://devhooney.tistory.com/315" data-og-url="https://devhooney.tistory.com/315" data-og-image="https://blog.kakaocdn.net/dna/bMAZ1K/hyWg0oeflY/AAAAAAAAAAAAAAAAAAAAAMHASIwlG8EUkB2ryplj85Rwhz8w011AUD2swDBcde6z/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1764514799&allow_ip=&allow_referer=&signature=U9%2Fgp7kWZ3kVKCX0IUu3gXnEfpU%3D

vite로 React 프로젝트를 생성해보면 알아서 잘 해주기 때문에 너무 간단하다.       npm create vite@latestyarn create vite  둘 중에 편한거로 만들면, vanilla, react 등등이 뜨는데 react를 선택. 그리고 typescript, javascript, remix 할 건지 뜨는데 편한거 선택. 보기중에 +swc 라는 것이 있는데,swc는 Speedy Web Compiler로 Rust로 개발되어 속도가 빠르다.babel의 대체재이다. 선택하면,프로젝트 폴더로 이동하여 npm i, npm run dev를 실행하면  이런 화면을 볼 수 있다. 기존에 사용하던 webpack과의 차이는  웹팩(Webpack)과 바이트(Vite)는 모두 현대적인 자바스크립트 프로젝..

리액트에서 상태 변화는 useState로 진행하는데, 이게 많을 경우 코드가 길어지고, 유지보수 하는데 불편하다. 이를 좀더 편하게 하기 위해 useReduce()를 통해 개선할 수 있다. 먼저, 리액트에서 CRUD를 작업한다고 하면 const Main = () => { const [data, setData] = useState([]); const [name, setName] = useState(""); const onCreate = () => { ...생략 } const onRead = () => { ...생략 } const onUpdate = () => { ...생략 } const onDelete = () => { ...생략 } } 생략된 코드들이 복잡하고 길 가능성이 있다. 이를 개선하면, Main..