개발자겨려

AWS EC2 접속 (git bash)

개발자겨려 — Wed, 18 Jun 2025 17:55:52 +0900

AWS에서 빌린 컴퓨터에 접속하는 방법은 다운로드 받은 키 페어 (pem key)를 활용해 접속하는 방법과 AWS 콘솔로 접속하는 방식이있다

방법1) 키페어 활용

*키페어 권한 보안처리

chmod 400 "경로\키페어명.pem"

ssh -i 옵션을 사용하여 SSH 클라이언트가 인증에 사용할 특정 개인 키 파일을 지정.

ssh -i "경로" ec2-user@퍼블릭 IPv4 주소 입력

$ ssh -i "/c/Users/notyu/Documents/AWS_keypair/studying-developer.pem" ec2-user@43.203.200.144

연결완료

방법2) AWS 콘솔 활용

연결 클릭

별도의 설정 없이 한번 더 연결 클릭

연결 완료

[LeetCode] Second Highest Salary

개발자겨려 — Fri, 9 May 2025 18:11:14 +0900

문제 : https://leetcode.com/problems/second-highest-salary/description/

풀이1. 서브쿼리

SELECT 
	MAX(salary) AS SecondHighestSalary 
FROM (
    SELECT salary,
           DENSE_RANK() OVER (ORDER BY salary DESC) AS rnk
    FROM Employee
) ranked
WHERE rnk = 2;

JPA, Hibernate, spring Data JPA

개발자겨려 — Fri, 9 May 2025 15:49:18 +0900

JPA는 표준 인터페이스를 제공하고, Hibernate는 JPA를 구현하며, Spring Data JPA는 JPA 사용을 간편하게 만들어주기 때문에 이 세 가지를 함께 사용합니다. Spring Data JPA는 Repository 인터페이스를 통해 데이터 액세스 코드를 줄이고, Hibernate는 JPA 표준을 준수하며 실제 데이터베이스와의 통신을 담당합니다.

1. JPA (Java Persistence API)

JPA는 Java 애플리케이션에서 관계형 데이터베이스를 사용하는 방식을 정의하는 표준 명세이다. JPA는 인터페이스의 집합이며, 실제 구현은 제공하지 않는다. JPA는 객체-관계 매핑(ORM)을 위한 인터페이스와 어노테이션을 제공하며, EntityManager와 같은 핵심 인터페이스를 정의함.

주요 역할:
- ORM 기술 사용을 위한 표준 정의
- EntityManager, EntityTransaction 등의 인터페이스 제공
특징:
- 특정 기능을 수행하는 라이브러리가 아닌 인터페이스
- 구현체가 없으므로 JPA만으로는 데이터베이스 연동 X

2. Hibernate

Hibernate는 JPA 인터페이스를 구현하는 ORM 프레임워크이다. Hibernate는 JPA의 구현체로서, 데이터베이스와 Java 객체 간의 매핑을 자동으로 처리하고 SQL 쿼리 작성 없이 데이터베이스 작업을 수행할 수 있도록 지원합니다.

주요 역할:
- JPA 인터페이스 구현
- 객체와 관계형 데이터베이스 간의 매핑 자동 처리
- SQL 쿼리 대신 객체 중심으로 데이터베이스 조작 가능
특징:
- JPA의 모든 기능을 지원하며 JPA 구현체로서 작동
- 다양한 데이터베이스 벤더 지원

3. Spring Data JPA

Spring Data JPA는 Spring 프레임워크에서 JPA를 더욱 쉽고 편리하게 사용할 수 있도록 지원하는 모듈입니다. Spring Data JPA는 JPA를 추상화한 Repository 인터페이스를 제공하여, CRUD (Create, Read, Update, Delete) 작업에 필요한 상용구 코드를 줄여줍니다.

주요 역할:
- JPA 기반 데이터 액세스 계층 구현 단순화
- Repository 인터페이스를 통해 JPA 사용 편의성 향상
- 메서드 이름 규칙을 기반으로 쿼리 자동 생성
특징:
- Spring 프레임워크의 일부로, JPA를 추상화하여 더 쉽게 사용 가능
- 자동 쿼리 생성, 트랜잭션 관리 등 기능 제공

동작 방식 요약

JPA: 자바 객체와 관계형 데이터베이스 간의 연동(ORM)을 위한 표준 인터페이스 정의의 집합.
Hibernate: JPA 인터페이스를 구현하여 실제 데이터베이스와 통신하고 객체-관계 매핑(ORM) 수행.
Spring Data JPA: Repository 인터페이스를 통해 데이터 액세스 로직을 추상화하고, JPA 사용을 간소화.

H2 DB를 local profile에 적용하기

