전체 글

[Javascript] ES6 export, import

안녕하세요. 이번 포스팅은 export, import에 대해 알아보겠습니다. ES6에서는 export, import를 사용하여 자바스크립트가 모듈화를 할 수 있는 기능을 제공합니다. export는 두 가지 방법이 있다. export default, (named)export 우선 export 예제를 보겠습니다. // module1.js export default function test() { console.log('module1 test'); } export function test1() { console.log('module1 test1'); } export function test2() { console.log('module1 test2'); } 이것을 아래와 같이 사용할 수도 있습니다. // mod..

[Javascript] ES6 Promise를 통해 콜백지옥 문제를 해결해보자

Promise(프로미스)는 ES5까지 비동기로 호출하는 과정에서 생기는 콜백지옥 문제를 해결하기 위해 등장한 ES6 문법입니다. 우선 ES6가 등장하기 전에는 어떠한 복잡성이 있었는지 확인해보겠습니다. // 비동기식 getNotice 요청 function getNotice(id, callback) { console.log('비동기식 get 요청이 이루어졌습니다.'); // 3초 후 다음로직을 실행함 setTimeout(function() { let notice = {id: 1, title: "title 1", content: "hehe"}; callback(notice); }, 3000); } let notice = getNotice(2, function(notice) { console.log(notic..

[Javascript] ES6 Destructuring 문법에 대해 알아보자

안녕하세요. 이번 포스팅에서는 ES6 문법의 Destructuring에 대해 알아보겠습니다. Destructuring은 '구조 분해'라고 하는데 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 ES6 문법입니다. Destructuring은 Array(배열) Destructuring, Object(객체) Destructuring으로 나누어져있습니다. 하나씩 자세하게 알아보겠습니다. Array Destructuring 중첩되지 않은 배열인 경우 다음과 같은 배열 중첩되지 않은 배열이 있습니다. let kors = [10, 20, 30]; kors 배열의 각 원소들이 각 변수에 담기고 싶다면 인덱스를 통해 접근이 가능했습니다. let kors = [10, 20, 30]; let kor..

[Javascript] 이벤트 트리거를 사용하여 input 속성을 커스터마이징 해보자!

이번 포스팅은 이벤트 트리거를 사용하여 input 속성을 커스터마이징 해보겠습니다. html에서 input 속성을 그대로 사용하면 아래와 같습니다. css로 꾸미려고 하면 다음과 같이 됩니다. 파일 선택만 남기고 깔끔하게 디자인을 할 수 있는 방법이 없을까요? 자바스크립트에서 제공하는 이벤트 트리거라는 기능을 사용하면 깔끔하게 디자인이 가능합니다. 이벤트 트리거 트리거는 '방아쇠'를 의미합니다. 방아쇠를 당기면 총알이 나가는 것처럼 어떠한 행위(클릭 등)를 했을 때 파일을 선택할 수 있도록 할 수 있습니다. span 태그를 하나 생성해서 span 태그를 눌렀을 때 위의 input을 실행시켜보겠습니다. 우선 하나의 div태그에 input, span을 같이 넣어두겠습니다. 파일선택 이 상태라면 파일 선택이 ..

[JavaScript] 이벤트 버블링과 이벤트 캡쳐링을 알아보자

자바스크립트에서 이벤트를 전달하는 방식은 버블링, 캡쳐, 위임 방식이 있습니다. 이번 포스팅에서는 이벤트 버블링, 캡쳐링에 대해 알아보겠습니다. 이벤트 버블링 버블링은 거품이 커져가는 뉘앙스가 담겨 있습니다. 거품이 위로 많아지는 경우를 생각하면 이해하기 쉽습니다. 이벤트 버블링은 어떤 요소에 대해 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정을 의미합니다. 예시를 하나 들어보겠습니다. 노란색은 son, 파란색은 parent, 빨간색은 grand-parent 부분입니다. 그리고 다음과 같은 js 소스코드가 있습니다. var grandParent = document.querySelector('.grand-parent'); var parent = document.querySe..

[Javascript] AJAX를 통해 새로고침 없이 데이터를 불러오기

