반응형
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..
코로나 이후 자전거족이 많이 늘었습니다. 자전거를 이용해 출퇴근을 하거나, 야간이나 주말에 취미 생활로 타시는 분들도 많습니다. 최근에는 카카오 바이크를 이용해서 출퇴근하시는 분들도 많이 봤습니다. 자전거를 많이 이용하는 만큼 자전거 사고가 발생할 수 있습니다. 자전거끼리 사고와 보행자와 부딪히는 사고가 있는데요. 지자체별 자전거 보험이 혜택이 있어서 보장을 받으실 수 있습니다. 자전거 보험이란 각 지자체에서 자전거 탑승자와 보행자 안전을 위해서 자전거 보험을 주민이라면 자동 가입하였습니다. 2023년 기준 서울시 13개 지자체 경기도 30개 지자체에서 가입을 하였습니다. 각 지자제 주민이라면 자전거로 발생한 사고에 대하여 보험사에 보장 범위 내에서 보장받을 수 있습니다. 자전거 보험 자격 보장범위 서초..
올해 애플페이가 드디어 국내에 상륙했는데요. 많은 분들이 애플 페이를 사용할 수 있어서 기뻐하고 있는 것 같습니다. 애플은 애플페이 외에도 결제 시스템이 애플카드, 애플 페이 레이터가 있습니다. 이번에 애플통장을 출시하여 본격적으로 금융업으로 사업규모를 확장하려는 움직임이 보입니다. 미국 외신에 따르면 애플이 골드만삭스와 협업업하여 금융업에 뛰어 들었다고 합니다. 애플 통장 만드는 법 애플 통장은 아이폰 월렛을 통해서 만들 수 있습니다. 연 4% 이상 금리로 미국 시중은행보다 높은 이자를 제시하고 있습니다. 특히나 수수료 없고 최대한도 25만달러 (3억3천만원) 까지 예금 보호를 받을 수 있어 많은 사람들이 관심을 보이고 있다고 합니다. 애플 통장 한국 출시는? 한국에서는 네이버가 네이버 통장 상품이 있..
Vue에서 이벤트를 등록해서 사용하고 methods를 이용해서 함수를 호출할 수 있습니다. 이벤트 등록 하기 이벤트는 일반적으로 v-on을 앞에 붙이지만 줄여서 @를 사용합니다. inline-code를 이용해서 이벤트에서 실행될 로직을 작성할 수 있고 메서드를 사용해서 작성할 수 있습니다. 간단한 로직의 경우에는 인라인 코드를 이용해서 사용하고, 복잡한 로직의 경우에는 메서드로 따로 빼서 처리하시면 됩니다. button // 인라인 코드 button // 메서드 메서드 methods 메서드는 vue 인스턴스에서 사용할 메서드를 등록해서 사용할 수 있습니다. 아래와 같이 메서드 등록 후 사용할 수 있습니다. 기본적으로 이벤트에서 method 호출 시에 event 관련 파라미터가 기본적으로 전달됩니다. 해당..
저는 5년 차 프론트엔드 개발자입니다. 이직 준비 중에 프론트엔드 개발 경력직의 경우에는 SPA 라이브러리(리액트, 뷰)의 깊은 이해와 사용, 운영 경력을 필수로 보더라고요. 이전 회사에서는 해당 경험이 없어서 개인적으로 공부가 필수였습니다. 처음에는 오프라인 학원을 다녀볼까 생각하기도 했었는데, 회사 재직 중이어서 주말이나 야간에 시간을 쓰지 못할 때가 많더라고요. 그래서 인터넷 강의를 찾아보다가 인프런, Udemy 등등 여러 사이트를 알아보다가 Udemy를 선택하게 되었습니다. 두 개 강의를 수강하였습니다. 【한글자막】 Vue - 완벽 가이드 (Router 및 Composition API 포함) 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Udemy를 ..
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 - ..