드래그 앤 드롭 라이브러리 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..

Intent란 ? 앱 구성요소에서 서로 작업 수행을 위해 정보를 전달하는 역할을 한다. key, value를 이용하여 객체 전달 1. Intent를 이용한 화면 전환(intent는 화면 전환에 주로 사용) ( Activity ) btn_a.setOnClickListener { //다음 화면으로 이동하기 위한 intent 객체 생성 //첫벗째 인자에 context를 넣고 두번째 인자에 이동하과 싶은 activity입력 var intent = Intent(this, SubActivity::class.java) startActivity(intent)//Activity 실행 finish() //자기 자신 액티비티 파괴 } finish() : 액티비티 이동후 사용하지 않으면 finish를 이용해 파괴 (뒤로가기 ..

배열이란? 메모리의 연속적인 공간을 차지하고 있는 자료구조로 생성 시 크기를 지정해야 하며, 생성 후에는 크기를 변경할 수 없지만 한번 선언을 해두면 다른 자료구조보다 빠른 입출력이 가능하다. 리스트란? 하나의 변수에 여러 값을 저장하기 위해 불연속적인 메모리 공간을 차지하는 동적인 자료구조이다. 1. 배열 // 배열 값 지정 var intArr = arrayOf(1,2,3,4,5) // 비어있는 배열 생성 var nullArr = arrayOfNulls(5) intArr[2] = 8 // 값 할당 println(intArr[4]) // 값 출력 2. 리스트 // 읽기 전용 리스트 val readList = listOf(1,2,3) readList[0] = 1 // 읽기 전용 이므로 오류 발생 // 읽고..

안드로이드 스튜디오 단축키 구분 설명 윈도우/리눅스 맥OS 일반 모두 저장 Control + S Command + S 동기화 Control + Alt + Y Command + Option + Y 자동 정렬 Control + Alt + L Command + Option + L Import Alt + Enter Option + Enter 검색 모든 항목 검색(코드, 메뉴 포함) Shift 키를 두번 누름 Shift 키를 두번 누름 찾기 Control + F Command + F 다음 항목 찾기 F3 Command + G 이전 항목 찾기 Shift + F3 Command + Shift + G 바꾸기 Control + R Command + R 작업 찾기 Control + Shift + A Command + Sh..

React를 위한 상태 관리 라이브러리이다. * 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ * Git Source Code https://github.com/kangilbin/React.js/tree/master/Recoil 1. 사용방법 // 패키지 설치 npm install recoil import React from "react"; import { RecoilRoot } from "recoil"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); 컴포넌트로..

기존 원소의 위치가 바뀌지 않게 교체 한다. 1. 원소의 위치 구하기 (Index) const food = ["pizza", "mango", "kimhi", "kimbaba"]; const targetIndex = food.findIndex((food) => food === "mango"); 2. 배열을 두 부분으로 나누기 앞 부분은 “mango”(타겟 원소) 이전의 모든 원소를 담은 배열, 뒷 부분은 이후 원소의 배열. const front = food.slice(0, targetIndex); const back = food.slice(targetIndex + 1); // mango => 감 교체 const finalPart = [...front, "감", ...back]; “ …배열명 ” : 배열 안..

리액트에서 Input Validation, Form Submit 등 작업을 하기 좋은 방법이다. 보통 Form의 검증이 많거나, 많은 Input을 가질 때 사용한다. 1. 라이브러리 설치 npm install react-hook-form 2. React Hook Form 사용하지 않을 경우 // state const [name, setName] = useState(""); const [phone, setPhone] = useState(""); const [email, setEamil] = useState(""); const [id, setId] = useState(""); // 검증 const [nmErr, setNmErr] = useState(""); ... 반복 const onSubmit = (eve..

데이터를 시각화 해주는 차트 라이브러로 js, angular, vue, react에서도 사용 가능하다. 선 그래프, 거품형, 타임라인, 히트맵까지 다양한 스타일들이 있고, 반응형에 커스텀 기능까지 구현되어 있다. * ApexCharts 사이트 * https://apexcharts.com/ 1. 라이브러리 다운 npm install --save react-apexcharts apexcharts 2. Chart 예시 import Chart from "react-apexcharts"; function App() { return ( `$ ${value.toFixed(2)}` }, }, }} /> ); } export default App; type : 원하는 차트 선택 (선 그래프, 막대 그래프 등) optio..