일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- Filter
- 안드로이드빌드에러
- set
- generic
- materialicons
- TS
- async
- array
- npm에러
- map
- react
- reactnative error
- extends
- 리액트네이티브아이콘
- app:compiledebugkotlin
- 슬라이딩윈도우
- 이진탐색
- app.post
- 스크롤이벤트
- Spring
- 상속
- err_connection_refused
- reactnative
- Next.js
- 배열중복요소제거
- 타입스크립트
- mainapplication.kt
- forwardref type
- javascript
- interface
- Today
- Total
목록분류 전체보기 (157)
rhanziy
const useConfirm = (message = "", onConfirm, onCancel) => { if ( !onConfirm && typeof onConfirm !== "function") { return; } if ( onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (window.confirm(message)) { onConfirm(); } else { onCancel(); } }; return confirmAction; }; export default function App() { const deleteWorld = () => console.log("Deleting the worl..
import "./styles.css"; import React, { useState, useRef, useEffect } from "react"; const useClick = (onClick) => { if (typeof onClick !== "function") { return; } const element = useRef(); useEffect(() => { if (element.current) { element.current.addEventListener("click", onClick); } return () => { if (element.current) { element.current.removeEventListener("click", onClick); } }; }, []); return el..
HTML 삽입 미리보기할 수 없는 소스 Array.isArray(obj) // 배열인지 아닌지 확인하는 함수. true false를 리턴 useState활용법으로 useTabs를 만들어보았다. 버튼에 따라 노출되는 내용을 다르게 지정하는 기능의 함수... 배열의 인덱스 번호를 useState로 넘겨서 return값을 그에 맞는 컨텐츠로 뿌려주기! 파라미터 값을 통해 여기저기 호출하다보니 기존에 하던 방식보다 복잡해서 더 분석이 필요할 것 같다.
리액트로 작업한 결과물을 내 깃허브 레포지토리에 올리는 방법. 1. 콘솔창에 npm i gh-pages 2. npm run build >> 하면 build폴더가 생성된다. 3. pakage.json 파일 "scripts" 에 2줄 추가 4. pakage.json 파일 맨 아래에 깃허브 page url 추가 (여기서 원격저장소 등록을 미리 해야한다.) 5. npm run deploy >> predeploy가 먼저 실행된다. 업로드 완료 추가/수정할때마다 npm run deploy를 하면 된다! ++ React router 6버전이상에서 작업했다면 App.js에서 Route path={`${process.env.PUBLIC_URL}/`} element={} path를 추가해주기.
flexbox를 사용하면 특히 그리드의 마지막 행에서 항상 예상되는 정렬이 생성되는 것은 아닙니다. justify-content: space- between 을 사용하면 항목 수가 정사각형이 아닌 한 마지막 행에 큰 간격이 생깁니다. 항목 모음이 있다고 가정해 보겠습니다. One Two Three Four Five 각 항목에는 고정된 높이와 너비가 있습니다. .item { width: 100px; height: 100px; border: solid; } 그리드에 정렬하려면 flexbox를 사용할 수 있습니다. .container { width: 450px; display: flex; flex-wrap: wrap; gap: 20px; } 이것은 실제로 우리가 달성하려는 효과를 제공합니다. 그러나 각 행이 ..
import { BrowserRouter as Router, Routes, Route, } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./routes/Home"; function App() { return ( ); } export default App; import { ... } from "react-router-dom"; 을 해줌으로써 지정한 url로 이동하면 원하는 컴포넌트들을 화면에 띄울 수 있다. {title} ({year}) Movie 컴포넌트로 가서 title부분에 a태그로 링크를 걸어주면 간단하게 이동! 여기서 새로고침 없이도 다른페이지로 이동하려면 import { Link } from "r..
다양한 api 사이트에서 배열에 담긴 정보를 가져오는 법! useEffect(()=> { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then((json) => { setMovies(json) }); }, []); useEffect( )를 사용해서 fetch( ).then( ).then( ); 이런 식으로 가져와도 되지만 가독성을 위해 아래와 같이 async/await을 사용해 json으로 변환해서 가져온다. function App(){ const [movies, setMovies] = useState([]); const getMovies = ..
HTML 삽입 미리보기할 수 없는 소스 리액트를 사용해 Todo리스트를 구현했다. 입력폼에 입력할 toDo state와 리스트를 구현할 toDos state를 생성해서, toDo를 입력하고 onSubmit버튼을 누르면 setToDos(currentArray => [toDo, ...currentArray]); 입력폼에 입력한 toDo + 누적된 toDo들로 새로운 배열을 만든다. 여기서, ...currentArray는 배열을 풀고 문자열을 나열함! 이제 이 값을 li로 뿌려준다. 리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어 고유하게 만들어줘야 한다. map의 첫 번째 argument는 배열의 data, 두번째는 index 즉, 숫자를 의미한다. 다른 array func..