JavaScript(7)
-
Redux의 state 업데이트는 불변한 방식으로! Feat) Object.assign()
상태 관리 라이브러리인 Redux를 배웠다. 아직은 익숙하지 않지만 확실한 것은 Redux에서 Reducer의 함수의 경우 Redux의 state 업데이트는 불변하는(immutable) 방식으로 변경해야 한다. 그 중 Object.assign을 소개한다. mdn Object.assign()에서는 객체 2개를 합치기도 하고 {}에 합치기도 한다. Reducer함수를 작성할 때 immutable하게 하려면 어떻게 써야 할까? 답은 이 사이트에서 확인할 수 있다. 이 사이트에는 다음과 같이 나와있다. 실험을 해보자. 사용할 객체는 다음과 같다. newData는 state의 cartItems에서 0번째 index의 quantity만 수정해준 값이다.! const state = { "items": [ { "id"..
2022.09.02 -
[javascript] property shorthand에 대해 알아보자!
오늘은 Redux를 배웠다. Action 객체를 생성하며 한가지 의아한 점을 발견했다. 객체 형태인데 왜 키-값 쌍이 아니라 키만 있는걸까? 다른 값과의 차이는 무엇일까? 답은 shorthand properties였다! key가 곧 value를 의미하는 경우에 value를 생략할 수 있다! 아래 사진들에서 itemId의 value는 itemId이었다. 참고 자료 : https://pro-self-studier.tistory.com/33
2022.09.01 -
[javascript] 프로토타입 체인
상속을 하기 위해서 프로토타입이라는 방법을 도입했다 프로토타입 DOM에서도 prototype 이용 가능하다. 생성자를 특정 값으로 초기화하면서 다른 값으로 바꿀 때는 constructor 함수의 괄호 안에 초기값을 입력하고 내부에 this.age = age, this.color = color로 할당하면 된다. this는 생성 시 해당 객체를 의미한다. class Bee{ constructor(age = 5, color = 'pink', food = 'jelly'){ this.age = age; this.color = color; } } super super 키워드는 부모의 함수를 호출하고, 속성을 상속받을 수 있다. 주의할 점은 this 키워드가 사용되기 전에 호출되어야 한다는 것이다. 그렇지 않으면 참..
2022.07.25 -
[javascript] 프로토타입 기반의 언어, javascript
프로그래밍 언어의 차이 Java, C++, C#, Python, PHP, Ruby, Object-C는 클래스 기반 언어에 해당된다. 클래스 기반 언어에서는 인스턴스는 클래스에 정의된 범위 내에서만 작동하며, 구조를 변경할 수 없다. 프로토타입 기반 언어인 javascript에서는 인스턴스의 자료구조와 기능을 변경할 수 있다. 프로토타입 프로토타입의 뜻은 원형이며, 아래의 그림과 같이 소프트웨어가 만들어 지기 전 가상으로 만들어 놓은 미완성 버전, 시스템의 초기모델을 의미로 사용되기도 한다. 프로토타입 기반 언어, javascript javascript는 클래스 기반의 언어와 달리 복제가 아닌 프로토타입 링크를 통해 원형을 참조한다. 배열과 객체는 원시자료형과 참조자료형에서 보았듯이 모두 참조자료형이자 객..
2022.07.22 -
[javascript] 객체지향 프로그래밍
객체 지향 프로그래밍 💡 절차 지향 vs 객체 지향 C가 절차 지향에 해당 - 절차적으로 생각! 데이터의 형태에 따라 코드의 흐름에 영향을 미쳐서 유지 보수가 어려움. JAVA, C++, C#이 객체 지향에 해당 javascript는 객체 지향x지만 객체지향 패턴으로 작성 가능하다 객체 지향 프로그래밍의 주요 개념 캡슐화 (Encapsulation) ⇒ 재사용성 높이기, 코드를 간단하게 - 모든 실행 순서에 따라 절차적 코드가 아니라 코드로 기능 상상할 수 있게 작성 - 은닉화 : 내부 데이터나 구현이 외부로 노출되지 않도록 하기. - 디테일한 구현, 데이터는 숨기고 필요 동작(메소드)만 노출 - 더 엄격한 클래스는 속성의 직접적인 접근을 막고, 설정하는 함수(setter), 불러오는 함수(getter)..
2022.07.22 -
[javascript] 클래스와 인스턴스
객체지향(OOP, Object-oriented programming) 오늘 다룰 주제는 클래스와 인스턴스이다. C언어를 배울 때 접했던 개념을 다시 보게 되어 반가웠다. 그 당시에는 객체에 대한 사전지식 없이 단어 그대로만 받아들이고 있었는데, 객체에 대해 이해하고 보니 폭을 더 넓힐 수 있었다. 객체 객체 지향에서 다루는 객체란? 키-값쌍의 이뤄져있다. 객체를 구성하는 값은 어떤 것이라도 가능하다. 프로퍼티(property)와 메소드(method)라고 부른다. const oheun = { name : Kim Oheun, age : 24, university : ... } 클래스 클래스는 틀이다. 우리가 생각하는 고등학생은 어떤 존재일까? 이름이 있고, n살인, nn고등학교에 다니고, 집에서 몇 분 정도..
2022.07.22