라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 Share Layout Animation 레이아웃 공유 란? 서로 다른 애니메이션 효과를 자연스럽게 이어지도록 하는 방법이다. 1. Layout Animation ( CSS 변경을 통한 자동 애니메이션 적용 ) Layout에 prop을 사용한 애니메이션 적용 방법 Layout prop이란? element에게 prop을 주어 CSS를 변경하게되면, 해당 element는 Layout이 바뀔 때 애니메이션 효과가 발생한다. ( CSS 때문에 Layout이 바뀐다면 저절로 애니메이션 효과가 이루어진다. ) function App() { const [clicked, setClicked] = useSta..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 AnimatePresence AnimatePresence 란? elemet가 나타나거나 사라질 경우 애니메이션 효과 발생시키는 컴포넌트이다. 자연스러운 show / hide의 애니메이션 효과를 부여한다. * AnimatePresence의 규칙 * 1. visible상태여야 한다. 2.내부에는 조건문이 있어야 한다. 1. AnimatePresence를 사용한 Show / Hide 구현 import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; import styled from "styled-c..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 1. useScroll Hook을 사용한 Scroll에 따른 애니메이션 효과 적용 useScroll Hook은 Scroll에 대한 좌표값을 얻는다. import { useScroll } from "framer-motion"; const { scrollY, scrollYProgress } = useScroll(); useEffect(() => { scrollY.onChange(() => { console.log(scrollY.get(), scrollYProgress.get()); }); }, [scrollY, scrollYProgress]); scrollY : 픽셀 단위 수직 스크롤 값 scro..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 1. Drag 효과 const boxVariants = { hover: { scale: 1.5, rotateZ: 90 }, click: { scale: 1, borderRadius: "100px" }, // 색상을 줄때 string형(blue 등)으로 주면 animate가 안된다. rgb값을 넣어야 한다. drag: { backgroundColor: "rgb(46,204,113)", transition: { duration: 3 } }, }; function App() { return ( ); } export default App; whileHover : 마우스를 올려놓았을 때 whileTap..

ReactJS 애니메이션 라이브러리 * 공식 문서 * https://www.framer.com/developers/ 1. 라이브러리 설치 npm install framer-motion 2. 기본 사용 방법 import { motion } from "framer-motion"; export const MyComponent = ({ isVisible }) => ( ) 애니메이션 효과를 주기 위해서는 element가 motion 패키지에서 나와야 한다. 3. Styled 컴포넌트를 활용하기 Style-Components 란? https://cocococo.tistory.com/8 const Box = styled(motion.div)` width: 200px; height: 200px; background-c..

뷰 바인딩이란? 각 XML 레이아웃 파일의 루트 뷰 및 ID가 있는 모든 뷰의 참조를 포함한 클래스를 자동으로 생성합니다. 이 클래스의 이름은 XML 파일의 이름을 카멜 표기법으로 변환하고 끝에 ‘Binding’을 추가하여 생성된다. activity_main.xml → ActivityMainBinding 1. gradle 설정 andriod { ... /* 안드로이드 스튜디오의 버전이 4.0 이상 */ buildFeatures{ viewBinding true } /* 안드로이드 스튜디오의 버전이 4.0 이하 */ viewBinding{ enabled = true } } Sync now눌러 설정 반영 2. 설정 추가 후 프로젝트 빌드 일정 시간이 지나면 빌드가 완료 Run과 Build의 차이 - Build..

1. 범위형 반복문 1-1) for in 반복문 val stundent = arrayListof("joyce","java","jacob") for(name in student) { pirntln(${name}) } //인덱스도 같이 반복 for((index, name ) in student.withIndex()){ pirntln("${index+1} 번째 학생 : ${name}") } 1-2) for 범위 반복문 var sum = 0 for( i in 1..10){ sum += i } //steb 반복 2칸씩 1, 3, 5, 7, 9 for( i in 1..10 step 2){ sum += i } // 감소 9에서 0까지 1씩 감소하며 반복 뒤에 step 가능 for(i in 9 downTo 0){ pr..

Guideline을 사용하여 반응형 UI를 만들 수 있다. 1. 레이아웃의 툴바로 생성 Vertical Guideline : 수직방향 가이드라인 생성 Horizontal Guideline : 수평 방향 가이드라인 생성 1-1) 코드는 자동 생성된다. 자동 생성 가이드라인 ID는 @+id/guideline[숫자] 형식 숫자는 생성할 때마다 증가한다. 수직 방향 가이드라인을 추가 시 android:orientation값은 vertical이다. app:layout_constraintGuide_begin 부모 레이아웃의 시점에서 20dp 떨어진 곳에 위치, 이 속성을 포함해서 가이드라인은 3가지 종류의 제약을 줄 수 있다. app:layout_constraintGuide_begin = “xdp” → 부모 레이아..

자바의 Static 대신에 사용 정적인 메서드, 변수를 사용할 때 선언 기본적으로 하는 일은 private로 선언된 프로퍼티나 메서드를 읽어 올 수 있다. 1. Java의 Static과의 차이점 Companion Object는 객체로 변수에 할당할 수 없다. 하나의 클래스에서는 하나의 Companion Object만 생성할 수 있다. Companion Object 내부의 변수는 클래스 안에서 사용할 수 있다. 그러나 클래스 멤버 변수는 Companion Object 안에서 사용할 수 없습니다. Companion Object는 클래스 로딩하면서 생성되지만, 클래스 멤버 변수는 클래스 인스턴스를 생성할 때 생성되기 때문에 멤버 변수를 사용할 수 없습니다. 2. 사용 방법 //private를 사용하여 다른 곳..

드래그 앤 드롭 라이브러리 Source Code https://github.com/kangilbin/React.js/tree/master/DragAndDrop 1. 라이브러리 설치 npm i react-beautiful-dnd /* typscript */ npm i --save-dev @types/react-beautiful-dnd ( index .tsx ) // 삭제 ... React 18 버전에서의 StrictMode를 지원하지 않기 때문에 index파일에서 StrictMode를 지워야 한다. DragDropContext : 드래그 앤 드롭이 가능하게 하고자 하는 영역 감싼다. Droppable : 어떠한 것을 드래그 앤 드롭할 수 있는 영역 Draggable : Droppable 영역 안에서 실제 ..