Frontend/JavaScript 검색 결과

78 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 자바스크립트 열거형(Enum) 구현하기

🌈 자바스크립트 열거형(Enum) 구현하는 방법 Enum은 enumerated type의 줄임말이며 열거형 타입이라는 의미를 갖는다. 하지만, 자바스크립트에는 열거형(Enum) 타입이 존재하지 않으므로 enum타입을 사용하기 위해서는 직접 구현해야 한다. 🙋‍♂️ 열거형 타입을 사용하는 이유 코드가 단순해지며 가독성이 좋아진다. 하나의 변수에 대해서 고정값으로 사용할 수 있다. 특정값을 반복해서 체크해야 하는 상황에서 오류의 발생을 줄일 수 있다. 1️⃣ 상수를 이용한 구현 const Fruit = { APPLE : 100, BANANA : 200, ORANGE : 300 }; 위 코드와 같이 const를 통해 상수 값을 할당하면 간편하게 Enum처럼 사용할 수 있다. 하지만 위 코드는 객체 내부의 값을..

2023. 1. 4. 20:47

Frontend/JavaScript

[JS] ES-Lint 비활성화 하는 방법

🌈 Lint 비활성화하기 일부 파일 또는 전체 파일에 적용된 Lint를 비활성화하는 방법이다. 1️⃣ 주석을 이용한 방법 lint를 비활성화할 파일의 최상단에 /* eslint-disable */ 주석을 추가하면 비활성화된다. 2️⃣ .eslintignore 를 이용한 방법 .gitignore와 비슷하게 .eslintignore 파일을 추가 후 lint가 적용되지 않을 파일명을 작성하면 비활성화된다. 3️⃣ 사용 중인 프레임워크의 config 설정 추가 react, vue등의 프레임워크를 사용 중이라면 해당 프레임워크의 config에 lint관련 설정을 추가함으로써 비활성화할 수 있다.

2023. 1. 1. 21:25

Frontend/JavaScript

[JS] 내장 객체 비교 및 사용 방법(Array, Set, Map, Object)

🌈 Array vs Set vs Map vs Object 자바스크립트에서 가장 많이 사용하는 내장 객체에는 배열(Array), 셋(Set), 맵(Map), 오브젝트(Object)가 있다. 이번 포스팅에서는 어떤 상황에서 가장 적절한 방법으로 사용할 수 있는지에 대해 작성하려고 한다. 1️⃣ 검색 2️⃣ 정렬 3️⃣ 값의 포함 여부 4️⃣ 중복되는 값의 제거 5️⃣ 특정값의 제거 6️⃣ 객체의 크기와 길이 👨‍💻 결론 1️⃣ 검색 ◾ Array // find를 이용한 객체 반환 let array = [ {id:1, name:'one'} , {id:2, name:'two'} ]; array.find(obj => obj.id === 2); // {id: 2, name: 'two'} // 특정 요소의 인덱스 반..

2022. 8. 31. 12:44

Frontend/JavaScript

[JS] innerHTML과 InsertAdjacentHTML 비교(DOM Element)

🌈 innerHTML VS InsertAdjacentHTML 자바스크립트로 DOM 요소(Element)를 추가/수정해야 할 때 많이 사용하는 방법은 두 가지가 있다. 첫 번째는 innerHTML 이며 문법은 아래와 같다. const content = element.innerHTML; element.innerHTML = htmlString; 두 번째 방법은 insertAdjacentHTML( ) 이며 문법은 아래와 같다. element.insertAdjacentHTML(position, text); 위 방법 모두 DOM요소를 조작할 수 있다는 점에서 차이가 없다고 생각할 수 있지만 이러한 생각은 틀린 생각이다. 첫 번째로 소개한 innerHTML은 변경하는 대상 Element의 하위 노드의 노드 트리를 삭..

2022. 8. 22. 12:56

Frontend/JavaScript

[JS] 자바스크립트 this (1/2)

> 관련 글 :: [JS]자바스크립트 this(2/2) 🌈 자바스크립트 This 자바스크립트에서는 함수를 호출하는 방식에 따라 this에 바인딩되는 객체가 달라진다. 📕 함수 호출 📕 메서드 호출 📘 생성자 함수 호출 1️⃣ 동작 방식 2️⃣ 객체 리터럴 방식과 생성자 함수 방식의 차이 3️⃣ new 연산자를 붙이지 않고 호출할 경우 📘 call / apply / bind 를 통한 호출 1️⃣ apply를 통한 바인딩과 함수 호출 2️⃣ apply와 유사 배열 객체 3️⃣ 콜백함수와 apply, call 4️⃣ bind 📕 함수 호출 내부 함수의 경우 함수, 메소드, 콜백함수 어디에 선언되든 this는 전역객체에 바인딩된다. ◾ 기본적으로 this는 전역객체에 바인딩된다. function foo() { ..

2022. 6. 8. 15:49

Frontend/JavaScript

[JS] 자바스크립트 this(2/2)

> 관련 글 :: [JS]자바스크립트 this(1/2) 🌈 자바스크립트 This 📕 함수 호출 📕 메서드 호출 📘 생성자 함수 호출 1️⃣ 동작 방식 2️⃣ 객체 리터럴 방식과 생성자 함수 방식의 차이 3️⃣ new 연산자를 붙이지 않고 호출할 경우 📘 call / apply / bind 를 통한 호출 1️⃣ apply를 통한 바인딩과 함수 호출 2️⃣ apply와 유사 배열 객체 3️⃣ 콜백 함수와 apply, call 4️⃣ bind 📘 생성자 함수 호출 생성자 함수는 그 이름에 걸맞게 객체를 생성하는 역할을 한다. 또한, 함수에 new 연산자를 붙여 호출하면 해당 함수는 생성자 함수로써 호출되어 동작한다. function Person(name) { this.name = name; } let me =..

2022. 6. 8. 15:36