해당 글에서는 Thymeleaf 내에서 JQuery DatePicker 라이브러리를 사용하는 방법에 대해서 공유합니다. 1) 라이브러리 선언하기 💡 jQuery 3.6.1과 jQuery-ui.css를 CDN 방식이 아닌 직접 다운로드 받는 방식으로 구성하였습니다. 해당 라이브러리 내의 Datepicker가 포함되어 있습니다. Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar i..
해당 글에서는 Spring Boot의 타임리프(Thymeleaf)를 기반으로 CDN을 통하여 오픈소스 ‘Toast UI Grid’를 이용한 설정 및 활용방안에 대해서 공유합니다. 1) 개발 환경 💡 해당 환경에서는 ‘Package Manager’를 이용한 방식이 아닌 ‘CDN’을 통한 방식을 사용하여 구성하였습니다. 개발환경 버전 java 1.8 Spring Boot 2.7.4 빌드관리도구 Gradle 7.5 개발 툴 IntelliJ IDEA 2022.3 spring-boot-starter-thymeleaf 2.7.4 thymeleaf-layout-dialect 3.1.0 Lombok jquery 3.6.1 [더 알아보기] 💡 CDN(Content Delivery Network / Content Dist..
해당 글에서는 Module 번들과 Webpack에 대해 이해하고 webpack에 주요 옵션에 대해서 이해를 목적으로 작성한 글입니다. 1) 취지 💡 이전 React 프로젝트를 초기에 구성하고자 할 때 CRA(Create-React-App)를 통하여 프로젝트를 구성하였습니다. 해당 구성을 사용하게 된다면 초기의 webpack이나 babel에 대한 설정이 사전에 구현되어 신경을 쓸 일이 없었습니다. 💡 그런데 직접적으로 webpack을 설정할 필요가 생김에 따라서 이해하고 적용 방안에 대해 알아봅니다. 💡 참고로 CRA 환경에서 webpack과 babel을 구성하는 방법 또한 존재하여 아래에 [참고]로 공유를 합니다 1. [참고] CRA(Creat-React-App)으로 webpack / bable을 구성하..
해당 글에서는 React를 사용한다면 요즘 필수적으로 사용이 되는 React 웹 프레임워크인 next.js에 대해서 이해하고 왜 사용해야 하는지에 대해 공유합니다. 1) 웹 프레임워크의 동향 💡 웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 ‘React’는 CSR(Client Side Rendering) 방식으로 동작을 합니다. 이에 동작 방법에 대해서 여러 가지 단점을 많이 가지고 있습니다. 그렇기에 CRS 방식과 SSR 방식의 각각의 장점을 유지하는 Next.js에 대해서 이해를 돕기 위한 글입니다. (* SSR , CSR 방식에 대한 설명은 하단에 준비되었습니다) 💡 2021년 / 2022년 Stack Overflow에서 조사한 웹 프레임워크 선호도 조사입니다. - 2021년에 React.js는..
해당 글은 자바스크립트 라이브러리 'Prettier'에 대해서 이해하고 환경설정을 하기 위한 목적으로 작성된 글입니다. 1) Prettier 이해하기 💡 Prettier는 코드를 읽어 들여서 사용자가 지정한 '옵션'에 따라 코드를 다시 포맷팅(정렬)하는 "코드 포맷터"입니다. 코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와는 성격이 다릅니다 Prettier 지원 언어들 * JavaScript (including experimental features) * JSX * Angular * Vue * Flow * TypeScript * CSS, Less, and SCSS * HTML * JSON * GraphQL * Markdown, including GFM and MDX *..
