일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Next.js
- app.post
- err_connection_refused
- reactnative
- 리액트네이티브아이콘
- app:compiledebugkotlin
- Spring
- npm에러
- 안드로이드빌드에러
- react
- javascript
- generic
- async
- forwardref type
- mainapplication.kt
- set
- array
- map
- reactnative error
- 상속
- 타입스크립트
- extends
- Filter
- 배열중복요소제거
- interface
- materialicons
- 스크롤이벤트
- 이진탐색
- TS
- 슬라이딩윈도우
- Today
- Total
목록React (24)
rhanziy
리액트를 사용하며 css 병행하는 것이 귀찮고 속도 향상에 관심이 있다면 styled components 라이브러리를 사용해보자. 설치방법 npm install styled-components 터미널에 위 코드를 치고 다운을 받는다. 그리고 다시 npm run. 적용할 js파일에서 import 후 사용할 수 있는데, css 코드를 `` 백틱 안에 짜면 됨. 컴포넌트기때문에 작명 시 앞자리는 대문자로 작성하자. import styled from 'styled-components'; let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` let Btn = styled.button` background: ${ props..
1. css 클래스 네임 주고 background주기 2. html안에서 style속성으로 url 넣기 import bg from './bg.png' function App(){ return ( ) } 3. 하던대로 img 태그 src로 경로지정( 외부 이미지는 절대경로 그대로 작성) 상품명 상품정보 4. public 폴더에 파일 밀어넣고 이미지 경로 사용(import 안해도 된당) //권장되는 형식 하위 경로에 배포하면 파일을 못찾을 수도 있으니 홈페이지 URL 기재 권장!
HTML 삽입 미리보기할 수 없는 소스 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다 출처: https://inpa.tistory.com/entry/AXIOS-📚-설치-사용 [👨💻 Dev Scroll:티스토리] axios를 이용해 영화정보 api사이트에서 데이터를 받아오는 hook을 짰다. refetch 버튼 클릭 시 setTrigger가 발동되고 useEffect의 두번째인자에 trigger를 지정해 새로운 데이터를 받아오는 기능도..
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를 추가해주기.
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..