개발자겨려 — Fri, 9 May 2025 11:03:03 +0900

H2 DB 는 경량 Database 로 개발 단계에서 많이 사용하고 있으며 , Disk 가 아닌 Memory 에 데이터를 저장할 수 있다 .
데이터가 휘발된다는 단점을 코드에만 집중하는 데 사용하는 것이다

✅application.yml 설정

spring:
  config:
    activate:
      on-profile: local		//profile 선택: local
  datasource:
    url: "jdbc:h2:mem:library;MODE=MYSQL;NON_KEYWORDS=USER"
    username: "sa"
    password: ""
    driver-class-name: org.h2.Driver
  jpa:
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        format_sql: true
        show_sql: true
        dialect: org.hibernate.dialect.H2Dialect
    open-in-view: false
  h2:
    console:
      enabled: true
      settings:
        web-allow-others: true
      path: /h2-console

jpa.hibernate.ddl-auto: create
- H2 DB를 in-Memory로 설정했기 때문에 서버가 시작될 때마다 테이블을 제거하고 만들어주는것이 좋다.

주의할점: local 외에 다른 설정(예:dev)이 있다면 다른 설정 쪽에도 on-profile : dev 해줘야된다. 안하면 on-profile 설정 없는쪽이 기본 프로파일로 항상 적용됨

✅ profile 변경

1. IntelliJ Ultimate (유료) 버전 방법

Edit Configurations 클릭

Active profiles에 local 입력

2. IntelliJ Community (무료) 버전 방법

Modify options 클릭 -> Add VM options 클릭 -> Dspring.profiles.active=local 입력

✅ 작동 확인

실행 시 아래와 같이 지정된 profile로 실행되는 것을 확인할 수 있다.

✅ http://localhost:8080/h2-console 에 접속

application.yml에 설정해두었던 URL 과 Name 및 Password 입력

✅테이블 확인

[LeetCode] Combine Two Tables

개발자겨려 — Thu, 8 May 2025 00:26:06 +0900

문제 : https://leetcode.com/problems/combine-two-tables/description/

풀이:

# 방법1. LEFT JOIN (가장 일반적인 방법)
SELECT 
	p.firstName, p.lastName, a.city, a.state
FROM 
	person p
LEFT JOIN 
	address a
ON 
	p.personId = a.personId;


# 방법2. COALESCE (lEFT JOIN 과 효율성 동일 단지 결과 가공용)
SELECT 
    p.firstName, 
    p.lastName,
    COALESCE(a.city, NULL ) AS city, 
    COALESCE(a.state, NULL ) AS state
FROM 
    Person p
LEFT JOIN 
    Address a
ON 
    p.personId = a.personId;



# 방법3. NATURAL JOIN (실무에서 사용 못함) 
# ON p.personId = a.personId 같은 명시적인 조건 없음
SELECT 
	p.firstName, p.lastName, a.city, a.state
FROM 
	person p
NATURAL JOIN 
	address a;

[JPA] orphanRemoval vs CascadeType.REMOVE 정리

개발자겨려 — Wed, 7 May 2025 18:18:26 +0900

orphanRemoval 과 CascadeType.REMOVE 는 JPA(Java Persistence API)에서 엔티티 간의 관계를 관리하고, 둘다 부모 엔티티와 자식 엔티티 간의 관계에서 자식 엔티티를 삭제하는 데 사용된다는 점에선 같지만, 삭제 트리거(Trigger)가 다르다.

✅ 요약비교: CascadeType.REMOVE vs orphanRemoval = true

항목	CascadeType.REMOVE	orphanRemoval = true
삭제 trigger	부모 엔티티 자체가 삭제될 때	연관관계에서 자식이 제거될때
실행 시점	entityManager.remove(parent)	parent.getChildren().remove(child) 등
자식 삭제 방식	부모와 함께 삭제	부모와의 관계가 끊어지면 삭제
삭제 대상	모든 자식 엔티티	관계에서 제거된 자식만
주요 목적	부모 삭제 시 자식 자동 삭제	연관관계 해제 시 자식 삭제 (고아 제거)

예시

@Entity
public class Parent {
    @Id @GeneratedValue
    private Long id;

    @OneToMany(mappedBy = "parent", 
               cascade = CascadeType.ALL, 
               orphanRemoval = true)
    private List<Child> children = new ArrayList<>();
}

@Entity
public class Child {
    @Id @GeneratedValue
    private Long id;

    @ManyToOne
    private Parent parent;
}

▶ CascadeType.REMOVE만 사용하는 경우

// 1. 부모 삭제
Parent parent = entityManager.find(Parent.class, 1L);
entityManager.remove(parent); // 이때 자식도 같이 삭제됨

