Ming's develop story

리덕스 설치하기 redux - 리덕스 react-redux - 리덕스를 리액트에서 편히 쓸 수 있게 해주는 패키지 리덕스 공식문서 리덕스 개념과 용어 정리 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구이다. 아래 용어들은 리덕스의 기본 용어인데, 내가 키워드 삼기 좋은 용어들이다. (1) State 👉 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. 딕셔너리 형태({[key]: value})형태로 보관한다. (2) Action 👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것이다. 액션은 객체이다. 이런 식으로 쓰인다. type은 이름같은 것이고, 내가 정하는 임의의 문자열을 넣는다. {type: 'C..

리덕스란? - 전역 상태 저장소 일단 내가 만들었던 버킷리스트를 되짚어보자! 지금은 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있고, 추가하기 버튼도 App.js에 있다. 만약에, 내가 이 추가하기 버튼과 텍스트 영역을 AddListItem 컴포넌트를 만들어 분리하고 싶다면 어떻게 해야하나? 파일을 만들고 코드를 만들면 될까? 그렇게 하면 추가하기 버튼을 눌렀을 때 정말 App 컴포넌트의 state를 수정할 수 있을까? 그렇다, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없다. 왜냐하면 데이터는 부모에서 자식으로 흐르게 하기로 했기 때문이다.(데이터는 단방향으로!) 그런데 만약에, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 본다면 ..

DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거..

잘못된 주소 처리하기 1. 일단 NotFound.js 파일을 만들고 빈 컴포넌트를 만들어주자. import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js에서 불러옵니다. import NotFound from "./NotFound"; 3. Switch를 추가해주고, ... import { Route, Switch } from "react-router-dom"; ... return ( ... ( )} /> ... ); 4. NotFound컴포넌트를 Route에 주소 없이 연결하면 끝! ... ( )} /> ... Switch는 버킷리스트의 Route들만 감싸주..