최근 JSP/Servlet을 활용하여 CRUD를 구현하는 프로젝트를 진행하다가 텍스트 입력을 블로그처럼 에디터로 구현할 방법은 없을까?라는 궁금증에 구글 검색을 하다가 알게 된 서머 노트(Summernote) 사용법에 대해 알아보려고 한다. 그리고 프로젝트에 어떻게 적용했는지 하나씩 기록하고자 한다. (해당 글에서는 간단한 구현단계까지만 기록할 예정이다.) 시작하기에 앞서 이런 웹에디터는 썸머노트 말고도 많이 존재한다. 대표적으로 네이버에서 사용하는 스마트 에디터 2.0 , 그리고 CkEditor 등이 있다. 현재 네이버는 스마트 에디터 3.0을 사용하고 있지만, 오픈된 api는 2.0까지 되어 있다고 한다. 나중에 다른 에디터들도 사용해 보고 싶지만 우선 제일 먼저 알게 된 서머 노트부터 알아보자. 1..
자바스크립트의 기본적인 문법을 알아보고 내용을 정리하고자 블로그에 글을 쓰려고 한다. 해당 내용은 공부하며 적은 필기 내용이다. 1. 변수 자바스크립트에서 변수는 var, let, const 와 같은 키워드를 이용해 선언할 수 있다. var ES5까지 변수를 선언할 수 있는 유일한 방법은 var키워드였다. 아래와 같은 특징이 있지만 문제점도 있다. 함수 레벨 스코프 : 전역 변수의 남발/ for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다. var 키워드 생략 허용 : 의도하지 않은 변수의 전역화 변수 중복 선언 허용 : 의도하지 않은 변수값의 변경 변수 호이스팅 : 변수를 선언하기 이전에 참조할 수 있다. let 블록 레벨 스코프 const 한 번 값을 할당하..
일전에 쇼핑몰에 타이머 기능 구현이 필요하여 코드 찾는데만 며칠 걸렸던 기억이 있다. 근데 최근에 자바스크립트를 배우면서 알게 된 점은 자바스크립트로 현재 날짜와 시간을 구하는 방법은 생각보다 간단했다. 그럼 어떻게 구하는지 알아보자. 현재시간과 현재 날짜 구하기 현재시간과 현재시간을 구하려면 자바스크립트의 Date 객체를 사용하면 쉽게 구할 수 있다. Date 객체의 시간 값은 UTC기준지만, 날짜와 시간등 구성요소를 가져오는 메서드는 모두 현지(로스트 시스템의 위치)의 시간대를 사용한다. const date = new Date(); // 현재날짜와 시간 console.log(date); // output : Tue Feb 22 2022 23:20:01 GMT+0900 (한국 표준시) new Date(..
기존 자바스크립트의 변수 선언은 var로만 가능했다고 한다. 하지만 문제점들이 많아 ES6부터 const와 let이 추가되었다. 그럼 대체 이게 무슨 차이가 있을 것일까? 지금부터 알아보자. 변수 생성 단계 ① 선언 단계 - 변수를 실행 콘텍스트의 변수 객체에 등록한다. - 이 변수 객체는 스코프가 참조하는 대상이 된다. ② 초기화 단계 - 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보. - 이 단계에서 변수는 undefined로 초기화된다. ③ 할당 단계 - undefined로 초기화된 변수에 실제 값을 할당한다. var - 변수 중복 선언 가능. - 재할당 가능. - 하지만 큰 단점은 중복 선언했을 때 에러가 나오지 않고 각기 다른 값이 출력될 수 있음 - 코드량이 많아진다면 var변수를 쓰는..
나만의 웹사이트를 이쁘게 꾸며주기 위한 언어인 CSS, 단순히 HTML로만 코딩을 한다면 정말 못생긴 웹사이트가 되어 버린다. 이런 웹사이트를 꾸며줄 수 있는 도구가 바로 CSS이다. 실제로 코딩을 하려고 하니 자주 사용하지만 헷갈리는 CSS속성들이 있어 정리해보고자 한다. 그럼 CSS의 속성은 무엇이 있는지 어떻게 작성해야 하는지 알아보자. 1. CSS 권장 작성순서 ① 레이아웃 : display, float, postiton, ② 박스모델 : width, height, margin, padding, border ③ 배경 : background ④ 폰트 : font, color, text-align, vertical-align ⑤ 그 외 속성 2. CSS 적용 우선순위 ① 속성 값 뒤에 !importa..
