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..

React Query는 API 통신, 캐싱 등 비동기 과정을 더욱 편하게 하는 데 사용된다. ** 장점 ** 1) fetcher 함수를 만들어 연결시키고, 응답 데이터를 받아온다. ( API 통신 ) 2) Caching 매커니즘을 가지고 있어 고유의 key값을 넘기게 되면 API 통신을 하지 않고, 캐시에 저장되어 있던 데이터를 가져온다. (다시 불러올 경우 캐시에서 가져옴) 3) ReactQueryDevTools 라는 컴포넌트를 가지고 있는데 캐시에 어떤 query가 있는지 보여주고, Data Explorer를 보여준다. 1. 라이브러리 설치 npm i react-query 2. useQuery 사용방법 2-1) Provider 패턴 적용 ( index.tsx ) import React from "re..

Route안에 있는 또 다른 Route로 부모 경로 요소에서 자식 경로 요소를 렌더링 하는 데 사용해야 한다. * 참고 * https://reactrouter.com/docs/en/v6/getting-started/overview 1. 첫번째 방법 ( router 파일) 부모 Route 안에 자식 Route 추가 ( 부모 파일 ) import { Outlet } from "react-router-dom"; function 부모() { return ( 부모 ); } 자식 Route들이 어디에 render 될지 부모의 element안에 Outlet을 이용해 표시 ( Props 전달) Qutlet 컴포넌트의 context 속성에 props 전달 가능 import { useOutletContext } from ..

CSS를 따로 설정하지 않으면 브라우저의 기본 스타일이 적용되어있다. 때때로 List의 Item들에 padding, margin 등 설정되어있는데 일일이 0으로 설정해줘야 하는 경우가 있다. 이럴 때 CSS 셋업을 통해 내가 원하는 CSS를 적용해주면 편리하게 사용 가능하다. 1. 필요 라이브러리 (styled-components) npm i styled-components npm i --save-dev @types/styled-components 2. 전체 도큐먼트에 적용 방법 import { createGlobalStyle } from "styled-components"; import Router from "./Router"; /* 전역 스코프에 올림 */ const GlobalStyle = crea..