일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래밍이란
- 소오름~
- for반복문
- Math.abs()
- ES6 브라우저 지원 현황
- 소름돋는 알고리즘
- Math.min
- arr.push()
- Ajax란?
- 자바스크립트와 ECMAScript
- 배열 최솟값
- 어려운데ㅠㅠ
- for문
- array.reduce()
- 자바스크립트의 탄생배경
- JavaScript
- !x.includes()
- 가우스의 공식
- if반복문
- 가우스의 재림
- 직사각형 별그리기
- 구문과 의미
- 삼항연산자
- 자바스크립트
- 행렬...
- .split()
- .map()
- a && b
- 복합대입연산자
- 자바스크립트의 특징
- Today
- Total
목록분류 전체보기 (88)
Ming's develop story
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rf8DA/btrlM16cVUF/d4EeRNEEJft2LLapnSCteK/img.png)
1. Detail.js 에서 삭제하기 버튼 만들어주기 {bucket_list[bucket_index]}의 상세 페이지입니다! { console.log("삭제하기 버튼을 누름"); }} > 삭제하기 로 감싸주고 버튼을 만든뒤 console.log로 잘 작동 되는지 확인! ! 데이터 삭제를 하면 그 페이지에 남아있는 데이터가 없기때문에 뒤로가기나 메인페이지로 이동하게 만들어 줘야한다 (이거슨 FE개발자의 센스!!) import { useHistory } from "react-router-dom"; 뒤로가기 버튼 만들때처럼 useHistory를 사용 import 먼저 해주자! const history = useHistory(); 지정해주고, { console.log("삭제하기 버튼을 누름"); history...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/KUaI0/btrlNc73fAq/yYTuAtAq4FfeGpWqWUvvc0/img.png)
1. 리덕스 훅 리덕스도 훅이 있는데 상태, 즉, 데이터를 가져오는 것 하나, 상태를 업데이트할 수 있는 것 하나 이렇게 두 가지를 정말 많이 쓴다! 더 많은 (훅 보러가기→) // useDispatch는 데이터를 업데이트할 때, // useSelector는 데이터를 가져올 때 씁니다. import {useDispatch, useSelector} from "react-redux"; 2. BucketList.js에서 redux 데이터 가져오기 const data = useSelector((state) => state.bucket.list); //앞의 state는 스토어가 갖고있는 전체 데이터 뒤는 리턴하는 값 console.log(data); 이런식으로 콘솔로 확인해서 내가 가져오려는 state의 값중 리..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BinPs/btrlTXajGLo/cGh2Dh2VPolsIWSkpjpdy0/img.png)
덕스 (ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다) 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성한다. (버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reducer를 한 파일에 넣으면 된다) 덕스 구조로 리덕스 모듈을 만들어 보자! 덕스 구조를 잘 설명해 주는 사이트 헷갈릴 때 들어가서 읽어보자 모듈을 만들때 복사할 기본 코드(사이트와 동일) // widgets.js // Actions 타입을 정해준다 const LOAD = "my-app/widgets/LOAD"; //서버에서 데이터를 가져올때..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bCCExY/btrlUNZxtOa/97JqTTkg2BtilQOOLcWl8k/img.png)
리덕스 설치하기 redux - 리덕스 react-redux - 리덕스를 리액트에서 편히 쓸 수 있게 해주는 패키지 리덕스 공식문서 리덕스 개념과 용어 정리 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구이다. 아래 용어들은 리덕스의 기본 용어인데, 내가 키워드 삼기 좋은 용어들이다. (1) State 👉 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. 딕셔너리 형태({[key]: value})형태로 보관한다. (2) Action 👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것이다. 액션은 객체이다. 이런 식으로 쓰인다. type은 이름같은 것이고, 내가 정하는 임의의 문자열을 넣는다. {type: 'C..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/catzC6/btrlJMnZ2kv/k9RTGLodYqX8EJCRqHAQmk/img.png)
리덕스란? - 전역 상태 저장소 일단 내가 만들었던 버킷리스트를 되짚어보자! 지금은 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있고, 추가하기 버튼도 App.js에 있다. 만약에, 내가 이 추가하기 버튼과 텍스트 영역을 AddListItem 컴포넌트를 만들어 분리하고 싶다면 어떻게 해야하나? 파일을 만들고 코드를 만들면 될까? 그렇게 하면 추가하기 버튼을 눌렀을 때 정말 App 컴포넌트의 state를 수정할 수 있을까? 그렇다, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없다. 왜냐하면 데이터는 부모에서 자식으로 흐르게 하기로 했기 때문이다.(데이터는 단방향으로!) 그런데 만약에, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 본다면 ..