망고

1. 개념 React에서 자주 사용되는 Props와 State의 개념과 차이점입니다. Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다. 위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다. State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다 2. Props 우선 MyComponent 컴포넌트를 수정하여 ..

퇴사를 하고 vue개발자로 지내다가 이직을 준비해야 하는 시점에서 시간이 남을 때 리액트 공부를 해두는 것도 좋을 것 같다는 생각이 들어 리액트 사이드 프로젝트를 합류하게 되었다. 공부할 겸 정리하려고 한다. 1. 리액트란? 웹페이지에 인터렉션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야 하기 때문에 메모리 누수와 코드가 난잡해지는 문제가 발생하곤 한다. 처리해야 할 이벤트들도 다양해지고, 관리해야 할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하느 ㄴ업데이트 규칙도 복잡해지기 마련이다. 이러한 문제점을 개선하기 위해 페이스북 개발팀에서 만든것이 바로 리액트이다. 페이스북 개발팀은 이를 해결하려고 어떤 데..

프로토타입과 클래스에 대해 알아보기 전 우선 객체 생성자라는 것을 먼저 알아야한다. 객체 생성자 함수를 통해서 새로운 객체를 만들고 그 안에 넣고싶은 값 혹은 함수들을 구현 할 수 있게 해준다. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say(); 결과: 멍멍 야옹 객체 생성자를 사용할 때는 보통 함수의 이름..

📌AXIOS란? 👉axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP비동기 통신 라이브러리이다. 👉쉽게 말해서 백엔드와 프론트엔드가 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 👉이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할 땐 axios를 쓰는 편이라고 보면 된다. 📌AXIOS특징 👉운영 환경에 따라 브라우저의 XMLHyypRequest 객체 또는 Node.js의 http의 http api사용 👉Promise(ES6) API 사용 👉요청과 응답 데이터의 변형 👉HTTP 요청 취소 👉HTTP 요청과 응답을 JSON 형태로 자동 변경 axios fetch 써드파티 라이브러리로 설치가 필요하다. 현대 브라우저 빌트인이라 설치가 필요 ..

상태에 따라 현재 템플릿이나 정보를 보여줄지 말지를 vue를 통해 나타낼 때 흔히 v-if/v-else 디렉티브 또는 v-show 디렉티브를 사용한다. 여기서 둘의 차이점은 v-if는 조건이 맞지 않다면 해당 태그 자체를 생성하지 않고, v-show는 태그를 생성은 한 후 보이지 않게 처리를 한다는 점이 다르다. (CSS에서 display:none처리를 해준다.)

데이터의 흐름을 쉽게 하기 위해 vuex라는 외부라이브러리가 있고, 메소드들을 서로 호출할 수 있도록 도와주는 eventBus라는 방법이 있다. 이중 eventBus의 사용방법에 대해 알아보자. 이벤트를 사용하는 이유 일반적으로 메소드, 변수를 정의할 때 한오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요가 없이 현재위치에 포함된 메소드/변수를 호출하여 사용할 수 있다. 하지만 각각 분리되어 있는 개체에 전송하거나 알려줘야한다면 어떻게 해야할까? 이럴 때 공통으로 데이터들을 주고 받을 수 있는 공간을 만들고, 이를 통해서 서로 규격에 맞춰 데이터들을 주고 받으면 될 것이다. 이벤트를 등록하고 받을 준비가 끝났다면 언제 어디서든지 데이터들을 주고 받고, 각 이벤트요청 상황에 따라 원하..