이파닭 IT

VUE 에서 setup() 이란?

이파댥 — Tue, 21 Jan 2025 14:56:27 +0900

setup() 은 Vue 3에서 도입된 Composition API 의 핵심 기능 중 하나다.

Composition API 는 기존의 Options API(즉, data, methods, computed, watch, created, mounted 등) 방식 대신, 기능별로 코드가 더 유연하게 구성되도록 돕는 새로운 방식이다.

setup()은 컴포넌트의 초기화 및 반응성 상태를 정의하는데 사용한다.

setup()은 컴포넌트가 생성되기 전에 실행되며, 컴포넌트의 data, methods, computed 등을 정의하는 대신, 반응형 상태와 기능을 정의하는 새로운 방법을 제공한다.

1. setup()의 기본 사용법

setup()은 컴포넌트가 인스턴스화될 때 가장 먼저 호출됨.

이 함수는 props와 context(특히 attrs, slots, emit)를 매개변수로 받으며, 반환값으로는 컴포넌트에서 사용될 데이터와 메서드 등을 반환함.

import { ref, computed } from 'vue';

export default {
  setup(props) {
    // 반응형 상태 생성 (reactive state)
    const count = ref(0);
    
    // computed 값 생성
    const doubledCount = computed(() => count.value * 2);
    
    // 메서드 생성
    const increment = () => {
      count.value++;
    };
    
    // setup에서 반환한 값은 템플릿에서 사용할 수 있음
    return {
      count,
      doubledCount,
      increment
    };
  }
};

2. setup()의 주요 특징

1. 반응형 상태 관리 (ref와 reactive)

ref는 기본 자료형을 반응형으로 만들 때 사용함.
reactive는 객체나 배열을 반응형으로 만들 때 사용함.

import { ref, reactive } from 'vue';

export default {
  setup() {
    // ref로 기본값을 반응형 상태로 만듦
    const count = ref(0);
    
    // reactive로 객체를 반응형 상태로 만듦
    const user = reactive({ name: 'John', age: 30 });
    
    return { count, user };
  }
};

2. 컴포넌트 내의 메서드와 속성 정의

setup()에서는 **methods**와 **computed**처럼, 메서드와 계산된 값을 직접 정의하여 반환함.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const double = computed(() => count.value * 2);

    return { count, increment, double };
  }
};

3. props와 context 사용

props: 부모 컴포넌트로부터 전달된 데이터를 setup()에서 사용할 수 있음.
context: attrs, slots, emit 등 컴포넌트의 컨텍스트 정보를 제공함.

import { defineProps, defineEmits } from 'vue';

export default {
  setup() {
    // props를 사용
    const props = defineProps();
    const emit = defineEmits();

    const sendEvent = () => {
      emit('customEvent', 'Hello from setup!');
    };

    return { props, sendEvent };
  }
};

4. setup()의 실행 시점

setup()은 컴포넌트 인스턴스가 생성되기 전에 호출.
이 시점에서 data, computed, methods 등을 설정함.
또한, **created**나 **mounted**와 같은 라이프사이클 훅을 사용할 수 없음.
대신, Composition API에서는 onMounted, onCreated 등의 훅을 사용하여 이러한 기능을 처리.

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('컴포넌트가 마운트되었습니다!');
    });
  }
};

3. setup()과 Options API의 차이점

Options API 에서는 data, methods, computed 등을 객체로 정의하지만, Composition API에서는 setup() 함수에서 모든 상태와 기능을 관리하며, 훨씬 더 유연하게 코드 구조를 설정할 수 있음.
Options API

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

Composition API

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};

4. setup()의 장점

유연성: 다양한 로직을 기능별로 묶어서 관리할 수 있음. 여러 컴포넌트 간의 재사용 가능한 로직을 쉽게 추출하고 관리할 수 있음.
타입스크립트와의 호환성: setup()은 타입스크립트와 매우 잘 호환되어, 타입 추론을 더 쉽게 할 수 있음.
컴포넌트 간의 상태 관리: setup() 안에서 여러 상태를 모듈화하고 로직을 나누는 데 유리.

5. 언제 setup()을 사용할까?

Composition API 사용을 선호할 때: 코드의 가독성, 재사용성, 유지보수성을 높이고 싶을 때 setup()을 사용.
복잡한 상태와 로직을 다룰 때: 여러 개의 상태와 메서드가 엮여 있는 경우, setup()을 사용하여 코드를 더 깔끔하게 관리할 수 있음.
타입스크립트를 사용할 때: setup()은 타입스크립트와 함께 사용할 때 더 많은 장점이 있음.

결론

