최근 국비교육이 끝났다.. 이제 취업만 남았는데.. 이력서를 쓰면서 그동안 못썼던 포스팅도 계속해보려고 한다. 우선 개인프로젝트가 끝나고 팀 프로젝트로 들어가는 바람에 임시저장만 해둔 글부터 차근차근 써보려고 한다. 아래 내용은 개인 프로젝트 진행 시, 사용했던 무한 스크롤 구현한 코드를 정리한 내용이다. 우리가 웹사이트를 이용하다보면 여러 가지 페이징 기법이 적용된 걸 볼 수 있다. 일반적인 게시판 같은 경우 하단에 번호가 있고 해당 번호를 클릭하거나 다음 버튼을 누르면 다음 페이지가 나타난다. 하지만 또 다른 페이징 기법인 마우스 스크롤을 내리면 그다음 페이지가 나타나는 걸 확인할 수 있다. 1. 기본 페이징 기법 vs 무한 스크롤 1-1 기본 페이징 기법 기본적인 페이징 기법은 아래와 같이 페이지네..
이전에 썸머노트를 구현하는 방법을 알아보았다. 오늘은 썸머노트에서 이미지 업로드에 대해 알아보려고 한다. 만약 구현하기 전이라면 아래 글부터 확인하고 오자! 썸머노트 (Summernote) 사용법 및 툴바 변경하기 최근 JSP/Servlet을 활용하여 CRUD를 구현하는 프로젝트를 진행하다가 텍스트 입력을 블로그처럼 에디터로 구현할 방법은 없을까?라는 궁금증에 구글 검색을 하다가 알게 된 서머 노트(Summernote) 사 s-bug.tistory.com 1. 이미지 업로드 구현 화면 비교 썸머노트 에디터에서 이미지를 업로드하면 해당 이미지가 base64로 인코딩 후 저장되는 방식이라 이미지 파일 관리가 어렵고, 코드의 길이도 엄청 길게 나타난다. 해당 내용은 아래 GIF 이미지를 보면 확인할 수 있다...
최근 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(..
