ABBO 기술 블로그

매일 개발하면서 기본적으로 작업진행하다가 헷갈리는 부분이 있어 정리해봅니다. 1. forEach 를 사용하는 방법 let strings = ['a', 'bb', 'o', 'tisto', 'ry', '.com']; strings.forEach(function(str) { console.log(str); }); /// 결과 // a // bb // o // tisto // ry // .com 2. function 안쓰기 let strings = ['a', 'bb', 'o', 'tisto', 'ry', '.com']; strings.forEach((str) => { console.log(str); }); /// 결과 // a // bb // o // tisto // ry // .com 3. 인덱스변수 추가한 ..

오늘은 웹 폰트에 관하여 간단히 요약한 후 뱅크샐러드 블로그에서 제시한 웹 폰트를 서빙하는 방법을 말씀드릴까 합니다. 간단히 말해서 웹폰트는 웹 브라우저에서 사용할 때 사용자에게 글꼴을 제공해주는 것을 의미합니다. 요새 많은 기업들이 웹 개발에 힘을 쓰고 있는 와중, 브랜딩을 목표로 잡고 있는 웹 서비스에서 주로 사용하는 글꼴이 다양한데, 이렇게 사용자가 봤을 때 웹에서 보는 가독성이 좋은 또는 기업에서 밀고 있는 서체를 전달해주기 위함입니다. 웹 폰트가 다운로드 받아지는 시점 이 시점은 처음에 브라우저에서 웹 페이지에 진입 할 때 다운로드를 시작합니다. 가장 대표적으로 우리는 웹 서버를 경유할 때 서버에서 사용하고 있는 리소스를 다운로드받게 되고, 이 때 다운로드 받는 리소스는 아래와 같습니다. 웹 페..

오늘은 심플하게 이미지 프리뷰(Image Preview)를 설정하는 방법을 간단하게 작성해볼까 합니다. // input file 내의 파일이 업데이트 될때마다 호출합니다. $('#input').on('change', function(e) { let file = this[0]; if(file) { previewImage(file.files, '#img'); } }) // 이미지 파일과 입력할 DOM id 를 파라미터로 받습니다. function previewImage(files, id) { let [file] = files; if (file) { $(id).prop('src', URL.createObjectURL(file)); } } 그리고 HTML 파일입니다.

이전 글에서 Full Calendar 를 사용해서 옵션을 적용하였는데, 이번 글에서는 이를 좀 더 커스텀할 수 있는 방법에 대해 찾아보게 되어 글을 작성하게 되었습니다. https://abbo.tistory.com/359 Full Calendar 사용방법과 내가 삽질한 내용 최근에 사내 관리자에서 Full Calendar 를 활용하여 데이터를 보여주어야 하는 작업이 별도로 필요했습니다. Semantic UI 를 찾아보던 중 호환성이 좋은것 같아서 적용하게 되었는데, 삽질기를 시작해 abbo.tistory.com 1. 캘린더에 색깔넣기 저는 보통 색을 입히거나 CSS 를 변경하는 경우 서버가 아닌 클라이언트 (웹 화면)에서 처리를 했었는데, 이번에는 특이하게 컬러값을 지정하는 내용을 추가하기 위해 자바 코..

최근에 사내 관리자에서 Full Calendar 를 활용하여 데이터를 보여주어야 하는 작업이 별도로 필요했습니다. Semantic UI 를 찾아보던 중 호환성이 좋은것 같아서 적용하게 되었는데, 삽질기를 시작해보려 합니다. 1. 레퍼런스가 부족함 (혹은 내가 못찾은 것일수도) 가장 먼저 기능적으로 찾고자 할 때 Github 를 많이 찾아보지 않는 제 기준에서는 스택오버플로우나 구글링을 위주로 진행하고 있어서 달력을 렌더링 하는데 어려움이 있었습니다. 그래서 달력의 타이틀을 지정하거나(아래 사진에서 2022년 12월)이나 옆의 month,week,day 등과 같은 버튼 이벤트를 따로 만들어주는 줄 알았습니다. 근데 찾아보니 다 방법이 있었습니다. 깃헙 주소는 아래 링크를 참조하는게 맞았고, 그리고 다른 분..

이번 글에서는 Thymeleaf 에서 Spring Security 를 사용하는 방법에 대해 살펴보겠습니다. Spring Security 는 전역으로 한 번 설정해두었을 때 권한 별로 화면에서 보여지는 내용을 다르게 표시할 수 있습니다. 이를 위해서는 gradle 파일 내에 아래와 같이 의존성 주입을 해줍니다. 1. build.gradle implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5' 그리고 namespace 라는 내용이 있습니다. html 태그 안에 추가를 하는 내용이고, 네임스페이스에서 특정 타임리프의 문법을 사용할 것을 선언합니다. 우리는 타임리프 문법에서 tag property 앞에 'th:'라는 타임리프 네임스페이스를..

jQuery는 많이 사용하는 자바스크립트 라이브러리로 간편하게 DOM을 선택할 수 있는 파워풀한 기능을 제공해줍니다. HTML5 부터 적용이 되는 내용으로 jQuery를 기반으로 data라는 함수를 제공해줍니다. 이 글은 아래의 링크에서 참조를 하여 작성한 글입니다. https://www.nextree.co.kr/p10155/ jQuery: data() 이해와 활용 jQuery를 조금이나마 접해보신 분들은 다양한 방법으로 DOM을 select하거나 이벤트 제어, Ajax통신 등 jQuery가 지원하는 편리한 기능에 많이 익숙해지셨을 거라 생각됩니다. 이번에 준비한 글은 매우 www.nextree.co.kr 1. data() 를 쓰는 이유와 사용 방법 HTML Tag 들중에 data-id 와 같은 prop..

DataTable.js 는 테이블 형식의 데이터를 표시해주기 위해 RDBMS에서 많이 사용하는 자바스크립트입니다. 이 중에 데이터가 모두 로드가 된 뒤 (렌더링 후) 함수를 호출해야 하는 경우가 있는데 아래의 방법과 같이 적용하면 됩니다. $('#element_id').DataTable({ .., fnDrawCallback: function() { ..... } }); 가져온 데이터를 토대로 그릴 때는 아래와 같이 작성해줍니다. $('#example').dataTable( { "drawCallback": function( settings ) { alert( 'DataTables has redrawn the table' ); } } ); 실제로 활용한 코드입니다. $(tableId).DataTable({ ..