코딩배우는고양이

리덕스란? 자바스크립트 상태 관리 라이브러리 리덕스가 왜 필요할까? 프로젝트 규모가 커질 수록 컴포넌트 개수도 많아질 것이고 그에 따라 서로 다른 컴포넌트끼리 공유하는 상태(state) 또한 많아진다. 리액트는 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르는 단방향 패턴이며 자식 컴포넌트들 간 다이렉트로 데이터 전달이 불가능하다. 리액트만으로 상태를 관리할 때 문제점 Props drilling 이슈 하위 컴포넌트에서 상위 컴포넌트에 있는 상태를 변화시키기 위해서는 여러 번의 props 전달을 통해야 한다. 전달만을 위한 props가 생기기 때문에 코드가 복잡해지고 유지보수가 어려워지며, 불필요한 리렌더링이 많아지는 단점이 있다. 리덕스를 이용할 때 이점 리덕스를 이용하면 Store라는 전역 상태 저장소..

동기와 비동기 의미 동기는 하나의 요청이 오면 완료가 되어야 다음 요청을 실행하는 순차적 방식으로 흐름을 쉽게 예측할 수 있고 비동기는 어떤 요청이 완료되기 전에 다음 요청을 실행하는 동시적 방식으로 여러 작업을 동시에 효율적으로 처리할 수 있다. 콜백 함수 콜백 함수의 사용 목적 비동기 방식으로 작성된 함수를 동기 처리하기 위해 주로 사용된다. 비동기 처리를 기본으로 하면서 일부 순차적인 처리를 해야될 때가 있기 때문이다. 콜백 함수 형태 function main(param1, param2, callbackFunc) { // ... 처리 내용 callbackFunc(); } main(1, 2, func()); 보통 함수를 선언한 뒤 함수 타입 파라미터를 맨 마지막에 하나 더 선언해주는 방식으로 정의한다..

개요 function Car() { this.tire = 4; this.handle = 1; } let kona = new Car(); let spark = new Car(); console.log(kona.tire); // 4 console.log(spark.tire); // 4 kona와 spark 인스턴스를 생성하게 되면 Car가 가지고 있는 tire와 handle이라는 변수가 각각 메모리에 할당이 된다. 객체를 만들 때마다 새로운 메모리 공간을 사용하게 되는데 이러한 문제를 프로토타입으로 해결할 수 있다. function Car() { } Car.prototype.tire = 4; Car.prototype.handle = 1; let kona = new Car(); let spark = new C..

ES5 와 ES6 비교 ES5 프로토타입 // 생성자 function Cat(name, age) { this.name = name; this.age = age; } Cat.prototype.feeding = function() { return `${this.name}가 츄르를 먹습니다.` } // 인스턴스 생성 let cat = new Cat('금동이', 9); console.log(cat.feeding()); // 금동이가 츄르를 먹습니다. ES6 클래스 class Cat { //생성자 constructor(name, age) { this.name = name; this.age = age; } feeding() { return `${this.name}가 츄르를 먹습니다.` } } // 인스턴스 생성 l..

개요 프로젝트명 : 아가리 스테이츠 프로젝트 소개 : HTML, CSS, JavaScript를 활용해서 질문 게시판 만들기 주요 기능 질문 작성하기(모달창) 로컬 스토리지에 데이터 저장 + 신규 데이터 저장 페이지네이션 이미지 애니메이션 👉프로젝트 구경하기👈 아가리 스테이츠 g4dalcom.github.io 상세 모달창으로 구현한 질문 작성하기 // ======== 모달창 관련 ======== // const $modal = document.querySelector('.modal'); const $form_container = document.querySelector('.form__container'); const $main_container = document.querySelector('#main_co..