이레

Router.js 에서 설정한 path로 이동하는 방법 ⭐️ Link 태그 html에서 a 태그와 같은 기능을 하는 태그입니다. 클릭했을 때 바로 이동하는 기능을 구현할 때 사용합니다. ⭐️ useNavigete useNavigete를 사용하기 위해서는 react-router-dom 라이브러리가 설치되어 있어야 합니다. 라이브러리 설치 후 해당 라이브러리를 import 시켜준 후 사용합니다. import { useNavigate } from "react-router-dom"; //예시입니다 const Mypage = () => { const navigate = useNavigate(); return ( . . . . navigate('/home')} /> ) } Link 태그와 다른점은 useNavige..

react router로 페이지 이동 작업을 하다 에러가 났습니다. react-router-dom v6부터는 Switch 대신 Routes를, Route 안에 component 대신 element를 사용합니다. + 자식으로는 만 가능합니다. 그래서 위와 같이 작성하면 자꾸 에러가 발생합니다.. 과 가 있어서 에러 발생.. :( 위처럼 element로 사용해줘야 작동합니다.

리액트 슬라이드 라이브러리에 여러 가지가 있는데 제일 간단하고 쓰기 편하다는 react-sldie를 사용해 봤습니다. ⭐️ 라이브러리 설치 npm install react-slick --save npm install slick-carousel --save npm을 이용해 라이브러리를 설치해 줍니다. 해당 라이브러리가 잘 설치되었다면 package.json 에 이렇게 들어가있습니다. ⭐️ 사용법 slide를 import 해줍니다. import React from "react"; import Slider from "react-slick"; // slide import const MainSlider = () => { const settings = { dots: true, Infinite: true, speed..

mac에서 리액트 프로젝트를 설치하려는 과정에서 계속 npm Error: EACCES 에러가 떴었습니다. 권한 관련 에러라고 해서 sudo도 사용해 봤지만 해결이 안 되고 있다가 방법을 찾았습니다. ⭐️ 문제 npx create-react-app app_name npx를 사용해 프로젝트 설치시 나는 오류였습니다. ⭐️ 해결 방법 sudo chown -R "usrname" ~/.npm sudo chown -R "usrname" /usr/local/lib/node_modules usrname 은 사용자 계정명입니다. sudo chown 은 사용자를 변경하는 명령어입니다. 저는 이 방법으로 해결했는데, 정확한 원인이나 다른 방법을 아시는 분은 댓글로 알려주세요 :)

리액트 reset css 적용하기 퍼블 작업을 하다 보면 브라우저마다 기본적으로 적용되어 있는 스타일을 리셋해 주기 위해 reset css를 따로 작성하는데, react에서는 이를 위한 패키지가 존재합니다. 1, npm을 사용해 설치해줍니다. npm i styled-reset 2, 설치 완료 후 import 해줍니다. import reset from 'styled-reset'; 이렇게 하면 적용 완료입니다.

1, 리액트 컴포넌트 만들기 새로운 파일을 생성해줍니다. 파일 이름은 임의 test로 하고 js 형식으로 저장합니다. 리액트 컴포넌트를 만들 때는 import로 리액트를 불러와야 하는데 import React from "react"; 를 제일 첫 줄에 작성해줍니다. 제일 하단에는 컴포넌트를 내보내는 코드를 작성해줍니다. 이 코드가 있어야 다른곳에서 컴포넌트를 불러와 사용할 수 있습니다. export defalut Study; 첫줄과 마지막 줄 사이에는 컴포넌트 형태가 들어가게 되는데, 리액트는 함수형과 클래스형 이렇게 두 가지가 있습니다. 일단 함수형으로 정리할게요 Study.js 로 저장해준다음, 아래 코드를 작성해줍니다. import React from "react"; function Study() ..

1, node.js 설치하기 14버전 혹은 16버전으로 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 터미널에서 node -v 로 설치가 잘 되었는지 확인을 합니다. 설치 후 컴퓨터 재부팅하기 (하단에 이유있음) 2, 프로젝트 생성 저는 vs code 를 사용하기때문에 vs code 기준으로 정리하겠습니다. vs code로 작업할 폴더를 열어줍니다. vs code의 터미널을 열어줍니다. 터미널에 npx create-react-app 프로젝트이름 을 입력해줍니다. 엔터 한번 더 눌러주면 프로젝트 파일이 설치됩니다. 그다음 해당 프로젝트를 미..