WEB

웹페이지를 제작하다 보면 페이지 로딩이 오래 걸려 중간에 이탈하는 사용자가 생기곤 한다. 이를 조금이나 방지하지위해 페이지 로딩 시 로딩 화면이 나오게 구현해 보겠다. 1. 로딩이미지 다운 2. 코드 적용 1. 로딩이미지 - 다운 아래의 링크로 들어가 원하는 로딩 이미지를 다운로드한다. loading.io/ - 원하는 로딩 이미지 커스텀 후 GIF 클릭해서 다운로드하기 - 다운로드한 파일 images -> loading.gif 저장 2. 코드 적용 - 사이에 아래의 코드 추가 - 와 사이에 아래의 코드 추가 - 바깥쪽에 아래의 코드 추가 - style.css 에 아래의 코드 추가 .load { width: 100%; height: 100%; top: 0; left: 0; position: fixed; d..

UI를 깔끔하기 하기위해 부트스트랩을 적용했더니 a태그에 밑줄이 발행하였다. - style.css에 아래의 코드 추가 .a { text-decoration: none; } - 혹시 style.css 를 안만들었다면 사이에 아래의 코드 추가 끝! 만든 실시간 검색어 링크 hot-topic.ga/ 실시간 검색어 hot-topic.ga

댓글이나 메뉴를 구현하기위해 트리구조로 데이터를 뽑아와야하는 경우가 있다. 이럴때 테이블에 필요한 필수 컬럼과 재귀쿼리를 이용해 데이터를 가지고 오는 방법을 설명하겠다. category 테이블 구성 컬럼 정보 cateId : 카테고리의 고유 아이디 cateNmae : 카테고리 이름 firstDate : 생성 날짜 cateDeletFlag : 삭제 유무 parentId : 부모 카테고리 아이디 트리구조로 메뉴 데이터를 가지고 오는 재귀쿼리 WITH RECURSIVR tree AS() : 메모리상에 tree라는 가상의 테이블을 생성한다. UNION ALL을 기준으로 위에나오는 SELECT문은 비 반복문 으로써 재귀쿼리에 기준이 된다. 여기서는 cateId = 'al'인 데이터가 기준이 된다. UNION AL..

Nuxt(vue)를 사용함에 있어 component간의 데이터 바인딩을 위해 props와 emit을 사용한다 일단 두 기능의 특성을 알아보자 props prop는 부모 Component의 정보를 자식 Component로 전달하기 위해 사용하는 사용자 지정 특성이다. 자식 Component는 props 옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해 사용한다. emit emit은 다른 Component에게 현재 Component의 Event나 Data를 전달하기 위해 사용할 수 있다. EX : 자식 컴포넌트에서 사용자지정 이벤트를 만들어 부모 컴포넌트에게 전달 받아올 다른 Component에서는 @emit으로받아올event명="현재 컴포넌트에서 사용할 Event 명" 형식으로 선언하..

데이터를 조인하여 조회하던 와중에 성능에 이슈가 생겨 확인을 해보니 PK가 설정이 안되어 있는 테이블이 어러개 발견되었다. PK가 설정되어 있지 않다보니 index도 생기지 않아 조회 성능이 매우 떨어졌던 것이다. 따라서 PK 없는 테이블에서 중복된 데이터를 삭제하는 방법에 대해 포스팅 해보겠다. - 해결방법 - ROW_NUMBER() OVER을 이용 SELECT ROW_NUMBER() OVER(PARTITION BY EVENT_TIME ORDER BY EVENT_TIME) AS ROW_NUM , EVENT_TIME FROM testTable - EVENT_TIME으로 파티션을 생성해 주고 ROW_NUMBER() OVER을 이용해 중복된 EVENT_TIME일 경우 2이상의 값으로 넣어준다. - 제 위의 ..

MySQL에서 특정 아이디로 컬럼을 합치는 여러 방법이 있지만 GROUP_CONCAT을 이용하는 방식을 포스팅 하겠다. 아래와 같은 테이블이 있다. TEST 이를 아이디 별로 구분 하기 위해서 GROUP_CONCAT을 사용해 조회를 한다. GROUP_CONCAT을 사용할때에는 별도의 구분자를 입력하지 않으면 자동으로 ,가 입력된다. GROUP_CONCAT(원하는 컬럼) query SELECT DISTINCT ID, (SELECT GROUP_CONCAT(TITLE) FROM test b WHERE b.ID = a.ID )AS NAME FROM test a 결과 원하는 구분자가 있을 시에는 아래와 같이 설정해 주면 된다. GROUP_CONCAT(원하는 컬럼 separactor '원하는 구분자') query ..

MsSQL 특정 아이디로 쿼리 합치기 ID Title 1 가 1 나 1 다 1 라 2 마 2 바 2 사 2 아 3 자 위의 테이플에서 ID 기준으로 쿼리를 합치는 방법이다. SELECT DISTINCT ID, STUFF(( SELECT ',' + Title FROM TB_Data b WHERE b.ID = a.ID FOR XML PATH('') ),1,1,'') AS NAME FROM test a 아래의 결과가 출력된다. ID Title 1 가,나,다,라 2 마,바,사,아,자 STUFF란? SUTFF함수는 특정 문자열을 지정한 위치부터 원하는 길이만큼 원하는 문자로 변경해준다. STUFF('특정 문자열', 지정한 위치, 원하는 길이 '원하는 문자') SELECT STUFF('CASTLE',3,4,'P')..

input에 숫자만 입력하기 위한 방법을 소개하겠다. JSP SCRIPT //숫자만 입력 가능 function checkInputNum(){ if ((event.keyCode 57)){ alert("숫자만 입력 가능합니다."); event.returnValue = false; } }