티스토리

쉽게 개발하기

검색하기

블로그 홈

쉽게 개발하기

easy-coding.tistory.com/m

SourceTree 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

VueJS 개발을 위한 Javascript ES6 문법 4개 1. 화살표 함수(=>) 화살표 함수안의 this는 해당 함수가 수행되는 컨텍스트를 가리킴 (기존 함수에서는 this를 사용, 화살표 함수에서는 this없이 사용) 인자 값이 1개인 경우 () 생략가능 함수 정의 로직이 1줄이면 {} 제거가능 //일반 함수(ES5) function (인자) { } //화살표 함수(ES6) (인자) => { } 2. 템플릿 리터럴 (Template literals) 문자열을 표시할 때 사용하는 작은 따옴표(‘)나 큰 따옴표(“) 대신 백틱(`)을 사용하는 것을 의미 문자열을 여러 줄에 걸쳐 표시할 수 있습니다. (뷰 컴포넌트의 템플릿 선언 시에 유용함) 문자열과 자바스크립트 표현식을 함께 사용하기 좋습니다. (computed 속성 사용이 편함) Vue.component({.. 공감수 1 댓글수 0 2021. 12. 10.
VueJS 정리#5 Life Cycle, computed, methods VueJS 다섯번째 정리입니다. Life Cycle : created > mounted > updated > destoryed 참고한 값의 변경에서만 재실행 : computed 모든 상황에서 재실행 : methods See the Pen VueJS #5 by 이상섭 (@vskfamnu) on CodePen. 공감수 0 댓글수 0 2021. 12. 10.
VueJS 정리#4 멀티 인스턴스, 컴포넌트 VueJS 네번째 정리입니다. 멀티 인스턴스 : new Vue() 여러개 생성 컴포넌트 : Vue.component() See the Pen VueJS #4 by 이상섭 (@vskfamnu) on CodePen. 공감수 2 댓글수 0 2021. 12. 10.
VueJS 정리#3 클래스 바인딩, 스타일 바인딩 VueJS 세번째 정리입니다. 클래스 바인딩 : v-bind:class(v-bind 생략가능) 스타일 바인딩 : v-bind:style(v-bind 생략가능) See the Pen VueJS #3 by 이상섭 (@vskfamnu) on CodePen. 공감수 0 댓글수 0 2021. 12. 10.
VueJS 정리 #2 폼입력, 조건문, 반복문 VueJS 두번째 정리입니다. 폼입력 바인딩 : v-model 조건문 : v-if, v-else-if, v-else, v-show 반복문 : v-for See the Pen VueJS #2 by 이상섭 (@vskfamnu) on CodePen. 공감수 1 댓글수 0 2021. 12. 10.
VueJS 정리#1 {{}}, 변수, 함수, 지시문, 이벤트 VueJS 첫번째 정리입니다. 값지정 : {{}} 변수 : data 함수 : methods 지시문(directive) : v-bind, v-on, v-once, v-html 이벤트 : v-on:click, v-on:dblClick,v-on:mousemove, v-on:keyup.enter See the Pen VueJS #1 by 이상섭 (@vskfamnu) on CodePen. 공감수 2 댓글수 0 2021. 12. 10.
Javascript 로딩바 동적 생성후 Show/Hide 자바스크립트로 동적으로 로딩바를 Show, Hide하는 예제입니다. 'use strict'; function Spinner(){ Spinner.element=document.createElementNS('http://www.w3.org/2000/svg', 'svg'); let c=document.createElementNS('http://www.w3.org/2000/svg', 'circle'); Spinner.element.setAttribute('width','50'); Spinner.element.setAttribute('height','50'); c.setAttribute('viewBox','0 0 50 50'); c.setAttribute('cx','25'); c.setAttribute('cy',.. 공감수 2 댓글수 0 2021. 11. 20.
MySQL NULL 체크/조건문, Select 데이터 합치기 NULL 체크 #create_dt가 null이면 '-', null아니면 년월일 SELECT id, IFNULL(DATE_FORMAT(create_dt, '%Y-%m-%d'), '-') FROM tbl_member; #IFNULL 안에 IFNULL : v1이 없으면 v2, v2가 없으면 v3 SELECT id, IFNULL(v1, IFNULL(v2, v3)) as val FROM tbl_member; NULL 조건문 #id가 NULL이 아닌것만 가져오기 SELECT * FROM tbl_member WHERE id IS NOT NULL; Select 데이터 합치기 #create_dt에 지정텍스트 더하기 SELECT id, CONCAT(DATE_FORMAT(create_dt, '%Y년 %m월 %d일'), '에.. 공감수 0 댓글수 0 2021. 11. 20.
MySQL 날짜/시간 표현, 조건검색(최근 하루/일주일/한달) 날짜, 시간 표현 #기본시간 형식 "2021-03-24 09:26:25" SELECT NOW(); #날짜만 "2021-03-24" SELECT DATE(NOW()); #시간만 "09:26:25" SELECT TIME(NOW()); #년도만 "2021" SELECT YEAR(NOW()); #월만 "3" SELECT MONTH(NOW()); #날짜만 포맷지정 "2021/03/24" SELECT DATE_FORMAT(NOW(), '%Y/%m/%d'); #시간만 포맷지정 "09 26 25" SELECT DATE_FORMAT(NOW(), '%H %i %s'); 조건문 #최근 하루 SELECT * FROM table_a WHERE create_dt BETWEEN DATE_ADD(NOW(), INTERVAL -1 D.. 공감수 12 댓글수 1 2021. 11. 20.
Javascript 싱글톤 패턴 모듈, 모듈+네임스페이스 패턴 2개 싱글톤 패턴 모듈 하나의 인스턴스만 만들어 사용하는 패턴 var singleton = (function() { var instance; var a = 'hello'; function initiate() { return { a: a, b: function() { alert(a); } }; } return { getInstance: function() { if (!instance) { instance = initiate(); } return instance; } } })(); //사용 var first = singleton.getInstance(); var second = singleton.getInstance(); //first와 second는 동일한 인스턴스임 console.log(first === se.. 공감수 1 댓글수 0 2021. 11. 18.
Javascript 객체 정의 방법, 클로져 IIES 패턴 모듈, 클로져 생성자 패턴 모듈 객체 정의(리터럴) 방법 리터럴 : 소스코드에 고정된 값을 말하는 대표적인 용어(var v1 = 5; var v2 = "a"; 에서 5, "a" 값이 리터럴임) 아래 예제 에서 num에 할당된 1, func1, func2에 할당된 function() 이 리터럴 이라고 보면 됨 리터럴 객체 정의 예제 var obj = { num: 1, func1: function () { //... }, func2: function () { //... } }; 클로져 IIES 패턴 모듈 즉시 실행 함수(IIES) 패턴을 이용한 모듈 정의 방법 하나의 모듈만 미리 생성후 바로 사용 가능한 형태 var module = (function() { // 은닉될 멤버 정의 var privateKey = 0; function priv.. 공감수 0 댓글수 0 2021. 11. 18.
Javascript Prototype(프로토타입) Prototype(프로토타입) 함수는 생성될때 기본적으로 프로토타입이 만들어짐 각 함수의 객체마다 변수가 생성되지 않고 공통적으로 쓰는 값이 필요할때 쓰임 함수(==클래스) 고유의 전역변수, 전역함수 라고 보면 됨 함수선언, 객체당 변수가 각각 생성되는 형태 //함수선언(== 클래스선언) function Person() { this.eyes = 2; this.nose = 1; } //객체당 변수가 각각 생성 var kim = new Person(); var park = new Person(); console.log(kim.eyes); // => 2 console.log(kim.nose); // => 1 console.log(park.eyes); // => 2 console.log(park.nose); /.. 공감수 0 댓글수 0 2021. 11. 18.
Javascript 즉시실행함수(IIFE), 클로져(Closure) 즉시 실행 함수(IIFE) Immediately Invoked Function Expression 바로 실행이 되는 함수 형태 사용은 모듈을 만들거나 루프문안에서 각 항목에 이벤트를 걸때 사용 외 기타 (function () { //... })(); 클로져(Closure) 중괄호({ ... }) 안의 즉시 실행 함수 이미 실행이 종료된 함수의 변수나 함수를 참조할 수 있는 링크를 가진 내부 함수 아래의 예에서 inner함수의 경우 크롬디버깅으로 확인시 Closure스코프가 보임 function outer(x) { function inner(y) { return x + y; } return inner; } const inner = outer(5); inner(3); // 5 + 3 == 8 클로져를 활용한.. 공감수 0 댓글수 0 2021. 11. 18.
Javascript Math, alert, confirm, prompt Math Math.floor(Number) //내림 Math.ceil(Number) //올림 Math.round(Number) //반올림 var numbers = [ 10, 20, 30 ] Math.max.apply(null, numbers) //배열중에서 최대값 Math.min.apply(null, numbers) //배열중에서 최소값 Math.random() //0 이상 1 미만의 난수 Math.floor(Math.random() * 10) //0~9 정수 alert, confirm, prompt alert('확인 얼럿창'); var jbResult = confirm('확인, 취소 컨펌창'); var jbResult = prompt('입력해주세요.', ''); 공감수 0 댓글수 0 2021. 11. 18.
Javascript Array, String(배열, 문자열) 다루기 Array //선언1 var ary = new Array(); ary[0] = 'a'; ary[1] = 'b'; ary[2] = 'c'; //선언2 var ary = [ 'a', 'b', 'c' ]; //선언3 var ary = new Array( 'a', 'b', 'c' ); array.length; //길이 var ary2 = ary.concat('abc'); //ary1에 'abc'추가한 배열 생성 ary.every(function(x) { return x < 5 }); //모든 요소가 만족하면 true ary.indexOf('a'); //'a'의 인덱스 리턴 ary.lastindexOf('a'); //뒤부터 검색한 'a'의 인덱스 리턴 ary.join(','); //"a,b,c" 와 같은식으로 리.. 공감수 1 댓글수 0 2021. 11. 18.
Spring 설치, 스프링 프로젝트 생성(이클립스) 1. 이클립스 > Help > Eclipse Marketplace.. > STS검색 2. Spring Tool Shuit3 설치 3. 프로젝트 생성 File - New - Project - Spring - Spring Legacy Project 프로젝트 이름 입력, Spring MVC Project 선택 패키지명 입력 생성완료 공감수 2 댓글수 0 2021. 11. 18.
MySQL Left, Right, Inner Join(+ Full Outer Join) 테이블 정보 tbl_person --------------------------- seq name age ------ --------- -------- 1 어린이 10 2 청소년 15 3 대학생 20 tbl_info ---------------------------------------------------- seq person_seq school explanation ------ ---------- ------------ ------------------ 1 1 초등학교 열심히 놀기 2 2 중학교 공부 시작 3 2 고등학교 공부 힘듬 4 4 대학교 다시 놀기 1. A LEFT JOIN B : A전체 + B값 SELECT a.seq, a.name, a.age, b.school, b.explanation .. 공감수 0 댓글수 0 2021. 11. 18.
PHP 설치(Apache설치 후 php사용하게 설정) 아파치, PHP 설치 위치는 아래 기준으로 했습니다. 아파치 : C:\Apache24 PHP : C:\php8 1. 아파치 설치파일 다운로드(32bit, 64bit에 맞게 다운로드) www.apachelounge.com/download/ Apache VS16 binaries and modules download www.apachelounge.com 2. 다운받은 파일 압축해제후 "Apache24"폴더를 "C:\"로 이동 3. C:\Apache24\conf\httpd.conf 파일 설치PC에 맞게 수정(아래 3개가 가장 많이 사용하는 설정) ServerRoot "c:\Apache24" listen 80 DocumentRoot "c:\Apache24\htdocs" 4. 아파치 설치 관리자모드로 명령프롬프트 .. 공감수 2 댓글수 1 2021. 11. 18.
Javascript 함수, 객체(Object), 전역/지역 변수, 비교연산자, typeof 함수 //선언전에도 사용가능 func(1, 2); function func(arg1, arg2) {} //선언후에만 사용가능 var func = function(arg1, arg2) {} func(1, 2); 객체 //1 var jb = { 'a':100, 'b':200, 'c':300 }; //2 var jb = {}; jb['a'] = 100; jb['b'] = 200; jb['c'] = 300; //3 var jb = new Object(); jb['a'] = 100; jb['b'] = 200; jb['c'] = 300; //4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300; 전역변수, 지역변수 //지역변수 : 함수내의 변수 //전역변수 : .. 공감수 0 댓글수 0 2021. 11. 18.
Javascript 내장함수(window, location, screen, document) 자바스크립트 내장함수 정리 window location screen document others window //window.open : 새창띄우기 window.open('/srctree/login.html', '로그인', 'width=480, height=800'); location //페이지 이동 location.href = 'http://www.abc.com/'; //location 값 확인(현재페이지 : 'https://srctree.tistory.com/main.html') location //'https://srctree.tistory.com/main.html' location.host //'srctree.tistory.com' location.hostname //'srctree.tistory.. 공감수 1 댓글수 0 2021. 11. 18.
CSS 수직 정렬(transform 이용), 너비 계산(calc) transform을 이용한 수직중앙정렬 요소의 top을 50% 내리고 요소의 높이의 50%만큼 위치를 올려서 수직 정렬을 구현 calc를 이용한 너비 계산 및 적용 사칙연산을 통한 너비 및 높이 계산 시 사용 다양한 방식 사용 가능(ex: calc(100% / 3), calc(50% - 30px), calc((50% - 3em)/2 + 5px)) 예제 코드 See the Pen yLVzmpK by 이상섭 (@vskfamnu) on CodePen. 공감수 2 댓글수 0 2021. 11. 18.
CSS 리셋(Reset) 코드 css 첫 부분에 넣어 사용하는 리셋 코드입니다. 공감수 0 댓글수 0 2021. 11. 18.
JSP Servlet AES(128, 192, 256) 암복호화 - Android, IOS AES 암복호화 IOS url-encode로 인해 '+'가 공백으로 바뀌는 증상 대응코드 key값의 길이에 따라 AES128, AES192, AES256 으로 구분됨 AES128 : 키값 16bytes AES192 : 키값 24bytes AES256 : 키값 32bytes Android, IOS 대응(하단 참조) 예제 코드(AES256) import java.security.spec.AlgorithmParameterSpec; import java.util.Base64; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; public class AES256Util.. 공감수 0 댓글수 0 2021. 11. 18.
jQuery [통신] ajax, post, load, getJSON, getScript jQuery 통신 ajax : 자바스크립트를 사용한 비동기 통신으로 클라이언트와 서버간에 데이터를 주고받음(json, xml 등) post, parseJSON : post 페이지 요청, 수신 데이터 JSON파싱 load : 특정 영역에 동적 웹 페이지 요청 후 삽입 getJSON : 동적으로 json파일 가져오기 getScript : 동적으로 js파일 가져오기(단점 : 크롬디버깅이 힘듬) ajax //파라미터 var action = 'test1'; var param1 = 1; var param2 = 'param'; var aryParam = [ 'a', 'b', 'c' ]; jQuery.ajaxSettings.traditional = true;//Array 파라메터 넘길때 필요 $.ajax({ url: .. 공감수 0 댓글수 0 2021. 11. 18.
jQuery [폼컨트롤] Input text, Check, Select, Radio, Button jQuery 폼컨트롤 input type="text" : 입력 받기 input type="checkbox" : 체크 박스 input type="radio" : 라디오 선택 select : 콤보 박스 button : 버튼 예제 코드 See the Pen jQuery-폼컨트롤 by 이상섭 (@vskfamnu) on CodePen. 공감수 0 댓글수 0 2021. 11. 18.
jQuery [이벤트] 페이지 로드, 클릭, Text변경 jQuery 이벤트 ready() : 페이지 로드 완료 click() : 클릭 이벤트 hover() : 마우스 hover 이벤트 change() : text, selectbox 변경 이벤트 on() : 이벤트 적용(권장 방식) 예제 코드 See the Pen jQuery-이벤트 by 이상섭 (@vskfamnu) on CodePen. 공감수 0 댓글수 0 2021. 11. 18.
JSP 세션(Session)을 이용한 중복 로그인 처리 로그인 세션 관리 및 세션을 이용한 중복 로그인 처리 HttpSessionListener 를 이용한 세션 생성, 종료 이벤트 수신 {유저 아이디 : 세션} HashTable을 이용한 세션 관리 및 중복 로그인 처리 로그인 여부, 세션 연장 서블릿 생성 MySessionManager.java : 세션 리스너 + 해시맵에 유저별 세션 관리 import java.util.Hashtable; import javax.servlet.annotation.WebListener; import javax.servlet.http.HttpSession; import javax.servlet.http.HttpSessionEvent; import javax.servlet.http.HttpSessionListener; /* 리스너.. 공감수 2 댓글수 0 2021. 11. 18.
jQuery [편집] 테이블(직접 추가, 복제 추가) jQuery 테이블(Table) 편집 remove() : 모든 row Clear append() : 요소 직접 추가를 이용한 row 추가 clone(), append() : 요소 복제를 이용한 row 추가 after() : 지정된 위치 바로 다음에 row 추가 예제 코드 See the Pen dyOXGML by 이상섭 (@vskfamnu) on CodePen. 공감수 0 댓글수 0 2021. 11. 18.
jQuery [편집] 내용, 속성, Attribute Property 차이 jQuery 내용, 속성(attribute, property) 편집 text() : 요소의 text 가져오기, 변경 html() : 요소의 html 가져오기, 변경 attr() : 요소의 attribute 가져오기, 변경 prop() : 요소의 property 가져오기, 변경 css() : 요소의 css 가져오기, 변경 addClass() : 클래스 추가 removeClass() : 클래스 삭제 toggleClass() : 클래스 있으면 제거, 없으면 추가 (참고) attribute와 property 차이 HTML코드 작성시 사용된 속성이 attribute이고, HTML을 브라우져가 파싱하면서 생성한 DOM tree에 사용되는 속성이 property라고 보면 됨(이때 attribute의 값이 기본값이 되.. 공감수 1 댓글수 0 2021. 11. 18.
jQuery [편집] 감싸기, 감싸기 해제(wrap, unwrap) jQuery 감싸기, 감싸기 해제 wrap() : 개별 요소별로 감싸기 wrapAll() : 해당 요소를 모두 모아 감싸기(최상위 요소 위치 기준으로) unwrap() : 상위 태그 제거 wrapInner() : 요소의 innerText를 해당 태그로 감사기 예제 코드 See the Pen wvoGmLG by 이상섭 (@vskfamnu) on CodePen. 공감수 0 댓글수 0 2021. 11. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.