목록프론트엔드 국비교육 (98)
안녕하세요
useRef const SLIDE = useRef(null); useRef를 만들고 Slider에 ref를 준 다음에 onClick={() => console.log(SLIDE.current)} SLIDE.current를 찍어 보면 이용할 수 있는 함수들이 나옵니다. onClick={() => SLIDE.current.slickPrev()} 클릭이벤트로 이전 슬라이드로 이동하는 기능을 넣습니다. word-break: keep-all; 속성을 이용하면 글자간에 짤리는 부분을 줄바꿈시킬 수 있습니다. min-height: 120px; 박스 크기가 텍스트에 따라서 크기가 달라질 때는 min-height 속성을 이용하여 높이를 주도록 합니다. 리액트 유튜브를 설치하여 유튜브 동영상을 삽입합니다. https://..
public 폴더의 index.html에서 필요한 것만 남겨줍니다. img를 넣는 방법입니다. App.js function App() { return ( 리액트 ); } 또는 css 백그라운드를 이용합니다. h1 { background: url(../public/assets/img/logo.png); } reset은 index.css에 붙여넣습니다. forEach와 map함수의 차이 forEach() 아무 값도 반환하지 않습니다. = 리턴값이 없습니다. = undefined를 반환합니다. 기존의 배열을 변경합니다. map() 리턴값이 있습니다. 새로운 배열을 반환합니다. 리액트슬릭 만드는 방법 1. 설치 npm install react-slick --save npm install slick-carouse..
src 폴더에 component, pages 폴더를 만들어 이용하는 것이 관습입니다. 리액트 슬라이더 만들기 react slick 을 설치합니다. (https://www.npmjs.com/package/react-slick) npm install react-slick --save npm install slick-carousel package.json 의 dependencies에 설치된 것을 확인할 수 있습니다. "react-slick": "^0.29.0", "slick-carousel": "^1.8.1", 파일을 import 해줍니다. import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; 슬라이더 component를 만듭니다..
https://intrepidgeeks.com/tutorial/everything-deployed-by-gh-pages#5 깃허브 페이지스(github pages)에 리액트 배포하기 방법입니다. 1.폴더만들기 2.레포지토리 만들기 3.깃 연결하기 4.npx create-react-app . 리액트 앱 만들기 5.깃허브 푸쉬하기 6.npm install gh-pages --save-dev 설치하기 7.배포하기 package.json 안에 private 밑에 "homepage": " ( {idx + 1 + ". "} {el.name} ))} 리액트로 다단메뉴 만들기 const DB = [ { id: 1, content: "menu01", link: "/", submenu: [ { content: "subme..