2025년 10월 15일 수요일 (93일차)

Jeonghoon·2025년 10월 15일

jeonghoon's Study

목록 보기
96/128

🧩 SQL & AXIOS 정리


🔸 ALTER (테이블 구조 변경)

기존 테이블의 구조를 변경할 때 사용하는 SQL 문법

📘 기본 문법

구분문법설명
속성 추가ALTER TABLE 테이블명 ADD COLUMN 새로운속성명 타입;새로운 컬럼 추가
속성 수정ALTER TABLE 테이블명 MODIFY COLUMN 수정할속성명 타입;컬럼의 타입 수정
속성명 수정ALTER TABLE 테이블명 CHANGE COLUMN 기존속성명 새로운속성명 타입;컬럼 이름 변경
속성 삭제ALTER TABLE 테이블명 DROP COLUMN 삭제할속성명;컬럼 삭제
PK 추가ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건명 PRIMARY KEY(PK속성명);기본키 추가
PK 삭제ALTER TABLE 테이블명 DROP PRIMARY KEY;기본키 삭제
FK 추가ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건명 FOREIGN KEY(FK속성명) REFERENCES 참조테이블(PK속성명);외래키 추가
FK 삭제ALTER TABLE 테이블명 DROP FOREIGN KEY 삭제할제약조건명;외래키 삭제
제약조건 추가ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건명 제약조건(속성명);제약조건 추가
제약조건 삭제ALTER TABLE 테이블명 DROP CONSTRAINT 삭제할제약조건명;제약조건 삭제

📋 확인 명령어

SHOW COLUMNS FROM 테이블명;                     -- 속성 확인
SELECT * FROM INFORMATION_SCHEMA.TABLE_CONSTRAINT;  -- 제약조건 확인

🔸 SUBQUERY (서브쿼리)

SELECT문 안에서 또 다른 SELECT문을 사용하는 것

📘 형식

SELECT (SELECT) FROM (SELECT) WHERE (SELECT);

🔸 트랜잭션 (Transaction)

여러 작업을 하나의 묶음으로 처리하여 모두 성공 시 COMMIT,\
하나라도 실패 시 ROLLBACK 처리하는 기능

📘 사용 예시

SET AUTOCOMMIT = 0;        -- 자동 커밋 비활성화
START TRANSACTION;         -- 트랜잭션 시작
SAVEPOINT 저장지점명;       -- 저장 지점 설정
COMMIT;                    -- 모든 작업 저장
ROLLBACK;                  -- 전체 취소
ROLLBACK TO 저장지점명;     -- 특정 지점까지 롤백

⚙️ Java에서의 트랜잭션

환경특징
Spring@Transactional 사용, RuntimeException 시 자동 롤백 (savepoint 미지원)
JDBC (DAO)savepoint 사용 가능

🔸 VIEW (뷰)

하나 이상의 원본 테이블을 기반으로 만들어진 가상 테이블

📘 사용 목적

  1. 권한 및 보안을 강화하기 위해\
  2. 복잡한 쿼리 결과를 재사용하기 위해\
  3. 대용량 데이터 조회 속도 향상을 위해

📘 사용법

기능문법
생성CREATE OR REPLACE VIEW 뷰이름 AS 쿼리;
목록 확인SHOW FULL TABLES WHERE TABLE_TYPE = 'VIEW';
수정ALTER VIEW 뷰이름 AS 새로운쿼리;
조회SELECT * FROM 뷰이름;
삭제DROP VIEW IF EXISTS 뷰이름;

⚠️ 주의사항

  1. 집계 속성(AVG, SUM 등)은 수정 불가
  2. 일반적으로 SELECT 전용으로 사용

⚡ AXIOS (비동기 통신)

비동기 HTTP 통신 라이브러리로, 자동으로 JSON 타입으로 변환\
대표 비동기 통신 방식: fetch(JS 내장), axios(Node 기반),
ajax(jQuery 기반)


📦 설치 방법

📍 JavaScript (CDN)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

📍 React (npm)

npm i axios

⚙️ 기본 문법

axios.HTTP메소드명('통신할HTTP주소', {body}, {option})

매개변수 설명

  1. HTTP 메소드:\
    axios.post(), axios.get(), axios.put(), axios.delete()

  2. 통신할 주소

    • 내부 서버: @RestController에서 매핑된 주소\
      예) @GetMapping("/day04/student") → '/day04/student'
    • 외부 서버: https://...
  3. body (요청 데이터)

    • post, put 메소드에서 사용\
    • get, delete에서는 사용하지 않음
  4. option (헤더 설정)

설정설명
{ headers: { 'Content-Type': 'application/json' } }기본값
{ headers: { 'Content-Type': 'multipart/form-data' } }파일 업로드용

🔄 통신 유형

1️⃣ 비동기 처리

() => {
  axios.post('', {}, {})
    .then(response => console.log(response.data))
    .catch(e => console.log(e));
}

2️⃣ 동기 처리 (.then / .catch)

async () => {
  await axios.post('', {}, {})
    .then(response => console.log(response.data))
    .catch(e => console.log(e));
}

3️⃣ 동기 처리 (try / catch)

async () => {
  try {
    const response = await axios.post('', {}, {});
    console.log(response.data);
  } catch (e) {
    console.log(e);
  }
}

🔒 CORS Policy (교차 출처 정책)

브라우저의 보안 정책으로, 서로 다른 도메인 간의 리소스 요청을
제한함

⚠️ 예시

요청결과
JS (localhost:8080) → Spring (localhost:8080)✅ 허용
React (localhost:5173) → Spring (localhost:8080)❌ CORS 오류 발생

✅ 해결 방법

📍 1. Spring 서버에서 허용

@CrossOrigin("http://localhost:5173")

해당 컨트롤러에서 리액트 서버 도메인을 허용


📍 2. React에서 허용

const option = { withCredentials: true };

JS에서도 Credentials(인증 정보) 허용 필요

0개의 댓글