Daily log

2025/06 : 「22」건

  1. React - useContext를 사용하기 전과 후의 구조 비교
    00:17:28
  2. React - useCallback을 활용한 함수 최적화 전략
    2025.06.07
  3. React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교
    2025.06.07
  4. React - useState를 useReducer로 대체하는 간단 예제
    2025.06.05
  5. React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`
    2025.06.05
  6. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리 1
    2025.06.05
  7. ♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리
    2025.06.03
  8. Jooq란 무엇인가?
    2025.06.03
  9. @EventListener 완벽 가이드
    2025.06.03
  10. Liquibase로 DB 변경 이력 관리하기
    2025.06.02
  11. React - 상태 끌어올리기(State Lifting)
    2025.06.01
  12. Javascript - 구조분해 할당 (Destructuring Assignment)
    2025.06.01
  13. React - Hook 사용 규칙과 Custom Hook 예제
    2025.06.01
  14. Nginx 설치 및 배포 설정 정리
    2025.06.01
  15. Spring Boot + GitLab CI/CD 배포 방법 3
    2025.06.01
  16. Linux 관련 운영 명령어 모음
    2025.06.01
  17. React - Hooks 1
    2025.06.01
  18. React - useRef
    2025.06.01
  19. React - State로 입력 관리하기
    2025.06.01
  20. React - State와 Props
    2025.06.01
  21. React - State로 상태 관리
    2025.06.01
  22. React - 이벤트 핸들링(Event Handling)
    2025.06.01

React - useContext를 사용하기 전과 후의 구조 비교

React에서 여러 컴포넌트가 동일한 데이터를 공유하고 조작해야 할 경우, props를 깊게 전달하는 방식은 유지보수가 어렵고 구조가 복잡해지기 쉽다. 이럴 때 useContext를 사용하면, 전역적으로 데이터를 관리할 수 있어 코드가 훨씬 깔끔해진다. 아래에서는 useContext 적용 전후의 차이점을 코드와 함께 비교해 보자.1. useContext를 사용하지 않았을 때의 구조✅ 특징App 컴포넌트에서 todos, onCreate, onUpdate, onDelete를 정의하고 props로 하위 컴포넌트에 전달한다.List, Editor, TodoItem 등 모든 하위 컴포넌트는 이 props를 계속해서 받아야 하며, 구조가 깊어질수록 관리가 어려워진다.TodoItem에서도 마찬가지로 onUpdate,..
개발/React 2025. 6. 8. 00:17

React - useCallback을 활용한 함수 최적화 전략

React 컴포넌트에서 함수를 props로 자식 컴포넌트에 전달하는 경우, 불필요한 함수 재생성으로 인해 자식 컴포넌트가 매번 리렌더링되는 문제가 발생할 수 있다. 특히 React.memo와 함께 사용할 때 이 문제가 더욱 두드러진다. 이를 방지하고 성능을 개선하기 위해 useCallback을 활용한 최적화가 필요하다.이번 글에서는 useCallback을 적용해 함수 재생성을 방지하고 렌더링 최적화를 이룬 사례를 소개한다.문제 상황아래와 같이 작성된 코드에서, onCreate, onUpdate, onDelete 함수는 컴포넌트가 렌더링될 때마다 새로 정의된다.const onCreate = (content) => { dispatch({ type: "CREATE", data: { ... }, ..
개발/React 2025. 6. 7. 01:12

React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교

React에서 연산 비용이 크거나 불필요하게 반복될 수 있는 계산은 useMemo를 통해 최적화할 수 있다. 이 글에서는 useMemo를 사용한 코드와 사용하지 않은 코드를 직접 비교하면서 어떤 차이가 있는지 명확하게 설명한다.예제 시나리오: 완료된 작업 수 계산하기🔸 useMemo를 사용하지 않은 경우function TodoStats({ todos }) { const doneCount = todos.filter((todo) => todo.isDone).length; console.log("✅ 계산됨"); return 완료된 항목: {doneCount};}이 코드는 todos 외의 다른 상태 변경이 있어도, 예를 들어 검색어 입력 등으로 렌더링이 발생하면 doneCount 계산이 매번 실행된다.?..
개발/React 2025. 6. 7. 00:20

React - useState를 useReducer로 대체하는 간단 예제

상태가 단순할 땐 useState를 쓰는 것이 편하지만, 복잡해질 경우 useReducer가 더 깔끔하고 명확한 코드를 만들어 줍니다. 이 글에서는 간단한 카운터 예제를 통해 useState와 useReducer의 차이를 비교해보겠습니다.✅ useState 버전import { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}>+1 );}export default Counter;useState를 사용해 상태(count)를 관리합니다.setCount를 통해 직접 상태를 변경합니다.✅ useReducer ..
개발/React 2025. 6. 5. 16:16

React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`