안녕하세요. 이번 포스팅에서는 AJAX에 대해 알아보겠습니다. AJAX(Asynchronous Javascript And Xml)는 클라이언트와 서버간의 데이터를 비동기 방식으로 주고 받는 기술을 의미합니다. AJAX는 데이터를 딱 필요한 부분만 별도로 요청하여 응답을 받아 처리하기 때문에 사용자가 대기하는 시간을 줄일 수 있다는 장점이 있습니다. 이것이 가능한 이유는 기존의 데이터를 처리하는 방식인 동기 방식이 아니라, 비동기 방식으로 데이터를 요청/처리하기 때문입니다. * 동기(Synchronous) 방식이란 클라이언트에서 요청(request)을 보내면 서버에서 응답(response)가 돌아오기 전까지 무작정 기다려야만 하는 방식입니다. 웹 페이지의 일부분만 바꾸려고 요청을 해도 서버에서 해당 페이지..

[Javascript] onclick vs addEventListener의 차이점을 알아보자

이번 포스팅은 onclick과 addEventListener의 차이점에 대해 알아보겠습니다. 자바스크립트에서 클릭이벤트를 사용할 때 onclick과 addEventListener를 사용할 수 있습니다. 차이점을 알아보기 전에 다음과 같은 예시를 보고 가겠습니다. var btn = document.querySelector('.btn'); btn.onclick = function() { console.log('100'); } btn.onclick = function() { console.log('200'); } btn.onclick = function() { console.log('300'); } '클릭' 버튼을 누르면 콘솔 탭에 어떤 값이 출력이 될까요? '300'만 출력이 됩니다. 그렇다면 다음과 같은 ..

[JSP] JSTL로 현재 날짜와 특정 날짜 비교하기

프로젝트하면서 알게된 것을 기억하기 위해 기록하는 포스팅 상황 오늘 날짜와 이벤트 종료일을 비교해야 함 컨트롤러에서 Date now = new Date();를 통해 java.util.Date 형식의 오늘 날짜를 가져온다. 오라클 DB에서 가져온 이벤트 종료일은 SYSTIMESTAMP 형식으로 이를 SELECT 할 때 TO_CHAR(SYSTIMESTAMP, 'yyyy-MM-dd')방식으로 뽑아옴 이 둘을 JSP파일에서 비교하기 위해 컨트롤러에서 now 변수를 forward방식으로 list.jsp로 위임하고 이벤트 종료일은 이벤트 객체를 forward 방식으로 전송한다. 현재 now와 이벤트 종료일의 패턴 형식('yyyy-MM-dd')이 맞지 않으므로 now를 이에 맞춰준다. JSTL if문으로 인 경우, ..

[오라클 데이터베이스] 아우터 조인(OUTER JOIN)이란?

이번 포스팅에서는 아우터 조인(OUTER JOIN)에 대해 알아보겠습니다. 아우터 조인은 이너 조인(INNER JOIN)의 반대로 조인 조건에 맞지 않는 데이터들도 표현하고자 할 때 사용합니다. 아우터 조인의 종류는 LEFT, RIGHT, FULL이 있습니다. 아우터 조인은 [LEFT/RIGHT/FULL] OUTER JOIN 문법으로 사용을 할 수 있고 OUTER를 생략하고 [LEFT/RIGHT/FULL] JOIN으로도 사용할 수 있습니다. 아우터 조인을 쉽게 하는 방법은 다음과 같습니다. 합치고자(조인을 하고자)하는 테이블 두 개를 선정하여 주인공, 나머지 관계를 파악해야 합니다. 보통 A테이블과 B테이블의 관계가 1:N이라고 가정 A테이블이 주인공(부모)이고 B테이블이 나머지(자식)입니다. 하지만, ..

[JavaScript] select box에 동적으로 option을 추가해보자

오늘은 팀 프로젝트를 하면서 약간의 삽질을 하면서 알게된 select box에 option을 추가하는 방법을 포스팅하겠습니다. 서울 부산 제주 경기 인천 강원 경상 전라 충청 왼쪽 select box의 값에 매칭되는 오른쪽 select box의 옵션을 동적으로 바꿔야 합니다. 제가 처음에 생각했던 방향은 다음과 같습니다. 1. querySelect를 이용해 main-city 객체를 변수에 담는다. 2. querySelect를 이용해 sub-city 객체를 변수에 담는다. 3. main-city 객체가 담긴 변수에 change 이벤트가 감지되었을 때 선택된 option을 뽑아온다. 4. switch문을 사용해 서울 ~ 충청일 경우를 나누어 각각에 맞는 모든 옵션을 엘리먼트 태그로 만든다. 5. sub-ci..