반응형
반응형
https://powerku.github.io/react-scoreboard/ Basketball Score Board Basketball Score Board powerku.github.io 2024.03.14 업데이트 점수 좌우 변경 기능 추가 팀 이름 변경 기능 추가 팀 이름 변경 기능 추가 Home / Away 글자 클릭을 하면 팀 이름 을 변경 할 수 있습니다. 점수 좌우 변경 기능 추가 공격 시간 아래 화살표 버튼을 누르면 팀 좌우가 변경 됩니다. 2023.05.13 업데이트 전체시간 저장 기능 추가 공격시간 12초 모드 추가 쿼터 기능 추가 소리 음소거 기능 추가 전체 시간 저장 기능 추가 전체시간 분을 조정하고 SAVE 버튼을 누르면 전체시간이 저장됩니다. 그 이후 RESET, QUARTE..
v-for 구문을 이용해서 반복문을 사용해서 배열이나 객체를 순서대로 렌더링 할 수 있습니다. 배열 v-for const App = { data() { return { array: ['superman', 'batman', 'pororo'] } }, } 배열의 경우 v-for문의 앞부분은 배열의 항목이고 뒷부분은 배열의 이름입니다. {{ hero }} 결과 superman batman pororo 객체 v-for const App = { data() { return { object: { 1: 'superman', 2: 'batman', 3: 'pororo' } } }, } 객체의 경우 첫번째 인자는 값이고 두번째 인자는 객체의 key 값입니다. 아래와 같이 사용할 수 있습니다. {{ key }} : {{v..
Vue에서 조건에 따라서 렌더링 할 수 있습니다. v-if v-else v-else-if 구문을 이용하면 됩니다. 직접 사용하면서 확인해 보겠습니다. v-if v-if문은 조건에 따라서 엘리먼트를 렌더링 할 수 있습니다. const App = { data() { return { score: 100 } } } 위 와 같이 score를 100으로 지정하고 A학점입니다. score가 90점 이상이면 렌더링 됩니다. v-else v-else는 v-if문의 조건이 아닌 경우에 렌더링 할 엘리먼트에 적용하면 됩니다. const App = { data() { return { score: 80 } } } score를 80으로 변경하고 A학점입니다. B학점 입니다. v-else가 타게 되어 B학점입니다. 표시됩니다. v..
Vue에서 이벤트를 등록해서 사용하고 methods를 이용해서 함수를 호출할 수 있습니다. 이벤트 등록 하기 이벤트는 일반적으로 v-on을 앞에 붙이지만 줄여서 @를 사용합니다. inline-code를 이용해서 이벤트에서 실행될 로직을 작성할 수 있고 메서드를 사용해서 작성할 수 있습니다. 간단한 로직의 경우에는 인라인 코드를 이용해서 사용하고, 복잡한 로직의 경우에는 메서드로 따로 빼서 처리하시면 됩니다. button // 인라인 코드 button // 메서드 메서드 methods 메서드는 vue 인스턴스에서 사용할 메서드를 등록해서 사용할 수 있습니다. 아래와 같이 메서드 등록 후 사용할 수 있습니다. 기본적으로 이벤트에서 method 호출 시에 event 관련 파라미터가 기본적으로 전달됩니다. 해당..
Vue 에서 보간법을 이용하고 데이터 바인딩 할 수 있고 v-bind를 이용해서 속성을 사용할 수 있습니다. const App = { data() { return { name: '파워쿠의 블로그', address: 'https://powerku.tistory.com/' } } } Vue 컴포넌트 옵션의 데이터들을 어떻게 사용하는지 알아보겠습니다. 보간법 Vue 템플릿 문법 입니다. 중괄호를 두 개를 사용합니다. {{ name }} v-bind attribute 속성을 사용할때는 v-bind 보간을 사용해야합니다. 줄여서 :도 사용 가능합니다. v-bind:href="address" 사용 예시 {{ name }} 이동하기 위에서 정의한 name, address 데이터 들을 보간법을 이용하여 바인딩 할 수 ..
Vue 인스턴스를 생성하고 element에 연결해서 Vue를 이용하여 컴포넌트를 생성하겠습니다. HTML를 이용하여 아래와 같이 화면을 만들 수 있습니다. 하지만 "파워쿠의 블로그"나 "url 주소"의 경우 데이터에 따라 문자를 변경하거나 HTML 구조를 변경할 수 있습니다. 이러한 작업들을 Vue에서 하기 위해서는 Vue 인스턴스를 생성하고 화면에 연결해야 합니다. 파워쿠의 블로그 이동하기 Vue 인스턴스 생성 Vue API 중 createApp를 이용해서 인스턴스를 생성합니다. createApp 파라미터에는 컴포넌트 옵션이 들어 있는 객체를 넣습니다. const App = { data() { return { name: '파워쿠의 블로그', address: '/https://powerku.tistory..
프론트엔드 개발할 때 필수적으로 설치해야 하는 프로그램이 node.js 파일입니다. Node.js 파일의 버전을 관리해주는 파일이 nvm 프로그램에 대해서 설명하고 설치 방법과 자주 사용하는 명령어 사용법에 대해서 소개해드리도록 하겠습니다. nvm이란? Node.js Version Manager 노드 버전 매니저 입니다. Node.js 파일을 특정 버전을 다운로드할 수 도 있지만 다양한 프로젝트가 진행 중일때, 매번 프로젝트에 맞는 버전을 삭제하고 설치하기 번거로우므로 사용하는 버전들을 다운 받고 원하는 버전을 쉽게 변경하여 사용할 수 있습니다. 설치방법 맥 https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating GitHub - ..
배포 이후에 기존 페이지의 파일이 그대로 캐시에 남아 있어서 배포된 파일이 적용이 되지 않는 경우가 있습니다. 캐시로 인해서 업데이트 이전 파일이 그대로 있어서 입니다. 캐시와 캐시 버스팅이 무엇인지 알아보고, 위와 같은 문제를 해결하기 위해서는 어떻게 해야 하는지 알아보겠습니다. 캐시란? 데이터 값을 임시로 복사해놓은 장소를 말합니다. 웹 캐시는 웹 페이지를 띄우기 위해서 js, css 파일과 같은 파일을 로드합니다. 해당 파일들을 다음에 페이지를 띄울 때, 새로 요청하지 않고 기존에 저장해 놓은 파일을 가져옵니다. 웹 캐시를 이용해서 화면을 여는 경우에 다시 파일을 받아오지 않아서 빠르게 화면을 열 수 있는 장점이 있습니다. 캐시 버스팅이란? 캐시 버스팅은 이러한 캐시에 저장된 파일을 가져오는 것이 ..
Vue 프로젝트 세팅 하고 실행하는 방법입니다. 설치에 앞서 Node.js를 16 버전 이상으로 설치해야 합니다. 아래 사이트에서 설치하시면 됩니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Vue 프로젝트 만들기 npm init vue create-vue 패키지가 설치가 안되어있으면 아래 버전을 설치하겠냐고 물어봅니다. y를 입력하고 엔터를 입력합니다. PS C:\Users\power\WebstormProjects> npm init vue Vue.js - The Progressive JavaScript Framework √ Project na..
Vue란? 웹 화면을 만들기 위한 프론트엔드 라이브러리이자 점진적 프레임워크이다. 컴포넌트 기반, 라우터, 상태 관리등 점진적으로 결합이 가능하다. 배우기 쉽게 만들어졌다. Vue 장점 배우기 쉽다. 성능이 우수하고 빠르다. 앵귤러 보다 가볍고 리액트의 가상 돔 기반의 장점을 가지고 있다. Vue 특징 UI 화면을 그리는 라이브러리 컴포넌트 기반 양방향 데이터바인딩 & 단방향 데이터 흐름 모두 가능하다. 가상 돔 (Virtual DOM) - 빠른 렌더링 가능 Angular.js의 양방향 데이터 바인딩의 장점과 react의 가상 돔 기반의 빠른 렌더링의 장점만을 모았다. 배우기 쉽다는 장점과 다른 프레임워크의 장점만을 모아서 많은 곳에서 사용되고 있다. React vs Vue 장단점 비교 어떤 것을 사용해..