Coding Planet

| 태그 는 HTML5에서 도입된 요소로, 그래픽스를 그리기 위한 영역을 제공한다. JavaScript와 함께 사용되어 동적으로 2D 또는 3D 그래픽스를 생성할 수 있다. 이 태그는 게임, 그래프, 애니메이션 등 다양한 시각적 컨텐츠를 구현하는 데 사용되는데 그래프를 통해 기능을 살펴보고자 한다. | 기본 사용법 getContext()는 HTML 요소의 내장 메서드이다. 이 메서드 사용시 렌더링 컨텍스트와 그것의 그리기 함수를 가져올 수 있다. 가장 일반적으로 사용되는 컨택스트는 "2d"이다. fillRect(x, y, width, height)함수를 통해 사각형을 그린다 예시 코드를 실행시 2차원의 사각형이 나타난다. | 주요 내장함수 getContext() 캔버스의 렌더링 컨텍스트를 가져옴. fil..

지금까지 ajax를 통해 서버에서 비동기적으로 데이터를 받아올 때, 그 다음 동작을 위하여 콜백 함수가 중첩되어 여러 개 연속적으로 사용되는 콜백 지옥(callback hell)을 다수 경험했다. 이러한 문제를 해결하기 위해 Promise나 async/await와 같은 비동기 처리기술이 있는데 이러한 기술을 사용할 경우 중첩된 콜백 함수를 피하고 코드를 더 구조화하여 가독성을 향상시킬 수 있다. 즉, Promise는 비동기 작업을 다루기 위한 JavaScript의 객체로, 비동기 작업이 완료되었을 때 또는 오류가 발생했을 때 처리할 수 있는 방법을 제공한다. 1. Promise 생성 Promise를 생성하려면 new Promise() 생성자를 사용한다. 이 생성자는 하나의 인자를 받으며, 이 인자는 비동..

메뉴가 많고 계층구조로 이루어져 있을 때 메뉴탐색을 쉽게하기 위하여 드롭다운으로 구현한다. 1. html 코드 게시판 관리 공지사항 관리 자료실 관리 FAQ 관리 QnA 관리 게시판 관리 사용자 관리 권한 관리 메뉴 관리 접속 이력 관리 사용자별 메뉴별 데이터 관리 2. javaScript 코드 //lnb $(".lnbList > ul").on("click", "li", function(e){ if ($(e.target).is('.lnbCnt a')) { // 하위 메뉴의 a 태그 클릭 시 기본 동작 수행 return; } e.preventDefault(); // 상위 메뉴의 a 태그 클릭 시 기본 동작 방지 if($(this).hasClass("active") == false){ $(".lnbList ..

아래 포스트는 https://www.geeksforgeeks.org/introduction-to-less/의 내용을 번역, 요약, 발췌한 것입니다. | SASS란? SASS는 Syntactically Awesome Style Sheets의 약어이다. SASS는 변수, nesting, import, 믹스인, 상속 등의 고급 문법을 사용할 수 있다. 이렇게 작성된 문법은 프로그램에 의해 자동으로 CSS 파일로 컴파일되어 웹사이트에 적용된다. SASS에는 두 가지 유형의 문법이 있다. 1) SCSS(Sassy CSS): 현대적인 문법으로, CSS와 유사하며 `.scss` 확장자를 사용다. 2) Indented syntax(또는 sass): 오래된 문법으로, 들여쓰기를 기반으로 하며 `.sass` 확장자를 사용..

아래 포스트는 https://www.geeksforgeeks.org/introduction-to-less/의 내용을 번역, 요약, 발췌한 것입니다. | LESS란? LESS는 JavaScript를 기반으로 하는 동적 스타일 시트 언어로 스타일시트(Style Sheet)의 관리, 커스터마이징, 재사용성을 높혀준다. LESS는 크로스 브라우징에 유용하게 사용될 수 있으며 동작시 일반 CSS로 컴파일되기 때문에 사용이 간편하다. 이는 변수, 함수, 믹스인, 연산과 같은 기능을 제공하여 동적 CSS를 구축할 수 있게 해준다. LESS는 2009년 Alexis Sellier에 의해 디자인되었다. 첫 버전은 Ruby로 쓰여졌지만 이후 더 간단한 언어인 JavaScript로 대체되었다. | 왜 LESS를 써야하는가?..

💻구현하고자 하는 기능 to do list 만들 때 add 버튼을 클릭하고 나면 task가 추가된다. 이 때 추가 이후에도 텍스트가 그대로 남아있으면 다음 일정을 추가할 때 불편하다. add 버튼을 클릭하면 input의 text가 자동으로 없어지게하고 싶다. 💻 해결! task가 추가하는 add 함수에 input의 value값을 null로 지정한다

💻구현하고자 하는 기능 체크리스트를 만들 때 체크버튼을 클릭하면 취소선이 생기고 다시 클릭하면 취소선이 없어지는 기능 💻 해결! type이 boolean인 isComplete() 함수에 부정형(!)을 취해준다 기존값이 true면 false, false면 true를 반환한다.

ES6는 템플릿 리터럴(Template Literal)이라고 하는 새로운 문자열 표기법을 도입했다. 템플릿 리터럴을 통해 문장열 입력을 복잡도를 크게 낮출 수 있다. 템플릿 리터럴은 일반 문자열과 비슷해보이지만 작은 따옴표('). 큰 따옴표(") 대신에 백틱(`)을 사용한다 1. 기존 ES5에서의 코드 function introduce(name, code){ alert("선택하신 제품 " + name + "의 코드는 " + code + "입니다. ") 2. ES6에서의 새로운 방법 function introduce(name, code){ alert(`선택하신 제품 ${name}의 코드는 ${code}입니다.`) 백틱은 키보드이 물결표시(~)에 있다. +를 이용해서 문자열을 잇다 보면 실수가 발생하는데 이..

* var의 사용이 지양되어야 하는 이유 var의 사용이 지양되는지를 이해하기 위해서는 먼저 호이스팅과 변수의 적용 범위에 대한 이해가 필요하다. * 호이스팅(Hoisting): - 호이스팅이란 JavaScript의 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것을 의미한다. - 실질적으로는 변수의 선언과 초기화를 분리한 것으로 선언을 코드의 최상단으로 옮기는 것이다. - 호이스팅으로 인해 var변수는 undifined로 변수를 초기화 한다. - var의 범위는 function-scope이기 때문에 function의 최상단으로 이동시킨다. * 변수의 적용범위(scope): 1) 함수 레벨 범위(Function-level Scope) - 함수 내에서 선언된 변수는 함수 내에서만 유효하며..

1. 변수의 종류 JavaScript는 변수 선언 시 자료형이 아닌 var, let , const, 미작성 중 하나를 골라서 사용한다 키워드 특징 var 변수, 변수명의 중복을 허용한다(덮어쓰기), 함수 레벨의 적용범위(scope)을 갖는다 let 변수, 변수명의 중복을 허용하지 않는다, 블록 레벨의 적용범위(scope)을 갖는다 const 상수, 변수명의 중복을 허용하지 않는다, 블록 레벨의 적용범위(scope)을 갖는다 2. 변수의 우선순위 우선순위 설명 1 순위 : const JS는 HTML 상에서 특정 요소를 선택해 지속적으로 추적하여 사용하는 경우가 많기 때문에 상수형 변수에 저장해 고정적으로 사용한다 2 순위 : let 3 순위 : var 요즘에는 var를 잘 쓰지 않는다. 덮어쓰기 가능하기 ..