일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- linux background
- EC2 zsh
- Linux pwd
- Linux 디렉터리 구조
- HTTP Web Server
- javascript scope
- Linux 디렉터리 역할
- Logback
- EC2 Apache2
- Linux 파일 관리 명령어
- 서버의 서비스 방식
- EC2 oh my zsh
- Navigation Pattern
- Linux rmdir
- linux foreground
- JavaScript EventLoop
- 자바스크립트 이벤트 루프
- Linux cat
- Linux ls
- Linux apt-get
- Linux oh my zsh
- Linux apt
- Linux mkdir
- JavaScript 실행 디버깅
- AWS EC2 서버 만들기
- javascript 정렬
- 자바스크립트 런타임
- Linux 디렉터리 명령어
- Linux cd
- EC2 HTTP 호스팅
- Today
- Total
목록JavaScript (36)
HyunJun 기술 블로그
JavaScript의 script와 module 자바스크립트에서 많은 양의 코드 작성 시, script를 많이 작성하다 보면 필연적으로 중복되는 코드가 많이 생기게 되고 이 중복 코드를 줄이고 코드의 가독성을 좋게 하기 위해서 우리는 module을 활용해야만 한다. 1. script 태그와 link 태그. 디렉터리 구조는 다음과 같다. module ├─ index.html └─ public ├─ css │ └─ index.css └─ js ├─ index.js └─ index2.js index.html은 아래와 같이 간단하게 작성한다. chrome의 개발자 도구 -> 네트워크 탭을 활용하면 HTML, CSS, JS 파일 등의 요청과 응답에 따른 타임라인을 확인할 수 있다. 즉, Live Server의 h..
1. JavaScript의 This 기본적으로 JavaScript의 this는 함수가 호출될 때 해당 함수가 속한 객체를 참조하는 특별한 키워드이다. this를 사용하여 현재 실행 중인 함수가 속한 객체의 프로퍼티에 접근하거나 해당 객체의 메서드를 호출할 수 있다. 즉 this에 대한 값은 호출 방법에 따라 동적으로 결정된다. 1) function 생성 방법. 시작하기 전, 함수의 생성 방법부터 알아보자면, ES6에서 나온 Arrow Function(화살표 함수)는 일단 제쳐두고, 함수를 선언하는 데 있어 함수 선언식과, 표현식이라는 2가지 방법이 존재한다. foo(); // 함수 선언식 function foo() { console.log("함수 선언식"); } bar(); // Uncaught Refe..
Symbol JavaScript의 Symbol은 원시 데이터 타입(primitive data type)으로, 유일하고 변경 불가능한 값이다. Symbol은 ES6(ECMAScript 2015)에서 도입되었다. 1. 사용 목적 & 방법 왼쪽의 변수명이 Symbol 객체를 식별하는 식별자가 되고, 오른쪽의 Symbol("")에 들어가는 문자열은 해당 Symbol에 대한 설명(description)이라고 할 수 있다. 이 문자열은 Symbol을 구분하거나 식별하는 데 사용되지 않으며, 단지 Symbol 객체를 디버깅하는 등의 용도로 사용된다. 이 문자열은 Symbol의 내부 속성으로 저장되며, Symbol 객체를 출력할 때나 디버깅 도구에서 사용될 수 있다. const fooSymbol = Symbol("fo..
정규 표현식(Regular Expression) 정규 표현식은 문자열을 처리하고 검색, 추출, 치환 등의 작업을 수행하는 데 사용되는 강력한 도구이다. 간단한 문자열 매칭에서부터 복잡한 패턴 검색까지 다양한 용도로 활용된다. 1. 정규 표현식의 기본 구성 요소. 일반적으로 패턴이 없는 특정 문자열을 매칭 시키고 싶을 경우 문자 그대로 표현하면 된다. 예를 들어 "hello"는 그 자체로 문자열 "hello"를 매칭한다. JavaScript에서 정규 표현식 선언은 2가지 방식으로 사용할 수 있다. const reg1 = /hello/; const reg2 = new RegExp("hello"); console.log(reg1); console.log(reg2); 1) match 문자열에 match() 메서..
1. offset 1) offsetHeight, offsetWidth offsetHeight는 현재 엘리먼트의 높이를 의미하고, offsetWidth는 현재 엘리먼트의 넓이를 의미한다. 2) offsetTop, offsetLeft offsetTop은 부모 요소 중 relative, absolute, fixed 등의 포지션을 가진 첫 부모 요소의 위치를 기준으로 해당 위치부터 타겟 엘리먼트의 Top까지 몇 픽셀 떨어져 있는지를 나타낸다. offsetLeft는 Top과 동일하지만 부모 요소로부터 타겟 엘리먼트의 Left까지 몇 픽셀 떨어져 있는지 거리를 나타낸다 부모 요소를 찾지 못할 경우 body 엘리먼트를 기준으로 잡게 된다. 3) offsetParent 마찬가지로 부모 요소 중 relative, abs..
1. Callback 1초 뒤 실행 후, 2초 뒤 실행 후, 3초 뒤 실행 후, 4초 뒤 실행 후, 5초 뒤 실행이라는 코드를 구현하고 싶을 때 만약 아래와 같이 코드를 작성한다면, 비동기 함수의 특징으로 인해, setTimeout이 거의 동시간에 모두 실행되고 1초 간격으로 a~e가 뜰 것이다. setTimeout(() => { console.log("a"); }, 1000); setTimeout(() => { console.log("b"); }, 2000); setTimeout(() => { console.log("c"); }, 3000); setTimeout(() => { console.log("d"); }, 4000); setTimeout(() => { console.log("e"); }, 500..