728x90 전체 글259 [자바스크립트] 호출 스케줄링 호출 스케줄링이란? 호출 스케줄링이란 이름 그대로 함수의 호출(실행)을 계획(스케줄링)한다는 것이다. 즉, 사용자가 원하는 일정 시간이 지난 후, 또는 일정시간마다 특정 함수를 실행할 수 있도록 하는 것이 호출 스케줄링인 것이다. 이를 위한 메소드로 setTimeout, setInterval을 사용할 수 있고, 해당 메소드의 작업은 비동기로 처리된다. 사실은 setTimout, setInterval는 자바스크립트에서 제공하고 있는 메소드가 아니다!! 동기 언어인 자바스크립트는 스스로 비동기 작업을 처리할 수 없기 때문이다. 그렇다면, setTimeout 과 setInterval는 누가 제공하는 메소드일까? 브라우저 창의 관리자 도구를 열어 콘솔 창에 다음과 같이 윈도우를 입력하면, 아래와 같이 윈도우 객.. 2023. 10. 31. [HTML] Semantic Tag 시맨틱 태그 (Semantic Tag) 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사이다. 즉, 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하면 이해가 편하다. 예를 들어, 태그는 와 동작은 똑같이 하지만, header 부분에서 사용되며 이 영역은 상단 영역이라는 것을 나타낸다.이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되는 것이다. 시맨틱 태그를 사용 이유 시맨틱 태그는 사용하지 않더라도 div 태그를 활용하여 웹 문서를 똑같이 만들 수 있다. 그렇다면 왜 시맨틱 태그를 사용해야 할까? 그 이유로는 아래의 3가지가 있다. HTML 문서의 가독성과 유지보수가 쉬워진다. 예를 들어, 모든 .. 2023. 10. 30. [HTML] Form Form HTML은 웹 서버로 데이터를 보내기 위한 태그로 form 태그를 지원하고 있다. 사용자의 정보 또는 필요한 정보를 입력 받아 form 태그를 통해 웹 서버에 보내고, 전송 받은 데이터를 웹 서버가 처리하고, 결과로 또 다른 웹 페이지를 보여주게 되는 것이다. 이번 포스팅에서는 form 태그를 어떻게 사용하는 지에 대해서 알아보겠다. Form 태그 속성 폼 태그는 데이터를 전송하기 위한 태그이기 때문에 그와 관련된 여러가지 속성을 가지고 있다. 속성 설명 action 폼을 전송할 서버 또는 페이지 url name 폼을 식별하기 위한 이름을 지정 accept-charset 폼 전송에 사용할 문자 인코딩을 지정 target action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 .. 2023. 10. 30. [HTML] display display 모든 html의 요소들은 display 스타일 속성을 가진다. display의 속성이 어떻게 되냐에 따라 스타일의 적용이 다르기 때문에 사용하는 html 요소의 display 속성은 어떤지에 대해서 알아야 하고, display속성이 바뀌었을 때의 변화도 알아야 한다. html에서 display 스타일 속성값으로 다음의 4가지가 있다. block inline inline-block none 속성값들이 각자 어떤 특징을 지니고 있는지 알아보도록 하겠다. display : block block 속성은 다음과 같은 특징을 지니고 있다. block 속성의 element는 항상 새 라인에서 시작한다. block 속성은 가용한 좌우푝을 모두 차지한다. css 스타일의 width, height 속성이 적.. 2023. 10. 29. [HTML] list list HTML에서 목록을 만들기 위한 태그를 지원하고 있고 많이 사용되는 태크들 중 하나이다. 응용하기에 따라 다양한 여러 목록을 만들 수도 있고 메뉴를 만드는 데에도 많이 사용되기 때문에 웹사이트를 방문하여 관리자 도구로 탐색하다 보면 곳곳에서 다양한 방식으로 사용되는 것을 볼 수 있다. 위의 사진도 네이버 홈페이지의 쇼핑란에 상품을 나열해 놓은 것으로 목록 태그를 이용하여 구현해 놓았다. 리스트 만들기 리스트를 만들기 위한 태그로는 아래와 같이 여러 구성 요소를 이루는 태그들이 있다. 태그 설명 ul - unordered list list를 생성하기 위한 태그( 2023. 10. 29. [HTML] Table Table table은 html에서 표를 만들 수 있는 태그로 많이 사용되는 태그 중 하나이다. 표를 만드는 태그이지만 결국에는 공간을 분리를 하는 개념이기 때문에 테이블 태그를 응용하여 갤러리도 만드는 등 여러가지 응용이 가능한 태그이다. 위의 캘린더도 테이블을 통해 구현된 캘린더이다. Table 만들기 테이블 태그는 아래와 같이 구성 요소를 이루는 태그를 가지고 있다. 태그 설명 테이블을 만드는 태그 테이블의 헤더 부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 테이블을 만드는 순서 또한 중요하다. 먼저 table 태그를 통해 테이블을 선언을 해준 뒤 행을 만드는 tr 태그를 사용해주어야 그 안에 열을 만드는 태그인 td 태그를 사용할 수 있다. th 태그 같은 경우 tabl.. 2023. 10. 28. [자바스크립트] 정규 표현식 정규 표현식 정규 표현식(정규식 : Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표젹으로 입력칸에 전화번호나 이메일을 입력하라고 했을 때 옳지 않은 값을 입력하면 정규표현식에 의해 필터링되어 걸러져 경고창의 띄우는 것이 이에 해당한다. 정규표현식을 사용하면, 복잡한 양식을 검사해야하는 일도 반복문과 조건문 등 복잡한 코드없이 간단한 코드로 작성이 가능하다. 주로 다음과 같은 상황에서 사용된다. 각각 다른 포맷으로 저장된 전화번호 데이터를 추출해야 할 때 사용자가 입력한 이메일, 휴대폰 번호 등이 올바른지 검증하고 싶을 때 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 특정 조건과 위치에 따.. 2023. 10. 28. [자바스크립트] Math Math 객체 Math 객체는 자바스크리트가 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math 객체는 생성자 함수가 아니기 때문에 정적(static) 프로퍼티와 메소드만을 제공한다. Math 메소드 Math 객체가 가지고 있는 메소드 중 자주 사용하는 메소드들에 대해 알아보자. Math 메소드는 사용하기 매우 쉽기 때문에 간단한 설명과 예제를 통해 알아보겠다. 예제를 통해 각 메소드들이 상황에 따라 어떤 값을 반환하는지를 위주로 살펴보겠다. Math.abs(number) 인수의 절댓값을 반환한다. // Math.abs(number) Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs(''); // 0 Math.abs([]); // 0 Ma.. 2023. 10. 28. [자바스크립트] callback 함수 callback 함수란? 자바스크립트를 공부하다보면, 많이 듣고 사용하는 단어 중 하나가 바로 callback 함수이다. callback 함수가 무엇이길래 계속해서 등장하고 사용되는 것일까? 자바스크립트에서는 함수는 데이터로 취급받는다. 그리고 모든 데이터는 타입을 가지고 함수는 함수 타입의 데이터를 가진다. console.log(typeof function(){}) //function 그리고 데이터의 타입은 원시타입(primitive type) 과 객체타입(object type)으로 나뉘게 되는데, 함수 타입은 바로 object 타입에 속하는 데이터의 타입이다. 정리하면, 자바스크립트에서 함수는 하나의 데이터이고 함수 타입의 객체라는 것이다. 그렇기 때문에 함수는 변수에 할당할 수도 있고, 인자로도 넘.. 2023. 10. 28. [자바스크립트] Method Chaining Method Chaining 이란? 메소드 체이닝(Method Chaining)은 이름 그대로 Method를 연결하여 사용하는 것을 의미한다. 메소드가 실행 결과로 객체를 반환하게 되고 반환된 객체를 통해 또 다른 메소드를 호출할 수 있는 것이다. 배열과 객체를 많이 사용하신 분들이라면 이미 메소드 체이닝을 사용하고 있었을 것이다. 예를 들어, 문자열을 거꾸로 뒤집는 코드를 작성할 때 다음과 같이 작성 할 수 있다. // 문자열 뒤집기 const str = "JavaScript"); const strReverse = str.split('').reverse().join(''); console.log(strReverse); //tpircSavaJ 위의 문자열 뒤집는 부분의 동작과정은 다음과 같다. split.. 2023. 10. 28. [자바스크립트] 배열 - 메소드2 이전에 배열의 기본적인 메소드에 대해 다룬 포스팅이다. 이번 포스팅에서는 유용하게 사용하는 또 다른 배열 메소드에 대해서 추가로 다루겠다. https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%86%8C%EB%93%9C [자바스크립트] 배열 - 메소드1 이번 포스팅에서는 배열이 가지고 있는 메소드들 중 많이 사용하는 몇가지 메소드들에 대해서 알아보겠다. 자바스크립트의 배열의 개념에 대해서 먼저 알고싶으신 분들은 아래의 링크를 참고 codingralro.tistory.com Map() 배열의 map 메소드는 함수를 인수(콜백함수)로 받는데.. 2023. 10. 28. [자바스크립트] Date 메소드 Date 메소드 저번 글에서는 Date 객체의 생성 방법에 대해서 알아보았다. 이번 글에서는 Date가 가지고 있는 여러 메소드들에 대해서 살펴보겠다. https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Date-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1 [자바스크립트] Date 객체 생성 Date 자바스크립트에서는 Date객체를 사용하여 시간과 날짜에 관한 정보를 손쉽게 얻고 다룰 수있다. Date 객체는 연, 월, 일, 시, 분, 초에 대한 정보를 제공하고 밀리초의 정도도 제공한다. 자바스 codingralro.tistory.com Date.now() 1970년 .. 2023. 10. 28. 이전 1 ··· 4 5 6 7 8 9 10 ··· 22 다음 728x90 반응형