자식은 부모와 연결돼 있기 때문에 부모 삭제 시 자식도 같이 삭제됨.

▶ orphanRemoval = true만 사용하는 경우

// 2. 자식만 제거
Parent parent = entityManager.find(Parent.class, 1L);
Child child = parent.getChildren().get(0);

parent.getChildren().remove(child); // 자식은 DB에서 DELETE됨

부모는 그대로 살아 있고, 연결만 끊었는데도 자식이 삭제됨. 이것이 orphanRemoval의 핵심.

핵심 정리

CascadeType.REMOVE: 부모가 삭제될 때 자식도 삭제
orphanRemoval = true: 부모는 살려두고 자식만 제거해도 삭제됨
둘 다 설정하면: 부모 삭제 시 전부 삭제되고, 관계 끊으면 해당 자식만 삭제됨

둘을 같이 쓰는 경우가 많긴 하지만, 삭제의 의도와 트리거 시점이 다르기 때문에 목적에 따라 선택해야한다고한다..

[JPA] 연관관계 주인이란?

개발자겨려 — Wed, 7 May 2025 17:21:44 +0900

✅ 결론부터 말하자면

연관관계의 주인은 외래 키를 직접 가지므로, 해당 테이블에 외래 키 컬럼이 존재함.
연관관계의 주인이 아닌 쪽은 외래 키 컬럼이 테이블에 존재하지 않는다.

@Entity
public class Member {
    @Id @GeneratedValue
    private Long id;

    @ManyToOne
    @JoinColumn(name = "team_id") // 외래 키가 있는 쪽 → 연관관계의 주인
    private Team team;
}

@Entity
public class Team {
    @Id @GeneratedValue
    private Long id;

    @OneToMany(mappedBy = "team") // 주인이 아님 (읽기 전용)
    private List<Member> members = new ArrayList<>();
}

이 경우 DDL을 보면:

member 테이블에는 team_id라는 외래 키 컬럼이 생성. ✅
team 테이블에는 아무런 외래 키 컬럼이 없다. ❌

✅ 연관관계 주인의 역할

연관관계의 주인만이 외래 키 값을 변경(등록/수정/삭제)할 수 있다. ( 테이블에 존재하는 컬럼이니까 변경 가능 )
반대편(연관관계의 주인 X), 외래 키에 영향을 주지 못하고 읽기 전용이다.

그래서 실제로 JPA에서 데이터 변경을 하려면?

연관관계의 주인 쪽에서만 수정/등록/삭제가 가능.
예: member.setTeam(team) 으로 연관관계 설정해야 team_id가 DB에 반영됨.
반대로 team.getMembers().add(member)만 하면 아무런 DB 반영이 안 됨.

다음 게시물에서는 PA에서 연관관계와 관련된 중요한 옵션 중 하나인 orphanRemoval에 대해서 공부하기!

NOT IN 과 NOT EXISTS 차이

개발자겨려 — Tue, 6 May 2025 22:28:11 +0900

SQL에서 NOT IN과 NOT EXISTS는 서브쿼리에서 특정 조건을 만족하지 않는 데이터를 필터링하는 데 사용되는 연산자이다. 두 연산자는 비슷한 결과를 낼 수 있지만, 동작 방식과 성능, NULL 값 처리에서 차이점을 보인다.

NOT IN 연산자

NOT IN 연산자는 서브쿼리 결과에 없는 값을 가진 행을 선택한다. 즉, 메인 쿼리의 특정 컬럼 값이 서브쿼리 결과 집합에 존재하지 않는 경우에 TRUE를 반환한다.

SELECT column1, column2, ...
FROM table_name
WHERE column_name NOT IN (subquery);

장점:

구문이 간단하고 직관적이다.
비교적 작은 데이터 집합에서 사용하기에 적합하다.

단점:

서브쿼리에 NULL 값이 포함될 경우, 전체 쿼리 결과가 NULL이 될 수 있다. 이는 NOT IN 연산자가 NULL 값을 처리하는 방식 때문이다. NOT IN은 내부적으로 AND 연산으로 처리되는데, NULL과의 비교는 항상 UNKNOWN을 반환하므로 결과적으로 어떠한 행도 반환하지 않게 된다.
큰 데이터 집합에서는 성능이 저하될 수 있다. NOT IN은 서브쿼리의 결과를 모두 메모리에 로드하여 비교하기 때문에, 서브쿼리 결과가 클수록 비효율적이다.

NULL 값 문제 해결:

NOT IN 사용 시 NULL 값으로 인한 문제를 해결하기 위해 다음과 같은 방법을 사용할 수 있다:

