코공기(코딩 공부 기록) 코공기(코딩 공부 기록)

1. Class란?Javascript의 Class는 객체지향 프로그래밍을 지원하기 위해 도입된 문법으로, ES6에서 처음 도입됐으며 기존의 프로토타입 기반 상속을 더 직관적으로 사용할 수 있게 해 준다. 우리는 객체를 직접 작성하여 생성할 수 있지만 Class라는 틀을 만들어줌으로써 다양항 데이터를 비슷한 모양의 객체로 만들어줄 수 있다. (1) 프로토타입 기반 상속이란?프로토타입 기반 상속은 Javascript가 객체 간 상속을 처리하는 방식이다.Javascript는 Class 기반의 언어가 아닌, 객체를 기반으로 하는 프로토타입 체인을 통해 상속을 구현한다. 프로토타입은 다른 객체로부터 상속받을 수 있는 속성과 메서드를 포함하는 객체이며,모든 Javascript 객체는 __proto__ 또는 [[Pr..

요즘 매일 프로그래머스에서 코딩 테스트를 풀고 있는데 이 때 자주 사용하는 메소드를 정리하면 좋을 것 같아서 정리해보려고 한다.Javascript의 다양한 내장 메소드를 알아봄으로써 코딩 테스트 문제를 효율적으로 해결해보자.  1. Array.prototype.map()map() 메소드는 배열 내의 모든 요소를 순회하며, 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 생성한다.배열의 값을 변환하거나 재구성할 때 유용하다.const numbers = [1, 2, 3, 4, 5];const squares = numbers.map(num => num * 2);console.log(squares); // [2, 4, 6, 8, 10] 2. Array.prototype.filter()filter..

Javascript에서 데이터를 저장하고 관리할 때 자주 사용되는 자료 구조 두 가지가 있는데 Map과 Object이다.둘 다 키-값 쌍을 저장하는 구조이기에 언제 어떤 구조를 사용하는 것이 적합할지 헷갈리는데 오늘은 이 둘의 차이점과 언제 무엇을 사용해야 하는지 알아보겠다.1. Object와 Map(1) ObjectObject는 Javascript의 기본적인 데이터 구조로, 키-값 쌍을 저장할 수 있다.모든 키는 String 또는 Symbol 타입이어야 하며 값으로는 다양한 타입을 저장할 수 있다.const obj = { key: 'value', numberValue: 123};console.log(obj.key); // 'value' (2) MapMap은 ES6에서 도입된 새로운 데이터 구조로, ..

프로젝트를 진행하던 중 엘리먼트의 padding-bottom값을 가져와야 하는 때가 있었는데 아래와 같이 찾으려 하자 이런 결과가 나왔다.element.style.paddingBottom;// "" 그래서 찾아보니 getComputedStyle을 이용하라 하여 둘의 차이점에 대해 정리하고자 글을 쓰게 되었다.  1. element.styleelement.style은 우리가 inline으로 작성한 스타일 값을 가져오는 방법이다.사용하는 방법은 아래와 같다.const elemnet = document.getElementById("엘리먼트 ID"); // 알고자 하는 엘리먼트 노드 가져오기const style = element.style; // 해당 엘리먼트에 적용된 스타일 가져오기 그렇다면 실제로 적용해보자..

1. javascript로 element 생성하기 현재 pug를 이용한 프로젝트를 진행 중인데 그러던 중 delete 버튼을 클릭하면 상품이 삭제 안내 메세지 문구가 생성되게 하는 기능을 구현하게 되었다. javascript를 이용해 엘리먼트 요소를 만드는 방법을 크게 두가지로 알고 있었다. 1. 정석 중의 하나인 document.createElement를 이용하여 엘리먼트를 생성하고 classList.add를 이용해 class를 붙여주고 appendChild 등을 이용해 원하는 위치에 삽입하는 방식. 2. innerHtml을 이용하여 템플릿 리터럴로 요소를 집어넣는 방식. 첫번째는 구조가 복잡하고 class가 많이 붙을수록 코드가 너무 번거로워지고 보기에도 어렵고 효율적이지도 못하다. 두번째는 첫번째에..