setup()은 Vue 3에서 컴포넌트를 더 유연하게 설계할 수 있게 도와주는 Composition API 의 핵심 함수.

data, methods, computed 등 기존 옵션을 setup() 내부에서 선언하고 반환할 수 있어 코드의 모듈화와 재사용성을 크게 향상시킬 수 있음.

CREATED MOUNTED 차이

이파댥 — Tue, 21 Jan 2025 14:43:31 +0900

created

인스턴스가 작성된 후 동기적으로 호출
부모, 자식 관계의 컴포넌트가 렌더링 될 때 mounted 보다 먼저 호출되며 부모, 자식 순으로 실행
가상 DOM 을 건드릴 수 없습니다.
($el 속성 사용 불가)
created 에서는 컴포넌트의 데이터 초기화 및 서버 요청과 관련된 작업
이 시점에서는 DOM에 접근할 수 없지만, 컴포넌트의 데이터와 메서드에 접근할 수 있기 때문에 데이터 관련 작업을 먼저 처리하고자 할 때 사용

mounted

인스턴스가 마운트된 후 호출
부모, 자식 관계의 컴포넌트가 렌더링 될 때 created 다음으로 호출되며 자식, 부모순으로 실행
모든 자식 컴포넌트가 마운트되었음을 보장하지 않음
(전체 화면내용이 렌더링될 때까지 기다리려면, mounted 내에 vm.$nextTick를 사용)
가상 DOM 을 건드릴 수 있습니다.
($el 속성 사용 가능)
mounted 에서는 DOM이 완전히 렌더링된 후 호출되기 때문에 DOM 요소를 조작하거나, 외부 라이브러리와 상호작용할 때 사용
jQuery, D3.js, Chart.js 같은 외부 라이브러리와 연동할 때 유용

HTTP 상태 코드 (100, 200, 300, 400, 500)

이파댥 — Wed, 28 Aug 2024 22:50:46 +0900

HTTP 상태 코드란 ?

- HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줌

- 응답은 5개의 그룹으로 나뉨 : 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고 서버 에러

그룹	코드	상수	설명
정보 응답	100	Continue	지금까지의 상태가 괜찮으며 클라이언트가 계속해서 요청을 하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려줌
정보 응답	101	Switching Protocol	클라이언트가 보낸 Upgrade 요청 헤더에 대한 응답에 들어감
성공응답	200	OK	요청이 성공적으로 됨
	201	Created	요청이 성공적 그 결과로 새로운 리소스가 생성
	202	Accepted	요청을 수신하였지만 그에 응하여 행동할 수 없음
리다이렉션 메시지	300	Multiple Choice	요청에 대해서 하나 이상의 응답이 가능
	301	Moved Permanently	요청한 리소스의 URI가 변경되었음을 의미
	302	Found	요청한 리소스의 URI가 일시적으로 변경되었음을 의미
	303	See Other	서버가 클라이언트로 직접 보내는 응답
클라이언트 오류 응답	400	Bad Request	잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미
	401	Unauthorized	비인증(unauthenticated) 을 의미.
	403	Forbidden	클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않음 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있음
	404	Not Found	서버는 요청받은 리소스를 찾을 수 없음 브라우저에서는 알려지지 않은 URL을 의미
서버 오류 응답	500	Internal Server Error	서버는 아직 처리 방법을 알 수 없음
	501	Not Implemented	요청 방법은 서버에서 지원되지 않으므로 처리할 수 없음
	503	Service Unavailable	서버가 요청을 처리할 준비가 되지 않음

출처 및 참고하면 좋은 자료

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 상태 코드 - HTTP | MDN

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고

developer.mozilla.org

JAR 과 WAR 의 개념과 차이점

이파댥 — Tue, 27 Aug 2024 20:32:02 +0900

JAR 이란?

- JAR(Java ARchive) 파일은 Java 애플리케이션을 배포하기위한 압축된 파일

- 여러개의 클래스 파일, 메타데이터, 리소스(이미지, 텍스트 등)를 하나의 파일로 묶어줌

- 주로 독립 실행형 (Java SE) 애플리케이션이 사용됨

- 실행 가능한 JAR 파일은 'Main-Class' 가 지정된 'META-INF/MANIFEST.MF' 파일을 포함

* 사용 예시 *

- 간단한 콘솔 기반 Java 애플리케이션

- 독립적인 Java 도구 또는 라이브러리

WAR 이란?

- WAR(Web Application Archive) 파일은 Java 웹 애플리케이션을 배포하기 위한 압축된 파일

- 웹 애플리케이션의 모든 컴포넌트(서블릿, JSP 파일, HTML 파일, Java 클래스 등)를 포함

