Front-End64 [HTML] Chapter 11. VS Code 작업 속도 향상을 위한 Emmet 단축키 및 트릭 9가지 사용법 기본적으로 VS Code에서 HTML 파일 안에서 다음과 같은 단축키 입력 후“tab”키를 쳐서 사용 유용한 단축키 정리 1. HTML5 boilerplate (표준문서): 2가지 방법 “!”치고 “tab”; 또는 “HTML”입력 후 “HTML:5” 선택 Emmet | HTML5 boilerplate (표준문서) 생성 2. 하위 요소 생성: “>” 사용 /* 예: */ header>ul>li Emmet | 하위 요소 생성 3. 동급 요소 생성: “+” 사용 /* 예: */ section>article>h2+p Emmet | 동급 요소 생성 4. 반복 태그 생성: “*” 사용 /* 예: */ ul>li*5 Emmet | 반복 태그 생성 5. CSS class 와 id 설정: “.” 와 “#”사용 /.. 2023. 4. 18. [CSS] Chapter 14. CSS Position(relative, absolute) 한 방에 정리 CSS Position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 알아두기 block : 한 줄 모두 차지 (대표 element - , ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - ) Position 속성 요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다. static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stick.. 2023. 4. 18. [JavaScript] Chapter 38. 추상 클래스, 추상 메소드 ES6 부터 JavaScript에서 class 문법을 지원하게 되었다. 그러면서 JavaScript로도 객체지향 프로그래밍을 하기 수월해졌다. (이전에는 생성자 함수와 prototype으로 구현하였다.) 그렇지만, 여전히 Java와 같은 언어 만큼 객체지향을 지원한다고 할 수 없다. 이를테면, JavaScript에서는 추상 클래스와 추상 메소드를(abstract) 문법적으로 지원하지 않는다. 그럼에도 JavaScript 기본 문법을 활용하여 추상 클래스와 추상 메소드를 구현할 수 있는 방법을 알아보자. 추상 메소드와 추상 클래스의 개념 먼저 추상 클래스와 추상 메소드의 개념에 대해 알아보자. 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말한다... 2023. 3. 31. [JavaScript] Chapter 37. 자바스크립트의 private 정보를 은닉화할 수 있는 방법 1. underscore (_) 필드앞에 밑줄을 붙여서 외부외서 접근할 수 없는 숨겨진 필드임을 나타내는 방식이다. const obj = { _private: 'foo', get public() { return this._private; }, } obj._private // 'foo' obj.public // 'foo' 자바스크립트의 모든 객체는 외부에서 접근이 허용되기 때문에 위의 예시처럼 실제로 은닉이 되지는 않는다. 하지만 쉽게 적용할 수 있고 널리 알려진 컨벤션이라 앞에 밑줄이 붙은 변수나 프로퍼티를 종종 볼 수 있다. 그렇지만 시간이 지나면서 다른 방법들도 등장했고 만약 모듈을 만들어서 배포하는 경우, 사용자들이 모든 필드에 접근할 수 있는 것은 큰 문제이기 때문에.. 2023. 3. 30. [JavaScript] Chapter 36. 고차 함수와 콜백(Callback) – 일급 객체란 함수는 일급 객체이다. 자바스크립트에는 특별한 대우를 받는 일급 객체가 있다. 대표적인 일급 객체 중 하나가 바로 함수이다. 다음 조건을 만족하는 객체를 일급 객체라고 한다. 무명의 리터럴로 생성할 수 있다. (런타임 생성이 가능하다.) 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. 변수나 자료구조(배열의 요소나 객체의 속성값)에 할당 할 수 있다. 다른 함수의 인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 자바스크립트 함수는 다음 위 조건을 모두 만족하므로 일급 객체이다. 함수는 객체이다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다. 함수는 객체이다. 함수를 객체처럼 사용할 수 있다. 변수, 배열 요소, 객체 값에.. 2023. 2. 7. [JavaScript] Chapter 35. 일반 함수 vs 익명 함수 자바스크립트는 유연한 언어이다. 따라서 다른 일반적인 언어(Java, C)와 다르게, 함수를 선언하고 사용하는데 있어 굉장한 자유로움이 주어진다. 이는 능숙한 사람에게는 굉장한 이점으로 주어질 수 있지만, 미숙한 사람에게는 넘어야 할 허들이 되기도 한다. 자바스크립트에서 함수 선언 방식은 기본적으로 일반 함수와 익명 함수로 나눌 수 있다. 1. 일반 함수 일반적으로 다른 언어에서 사용하는 함수와 동일하다. 사용방식 또한 동일하며, 코드를 조금이라도 읽을 수 있는 사람이라면 매우 쉽게 이해할 수 있는 함수이다. 일반 함수는 다른 말로 함수 선언식이라고도 할 수 있다. function 함수명(){ 함수 로직 } // 예시 function SayHello(){ console.log("hello!"); } Sa.. 2023. 1. 26. [JavaScript] Chapter 34. 맵 객체(Map Object) 자바스크립트로 앱을 개발할 때 꼭 사용하는 자료형이 바로 객체(Object)다. 값을 키와 값으로 묶어 저장하고 조회하는 기능은 어떤 앱을 개발할 때나 쓰게 되는 경우가 많다. 이번 포스팅에서는 자바스크립트 객체를 좀 더 뺀-씨하게 사용할 수 있는 ES6 문법인 맵 객체에 대해 알아보려 한다. 맵 객체 메소드 맵 객체는 기존 객체와는 다르게 메소드만을 이용해 값을 넣고 뺀다. 기본적으로 삽입, 조회, 삭제를 할 수 있는 메소드들은 다음과 같다. let max = new Map(); // set으로 맵 객체에 삽입 max.set('id', 0); max.set('이름', '마이클'); max.set('전공', '영문학'); max.set('나이', 25); // 이차원 배열로 넘겨주는 것도 가능 let m.. 2023. 1. 16. [JavaScript] Chapter 33. 객체 복사하기 - 앝은 복사, 깊은 복사 자바스크립트객체(Object)는 Key(키):Value(값)의 1개 또는 여러 쌍으로 구성된다. Value(값)에는 숫자, 문자열 뿐만아니라 또 다른 객체(Object)를 넣을 수 있다. 자바스크립트객체를 복사하는 3가지 방법에 대해 알아본다. 성명, 나이, 차량정보를 저장하고, 차량정보에는 엔진과 배기량을 저장한다. 자바스크립트객체를 복사하는 방법에는 크게 3가지가 있다. A방법은 복제없이 참조하는 변수만 만들어 앝게 복사한다. let grandeur = { engine: "gdi", cc: 3000 }; let aa = { name: "kildong", age: 20, car: grandeur }; let bb = aa; // Object Shallow Copy, 하위 Object Shal.. 2023. 1. 16. [JavaScript] Chapter 32. Clean Code 작성법 클린코드를 만드는 것은 개발할 때 중요하다. 왜냐하면 개발할 때 여러명의 개발자와 함께 협업하기 때문에 읽기 쉽고 유지보수 하기도 좋아야하기 때문이다. 1. 화살표함수로 function 축약하기 ES6의 가장 유명한 함수 표현 방법인 화살표함수다. 긴 기존의 함수호출 return 방식을 화살표 함수를 사용하면 역시 간결하고 보기 좋게 축약할 수 있다. 하지만 재사용은 불가능하기 때문에, 매번 새롭게 작성해줘야 한다. // 기존의 함수 function getSize(width, height) { return width * height }; // 화살표 함수 getSize = (width, height) => (width * height) 2. 삼항연산자 사용 이런 if, else문은 삼항연산자를 사용하면 .. 2023. 1. 12. [JavaScript] Chapter 31. 배열을 다루는 메소드_map, flatMap, filter, reduce map map() 메소드는 새로운 배열을 리턴하는 메소드다. 어떻게? 순서대로 주어진 함수를 실행한 return 값을 모아서 새로운 배열을 만들어 반환한다. 그렇기 때문에 원본 배열을 변경하지 않고 새로 가공한 배열을 얻을 수 있다. const arr = [1, 2, 3, 4 ,5]; const mapArr = arr.map(v => v); map() 메소드에 들어가는 인자는 총 세가지이다. 현재 값 index 값 현재 요소가 속한 배열 하지만 인자 세개 모두 꼭 입력해야하는 것은 아니다. map() 메소드를 사용하면 작성해줘야할 조건이 많은 for문을 사용하지 않아도 되기 때문에 코드가 간결해진다. 간단하게 가공할 수 있는 콜백함수를 사용한다면 map() 메소드 안에서 화살표 함수로 작성해도 되지만, .. 2023. 1. 12. 이전 1 2 3 4 ··· 7 다음
