Daily log

전체 글 : 「50」건

  1. 1인 개발자의 데스크톱 앱 도전기: 널리(NULI Labs)를 아시나요?
    01:30:41
  2. 슈퍼컵, 20년 만의 부활 그리고 전북 현대의 우승!
    2026.02.21
  3. git worktree 사용법
    2026.02.21
  4. 조현병, 오해와 진실
    2026.02.21
  5. 2026년 설 연휴 극장가와 안방극장을 동시에 사로잡은 배우, 유해진
    2026.02.21
  6. JWT Access Token과 Refresh Token 완벽 이해하기 1
    2025.12.13
  7. GitHub SSH Clone 설정 가이드 (Mac 기준)
    2025.07.08
  8. React ‘Invalid Hook Call’ 오류와 상태/데이터 관리 패턴 실무 사례, 원인, 해결
    2025.07.01
  9. React Provider란 무엇인가?
    2025.07.01
  10. TypeScript 타입 조합/확장 문법 정리
    2025.06.22
  11. TypeScript Omit<T, K> 정리
    2025.06.22
  12. Java Stream에서 map과 forEach의 차이
    2025.06.21
  13. Js & Ts & React 문법 1
    2025.06.12
  14. React - useQueryClient(). invalidateQueries
    2025.06.08
  15. React - useQuery
    2025.06.08
  16. React - useContext를 사용하기 전과 후의 구조 비교
    2025.06.08
  17. React - useCallback을 활용한 함수 최적화 전략
    2025.06.07
  18. React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교
    2025.06.07
  19. React - useState를 useReducer로 대체하는 간단 예제
    2025.06.05
  20. React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`
    2025.06.05
  21. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리 1
    2025.06.05
  22. ♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리 1
    2025.06.03
  23. Jooq란 무엇인가?
    2025.06.03
  24. @EventListener 완벽 가이드
    2025.06.03
  25. Liquibase로 DB 변경 이력 관리하기
    2025.06.02
  26. React - 상태 끌어올리기(State Lifting)
    2025.06.01
  27. Javascript - 구조분해 할당 (Destructuring Assignment)
    2025.06.01
  28. React - Hook 사용 규칙과 Custom Hook 예제
    2025.06.01
  29. Nginx 설치 및 배포 설정 정리
    2025.06.01
  30. Spring Boot + GitLab CI/CD 배포 방법 3
    2025.06.01

1인 개발자의 데스크톱 앱 도전기: 널리(NULI Labs)를 아시나요?

1인 개발자의 데스크톱 앱 도전기: 널리(NULI Labs)를 아시나요?최근에 맥(macOS)에서 쓰던 괜찮은 에디터 프로그램이 유료로 바뀌면서, 새로운 대안을 찾아다니는 분들이 많더라고요. 저도 그 중 한 명이었는데요, 그러다가 우연히 널리(NULI Labs)라는 한국산 데스크톱 유틸리티 브랜드를 알게 됐어요. 1인 개발자가 만들었다는데, 퀄리티가 생각보다 훨씬 좋아서 깜짝 놀랐답니다. 널리는 "널리 퍼지다"라는 뜻과 Utility의 합성어라고 해요. 슬로건이 "가벼움이 생산성을 만든다"인데, 정말 이름처럼 가볍고 유용한 앱들을 만들고 있더라구요. 특히 마음에 들었던 건 3개의 앱이 같은 디자인과 사용 경험(UX)을 공유한다는 점이었어요. 마치 하나의 에코시스템처럼 느껴졌죠. 널리(NULI Labs) ..
개발 2026. 2. 22. 01:30

슈퍼컵, 20년 만의 부활 그리고 전북 현대의 우승!

슈퍼컵, 20년 만의 부활 그리고 전북 현대의 우승!오늘(2026년 2월 21일) 축구팬들을 뜨겁게 달군 소식은 바로 슈퍼컵인데요! 20년 만에 부활한 슈퍼컵에서 전북 현대가 대전 하나 시티즌을 꺾고 우승을 차지했다는 소식입니다. 저도 축구팬으로서 너무 기쁜 소식이라, 관련 내용을 좀 더 자세히 알아봤어요. ① 슈퍼컵이란 무엇일까요?슈퍼컵은 지난 시즌 K리그1 우승팀과 FA컵(코리아컵) 우승팀이 맞붙는 경기인데요. 이번 2026년에는 K리그1과 코리아컵 모두 전북 현대가 우승하면서, K리그1 준우승팀인 대전 하나 시티즌이 슈퍼컵에 참가하게 됐다고 해요. 쉽게 말해서, 지난 시즌 최고의 팀을 가리는 '왕중왕전' 같은 경기라고 생각하면 될 것 같아요.슈퍼컵이 20년 만에 부활했다는 점도 눈에 띄는데요. 오랫..
인기 트렌드 2026. 2. 21. 16:08

git worktree 사용법

git worktree를 사용하여 여러 브랜치를 동시에 작업하고, 컨텍스트 스위칭 비용을 줄여 개발 효율을 높이는 방법을 알아봅니다.왜 git worktree를 사용해야 할까요?① 복잡한 개발 환경, 이제 안녕!개발하다 보면 여러 기능을 동시에 개발해야 하는 경우가 생기는데요. 기존 방식으로는 브랜치를 checkout하고, commit하고, push하는 과정이 번거롭고, 실수라도 하면 코드가 꼬여버리는 경우가 종종 있었어요. 특히 급하게 다른 브랜치로 전환해야 할 때, 현재 작업 중인 내용을 commit하지 않고는 이동할 수 없어 불편했죠.② 병렬 개발, 생산성 향상의 핵심git worktree는 이러한 문제를 해결해주는 아주 유용한 도구입니다. 하나의 저장소에서 여러 개의 작업 디렉토리를 생성하여 병렬..
개발/Git 2026. 2. 21. 15:48

조현병, 오해와 진실

오늘은 조현병에 대한 이야기를 해보려고 해요. 최근 뉴스에서 조현병 관련 소식이 많이 들려오는데요, 긍정적인 소식도 있지만 안타까운 사건들도 있어서 마음이 무겁네요. 그래서 오늘은 조현병에 대한 최신 정보를 쉽고 자세하게 정리해 드리려고 합니다.조현병, 오해와 진실① 조현병은 어떤 병일까요?조현병은 뇌 기능 이상으로 인해 발생하는 정신 질환인데요. 과거에는 '정신분열증'이라고 불렸지만, 사회적 낙인 때문에 2011년에 병명이 변경되었다고 해요. 조현병은 환각, 망상, 사고 장애, 감정 표현의 어려움 등 다양한 증상을 동반할 수 있습니다.조현병의 원인은 아직 명확하게 밝혀지지 않았지만, 유전적인 요인, 뇌의 구조적 이상, 신경전달물질의 불균형, 스트레스 등 다양한 요인들이 복합적으로 작용하는 것으로 알려져..
카테고리 없음 2026. 2. 21. 03:05

2026년 설 연휴 극장가와 안방극장을 동시에 사로잡은 배우, 유해진

2026년 설 연휴 극장가와 안방극장을 동시에 사로잡은 배우, 유해진여러분, 설 연휴 잘 보내셨나요? 저는 이번 연휴에 유해진 배우 덕분에 정말 즐거웠는데요. 극장과 TV에서 유해진 배우를 계속 볼 수 있어서 완전 '유해진 데이'였답니다! 지금부터 유해진 배우가 왜 이렇게 핫한지, 제가 찾아본 정보들을 싹 정리해서 알려드릴게요. ① 영화 '왕과 사는 남자' 400만 돌파!유해진 배우와 박지훈 배우가 함께 출연한 사극 영화 '왕과 사는 남자'가 드디어 400만 관객을 돌파했다는 소식이에요! (스타투데이 보도) 와, 진짜 대단하죠? 영화가 얼마나 재밌으면 이렇게 많은 분들이 보셨을까요.저는 특히 유해진 배우의 연기가 정말 인상 깊었는데요. 역시 믿고 보는 배우라는 생각이 들더라고요. 박지훈 배우와의 케미도 ..
인기 트렌드 2026. 2. 21. 02:35

JWT Access Token과 Refresh Token 완벽 이해하기

JWT Access Token과 Refresh Token 완벽 이해하기JWT 기반 인증에서 Access Token과 Refresh Token이 어떻게 동작하는지, 왜 두 개의 토큰이 필요한지 알아봅니다.왜 두 개의 토큰이 필요할까?하나의 토큰만 사용한다면?긴 만료 시간 (예: 7일)토큰이 탈취되면 7일 동안 악용 가능보안 취약짧은 만료 시간 (예: 15분)15분마다 재로그인 필요사용자 경험 최악해결책: 두 개의 토큰토큰만료 시간용도저장 위치Access Token15분API 호출메모리/localStorageRefresh Token7일Access Token 갱신HttpOnly CookieAccess Token: 짧은 만료 → 탈취되어도 피해 최소화Refresh Token: 긴 만료 → 사용자 편의성 유지토큰..
개발/Spring 2025. 12. 13. 21:19

GitHub SSH Clone 설정 가이드 (Mac 기준)

GitHub 비공개 저장소를 SSH로 clone 하기 위한 전체 설정 절차입니다.1. SSH 키 생성 (없을 경우)ssh-keygen -t ed25519 -C "your_email@example.com"기본 경로 ~/.ssh/id_ed25519로 저장패스프레이즈는 생략 가능 (엔터 두 번)2. 공개키 GitHub에 등록cat ~/.ssh/id_ed25519.pub위 명령어로 출력된 공개키 내용을 복사GitHub 접속 → SSH Key 등록 페이지"New SSH key" 클릭 후 붙여넣기 및 저장3. SSH config 파일 설정nano ~/.ssh/config아래 내용 추가:Host github.com HostName github.com User git IdentityFile ~/.ssh/id_ed..
개발/Git 2025. 7. 8. 16:40

React ‘Invalid Hook Call’ 오류와 상태/데이터 관리 패턴 실무 사례, 원인, 해결

1. 문제 상황(1) 실제로 발생한 오류 메시지(원문/해석)Warning: React has detected a change in the order of Hooks called by MaintenanceTable. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks해석:React가 MaintenanceTable 컴포넌트에서 Hook 호출 순서가 바뀌는 것을 감지했습니다. 이 문제를 수정하지 않으면 버그와 오류가 발생할 수 있습니다. 자세한 내용은 Rules of Hooks 문서를 참고하세요.Uncaught Error:..
개발/React 2025. 7. 1. 16:39

React Provider란 무엇인가?

1. Provider란?Provider는 React의 Context API에서 "공급자(Provider)" 역할을 하는 컴포넌트입니다.하위 컴포넌트 트리에 값을 공급(Provide)하는 역할을 합니다.코드 예시: 이렇게 Provider로 감싼 자식 컴포넌트들은 useContext(MyContext)를 통해 바로 값을 사용할 수 있습니다.2. 왜 써야 할까?(1) props drilling 방지원래 React는 부모 → 자식으로 props를 넘겨야만 데이터가 전달됩니다.컴포넌트 트리가 깊어지면, 매번 중간중간 props로 넘기는 것이 번거롭고, 코드가 복잡해집니다.Context + Provider를 사용하면, 중간 단계를 거치지 않고 원하는 하위 컴포넌트 어디에서나 값을 꺼내 쓸 수 있습니다.(2) 전역..
개발/React 2025. 7. 1. 12:41

TypeScript 타입 조합/확장 문법 정리

1. & (Intersection, 교차 타입)여러 타입을 합쳐서 모든 속성을 가지는 새 타입을 만든다.중복되는 속성이 있다면, 마지막에 선언된 타입 기준으로 덮어쓴다.type A = { id: number; name: string }type B = { name: string; age: number }type AB = A & B// AB는 { id: number; name: string; age: number }가 된다.2. | (Union, 유니언 타입)여러 타입 중 하나를 가질 수 있다.if/else나 switch 문, 타입 가드로 분기 처리 가능type Status = "loading" | "success" | "error"function printStatus(s: Status) { // s는 세..
개발/Typescript 2025. 6. 22. 00:54

TypeScript Omit<T, K> 정리

1. Omit이란?Omit는 기존 타입(T)에서 특정 속성(K)을 제외한 새로운 타입을 만들 때 사용한다.T: 원본 타입K: 제외하고 싶은 속성의 key(문자열, 유니언 가능)Omit은 TypeScript에 기본 내장되어 있으며, 실제로는 Mapped Types와 keyof, Exclude, Pick을 조합해서 동작한다.2. 기본 사용법interface User { id: number; name: string; email: string; password: string;}// password 필드를 제외한 User 타입type UserWithoutPassword = Omit;const user: UserWithoutPassword = { id: 1, name: "홍길동", email: "hon..
개발/Typescript 2025. 6. 22. 00:42

Java Stream에서 map과 forEach의 차이

Java Stream API를 사용하다 보면 map()과 forEach()를 자주 만나게 된다. 두 메서드는 비슷해 보이지만 목적과 사용하는 상황이 다르다. 이 글에서는 map()과 forEach()의 차이를 실제 예제와 함께 정리한다.1. map() : 변환(Transformation)에 사용설명: map()은 스트림의 각 요소를 특정 방식으로 변환할 때 사용한다.리턴값: 변환된 값들로 새로운 스트림(Stream)을 생성한다.주 용도: 데이터를 가공하거나 타입을 변경해야 할 때 사용한다.중간 연산: map은 중간 연산이다. 즉, map 이후에 또 다른 스트림 연산이 이어질 수 있다.예시List names = Arrays.asList("홍길동", "이순신", "강감찬");List nameLengths =..
개발/Java 2025. 6. 21. 22:46

Js & Ts & React 문법

JavaScript / TypeScript / React 문법 정리 (기초 + 심화)📌 JavaScript 문법 정리1. 변수 선언 방식// var: 함수 레벨 스코프, 중복 선언 가능, 호이스팅됨 (초기화는 undefined)var x = 1;// let: 블록 레벨 스코프, 중복 선언 불가, 호이스팅됨 (초기화 전 참조 불가)let y = 2;// const: 블록 레벨 스코프, 재할당 불가, 상수 값 정의에 사용const z = 3;2. 화살표 함수 (Arrow Function)// 인자가 2개일 때const add = (a, b) => a + b; // return 생략 가능// 인자가 1개일 때 괄호 생략 가능const square = x => x * x;// 인자가 없을 때는 괄호 필수con..
개발/Javscript 2025. 6. 12. 23:12

React - useQueryClient(). invalidateQueries

🧼 queryClient.invalidateQueries란?React Query의 queryClient.invalidateQueries()는 특정 queryKey에 해당하는 캐시를 무효화하여 useQuery가 자동으로 다시 데이터를 fetch 하게 만드는 함수입니다.const queryClient = useQueryClient()queryClient.invalidateQueries({ queryKey: ["commCodeList"] })🚀 효과해당 queryKey를 사용하는 모든 useQuery가 자동으로 재실행됨서버에서 최신 데이터를 다시 가져오게 됨로딩 스피너 표시, 캐시 업데이트 자동 처리🎯 주요 옵션queryKey: 어떤 쿼리를 무효화할지 지정 (배열 형태)exact: 정확히 일치하는 키만 ..
개발/React 2025. 6. 8. 17:29

React - useQuery

useQuery는 React Query에서 데이터를 서버에서 비동기적으로 가져올 때 사용하는 가장 기본적인 훅입니다.const { data, isLoading, error } = useQuery({ queryKey: ["users"], queryFn: fetchUsers,})주요 속성queryKey:해당 쿼리의 고유 키입니다. 캐싱, 리페칭 등에 활용됨배열 형태로 작성하며, 서버에 요청을 보낼 조건을 포함할 수 있음queryFn:실제 서버에서 데이터를 가져오는 함수 (예: axios.get(...))비동기 함수 형태로 작성됨data:쿼리의 결과 데이터isLoading:데이터를 가져오는 중인지 여부 (boolean)error:에러 발생 시 객체 반환refetch:수동으로 다시 조회할 때 사용예시: 공통..
개발/React 2025. 6. 8. 17:27

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
◀ 1 2 ▶

티스토리툴바