Vue 양방향 바인딩 v-model

Vue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다. 양방향 바인딩이란? 입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다. 동시에 데이터 통신이 일어나기 때문에 양방향 바인딩이라고 합니다 v-model 이란? Vue의 v-bind 속성과 v-on 속성을 이용하여 양방향 바인딩을 할 수 있는 유용한 방법입니다. v-on 이벤트를 이용하여 데이터에 값을 넣는다. v-bind를 이용하여 속성에 데이터를 넣어준다. Vue.component("App", { data() { return { name: "" }; }, template: ` 이름: {{ name }} `, methods: { setInput(event) { this.name = event.targ..

• format_list_bulleted Develop/Vue
• · 2023. 5. 2.
• textsms

개발하다가 막힐때 해결 방법

개발을 하다가 보면 누구나 막힐 때가 있습니다. 오류가 발생하거나, 해결하지 못하는 문제가 발생할 때가 있는데요. 이럴 때 어떻게 해야 하는지 알아보도록 하겠습니다. 1. 문제 정의 현재 발생하는 문제가 어떤 문제인지를 파악하는 것이 중요합니다. 어떤 에러인지, 어디서 문제가 발생한 건지를 정확하게 파악하는 것이 중요합니다. 2. 구글링 ( 공식문서, 커뮤니케이션 사이트) 오류가 발생한다면 오류에 대해서 검색해보거나, 공식 문서를 검색해 봅니다. 구글링을 통해서 블로그나 웹사이트에서 나와 동일한 오류로 문제를 겪은 사람들의 해결 방법을 찾아봅니다. 이렇게 해결 방법을 찾지 못하면 커뮤니케이션 사이트에 직접 나의 문제를 올려 도움을 요청하는 방법도 좋습니다. 3. ChatGPT에게 물어보기 최근 제가 많이..

• format_list_bulleted Develop/etc
• · 2023. 4. 30.
• textsms

개발자 퇴사 막는 방법

코로나 시절을 거치면서 개발자 연봉과 복지는 엄청 오르고 개발자들은 더 좋은 직장을 찾아서 퇴사와 이직을 반복하게 되었다. 경영진들은 어떻게 하면 실력 좋은 개발자들을 퇴사를 막을 수 있을까 고민하는데 쉽지 않다. 단순히 연봉을 높게 제시할 수도 없고 어떻게 하면 개발자들 퇴사를 막을 수 있을지 몇 가지 작성해 본다. 1. 능력 있는 상사 실력 있고, 능력 좋고, 일 처리 깔끔한 동료와 함께 일하면 일하는 게 즐겁다. 반대로 지금 프로젝트가 어떻게 돌아가는지도 모르고 딴 소리하고 있고, 이런 동료와 특히 상사와 일하게 되면 바로 퇴사 마렵다. 2. 재택근무 & 유연근무제 본인 회사가 9-6을 고집하고 있으면 직원들은 간단한 병원이나, 은행 업무를 볼 때도 연차를 사용하거나 해서 손해가 막심하다. 아침 &..

• format_list_bulleted Develop/etc
• · 2023. 4. 29.
• textsms

농구 점수판 프로그램 Basketball Scoreboard

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..

• format_list_bulleted Develop/Made by powerku
• · 2023. 4. 29.
• textsms

Vue 반복문 v-for 배열, 객체 렌더링

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..

• format_list_bulleted Develop/Vue
• · 2023. 4. 28.
• textsms

Vue 조건문 v-if v-else v-else-if

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..

• format_list_bulleted Develop/Vue
• · 2023. 4. 27.
• textsms

Vue 이벤트와 methods 사용하기

Vue에서 이벤트를 등록해서 사용하고 methods를 이용해서 함수를 호출할 수 있습니다. 이벤트 등록 하기 이벤트는 일반적으로 v-on을 앞에 붙이지만 줄여서 @를 사용합니다. inline-code를 이용해서 이벤트에서 실행될 로직을 작성할 수 있고 메서드를 사용해서 작성할 수 있습니다. 간단한 로직의 경우에는 인라인 코드를 이용해서 사용하고, 복잡한 로직의 경우에는 메서드로 따로 빼서 처리하시면 됩니다. button // 인라인 코드 button // 메서드 메서드 methods 메서드는 vue 인스턴스에서 사용할 메서드를 등록해서 사용할 수 있습니다. 아래와 같이 메서드 등록 후 사용할 수 있습니다. 기본적으로 이벤트에서 method 호출 시에 event 관련 파라미터가 기본적으로 전달됩니다. 해당..

• format_list_bulleted Develop/Vue
• · 2023. 4. 24.
• textsms

Vue 데이터 바인딩 보간법 v-bind

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 데이터 들을 보간법을 이용하여 바인딩 할 수 ..

• format_list_bulleted Develop/Vue
• · 2023. 4. 20.
• textsms

Vue 인스턴스 생성 및 연결하기

Vue 인스턴스를 생성하고 element에 연결해서 Vue를 이용하여 컴포넌트를 생성하겠습니다. HTML를 이용하여 아래와 같이 화면을 만들 수 있습니다. 하지만 "파워쿠의 블로그"나 "url 주소"의 경우 데이터에 따라 문자를 변경하거나 HTML 구조를 변경할 수 있습니다. 이러한 작업들을 Vue에서 하기 위해서는 Vue 인스턴스를 생성하고 화면에 연결해야 합니다. 파워쿠의 블로그 이동하기 Vue 인스턴스 생성 Vue API 중 createApp를 이용해서 인스턴스를 생성합니다. createApp 파라미터에는 컴포넌트 옵션이 들어 있는 객체를 넣습니다. const App = { data() { return { name: '파워쿠의 블로그', address: '/https://powerku.tistory..

• format_list_bulleted Develop/Vue
• · 2023. 4. 19.
• textsms

nvm 설치 방법 자주 사용하는 명령어 사용법 mac, window

프론트엔드 개발할 때 필수적으로 설치해야 하는 프로그램이 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 - ..

• format_list_bulleted Develop
• · 2023. 4. 17.
• textsms