- 웹 서버 또는 애플리케이션 서버에서 실행되며, 서버의 컨테이너가 이를 관리

- 디렉토리 구조가 정해져 있어야 하며, 'WEB_INF' 폴더에 설정 파일(web.xml)과 클래스 파일이 위치

* 사용 예시 *

- Java 웹 애플리케이션 ( EX. spring MVC, JSP 기반 애플리케이션)

- 엔터프라이즈 포털 시스템

JAR 과 WAR 의 차이점

구분	JAR	WAR
용도	독립 실행형 Java 애플리케이션	Java 웹 애플리케이션
파일 구조	자유롭게 구성 가능	정해진 디렉토리 구조 (WEB-INF 등)
실행 환경	Java Virtual Machine(JVM)	웹 서버 또는 애플리케이션 서버
실행 파일	가능(Main-Class 포함 시)	불가능(서버가 파일을 배포하고 실행)
확장자	.jar	.war

요약 및 정리

- JAR 은 주로 독립적인 Java 애플리케이션을 위해 사용되며,

WAR 은 Java 웹 애플리케이션을 배포하기 위해 사용됨

- 두 파일 형식은 각각의 목적과 구조에 따라 다르게 설계되었음

- 사용 시점과 환경에 맞는 파일 형식을 선택해야함

JPA 기초

이파댥 — Tue, 20 Aug 2024 23:06:29 +0900

// WebConfig.java

package com.kh.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

// 3000 포트와 연결하는 webConfig 설정
@Configuration
public class WebConfig implements WebMvcConfigurer{
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**") // 3000 다음에 오는 api url 모두 허용
				.allowedOrigins("http://localhost:3000") // localhost:3000 주소 접속허용
				.allowedMethods("GET","POST","PUT","DELETE","OPTIONS") // httpMethod 와 기타 옵션 모두 허용
				.allowedHeaders("*"); // 데이터, 이미지, 파일 다중파일등 모두 허용
	}
}

JPA 는 Mybatis 와 다른 점이 크게 mapper , xml 대신 repository 하나가 들어간다.

그리고 DTO 의 모습도 다르다.

// Chicken.java

package com.kh.dto;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;

@Entity // MySQL 에 테이블이 존재하지 않으면 테이블 생성
@Getter
@Setter // lombok, jakarta 가 나오지 않음 -> build.gradle 에 spring 이나 lombok 관련된 설정이 있는지 확인
public class Chicken {
	
	@Id // primary key
	@GeneratedValue(strategy = GenerationType.IDENTITY) // Nextval 
	private int id;
	private String chickenName;
	private String description;
	private double price; // 소수점 고려
}

@Entity : MySQL 에 테이블이 존재하지 않으면 테이블 생성

@ID : primary key 지정

@GeneratedValue(strategy = GenerationType.IDENTITY) : 자동으로 숫자가 오르는 기능 (Nextval, sequence)

// ChickenRepository.java

package com.kh.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.kh.dto.Chicken;

// repository 
// mybatis - mapper 이 두가지를 설정

// @Repository, @Mapper 는 interface 로 시작
@Repository
public interface ChickenRepository extends JpaRepository<Chicken, Integer> {
	// 전체보기 전체넣기 전체수정 전체삭제 와 같은 기본 기능은
	// JpaRepository 안에 모두 들어있음
}

// application.properties

spring.application.name=JPA_chicken

server.port=9090

spring.datasource.url=jdbc:mysql://localhost:3306/KH_WORKBOOK
spring.datasource.username=root
spring.datasource.password=kh1234
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# MySQL 에 자동으로 테이블을 생성해주는 설정
spring.jpa.hibernate.ddl-auto=update

# SQL 이 자동으로 생성이되고 쿼리가 실행이 잘 되는지 보는 설정
spring.jpa.show-sql=true
# JPA 로 만들어진 쿼리가 보임

### DATA   Language

	# Definition
### DDL = CREATE DROP ALTER RENAME TRUNCATE

	# Control, Class, Checked
### DCL = GRANT REVOKE

	# Manipulation
### DML = INSERT UPDATE DELETE SELECT

	# Query
### DQL = SELECT

JPA 실습

Java 백엔드

https://github.com/LeePaDack/Springboot-React/tree/main/JPA_chicken

Springboot-React/JPA_chicken at main · LeePaDack/Springboot-React

Contribute to LeePaDack/Springboot-React development by creating an account on GitHub.

github.com

React 프론트엔드

https://github.com/LeePaDack/Springboot-React/tree/main/chicken-store

Springboot-React/chicken-store at main · LeePaDack/Springboot-React

