JS11 [react-redux] 리액트에서 리덕스 사용하기 ✨ 리덕스란? 자바스크립트 어플리케이션을 위한 예측 가능한 상태 관리 라이브러리 리덕스가 생겨난 이유 자바스크립트 싱글 페이지 어플리케이션이 갖추어야하는 요건이 복잡해지면서, 어느때보다 많은 상태를 자바스크립트 코드로 관리할 필요성이 생겨났다. 여기서 상태란, 서버 응답, 캐시 데이터, 지역적으로 생성해 쓰지만 아직 서버에 저장되지 않은 데이터 이외에도 활성화된 라우트, 선택된 탭, 로딩 여부, 페이지네이션 컨트롤 등의 다양한 UI 상태를 의미한다. 리덕스는 이런 복잡한 상태들을 더 편리하게 관리하기 위해서 만들어진 라이브러리이다. 리액트에서만 사용할 수 있는 것이 아니라 자바스크립트 어플리케이션에서는 리덕스를 사용할 수 있다. 리덕스의 3가지 원칙 단일 출처 원칙 상태는 읽기 전용 리듀서는 순수 함수로.. 2022. 12. 28. [개행 문자] 읽어온 json 파일과 js 문자열이 같은 데도 계속 다른 경우 페어 과제 진행 중에 user1.json 파일을 readFile로 읽어서 가져온 후, 가져온 data와 테스트 코드에 있는 값이 눈으로 보기에는 똑같았는데 계속 다르다는 오류가 발생했다. 오류 해결 과정과 원인을 블로그로 남긴다. ✨ 그래서 어떤 오류냐면... const user1txt = `{ "name": "김코딩", "age": 26, "sex": "Male", "company": { "name": "코드스테이츠" } }`; test("callback 두번째 인자에 파일 내용이 전달되어야 합니다", (done) => { getDataFromFile(jsonPath, (err, data) => { expect(err).toBeNull(); expect(data).toBe(user1txt); done(.. 2022. 11. 23. [js] 프로토타입 체인 🎉 프로토타입 체인이란? 자바스크립트는 객체의 프로퍼티와 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면 자신의 프로토타입 참조를 따라가 자신의 부모역할을 하는 프로토타입 객체의 프로퍼티를 순차적으로 검색한다. = 이를 프로토 타입 체인이라고한다. 프로토타입 체인은 프로토타입 기반 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다. 🎉 프로토타입 체인 예시 class Animal { constructor(name) { this.name = name; } getName() { return this.name; } } class Cat extends Animal { say(){ console.log("야옹"); } } Cat 클래스의 인스턴스인 cat이 어떻게 Animal 클래스가 가지고.. 2022. 11. 21. [js] 프로토타입 자바스크립트를 프로토타입 기반 객체 지향 언어라고 한다. 이 글은 프로토타입이 무엇인지에 대해 공부한 내용을 일부분 정리한 내용이다. 프로토타입 객체란? 프로토타입(원형)은 어떤 객체의 부모 역할을 하는 객체를 말한다. 프로토타입 객체는 객체 간의 상속을 구현하기 위해 자바스크립트가 사용한다. 즉, 객체는 자신의 부모 객체인 프로토타입에 존재하는 식별자들을 사용할 수 있다는 말이다. 그럼 프로토타입은 어디에 저장되어있을까? 모든 객체는 자신의 부모 역할을 하는 프로토타입을 가지고 있다. 그렇다면 어디에 저장되어 있는 것일까? 모든 객체는 [[Prototype]] 이라는 내부 슬롯이 존재한다. 여기에 프로토타입 참조를 가지고 있다. 내부 슬롯은 자바스크립트 엔진을 위한 영역으로, 개발자가 직접 접근할 수 .. 2022. 11. 18. [js]자바스크립트 클래스 클래스와 인스턴스 클래스 객체지향 프로그래밍에서 객체를 생성하기 위한 청사진, 설계도를 의미한다. 인스턴스 클래스를 사용해 생성한 객체를 인스턴스라고 한다. 자바스크립트의 객체지향 프로그래밍 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다. 따라서 다른 객체 지향 프로그래밍 언어들과 다르게 클래스를 사용하지 않고 객체지향 프로그래밍을 할 수 있다. 물론 ES6에 클래스 문법이 생기면서 클래스를 사용할 수 있다. 단, 클래스를 사용하더라도 프로토타입을 기반으로 객체지향 프로그래밍을 구현한다는 점은 변하지 않는다. 따라서 자바스크립트에는 재사용가능한 객체를 생성할 때, 클래스를 사용하는 방식과 생성자 함수를 사용하는 방식 두 가지가 존재한다. 편리함은 클래스가 더 편하다. 클래스 기반과 프로토타입 .. 2022. 11. 18. [js] 객체 구조 분해 할당과 얕은 복사 방식들 객체 구조 분해 할당 오늘 페어 활동을 하면서 객체 구조 분해 할당에서 처음보는 문법 형식을 접할 수 있었다. 객체를 구조 분해 할당 할 때, 분해 받는 오브젝트의 프로퍼티를 내가 원하는 이름으로 가져올 수 있었다. // 코드 출처 - https://ko.javascript.info/destructuring-assignment#ref-47 let options = { title: "Menu", width: 100, height: 200 }; // { 객체 프로퍼티: 목표 변수 } let {width: w, height: h, title} = options; console.log(w); console.log(h); console.log(title); 따라서 width라는 프로퍼티를 w라는 변수로 사용할 수.. 2022. 11. 9. 이전 1 2 다음
