라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 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 영역 안에서 실제 ..

람다식은 우리가 마치 value 처럼 다를 수 있는 익명 함수 1. 메소드의 파라미터로 넘겨줄 수가 있다. fun maxby(a : Int) 2. return 값으로 사용할 수 가 있다. 1. 람다의 기본 정의 val lamdaName : Type = { argList -> codeBody} //선언(val, var) : 타입 = { 받은 값(argument) -> 어떻게할 건지 함수 } 1-1) 타입 추론 가능 val square : (Int) -> (Int) = {number : Int -> number * number} // Int를 넣고 Int으로 return 받음 input/output이 Int형이기 때문에 // number의 타입을 추론함(타입 추론 가능 앞이든 뒤든 Int 필수) fun ma..

Map이란? key와 value를 짝지어 저장하는 Collection이다. Map의 key는 유일하기 때문에 동일한 이름의 key는 허용되지 않는다. Set이란? 동일한 아이템이 없는 Collection이다. Set의 아이템들의 순서는 특별히 정해져 있지 않고, Set은 null 객체를 갖고 있을 수 있다. 동일한 객체는 추가될 수 없기 때문에 null도 1개만 갖고 있을 수 있다 1. Map // 읽기 전용 val readMap = mapOf("name" to "junsu", "age" to 13, "age" to 15, "height" to 160) println(readMap) // {name=junsu, age=15, height=160} 중복 불가 val mutableMap = mutalbeMa..