본문 바로가기

DEVELOP/Javascript

(7)
[OOP] 캡슐화(Encapsulation)와 은닉 객체 지향 프로그래밍(Object-Oriented Programming : OOP)이란 사실 코드를 작성하는 구체적인 로직이라기보단, 객체를 중심으로 프로그래밍을 하겠다는 패러다임이라고 보는 것이 좀 더 정확하다. OOP는 여러 특징을 가지고 있지만 이번엔 그 중에서도 자바스크립트에서의 캡슐화에 대해 조금 더 정리를 해보려 한다. 참고로 OOP에 대한 기본적인 개념은 다음 링크에 간단하게 작성해 놓았다. (무려 5달 전에 작성해놓은 글이라 내용이 많이 부실하지만...공부해보며 좀 더 글을 보강할 예정이다...✨) [JavaScript] OOP in JavaScript [JavaScript] OOP in JavaScript 목표 객체 지향 프로그래밍의 특징 이해 인스턴스를 생성 방법 중 es5에서의 방법과..
[ES6+] 객체를 구조 분해 할당할 때, 원본 객체 값도 변경이 되나요? 구조 분해 할당(비구조화 할당)은 ES6에서 새롭게 추가된 개념으로, 객체에서 일일히 값을 꺼내 변수마다 값을 할당해 줄 필요없이 짧고 간단하게 값을 사용할 수 있기 때문에 나 역시 코드 작성을 할 때 자연스럽게 사용하고 있었다. 그런데 이번에 스터디에서 "만약 let {a, b} = object 에서 a랑 b에 접근해서 수정할 경우, object의 실제값에 영향을 주나요?" 라는 질문을 받게 되었다. 평소에 구조 분해 할당을 사용하면서도 저 질문에 대해 바로 정확한 답변을 떠올리기가 힘들었다. (새삼스럽지만 간단한 개념들도 생각없이 사용해 왔다고 많이 느꼈다🥺 ..) 그래서 오늘은 구조 분해 할당을 할 때 원본 객체에 영향이 가는지에 대해 간단하게 작성해보려고 한다. 결론부터 말하자면, 원본의 값은 바..
Redux는 무엇이고, 어떤 장점이 있는가? 첫 프로젝트 때는 클라이언트 사이드 구성에서 데이터 흐름에 대해 하위 컴포넌트들이 깊게 들어가지 않으니 상태 끌어올리기로도 충분히 작성이 가능할 것이라 생각하고 진행했었다. 하지만 막상 코드를 작성하다보니, 자식 컴포넌트에서 변경된 상태를 최상위 부모 컴포넌트로 다시 끌어올리거나 다시 데이터를 내려보내주는 과정을 2번 이상만 거쳐도 다루기가 굉장히 번거롭다는 것을 깨달았다. 그래서 파이널 프로젝트에서는 코스 과정에서 배웠던 Redux를 상태 관리 라이브러리로 선택하게 되었다. (Redux는 React에만 사용 가능한 것이 아니라 Angular 등 JS APP이라면 전부 사용할 수 있다.) 하지만 우리가 상태관리에 있어서 반드시 Redux를 사용해야 하는 것은 아니다. 우리가 Redux를 사용함에 따라서 ..
[JavaScript] 상속과 prototype, class 보호되어 있는 글입니다.
[JavaScript] OOP in JavaScript 객체 지향 프로그래밍의 특징 인스턴스를 생성 방법 중 es5에서의 방법과, es6의 클래스를 이용한 방법 다형성(polymorphism), 상속(inheritance)의 개념 상속관계를 가진 현실세계 모델을 코드로 작성 class 상속의 원리 전체적인 개요에 대해서는 모던 자바스크립트 Deep Dive라는 교재와 다음 mdn 링크들을 참고하며 작성하였다. developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript 객체지향 자바스크립트 개요 - JavaScript | MDN 객체지향 자바스크립트 개요 Table of contentsTable of contents비록 다른 객체지향적인 언어들과의 차이점에 대한 ..
[JavaScript] 객체 객체 자바스크립트는 객체 기반의 언어이다. 사실상 원시 타입의 값들을 제외한 함수와 배열 등 대부분의 값들이 모두 객체에 해당한다고 볼 수 있으며, 따라서 다른 개념들을 좀 더 정확하게 이해하기 위해서라도 객체에 대한 이해는 필수적이라 할수 있다. 1. 객체의 개념 객체는 원시 타입의 값들과 달리 변경 가능한 값이며, 프로퍼티로 구성된다. 객체의 프로퍼티 값이 함수인 경우는 메소드로 부른다. 프로퍼티는 객체의 '상태'를 나타내고, 메소드는 프로퍼티를 참조하고 조작할 수 있는 역할을 한다. 객체는 값과 동작을 하나의 단위로 구조화 할 수 있기 때문에 유용하다. 2. 객체 생성 let apple = { type: 'fruit', color: 'red', weight: '300' }; 일반적으로 자바스크립트에..
[JavaScript] 배열의 메소드 배열은 리스트와 비슷한 객체이며, 탐색 및 변형을 가능하게 하는 다양한 메소드를 가진다. 다음 내용은 배열을 다룰 때 자주 사용되는 메소드들에 대해 간단하게 정리한 것이다. 1. 배열 끝에 항목 추가: array.push() mutable let arr = ['a','b','c']; arr.push('d'); // ['a','b','c','d'] push는 하나 혹은 그 이상의 요소를 배열의 끝에 추가해주는 메소드로, 배열의 새로운 길이를 리턴한다. 2. 배열 끝에서부터 항목 제거: array.pop() mutable let arr = ['apple', 'banana', 'melon']; fruit.pop(); // ['apple', 'banana'] pop은 배열에서 마지막 요소를 제거하고, 해당 요소..