삽질개발코딩

이번엔 이벤트 핸들링 기능 중 하나인 key 시리즈에 대하여 설명하겠다. key 시리즈도 너무나 단순하고 간단해서 크게 설명할 것이 없으니 간단하게 코드 사용과 결과를 설명하고 주의점 및 해결방안을 설명하겠다. 1. keyup 입력결과 : {{this.result}} 설명할게 크게 없다. key를 눌렀다가 떼면 keyHandle() 함수가 실행되어 변수 result에 입력값을 넣어 데이터 바인딩 한 코드이다. 2. keydown 입력결과 : {{this.result}} 이번엔 key를 눌렀을 시 동작하는 함수이다. 하지만 실행결과를 보면 입력칸엔 keydown을 입력했지만 결과는 마지막 글자가 빠져서 나왔다. 이 부분은 맨 하단 주의점 설명 시 언급하겠다. 3. keypress 입력결과 : {{this...

이번엔 input에 숫자만 넣는 방법에 대하여 알아보자 보통 전화번호 입력, 계좌번호 입력 등 숫자만 사용되는 항목을 작성할때 사용된다. 숫자만 입력되게 만드려면 많은 방법이 있지만 쉽고 간편해서 특히 자주 사용되는 2가지가 있다. 1. Input 태그에 입력하는 방법 말 그대로 input 태그를 건드려 작성하는 방법이다. 태그를 건드리는 방법도 크게 두가지로 나눠지게 되는데 각각의 장단점을 알려주겠다. 입력결과 : {{this.result}} 우선 첫번째로 input의 type을 number로 바꾸는 방법이다. 장점 : 간단함 단점 : maxlength를 사용할 수 없음 장점은 type만 바꿔주면 되는거니 정말 간단하다. 하지만 maxlength를 사용할 수 없다는 것이 제일 큰 단점이다. 예를들어, ..

오늘은 화면 구성에 기본적으로 많이 쓰이는 input 사용법에 대해서 알아보자. input은 말 그래도 입력칸을 의미한다. 글자, 숫자, 특수기호 등 키보드로 입력할 수 있는 모든것들을 넣을 수 있다. 코드 App.vue 입력결과 : {{input}} 설명 코드만 봐도 느끼겠지만 정말 간단해서 설명할게 없다. input 태그를 만들고 입력한 값을 저장할 수 있도록 v-model을 이용하여 미리 만들어 놓은 input 변수 안에 넣고 입력결과를 데이터 바인딩 한 것이다. 결과

오늘도 화면 구성 시 가장 기본적으로 쓰이는 이벤트에 관해 알아볼 것이다. 이벤트 핸들링은 특정 이벤트가 실행될때 함수 혹은 별도의 동작을 실행시키는 기능이다. 대표적으로 @click 이벤트와 @change 이벤트가 제일 많이 쓰이므로 사용법과 예제를 알아보고 추후 다른 이벤트 핸들링도 다뤄보도록 하겠다. 1. v-on:click(@click) 코드 App.vue 클릭 클릭 결과 : {{result}} 설명 '@click'은 말 그대로 버튼을 클릭 했을 시 함수를 호출하는 기능이다. ■ 'v-on:click'은 간소화시켜 '@click'으로 사용해도 무관하다 클릭 클릭 버튼을 클릭했을 시 하단 methods 부분의 click() 함수를 호출한다는 뜻이다. click()함수가 호출되면 변수 result에 ..

select 특정 리스트들중 원하는 값을 선택하여 특정 값만 골라오는 것이 select기능이다. 정말 쉽고 화면 구성 시 가장 흔하게 쓰이는 기능 중 하나이니 알아두면 정말 좋다. 코드 App.vue {{color.name}} 선택결과 : {{result}} 설명 ■ 우선 div,select 문에 있는 'style' 기능은 단순히 보기 편하게 개인적으로 만든 것이니 신경쓰지 않아도 되고, 크게 설명할 필요는 없지만 select문을 한번도 접해보지 않은 사람을 위해 설명을 적는다. 전체적인 동작 설명을 하자면, 배열 'list'를 만들고 선택(select)박스 클릭 시 'list'안에 있는 항목들이 나타나고, 특정 항목을 선택 시 그 항목의 value 값을 나타내는 코드이다. 1. 를 입력하면 하단 결과 ..

Sort() 함수란? Array 혹은 Object 의 요소를 사용자가 원하는 특정 기준에 따라 오름,내림차순으로 정리하는 함수이다. Array sort() 배열에서 sort는 비교적 간단하게 구현 가능 문자 정렬 let color = ['white', 'red', 'black', 'blue'] color.sort();//black, blue, red, white 숫자 정렬 let number = [130, 110, 72, 252] number.sort()// 110, 130, 252, 72 ← 단순 sort는 문자 순서대로 정렬 number.sort(function(a,b){ return a-b// 72, 110, 130, 252 ← 오름차순 정렬 }) number.sort(function(a,b){ r..

소켓(Socket)이란? 소켓(Socket)은 네트워크 상에서 돌아가는 두 개의 프로그램 간 양방향 통신의 개념이라고 생각하시면 됩니다. 즉, 프로세스가 소켓을 열고, 소켓에 데이터를 넣어 보내거나 데이터를 읽어드리는 것을 의미한다. 구현 1.설치 npm install socket.io-client npm install express socket.io 2. 서버 구축 server.js * 이렇게만 하면 cors 문제가 생기니 아래 cors 문제 해결 방안도 같이 봐야합니다 const express = require('express') const http = require('http') const { Server } = require('socket.io') const app = express() const..