기록

시작하면서 주말간 틈틈히 프로그래머스에서 javascript, css, html을 사용해서 고양이 사진첩을 구현하는 과제를 했다. 과제 풀이를 하면서, 어려웠던 점이나 신경썼던 부분을 정리해 보고자 한다. 데이터 불러오기 HTTP GET 요청을 사용하여 데이터를 가져오는 방법은 jQuery, fetch API, 그리고 async/await 등 여러 방법이 있다. 세가지 방법을 비교해본다면 아래처럼 작성할 수 있다. jQuery, fetch API, async/await 제이쿼리 (jQuery) jQuery는 브라우저 환경에서 DOM 조작 및 AJAX 요청을 간편하게 수행하는 JavaScript 라이브러리이다. $.ajax({ url: 'https://example.com/api/data',..

시작하면서 운영환경에서 접속하면 "https://int-web", 개발환경에서 접속하면 "https://dev-web" 접속하도록 만드는 게 필요했다. 이를 위해서 JSP에 자바 스크립트 코드를 다음과 같이 작성하였는데, 운영환경에서도 "https://dev-web" 접속하더라;; @Controller public class MyController { @GetMapping("/my-page") public String myPage(Model model) { model.addAttribute("environment", getEnvironment()); return "my-page"; } } var url = ""; var environment = "${environment}"; if (environment..

CSS의 인라인 레벨과 블록 레벨에 대해 공부하며 챗 GPT를 활용하여 글을 작성해 보았습니다. CSS에서 블록 레벨(block-level) 요소와 인라인 레벨(inline-level) 요소는 HTML 요소가 표시되는 방식을 나타내는 개념입니다. 1. 블록 레벨 요소 화면 전체의 가로폭을 차지하며, 수직으로 쌓입니다. 기본적으로 width(너비)와 height(높이)를 지정할 수 있습니다. margin, padding 값을 모두 지정할 수 있습니다. div, h1, p, ul, ol 등이 블록 레벨 요소에 해당합니다. 2. 인라인 레벨 요소 필요한 만큼의 가로폭을 차지하며, 수평으로 쌓입니다. 기본적으로 width(너비)와 height(높이)를 지정할 수 없습니다. margin-right, margin-..

ES는 CMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. ES6에서 추가된 기능 중 일부를 정리하였다. const, let //es5 var v1 = 'es5'; //es6 const pi = 3.14; let radius = 1; radius = 2; radius = 4; 화살표함수 fuction, return 키워드를 생략할 수 있음 //es5 function plusAB(a, b){ return a+b; } //es6 const plusAB = (a, b) => a+b; const multiple2 = a => a*2; 비구조화 할당 객체와 배열로부터 프러퍼티 값을 쉽게 꺼낼 수 있는 문법 const student = { name: "annie", age : 1 }; co..

문제 2022.10.24 - [Web/frontend] - javascrpit/유효성 체크(정규식)처럼 날짜 형식을 체크했지만, 코드가 깔끔하지 않고 완벽하지 않아서(02/31 같은 값을 잡아내지 못한다.) 새로운 방법을 찾아야 했다. 마침 프로젝트에서 kendoUI를 사용하고 있어서 kendoUI에서 제공하는 함수가 있지는 않을까 찾아보았다. 해결방법 1. 날짜 형식 체크 https://docs.telerik.com/kendo-ui/knowledge-base/datepicker-validate-whether-value-is-in-correct-format Use client-side validation: submit 2. 날짜 비교 https://stackoverflow.com/questions/594..

보호되어 있는 글입니다.

개요 1. 프로젝트 생성(JSP, Spring) 2. 라이브러리 다운로드 및 삽입 3. Kendo UI 테스트 1. 프로젝트 생성(JSP, Spring) https://youngyin.tistory.com/m/276 2. 라이브러리 다운로드 및 삽입 해당 프로젝트에서는 30일 trial 버전을 다운 받아 사용했다. https://www.telerik.com/try/kendo-ui Telerik Client Login Try Kendo UI for jQuery Start your free Kendo UI trial to access 70+ jQuery-based UI widgets www.telerik.com 압축 해제한 파일을 아래의 경로에 붙여넣는다. 3. Kendo UI 테스트 index.jsp he..

// YYYYmmdd -> Date function getValidDate(dtStr){ let match = dtStr.trim().match(/^\d{8}$/); if (match == null) return false; let year = dtStr.substr(0, 4); let month = dtStr.substr(4, 2); let date = dtStr.substr(6, 2); return new Date(year+"-"+month+"-"+date); } // 10,000,000 -> 10000000 function getVaildNumber(str, start, end){ let number = str.trim().replace(/,/g, ''); let match = number.matc..