React로 컴포넌트를 작성하다 보면 자식 컴포넌트에 props를 전달할 때 todo={todo}처럼 객체 전체를 넘기는 방식과 {...todo}처럼 전개 연산자(spread)를 사용하는 방식이 있습니다.이 두 방식은 비슷해 보이지만, 컴포넌트 내부에서 데이터를 접근하는 방법이 완전히 달라집니다.잘못 사용하면 undefined 에러가 발생할 수 있으므로, 각각의 차이와 올바른 사용법을 명확히 이해하는 것이 중요합니다.✅ 예제 상황 설명예를 들어 List라는 컴포넌트가 있고, 그 안에서 TodoItem 컴포넌트를 반복적으로 렌더링한다고 가정합니다.{todos.map((todo) => ( ))}위 코드에서 ...todo는 todo 객체를 전개해서 각각의 속성을 TodoItem에 개별적으로 전달하는 방식입니..
개발/React 2025. 6. 5. 15:31

React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리

React의 useEffect 훅은 컴포넌트의 마운트(Mount), 업데이트(Update), 언마운트(Unmount) 시점을 제어할 수 있게 해주는 핵심 도구입니다. 아래는 예제 코드를 기준으로 useEffect의 동작 방식을 정리한 문서입니다.🔹 1. Mount (마운트)컴포넌트가 처음으로 렌더링될 때 실행됨의존성 배열(deps)이 빈 배열인 경우 한 번만 실행됨useEffect(() => { console.log("mount");}, []); // 최초 1회만 실행💡 특징이후 다시 렌더링되어도 실행되지 않음서버에서 데이터를 처음 가져오거나 초기 설정 시 사용🔹 2. Update (업데이트)컴포넌트가 리렌더링될 때마다 실행됨의존성 배열이 없을 경우 매 렌더링마다 실행특정 값이 변경될 때만 실행하..
개발/React 2025. 6. 5. 00:53

♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리

리액트 컴포넌트는 마치 살아있는 존재처럼 생명 주기(Lifecycle)를 갖는다. 컴포넌트가 생성되어 화면에 표시되고(탄생), 상태 변화에 따라 업데이트되며(변화), 마지막으로 화면에서 사라지는(소멸) 일련의 과정을 거친다. 이 흐름을 이해하는 것은 리액트 개발의 기본이자 핵심이다.과거에는 클래스형 컴포넌트에서 명시적인 생명 주기 메서드를 사용했지만, 현재는 함수형 컴포넌트와 useEffect Hook을 통해 이를 더 간결하고 유연하게 다룬다.1. 클래스형 컴포넌트의 생명 주기클래스형 컴포넌트는 각 단계별로 특정 메서드가 순차적으로 호출된다. 주요 단계는 다음과 같다.Mounting (마운팅) - 컴포넌트의 탄생컴포넌트가 처음 생성되어 DOM에 삽입될 때 발생한다.constructor()컴포넌트 생성자...
개발/React 2025. 6. 3. 23:38

Jooq란 무엇인가?

