hooney.log

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

스프링에서 설정값 주입할 때 가장 직관적인 방법 중 하나가 @Value다. application.properties나 application.yml에 있는 값을 ${}로 꺼내서 바로 필드에 넣을 수 있어서 간단하고 편하기 때문. 근데 실무에서 무심코 쓰다가 에러를 겪거나, 나중에 유지보수하다가 “이게 왜 이렇게 되어 있지?” 싶을 때가 은근 많다. 그래서 이번엔 @Value 어노테이션 쓸 때 주의해야 할 점들만 쏙쏙 뽑아서 정리해봤다. ✅ 기본 사용법부터 간단히 보자@Value("${myapp.name}")private String appName; application.properties에 아래처럼 설정해두면,myapp.name=MySpringApp Spring이 자동으로 appName에 "MyS..

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

기존 포스팅이 있지만 한번 더 작성해보았다. [JPA] Spring Data JPA에서 새로운 Entity 판단하는 방법 [JPA] Spring Data JPA에서 새로운 Entity 판단하는 방법Spring Data JPA에서 새로운 Entity를 저장할 때 public interface SaveTestRepository extends JpaRepository {} save @Transactional @Override public S save(S entity) { Assert.notNull(entity, "Entity must not be null."); if (entityInformation.isNew(edevhooney.tistory.com save()를 썼는데 insert가 안 돼요! upda..

✅ OSIV란?Open Session In View (OSIV)는 JPA에서 HTTP 요청이 끝날 때까지 영속성 컨텍스트(EntityManager)를 열어두는 전략이다. 이 설정이 true(기본값)면, Controller나 View(Rendering) 단계에서도 Lazy Loading이 가능하다. Spring Boot에서는 기본적으로 spring.jpa.open-in-view=true 로 켜져 있다. ✅ 왜 등장했을까?JPA는 기본적으로 지연 로딩(Lazy Loading)을 많이 쓴다. 예를 들어,@GetMapping("/users/{id}")public UserDto getUser(@PathVariable Long id) { User user = userRepository.findById(..

Go는 정적 타입 언어지만, API 개발을 하다 보면 요청 데이터에 대한 유효성 검사(validation) 가 꼭 필요하다. GORM만 써서는 해결되지 않는 입력값 검증은 validator 라이브러리와 함께 처리하는 것이 일반적이다. 이번 포스팅에서는 실전에서 가장 많이 쓰이는 유효성 검사 라이브러리인 go-playground/validator와 GORM 모델을 함께 사용하는 방법을 다룬다. ✅ 1. Validator 설치하기go get github.com/go-playground/validator/v10 ✅ 2. 기본 사용법import ( "github.com/go-playground/validator/v10")type User struct { Name string `..