WHERE절에 IS NOT NULL 조건을 추가하여 서브쿼리 결과에서 NULL 값을 제외한다.
COALESCE 또는 IFNULL 함수를 사용하여 NULL 값을 다른 값으로 대체한다.

NOT EXISTS 연산자

NOT EXISTS 연산자는 서브쿼리가 결과를 반환하지 않는 경우에 TRUE를 반환한다. 즉, 메인 쿼리의 특정 행과 관련된 데이터가 서브쿼리에 존재하지 않는 경우에 해당 행을 선택한다.

SELECT column1, column2, ...
FROM table_name
WHERE NOT EXISTS (subquery);

장점:

NULL 값을 안전하게 처리할 수 있다. NOT EXISTS는 서브쿼리의 결과 존재 여부만 확인하므로 NULL 값에 영향을 받지 않는다.
큰 데이터 집합에서 NOT IN보다 성능이 우수할 수 있다. NOT EXISTS는 서브쿼리에서 조건에 맞는 행을 찾으면 즉시 실행을 중단하므로, 불필요한 검색을 줄일 수 있다.

단점:

NOT IN보다 구문이 복잡하게 느껴질 수 있다.

성능 비교

일반적으로 NOT EXISTS는 NOT IN보다 성능이 더 좋은 경향이 있다. 특히 서브쿼리의 결과 집합이 클 경우, NOT EXISTS는 더 효율적인 실행 계획을 생성할 수 있다. NOT EXISTS는 조건에 맞는 행을 찾는 즉시 서브쿼리 실행을 중단할 수 있지만, NOT IN은 서브쿼리 전체를 실행하여 결과를 메모리에 저장해야 하기 때문이다.

결론

NOT IN과 NOT EXISTS는 모두 유용한 연산자이지만, 다음과 같은 점을 고려하여 상황에 맞게 선택하는 것이 좋다.

NULL 값: 서브쿼리 결과에 NULL 값이 포함될 가능성이 있다면 NOT EXISTS를 사용하는 것이 안전하다.
성능: 큰 데이터 집합에서는 NOT EXISTS가 더 나은 성능을 제공할 수 있다.
가독성: NOT IN이 더 직관적으로 느껴진다면, NULL 값 처리 문제를 해결하고 성능을 고려하여 사용 여부를 결정한다.

최적의 성능을 위해서는 쿼리 실행 계획을 분석하고, 필요에 따라 인덱스를 추가하는 등의 튜닝을 수행하는 것이 중요하다.

CSS-in-JS

개발자겨려 — Tue, 6 May 2025 17:50:50 +0900

React는 크게 2가지 방식으로 컴포넌트의 스타일을 적용한다.

CSS in CSS
- 리액트 컴포넌트 별로 css 파일을 갖는 형식으로 스타일을 관리
- CSS Module
- 별도의 자바스크립트 전환 필요 없음(속도가 빠름)
CSS in JS
- 자바스크립트 내에서 css를 작성하는 방식
- 대표적인 라이브러리로 styled-component, emotion 등이 있음
- 현재 사용중인 스타일만 DOM에 포함시킬 수 있음
- 별도 패키지를 설치하기 때운에 용량이 증가함(스크립트 전환이 필요하여 속도가 다소 느려짐)

CSS in JS 방식으로 하기위해 Emotion 적용하기

yarn add @emotion/react @emotion/styled
또는
npm install @emotion/react @emotion/styled

설치 완료되면 package.json에서 확인 가능하다.

App.jsx에 CSS-in-JS 방식 적용

import React from 'react';
import logo from './logo.svg';
import './App.css';
import styled from '@emotion/styled';

const Container = styled.div`
  text-align: center;
`;

const Header = styled.header`
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
`;

const AppLogo = styled.img`
  height: 40vmin;
  pointer-events: none;

  @media (prefers-reduced-motion: no-preference) {
    {
      animation: App-logo-spin infinite 20s linear;
    }
  }

  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
`;

const AppLink = styled.a`
  color: #61dafb;
`;

function App() {
  return (
    <Container>
      <Header>
        <AppLogo src={logo} alt={'logo'} />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <AppLink
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </AppLink>
      </Header>
    </Container>
  );
}

export default App;

reportWebVitals.ts (오류 : Unknown options: extensions, resolvePluginsRelativeTo)

개발자겨려 — Tue, 6 May 2025 15:36:47 +0900

can't find ReportCallback or ReportHandler type

오류 해결 : 아래와 같이 수정 (참고 링크: https://github.com/GoogleChrome/web-vitals/issues/482)

import { MetricType } from "web-vitals";

const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
      onCLS(onPerfEntry);
      onINP(onPerfEntry);
      onFCP(onPerfEntry);
      onLCP(onPerfEntry);
      onTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;