프론트엔드 (20) 썸네일형 리스트형 vue3 setup 클릭 이벤트로 토글 제어하기 클릭 이벤트로 토글값 제어하기간단하지만 자주 쓰여서 기술 해보고자 한다.. Click me //클래스 값이 isOpen이면 top-line을, 그게 아니라면 빈 값 여기서 중요한건 ref는 .value로 값을 참조한다는 것 이고,클래스를 바인딩해서 상태에 따라 변경값을 줄 수 있다는 것 이다. vue3 라이브러리 primevue 적용 및 사용하기 vue3를 사용하게 되면서 다양한 라이브러리들 중 Primevue를 사용하게 되었다. 아래 링크에서 각 라이브러리의 점유율을 확인 할 수 있었다. https://npmtrends.com/bootstrap-vue-vs-element-ui-vs-primevue-vs-quasar-framework-vs-vuetify bootstrap-vue vs element-ui vs primevue vs quasar-framework vs vuetify | npm trends Comparing trends for bootstrap-vue 2.23.1 which has 331,837 weekly downloads and 14,446 GitHub stars vs. element-ui 2.15.14 which has 299,1.. Vue3 Composition API와 기초 문법 다뤄보기(2) Vue3 Composition API와 기초 문법 다뤄보기(1) 에 이어서 나머지 문법을을 다뤄보고자 한다. 6. 조건부 렌더링 v-if는 엘리먼트를 조건부로 렌더링 하기 위해 사용된다. 토글 버튼 Vue는 굉장해! 엄청나! 오 안돼 😢 v-if와 v-else가 있는 태그는 위 아래로 붙어 있어야 동작한다. 7. 리스트 렌더링 v-for을 사용해서 자료 배열을 렌더링 할 수 있다. {{todo.text}} v-for 사용시에는 고유의 key값을 꼭 넣어줘야한다. key를 사용하면 vue가 각 li를 정확하게 이동시켜 배열에서 해당 객체의 위치와 일치하게 할 수 있다. 할 일 추가 {{ todo.text }} X 8. 계산된 속성, computed computed는 반응 데이터 소스를 기반으로 .value.. Vue3 Composition API와 기초 문법 다뤄보기(1) 이번 프로젝트 때 Vue3 환경에서 Composition API를 사용하고 있다. vue3 기본문법을 정리하고자한다. 1.Vue3의 특징 1-1. 선언적 랜더링 (Declarative Rendering) 컴포넌트를 랜더링 할 때 HTML과 vue에서 제공하는 Template 문법을 가지고 컴포넌트가 어떻게 보이면 되는지를 정의해주면 된다. 쉽게 말해서 컴포넌트 형태를 정의하면 되는 것 이다. 상태가 변경 될 때 자동으로 업데이트 된다. 1-2. 반응성 (Reactive) 변경될 때 업데이트를 트리거 할 수 있는 상태를 반응형으로 간주한다. Vue에서 reactive() 를 선언하면 반응형 상태가 된다. reactive()는 객체(배열, Map, Set)에서만 작동한다. 반면 ref()로 선언해주면 모든 .. React 스토리북(Stroybook)이란 뭘까? 스토리북이란? UI 컴포넌트를 독립적으로 분리해서 개별 관리, 테스트를 도와주는 도구 왜 사용해야하는가? 리액트 안에서도 충분히 컴포넌트로 분리해서 관리 수 있는데?! - 개별 정리 정돈이 편리하다. - 재사용성을 고려한 디자인 & 개발 가능 - 테스트가 용이하다. 그럼 여기서 드는 의문, 왜 재사용을 해야하고 재사용성이 왜 중요할까? - 불필요한 작업을 중요한다. - 안정적으로 검증된 코드를 사용할 수 있다. - 캡슐화를 통해 테스트가 쉬워진다. - 디자인 변경시 쉽게 수정이 가능하다. - 유저에게 일관된 경험을 제공한다. - 개발자와 소통이 쉬워진다. 배포의 종류 (Deploy, Release, Distribute) 와 vscode에서 Gh-Pages 로 Deploy 해보기 하나의 프로젝트가 끝난다음 Github에서 web을 Publishing 하는 방법입니다! Github을 가지고 gh-pages관련 패키지를 이용해 Deploy하는 과정입니다. 1. GitHub Repository 생성하기 2. 명령어 입력 yarn add gh-pages //# 또는 npm install gh-pages *여기서 github pages는 github에서 무료 제공하는 서비스로 코드를 올리면 그걸 웹사이트화 시켜서 전세계에 무료 배포해줌 3. 빌드 실행하기 npm run build 하고 나면 내 폴더에 build 폴더(내가 작성한 코드가 압축되어 생성됨)가 생성됩니다. 4. GitHub에 Push하기 //# package.json { "homepage": "https://username.g.. useParams()를 이용해서 파라미터를 가져오자(React Hook, react-router-dom) 리액트에서 라우터를 사용하게 되면서 파라미터 정보를 가져와서 활용해야 할 때가 있다. 여기서 사용하는 훅은 useParams 사용하기 위해서는 리액트 라우터 설치 필수이다. npm react-router-dom useParams() 사용법 1. useParams import import { useParams } from 'react-router-dom'; 2. useParams 정보를 변수에 저장 import { useParams } from 'react-router-dom'; function Detail() { const {id} = useParams(); return Detail; } export default Detail; 3. 파라미터 값 사용 import { useParams } from 're.. React-Router-Dom 기초중의 기초 정리하기 ! 리액트를 공부하다보니 리액트 라우터에 대한 공부가 꼭 필요 할 것 같아서 정리 하고자한다. Routing이란 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스이다. 다양한 주소 요청이 들어왔을 때 각각 맞는 곳으로 이동시켜주는 작업이라고 보면된다. React에서 React-Router를 사용하는 이유 마크업할때 a태그로 경로를 정해서 작업하는 방법도 있는데 왜 굳이? SPA(Single Page Application)사용자 경험향상의 목적으로 사용한다고 한다. a태그로 해서 클릭해 들어가면 깜빡이면서 새롭게 로딩이 발생하는데 이게 싫어서 라우팅을 통해 한페이지 안에서 해결하려고 하는것!!! 라우터 종류 1. Hash Router 2. Browser Router 따라서 React-Router-Dom.. 이전 1 2 3 다음