Jooq(Java Object Oriented Querying)은 타입 안정성 있는 SQL DSL을 제공하는 Java 기반 라이브러리다. SQL을 코드로 작성할 수 있게 하되, JDBC나 JPA처럼 객체 중심이 아닌 SQL 중심의 접근 방식을 취한다. SQL의 강력함과 Java의 정적 타이핑을 결합하여, 복잡한 쿼리도 안전하게 작성할 수 있다.1. 왜 Jooq를 사용하는가?✅ SQL 그대로 활용복잡한 SQL을 그대로 Java 코드에서 사용 가능DBMS별 함수나 쿼리 문법을 제약 없이 사용할 수 있다✅ 타입 안전성과 자동 완성SQL 문법이 Java 코드로 옮겨져 있어 컴파일 시점에 오류를 잡을 수 있다IDE에서 자동완성, 문법 체크 가능 → 유지보수성 증가✅ 코드와 DB 구조 싱크Jooq는 DB 스키마를 ..
개발/Spring 2025. 6. 3. 01:33

@EventListener 완벽 가이드

@EventListener 완벽 가이드Spring의 @EventListener는 애플리케이션 내에서 이벤트 기반 프로그래밍(event-driven architecture) 을 구현할 수 있도록 도와주는 기능입니다. 이는 코드 간의 결합도를 낮추고, 확장성과 유지보수성을 높이는 데 유용합니다.🔧 기본 개념Spring에서는 이벤트를 객체로 정의하고, 이 이벤트가 발생했을 때 특정 메서드를 호출할 수 있도록 지원합니다.@EventListener는 특정 이벤트 클래스가 발행되면, 해당 이벤트를 처리하는 메서드에 붙여 동작을 트리거합니다.🧱 동작 구조이벤트 클래스 정의 (POJO)public class UserCreatedEvent { private final User user; public Use..
개발/Spring 2025. 6. 3. 00:24

Liquibase로 DB 변경 이력 관리하기

✅ Liquibase란?Liquibase는 DB 구조(스키마) 변경을 코드처럼 관리하고 적용하는 도구입니다. SQL이나 YAML/XML 파일로 변경 내역을 기록하고, 이를 수동 또는 자동으로 DB에 적용할 수 있게 해줍니다.🔁 전통적인 방식 vs Liquibase방식설명전통적인 방식DB 콘솔에서 직접 SQL 실행 → 관리가 어려움Liquibase 방식SQL 파일로 작성 + 변경 이력 추적 + 자동 적용 가능📂 디렉터리 구조 예시src/└── main/ └── resources/ └── db/ └── changelog/ ├── changelog-index.yaml ← 마스터 changelog └── ..
개발/Spring 2025. 6. 2. 23:25

React - 상태 끌어올리기(State Lifting)

React를 사용하다 보면 컴포넌트 간에 같은 데이터를 공유해야 할 때가 있다. 이럴 때 사용하는 패턴이 바로 상태 끌어올리기(state lifting)다. 이 글에서는 상태 끌어올리기의 개념부터 예제, 사용하는 이유까지 단계별로 정리해본다.상태 끌어올리기란?여러 컴포넌트가 같은 상태를 공유해야 할 때, 해당 상태를 공통 부모 컴포넌트로 올리는 것을 상태 끌어올리기라고 한다.React는 데이터가 항상 위에서 아래(부모 → 자식) 방향으로 흐르기 때문에, 형제 컴포넌트끼리 데이터를 공유하려면 부모 컴포넌트를 통해야 한다.왜 상태를 끌어올려야 할까?형제 컴포넌트가 서로 다른 상태를 가지면 데이터가 불일치할 수 있다. 이 경우 공통 부모가 상태를 관리하고 자식에게 props로 내려주는 방식이 가장 깔끔하다.예..
개발/React 2025. 6. 1. 18:47

Javascript - 구조분해 할당 (Destructuring Assignment)

구조분해 할당은 JavaScript의 ES6 문법 중 하나로, 객체나 배열의 값을 변수에 손쉽게 추출할 수 있도록 도와주는 문법이다.1. 배열 구조분해배열의 각 요소를 변수로 쉽게 꺼낼 수 있다.const arr = [1, 2, 3];const [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3사용 시 주의: 배열 순서가 중요하다.기본값 지정const [x, y = 100] = [10];console.log(x); // 10console.log(y); // 100 (undefined를 기본값으로 대체)2. 객체 구조분해객체의 프로퍼티를 변수에 바로 할당할 수 있다.const user = { name: "John", ag..
개발/Javscript 2025. 6. 1. 17:50

React - Hook 사용 규칙과 Custom Hook 예제

React에서 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있도록 도와준다. 하지만 사용 시 몇 가지 중요한 규칙을 반드시 지켜야 한다. 아래는 흔히 발생하는 오류와 함께 기본 규칙, 그리고 Custom Hook을 활용한 코드 리팩토링 예제를 정리한 것이다.React Hook 사용 시 반드시 지켜야 할 규칙1. 함수 컴포넌트 또는 Custom Hook 내부에서만 호출해야 함Hooks는 컴포넌트 함수의 최상위에서만 호출해야 하며, 함수 외부에서 직접 호출하면 에러가 발생한다.❌ 잘못된 예시:import { useState } from "react";const [state, setState] = useState(); // ❌ 컴포넌트 함수 바깥에서 사용const HookExam =..
개발/React 2025. 6. 1. 15:55

Nginx 설치 및 배포 설정 정리

1. Nginx 설치 및 시작sudo apt updatesudo apt install nginxsudo systemctl status nginxsudo systemctl start nginx2. conf 파일 설정설정 파일 생성:sudo nano /etc/nginx/sites-available/wms.ootcha.comsudo nano /etc/nginx/sites-available/api.ootcha.com기본 HTTP(80) 설정 예시 (인증서 발급 전)server { listen 80; server_name api.ootcha.com; location /.well-known/acme-challenge/ { root /var/www/html; } access_l..
개발/Nginx 2025. 6. 1. 15:09

Spring Boot + GitLab CI/CD 배포 방법

GitLab 설치 및 Spring Boot 배포 방법 정리개발 환경운영체제: Ubuntu 20.04 LTS (Server Edition)GitLab 버전: gitlab-ceJava: OpenJDK 17 (temurin17)빌드 도구: Gradle (Toolchain 지원)Spring Boot: 2.x 이상 (Jar 배포 기반)GitLab Runner: Docker 또는 Shell executor 사용배포 방식: Systemd 서비스 및 쉘 스크립트 기반 무중단 배포CI/CD: .gitlab-ci.yml 기반 자동화방화벽 관리: ufw포트 확인: lsof, pkill, netstat로그 관리: nohup, logs 디렉토리 내 파일 저장1. GitLab Community Edition 설치# 시스템 업데이..
개발/Spring 2025. 6. 1. 14:53

Linux 관련 운영 명령어 모음

리눅스 서버 운영 기본 정리시간대 설정 (UTC -> KST)리눅스 기본 시간대는 UTC이며, 한국(KST) 기준으로 맞춰야 로그 시간 등이 일치함.timedatectl # 현재 시간/시간대 확인sudo timedatectl set-timezone Asia/Seoul # 한국 시간대로 설정systemctl 명령어 정리 (서비스 관리)sudo systemctl list-units # 서비스 목록 확인sudo systemctl is-active # 서비스 상태(active 여부)sudo systemctl enable # 부팅 시 자동 시작 등록sudo systemctl start ..
개발/Linux 2025. 6. 1. 14:49

React - Hooks

React Hooks 개념 정리React Hooks는 리액트 함수형 컴포넌트에서 "상태 관리"나 "라이프사이클 효과" 같은 기능을 사용할 수 있게 해주는 함수들이다. 이전에는 클래스 컴포넌트에서만 가능했지만, Hooks 덕분에 함수형 컴포넌트로도 모든 기능을 구현할 수 있다.1. useState컴포넌트 내부에서 상태를 관리할 수 있게 해주는 Hook이다.const [count, setCount] = useState(0);count: 상태값setCount: 상태 변경 함수useState(0): 초기값 0예: 버튼 클릭할 때 숫자 증가시키기function Counter() { const [count, setCount] = useState(0); return ( setCount(count + 1)}..
개발/React 2025. 6. 1. 14:35

React - useRef

useRef→ 새로운 Reference 객체를 생성하는 기능const refObject= useRef();useRef vs useState항목useRefuseState✅ 주요 용도DOM 접근, 리렌더링 없는 상태 보관상태 저장 및 UI 리렌더링 트리거🔄 값 변경 시 리렌더링❌ 리렌더링 발생하지 않음✅ 값 변경 시 컴포넌트 리렌더링🧠 저장되는 값.current 프로퍼티 내부에 저장내부적으로 저장, 렌더링 간 값을 유지함⏱ 초기화 타이밍컴포넌트 마운트 시 한 번마찬가지로 첫 렌더링 시 한 번💥 비동기 동작 영향영향 없음 (값 즉시 반영 가능)렌더링에 따라 비동기 업데이트 가능성 있음📦 예시 코드const ref = useRef(null)const [count, setCount] = useState(0..
개발/React 2025. 6. 1. 14:05

React - State로 입력 관리하기

input, select, textarea 등 입력 엘리먼트들을 아래와 같이 상태관리 한다고 했을 때 더 효율적으로 관리할 수 있도록 개선Register.jsx개선 전// 간단한 회원가입 폼// 1. 이름// 2. 생년월일// 3. 국적// 4. 자기소개import { useState } from "react";const Register = () => { const [name, setName] = useState("이름"); // 초기값: 이름 const [birth, setBirth] = useState(""); // 초기값: const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const [input, ..
개발/React 2025. 6. 1. 13:05

React - State와 Props

컴포넌트가 리렌더링 되는 경우는 크게 세가지가 있다.state가 변경될 경우props가 변경될 경우부모 컴포넌트가 변경될 경우 만약 코드가 아래와 같이 있다고 가정했을 때, setLight나 setCount로 state가 변경될 경우 Bulb 컴포넌트도 같이 리렌더링 된다.import "./App.css";import { useState } from "react";const Bulb = ({ light }) => { return ( {light === "ON" ? ( ON ) : ( OFF )} );};function App() { const [count, setCount] = useState(0); const [light, set..
개발/React 2025. 6. 1. 10:34

React - State로 상태 관리

리 렌더(Re-Render), 리 렌더링(Re-Rendering)→ 컴포넌트의 상태 변화가 바뀐걸 감지해서 자동으로 이 컴포넌트를 다시 렌더링해서 UI를 변경해주는 상황 컴포넌트의 상태를 의미하고 변화할 수 있는 값인 State를 만들 수 있으며, 아래와 같이 하나의 컴포넌트에 여러개의 상태를 생성하고 관리할 수 있다. useState→ React가 제공하는 내장 함수를 사용하기 위해 import를 해야한다.→ Return0상태값1상태변화함수const state = useState(0); → 비구조화 할당 문법을 이용해서 반환을 받는 것이 일반적이다.const [state, setState] = useState(0); 실습App.jsximport "./App.css";import { useState ..
개발/React 2025. 6. 1. 09:09

React - 이벤트 핸들링(Event Handling)

Event Handling→ 이벤트가 발생했을 때 그것을 처리하는 것→ 버튼 클릭시 경고창 노출과 같은 동작const Button = ({ children, text, color = "black" }) => { // 이벤트 객체 e const onCLickButton = (e) => { console.log(e); //SyntheticBaseEvent: 합성 이벤트 객체 console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};export default Button; SyntheticBaseEvent → 합성 이벤트 객체→ 크롬, 사파리, 웨일 등 서로 다른 브라우저의 규격..
개발/React 2025. 6. 1. 08:48
◀ 1 ▶

티스토리툴바