Daily log

2025/06 : 「17」건

  1. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리
    00:53:29
  2. ♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리
    2025.06.03
  3. Jooq란 무엇인가?
    2025.06.03
  4. @EventListener 완벽 가이드
    2025.06.03
  5. Liquibase로 DB 변경 이력 관리하기
    2025.06.02
  6. React - 상태 끌어올리기(State Lifting)
    2025.06.01
  7. Javascript - 구조분해 할당 (Destructuring Assignment)
    2025.06.01
  8. React - Hook 사용 규칙과 Custom Hook 예제
    2025.06.01
  9. Nginx 설치 및 배포 설정 정리
    2025.06.01
  10. Spring Boot + GitLab CI/CD 배포 방법 2
    2025.06.01
  11. Linux 관련 운영 명령어 모음
    2025.06.01
  12. React - Hooks 1
    2025.06.01
  13. React - useRef
    2025.06.01
  14. React - State로 입력 관리하기
    2025.06.01
  15. React - State와 Props
    2025.06.01
  16. React - State로 상태 관리
    2025.06.01
  17. React - 이벤트 핸들링(Event Handling)
    2025.06.01

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 ▶

티스토리툴바