본문 바로가기

728x90
반응형

Javascript

(108)
[Javascript] Attribute와 Property Attribute와 Property. 한국어로는 둘 다 '속성'이라는 의미를 가지고 있지만 단순히 의미가 같은 것을 떠나 이 둘은 실제로 HTML 요소에 대한 클래스와 아이디 등의 속성을 가리킨다. 그럼에도 웹 프로그래밍에서는 구체적인 차이점이 존재한다.  HTML의 Attribute Attribute는 HTML 문서의 정적인 속성이다. Element의 id나 class와 같은 추가적인 정보를 가리킨다고 보면 된다.   DOM의 Property Property는 DOM의 속성이다. 즉 HTML의 Attribute를 DOM 내에서 표현하는 것이라고 볼 수 있다. Attribute가 정적인 속성인 것에 반해 Property는 DOM에서의 동적인 속성인 것.Hemllo World cf) 안에 class='m..
[Javascript] URL 객체 과거, 자바스크립트에서는 URL을 일반 문자열로 다루는 경우가 많았으나 URL 문자열은 엄격한 규격을 따르기 때문에 버그가 생기기 쉬웠다. 그러므로 URL에서 특정 요소를 추출하거나 조작하는 데 적지 않은 주의가 필요하게 되었다. 이러한 문제점을 보완하기 위해 대부분의 브라우저와 자바스크립트 런타임에서는 URL API를 지원하고 있는데, 이 웹 표준 API를 이용하면 웹 주소를 보다 쉽고 안전하게 자바스크립트로 다룰 수 있게 된다. URL API는 크게 웹 주소를 다루기 위한 URL 객체와 쿼리 스트링을 다루기 위한 URLSearchParams로 나뉘는데, 본 포스팅에서는 URL 객체에 대해서만 다뤄 보고 URLSearchParams는 별도의 글에서 다루도록 하겠다. URL의 기본적인 구성요소에 대해서는..
[Javascript] URL의 구성요소 웹 개발에서 URL을 다루는 일은 빈번하게 발생한다. 프론트엔드에서는 URL로 다른 웹 페이지로 링크를 걸거나 자바스크립트, CSS 코드를 불러 오며 이미지, 오디오, 비디오 등의 멀티미디어를 제공할 수도 있다. 반면 백엔드에서는 요청 URL의 경로에 따라 DB에 저장되어 있는 데이터를 조회하고 URL의 쿼리스트링으로 넘어온 매개변수에 따라 다른 데이터를 처리해 줄 수 있다.   URL이란?많은 사람들이 매일 같이 URL을 사용하고 있으면서도 정작 그 URL이라는 게 무엇인지에 대해서는 진지하게 생각해 볼 일이 없었을 것 같다. URL(Uniform Resource Locator)이란 쉽게 말해서 웹에서 사용되는 주소. 웹상에서 모든 자원(resource)에 유일한 주소가 부여되어야 브라우저가 웹 사이트..
[Javascript] 쉼표 연산자(Comma Operator) 쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 피연산자의 값을 반환한다.  위 내용은 쉼표 연산자에 대한 MDN의 정의이다. 하지만 이렇게만 봐서는 잘 모르겠으니 조금 풀어서 알아보도록 하자.  먼저 아래의 함수 예시를 보자. 흔히 볼 수 있는 평범한 함수이다.let myFunc = (value1, value2) => { value1 += value2; value1 += value2; return value1;}myFunc(1, 2); // 5 이제 이 예시를 쉼표 연산자를 사용하여 바꿔 보려 한다. 위 함수에서 중괄호를 없애고 괄호와 쉼표(,)만으로 표현할 수 있다. 작동 원리는 = (a, b, c) 와 같이 작성할 경우 1)  a 실행, 2) b 실행, 3) c re..
[Javascript] window.onload 문제 HTML 실행 위치에 따른 오작동HTML 문서는 작성된 태그들을 위에서부터 아래로 차례차레 읽어들이는데, 이러한 특성으로 인해 가끔 스크립트의 작성 위치에 따라 오작동을 일으키기도 한다. Hello World! 예를 들어 위와 같이 window.onload그러므로 문서가 준비된 이후에 자바스크립트 코드가 실행되도록만 한다면 문서 앞에 선언해도 상관 없어질 텐데 이러한 역할을 해 주는 것이 바로 window.onload()이다. 웹 브라우저 자체를 담당하는 window 객체가 웹 문서를 불러올 때 문서가 사용되는 시점에 실행되는 onload라는 함수를 개발자가 다시 재정의한다는 개념. Hello World! window.onload에 대한 자세한 내용은 아래 글 참조. [HTML] Life Cycle(생명..
[Javascript] Rest Parameter Rest parameter란 함수의 마지막 매개변수 앞에 점 세 개( ... )를 붙여서 정의한 매개변수로 나머지 매개변수라고도 한다. 여기서 '나머지'라는 용어는 영어로 rest에 대비되는데, 함수에 전달된 추가적인 인수들을 나타낸다. 따라서 Rest 파라미터부터는 사용자가 Rest 파라미터에 할당되는 인수를 계속 추가할 수 있다. function myFunc(a, b, ...numbers){ console.log('a: ', a); // a: 1 console.log('b: ', b); // b: 2 console.log('나머지: ', numbers); // 나머지: [3, 4, 5, 6, 7, 8, 9, 0] } myFunc(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); 위는 자바스크립트..
[Javascript] Console 객체(2) 지난 글에 이어 알아두면 디버깅에 편리함을 더해주는 console 객체의 함수들에 대해 정리해 보려 한다.   info(), warn(), error()이들은 console.log()와 기능이 동일하며 각각 레벨로 구분된 로그 정도로 생각해도 무방할 듯 하다. console.info(): 특정한 정보를 출력할 때 사용.console.warn(): 심각한 에러는 아니고 경고 단계에서 사용.console.error(): 심각한 에러(예상하지 못한 에러, 시스템 에러)에 사용.  이들을 사용하면 기본적으로 직관적인 스타일이 적용된 로그를 볼 수 있으며 콘솔 사이드바에서 각각의 레벨별 확인도 가능하다. cf) 브라우저마다 출력되는 스타일은 약간 다르다는 점에 유의하자. 그 예로 파이어폭스에서는 info로 출력한..
[Javascript] Console 객체(1) Console 자바스크립트를 처음 시작할 때부터 우리와 함께한 Console.브라우저들은 클라이언트 측의 개발을 보조하기 위해 개발자 도구를 지원하고 있는데, 이 개발자 도구를 조작할 수 있도록 하는 기능들을 제공하는 것이 바로 console 객체이다.     console은 자바스크립트에서 디버깅을 위해 존재하는 객체로 console 내부의 함수를 이용하면 개발자 도구의 콘솔창에 여러 정보들을 출력할 수 있다. console 객체 내부에는 이렇게나 많은 함수들이 있지만 이 글에서는 알아두면 디버깅에 편리함을 더해주는 것들을 위주로 소개해 보려 한다.    console.log()누구나 자바스크립트 코드의 결과 값을 출력하거나 테스트를 위해 console.log()를 정말 많이 써봤을 것이다. 역시나 가..

728x90
반응형