본문 바로가기

전체보기209

Vue : 시작하기 Vue.js - The Progressive JavaScript Framework | Vue.js Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org Vue는 프론트앤드 프레임워크로 HTML, CSS, JavaScript를 기반으로 한 템플릿을 제공한다. Vue를 사용하는 방법은 크게 두 가지로 나눌 수 있다.  CDN (Content Delivery Network) 스크립트 태그를 통해서 직접 Vue를 사용할 수 있다. Vue CLIVue.js기반의 프로젝트를 생성하고 관리하는데 사용되는 도구로, 복잡한 설정 없이도 기본적인 구조와 파일을 자동으로 생성해준다. 컴퓨터 환경 전역에 Vue CLI를 설치하여, 이후 Vue 프로젝트 생성 시에 간편한 .. 2024. 10. 8.
Java 기초 문법 : 제네릭(generic) 제네릭(Generic) 타입은 Java 5 이후에 추가된 기능으로, 클래스, 인터페이스, 메서드를 정의할 때 타입 파라미터를 사용하여 외부에서 지정할 수 있게 한다. 제네릭을 사용하면 같은 로직으로 다양한 타입의 객체를 처리할 수 있으며, 컴파일러 시에 타입 파라미터에 해당하는 타입 또는 해당 타입의 자식 클래스 객체만이 할당되도록 검증한다. 이로 인해 잘못된 타입의 객체가 사용될 경우 오류를 사전에 발견할 수 있다.제네릭 클래스 : class 클래스명{}제네릭 메서드 : 리턴타입 메서드명(매개변수){}  타입 파라미터 제네릭을 정의할 때 사용하는 식별자는 아래와 같다. 원하는 대로 이름을 사용할 수 있지만, 아래의 약어들은 제네릭 프로그래밍에서 통상적으로 사용되는 약어이다. E : Element (컬.. 2024. 10. 8.
JAVA : 레코드(Record)에 대해서 Record는  JDK 16에서 도입된 클래스로, record로 정의된 객체의 필드 값은 한 번 설정되면 변경되지 않는다. 이를 통해 데이터의 일관성을 유지할 수 있다. 또한 record는 생성자, getter 메서드, toString메서드 등이 메서드들이 자동으로 생성되어 기존 클래스를 작성할 때보다 간결하게 객체를 생성할 수 있다. public record 클래스명(){}Recod 사용하기1. Record 작성하기package com.example;public record Person(String name, int age, boolean attendance) {} 2. Record 사용하기레코드 클래스의 인스턴스를 생성하면, 따로 getter 메서드를 작성하지 않아도 getter메서드가 자동으로 생성.. 2024. 10. 7.
Java 기초 문법 : JVM 메모리구조 JVM(자바 가상 머신, Java Virtual Machine)은 자바 프로그램의 실행 환경을 제공하는 소프트웨어다. 자바 코드를 바이트 코드(컴퓨터가 이해할 수 있는 기계어)로 변환하고, 이를 통해 어떤 운영 체제에서도 자바 코드를 실행할 수 있게 해준다.JVM의 작동원리는 (1) 자바파일(.java) 생성 후 자바 컴파일러(javac)에 의해 바이트 코드(.class)로 변환하고, (2) JVM을 통해서 바이트 코드를 컴퓨터가 이해할 수 있는 바이너리 코드로 변환하여 실행한다.  JVM의 메모리구조JVM은 3가지 모듈을 가지고 있다. Garbage Collector (GC) 더 이상 사용하지 않는 객체를 감지하고 메모리에서 제거하여 메모리를 회수하는 역할을 한다.  Execution Engine바이트.. 2024. 10. 7.
Framer motion : useTime & useAnimate에 대해서 useTime렌더링 이후의 시간을 밀리초 단위로 업데이트하여 시간 기반의 애니메이션을 구현하는 데 유용하게 사용된다. 이를 통해 애니메이션의 속도나 변화를 시간에 따라 동적으로 조정할 수 있다.const time = useTime();import { motion, useTime, useTransform } from "framer-motion";export default function Comp07() { const time = useTime(); const rotate = useTransform( time, // 0초에서 2초는 0도에서 90도로 회전, 2초에서 4초는 90도에서 360도 회전 [0, 2000, 4000], [0, 90, 360.. 2024. 10. 6.
Framer motion : Motion Value에 대해서 Motion value는 애니메이션과 UI 변화를 효율적으로 처리하는 것을 도와준다. Motion value는 애니메이션의 현재 상태를 추적하고 업데이트하는데 사용된다. Motion value의 경우 React 렌더 사이클 외부에서 동작하기 때문에 컴포넌트가 다시 렌더링 되지 않아도 애니메이션을 시작하고 중지할 수 있다.  useMotionValue메서드설명get()motion value의 현재 상태를 반환set()motion value를 새로운 값으로 설정getVelocity()motion value의 현재 속도를 반환on(이벤트, 콜백함수)motion value에 이벤트 리스너를 추가stop()현재 활성화된 애니메이션 중지destroy()motion value의 값이 변경될 때 호출되는 콜백 함수 등.. 2024. 10. 6.

티스토리툴바