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

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가 많이 붙을수록 코드가 너무 번거로워지고 보기에도 어렵고 효율적이지도 못하다. 두번째는 첫번째에..

코딩 애플 유튜브 영상을 보던 중 몰랐던 주석 작성 방법이 있어 기록해두고자 한다. [해당 유튜브 영상] 이제껏 나는 js에서 주석 작성 시 vscode 단축키인 Ctrl + / 를 통해 주석을 작성했다. // 주석 그런데 코딩애플이 소개해주는 주석 방식은 매우 유용한 기능을 제공한다. 1. JSDoc (1) 작성 방법 주석 작성 방법은 아래와 같다. /** 주석 / 예를 들기 위해 아래와 같이 함수 위에 해당 함수에 대한 설명 주석을 작성하면 /** 햄버거 버튼 클릭 시 실행 */ function onClickHamBtn(e){ e.preventDefault(); navi.classList.toggle('active'); header.classList.toggle('active'); } onClickH..

poiemaweb에서 javascript 기본 문법에 대해 복습하던 중 헷갈리거나 제대로 알지 못했던 부분들이 있어 기록으로 남기고자 한다. 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com Immutability(불변성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability는 우리가 SPA를 사용할 때에도 강조했다시피 중요한 원리이다. 객체는 참조(reference) 형태로 전달하고 전달 받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 ..

poiemaweb에서 javascript 기본 문법에 대해 복습하던 중 헷갈리거나 제대로 알지 못했던 부분들이 있어 기록으로 남기고자 한다. 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com 1 객체란? javascript의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다. (1) ..