블로그 정리 잘하고 싶다 근데 기가 딸린다 걍 말하듯이 써야겠다 오늘은 리액트와 뷰를 비교해보겠다 빠르게 차이점을 읽고 싶으면 5줄 요약으로 가면 되겠다 가장 큰 차이점이라고 하면 React는 UI 라이브러리이며 Vue는 프레임워크라는 것이다. 라이브러리 vs 프레임워크 라이브러리와 프레임워크 모두 공통으로 사용될 수 잇는 특정한 기능들을 모듈화한 것을 의미하지만 차이점이 존재한다. 라이브러리 라이브러리는 단순하게 활용할 수 있는 도구들의 집합으로 프로그래밍을 하다가 필요한 기능이 있으면 호출하여 사용하면 된다. 프레임워크 프레임워크는 말 그대로 일정한 형태와 기능을 갖추고 잇는 뼈대를 의미한다. 프레임워크는 어플리케이션 개발에 필요한 필수적인 코드, 알고리즘, db연동 등과 같은 기능들을 제공해주며 프..
Github Pages Github Pages를 사용하면 Github의 레포지토리서 프로젝트에 대한 웹 사이트를 호스트 할 수 있게된다. 따라서 레포지토리 하나 당 하나의 페이지를 배포할 수 있다! 배포하는 법 1. gh-pages 설치하기 npm -i gh-pages 2. package.json에 추가하기 "homepage" : "https://{깃허브아이디}.github.io/{repo이름}" 3. package.json - scripts 추가하기 "deploy" : "gh-pages -d build", "predeploy" : "npm run build" 4. npm run deploy npm run deploy
리액트 Sortablsjs로 드래그 앤 드롭 구현하기 투두 리스트를 구현하기 위한 드래그 앤 드롭 기능을 간단하게 구현할 것입니다. 🥰 ✅필요 라이브러리 설치 react-sortablejs sortablejs npm install --save react-sortablejs sortablejs 💗 아이템 드래그 앤 드랍 구현 ReactSortable을 이용해서 아이템 간의 위치 변경을 구현할 수 있습니다. useState를 통해 setList와 list를 설정하면 자동으로 아이템의 위치를 업데이트할 수 있습니다. group = "shared" 코드를 추가함으로써 리스트 간의 아이템 공유 및 이동이 가능하게 구현할 수 있습니다. function Item() { const [items, setItems] = ..
react-router-dom v6에서는 useHistory가 제공되지 않는다. 따라서 useLocation과 useNavigate를 이용하여 이전 주소/경로를 판단해야한다. 다른 도메인에서 해당 페이지에 접근하는 경우에는 이전 페이지로 버튼을 통해 내가 만든 사이트의 메인페이지로 이동할 수 있도록 구현하였다. import { Link, useLocation, useNavigate } from 'react-router-dom'; export default function GoBack() { const navigate = useNavigate(); const location = useLocation(); const hasPreviousState = location.key !== 'default'; cons..