Contribute to LeePaDack/Springboot-React development by creating an account on GitHub.

github.com

삼각 달팽이

이파댥 — Tue, 6 Aug 2024 20:58:23 +0900

class Solution {
    public int[] solution(int n) {
        // 삼각형을 표현할 2 차원 배열과 채워넣을 숫자 선언
        int[][] triangle = new int[n][n];
        int v = 1; // v 는 채워넣을 숫자로 숫자를 triangle 에 기록할 때마다 1 씩 증가
        int x = 0; // 숫자 초기화 (0,0) 을 위해
        int y = 0;
        
        while (true) {
            // 아래로 이동하기
            while (true) {
                triangle[y][x] = v++; // 2 차원 배열은 y,x 로 생각해야함
                if (y + 1 == n || triangle[y + 1][x] != 0)
                    break;
                y += 1; // 아래로 진행하는 것은 y 값의 증가 때문이므로
            }
            // 오른쪽으로 이동할 수 있는 경우 반복문 탈출하도록 작성
            // 오른쪽으로 이동할 수 있을 때만 진행
            if (x + 1 == n || triangle[y][x + 1] != 0)
                break;
            x += 1;
            
            // 오른쪽으로 이동하기
            while(true) {
                triangle[y][x] = v++;
                if(x + 1 == n || triangle[y][x + 1] != 0)
                    break;
                x += 1;
            }
            if(triangle[y - 1][x - 1] != 0) 
                break;
            x -= 1;
            y -= 1;
            
            // 왼쪽으로 이동하기
            while(true) {
                triangle[y][x] = v++;
                if(triangle[y - 1][x - 1] != 0)
                    break;
                x -= 1;
                y -= 1;
            }
            if(y + 1 == n || triangle[y + 1][x] != 0)
                break;
            y += 1;
        }
        // 채운 숫자들을 1 차원 배열로 구성하여 반환
        // v 변수는 채워 넣은 마지막 숫자 + 1 이 있으므로  v - 1
        int[] result = new int[v - 1];
        
        // 2 차원 배열에서는 삼각형이 왼쪽으로 몰려 있는 직각 삼각형 모양으로 들어있다는 것을
        // 이용하여 이중 반복문으로 1 차원 배열에 숫자를 넣어줌
        int index = 0;
        for(int i = 0; i < n; i++){
            for(int j = 0; j <= i; j++){
                result[index++] = triangle[i][j];
            }
        }
        return result;
    }
}

교점에 별 만들기

이파댥 — Fri, 2 Aug 2024 09:25:03 +0900

import java.util.*;

public class Solution {
    
  private static class Point { // 좌표를 나타내는 클래스
    public final long x, y; 
    // final 사용해 불변성을 가지게 하고, 생성자로 초기화 할 수 있게 함

    private Point(long x, long y) {
      this.x = x;
      this.y = y;
    }
  }
    
    
  private Point intersection(long a1, long b1, long c1, long a2, long b2, long c2) { // 직선의 교점을 찾기 위한 메서드

    // x 값 = 교점 구하는 공식
    double x = (double) (b1 * c2 - b2 * c1) / (a1 * b2 - a2 * b1);
    // y 값 = 교점 구하는 공식
    double y = (double) (a2 * c1 - a1 * c2) / (a1 * b2 - a2 * b1);

    if (x % 1 != 0 || y % 1 != 0) // 만약 정수가 아니라면 
      return null; // null 값 반환해라

    return new Point((long) x, (long) y); // 위 if 문 통과시 x,y 교점 좌표 
  }

  private Point getMinimumPoint(List<Point> points) {
      // getMinimumPoint() 메서드는 
      // points 리스트 안 모든 Point 객체를 순회하면서 가장 작은
      // x, y 값을 찾고 그 값을 사용해 Point 객체 만들어 반환
    long x = Long.MAX_VALUE;
    // MAX_VALUE 란?
    // 데이터 타입이 표현할 수 있는 숫자의 범위 중 가장 큰 숫자와
    // 가장 큰 숫자의 값이 할당
    long y = Long.MAX_VALUE;
      
    // points 리스트 안 모든 Point 객체를 순회하면서 가장 작은
    // x, y 값을 찾고 그 값을 사용해 Point 객체 만들어 반환
    for (Point p : points) {
      if (p.x < x)
        x = p.x;
      if (p.y < y)
        y = p.y;
    }
    return new Point(x, y);
  }

