ext.js나 Node.js와 같은 JavaScript 기반의 프레임워크와 런타임 환경을 다루기 위해선 ES6+ 문법에 대한 이해가 필수적이라고한다. 오늘은 모던 JavaScript의 표준으로 자리 잡은 ES6+가 무엇인지, 그리고 어떤 강력한 기능들을 제공하는지 자세히 알아보려고한다. ES6+란?ECMAScript의 6번째 버전(ECMAScript 2015) 이후의 모든 JavaScript 표준을 통칭하는 말입니다. ES6+는 개발자들이 더 간결하고 효율적으로 코드를 작성할 수 있도록 다양한 최신 문법과 기능을 제공하며, 이제는 웹 개발의 표준이 되었습니다.본격적으로 알아보기 전에, ES6+의 대표적인 기능들을 먼저 목록으로 확인해보자.let, const: 블록 스코프 변수 선언화살표 함수 (Arrow..

이번 팀프로젝트를 하면서 SweetAlet과 chart 를 사용하려했는데HTML 코드내에 내부 JS 로 넣으려 하니 코드가 길어지고여러곳에 사용하기 힘들다는 점을 보고 외부 JS 파일로 빼서 사용했다. SweetAlert_modal.jssweetAlert을 기본으로 사용하기 위해서는 아래 cdn을 추가해주어야한다.  SweetAlet 기본틀 Swal.fire({ title : title, text : msg, icon : 'success', }); 사용하다보니 저걸 다 쓰면서 하나씩 넣기에는 음... 너무 많다그래서 아래 외부 JS 파일로 메서드(제목, 내용)으로 한줄만 추가하면 사용가능하게 해두었다.더보기function sweetAlert_succe..

팀프로젝트 진행중 크루전날짜에 맞춰 종료/진행전/진행중 버튼을 생성해야 해서 날짜를 비교해야했다. 이에 JavaScript에서 현재 날짜를 비교할 수 있는 메서드를 사용할 수 있다고 하여 사용해보았다. 현재 날짜 + 시간var today = new Date(); 이때 date 메서드를 사용하면 현재 내 시스템의 날짜를 가져와서 출력하기 때문에date 정보 : [Thu Oct 17 2024 23:10:55 GMT+0900 (한국 표준시)] 로 출력된다. 이에 사용하기 위해서는 YYYY-MM-DD 날짜 포멧을 수정해야한다. function today() { var date = new Date(); console.log('today log : ['+date+']') return date.getFullYear(..

발생한 오류 Cannot read properties of null 이번 프로젝트를 하면서 MVC 파트별 코드를 작성하고기능별로 취합하여 오류가 발생한 부분을 수정하는 작업하는 도중 발생한 오류다. 해당 오류가 어디서 발생했는지 확인해봤다.// 각 댓글(comment-item)에 대해 반복 작업을 수행합니다. comments.forEach(comment => { // 현재 댓글의 편집 버튼(.edit-comment)을 선택하여 editButton 변수에 저장 const editButton = comment.querySelector('#edit-comment'); // 현재 댓글의 편집 입력란(.comment-edit)을 선택하여 comme..

improtmapJavaScript에서 모듈을 로드할 때, 브라우저가 모듈 경로를 어떻게 해석해야 하는지 지정할 수 있게 해주는 기능 = 대규모 웹 프로젝트에서 모듈을 관리할 때 매우 유용하며, 의존성 관리 및 모듈 로딩 방식을 더 세밀하게 제어해준다. importmap의 개념기본적으로 모듈을 'import'로 불러온다. 모듈을 불러올 때는 상대 경로 OR 절대 경로를 직접 지정해서 불러와야 한다.허나 이런 방식은 모듈 경로가 복잡하거나 여러 모듈을 관리해야 할 때 번거로울 수 있다. 이에 importmap을 사용하면 각 모듈의 경로를 미리 정의하고,JavaScript 코드에서 간단한 이름으로 모듈을 불러올 수 있다.예시를 확인해보자. 위 예시를 보면 importmap 에 두개의 모듈 'lodash', ..

3. 함수와 객체프로그램 코드는 함수에 넣어서 사용하며 함수에는 시스템이 제공하는 내장 함수와 사용자가 만드는 사용자 정의 함수가 있다.함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트){}로 구성되며실행결과는 return문을 사용해서 리턴한다.익명함수 function(){}는 이름이 없는 함수로 필요한 곳에서이름을 정의하거나 이름을 굳이 줄필요가 없는 경우에 사용한다.즉시 실행함수 함수 정의와 동시에 실행하는 함수로, 함수 호출 없이 자동으로 실행된다.클로저는 즉시실행 내부함수로 함수의 캡슐화, 런타임, 실행시 인자 값을 넘겨서자동 동작되는 작업에 사용한다.4. 제이쿼리를 사용한 태그 제어와 Ajax제이쿼리(jQuery)는 빠르고 가볍고 다양한 기능을 가진 자바스크립트 라이브러리이다.제이쿼리 라이브..

1. 자바스크립트의 개요자바스크립트는 넷스케이프사에서 웹 페이지의 처리 능력을 향상 시킬 목적으로 개발한 스크립트 언어이다.HTML 페이지에 자바스크립트를 기술 및 사용할때는 태그를 사용해서 한다. 태그는 사용 방법에 따라 자바스크립트 코드를 HTML 페이지 내부에 포함해서 작성할 수 있고,별도의 파일로 작성 후 필요한 페이지에서 가져다 쓸 수 도 있다.자바스크립트는 대소문자를 구분하며 문자의 끝은 세미콜론(;)으로 구분한다. 자바, C 계열의 주석인//, /**/을 사용하며 자바스크립트의 식별자 규칙은 첫 글자는 영문자, _, $를 사용할 수 있으며,나머지 글자는 숫자도 사용할 수 있다.2. 제어문프로그램의 실행 순서를 제어하는 제어문에는 조건문, 반복문, 기타 제어문이 있다.조건문 : 조건을 사용해..

JS에 추가되면 좋은 기능들을 작성한 코드 모음집 == 라이브러리 => 골격,틀,새로운 문법,...., 프레임워크라 불린다. Node, React, ...... 등등 있다.jQuery (uncompressed -> 압축되지 않아 무겁다 , minified -> 외부 자바스크립트 파일로 대부분 이걸 사용한다.) => import해야한다. == web에서는 CDN을 집어넣는다. jQuery 사용1. jQuery 사이트 접속(https://releases.jquery.com/)2. linkjQuery CDN 으로 이동 후 제목 클릭3. 사용할 jQuery에 버전을 확인해서 minified 클릭하여 코드 복사 후 사용 jQuery는 $() 객체로 사용된다.JavaScript = window.onload = fu..