  private Point getMaximumPoint(List<Point> points) {
      // getMaximumPoint() 메서드는 
      // points 리스트 안 모든 Point 객체를 순회하면서 가장 큰
      // x, y 값을 찾고 그 값을 사용해 Point 객체 만들어 반환
      
    long x = Long.MIN_VALUE;
    // MIN_VALUE 란?
    // 데이터 타입이 표현할 수 있는 숫자의 범위 중 가장 작은 숫자와
    // 가장 작은 숫자의 값이 할당
    long y = Long.MIN_VALUE;

    for (Point p : points) {
      if (p.x > x)
        x = p.x;
      if (p.y > y)
        y = p.y;
    }
    return new Point(x, y);
  }

  public String[] solution(int[][] line){
      // 정수 좌표일 때 Point 객체로 반환되므로
      // 좌표를 저장할 리스트를 만들고, 객체가 반환되었을 때만 리스트에 저장
    List<Point> points = new ArrayList<>();
    
    // 모든 직선 쌍에 대해 반복  
    for (int i = 0; i < line.length; i++) {
      for (int j = i + 1; j < line.length; j++){
        Point intersection = // 행렬 , 2 차원 배열은 열 행 인걸 인지하자
            intersection(line[i][0], line[i][1], line[i][2], 
                         line[j][0], line[j][1], line[j][2]);

        if (intersection != null) {
          points.add(intersection);
        }
      }
    }
    // 2 차원의 배열의 크기 구하기
    Point minimum = getMinimumPoint(points);
    Point maximum = getMaximumPoint(points);
    // 배열의 크기를 구해야 하기 때문에 + 1
    int width = (int) (maximum.x - minimum.x + 1);
    int height = (int) (maximum.y - minimum.y + 1);

    // 2 차원 배열 선언하고 초기화
    // 문자를 이용하여 각 좌표를 표시하기 때문에 char 자료형 사용해 2차원 배열 선언
    // ****** 2 차원 배열은 y 축 부터 접근함 *******
    char[][] arr = new char[height][width];

    for (char[] row : arr) {
      Arrays.fill(row, '.');
    }

    // 결정된 minimum, maximum 크기로
    // 좌표 변환과 변환된 좌표로 별 찍기
    for (Point p : points) {
      int x = (int) (p.x - minimum.x);
      int y = (int) (maximum.y - p.y);
      arr[y][x] = '*';
    }
    
    // String 배열로 반환하여 반환
    // String 배열을 선언한 후 2 차원 배열을 구성하는 1 차원 배열들은
    // String 으로 반환
    String[] result = new String[arr.length];
    for (int i = 0; i < result.length; i++) {
      result[i] = new String(arr[i]);
    }
    return result;
  }

}

replace() 와 replaceAll() 차이

이파댥 — Wed, 31 Jul 2024 21:21:19 +0900

replace() 와 replaceAll() 차이점

replace() 와 replaceAll() 은 인자값의 형태를 보면 알 수 있음

String replace(CharSequence target, CharSequence replacement)

String replaceAll(String regex, String replacement)

로 CharSequence 과 String 의 차이가 있음

또한 regex 는 정규식

즉 replaceAll() 은 정규식도 사용할 수 있음

replace 와 replaceAll 의 공통적인 것

1. 대상 문자열을 원하는 문자값으로 변환하는 함수

2. 첫번째 매개변수는 변환하고자 하는 대상이 될 문자열

3. 두번째 매개변수는 변환할 문자값

출처 및 참고자료

https://doitdoik.tistory.com/77

A 강조하기

이파댥 — Wed, 31 Jul 2024 21:12:00 +0900

class Solution {
    public String solution(String myString) {
        myString = myString.toLowerCase(); // myString 을 다 소문자로 바꾸기
        myString = myString.replaceAll("a", "A"); // a 를 A 로 바꾸기
        return myString;
    }
}

다른 사람의 풀이

다른 사람의 풀이와 매우 흡사하게 풀었다.

다른점이 있다면 replaceAll 을 사용하였지만 다른 사람의 풀이는 replace 를 사용했다.

그러므로 둘의 차이를 블로그에 올리고 올리게 된다면 밑에 링크를 달아두겠다.

2024.07.31 - [JAVA] - replace() 와 replaceAll() 차이

아이스 아메리카노

이파댥 — Tue, 30 Jul 2024 21:20:52 +0900

class Solution {
    public int[] solution(int money) {
        int answer[] = new int[2]; // 배열 
        
        answer[0] = money / 5500;
        answer[1] = money % 5500;

        return answer;
    }
}

배열중 0 번째에는 돈 / 5500 을 해서 먹을 수 있는 아메리카노 개수

배열중 1 번째에는 돈 % 5500 을 해서 나머지, 즉 잔돈을 계산한 코드

다른 사람의 코드

다른 사람의 코드는 비슷해보이지만 매우 간결하게 작성하였다