개발이랑 일상이랑

리덕스는 채팅이라고 생각하면 된다 리덕스에는 스토어라는 저장소가 있다(상태를 저장하는 곳이다) 뭔가 쏘려면 dispatch를 이용한다. dispatch가 쏴주는건 action이다. (원래 action은 명사지만 js에서는 동사도 가능) 받는사람은 useSelector를 이용하는사람이다. 리덕스에서는 reducer가 함수이기떄문에 비동기처리를 하기위해서 redux-thunk 라는 미들웨어를 이용한다. redux 에서 dispatch할 때 action을 던지는데 action은 보통 객체이다. 이 action을 보통 객체로 던지게 되는데 redux-thunk를 이용하면 action을 function으로 던질 수 있게 된다. redux-thunk에서 젱ㄹ 중요한 아이는 createAsyncThunk이다. ---..

axios에서 delete요청을 보낼때는 {data:{ } }가 요청데이터로 들어가야한다. [Redux--------------] store - 공유되는 자원의 저장공간 / 하나의 app은 하나의 ~~를 사용 action - 상태의 변화를 전달하는 메세지 reducer - 순수한 함수로, store가 유지해야 하는 데이터를 가공해 반환하도록 구성한다. dispatch- 채팅메세지를 보낸다고 생각하면 된다 useSelecetor - state를 반환한다. //리덕스 개발순서 1. -> 슬라이스를 만든다 (store에 들어가는 logic의 조각) =>안에 전역상태/함수를 넣는다... 2. -> store.js라는것을 하나 만든다.(슬라이스가 여러개 있어서 그것들을 combine한다) 3. -> App.js(..

axios를 react에서 post로 json을 보내려면 axios.post('url',{key:value}) 하면 안되고 json data를 JSON.stringify로 문자열화 시킨다음 데이터에 넣어야한다. 그리고 headers에 'Content-Type':'application/json'을 넣어야 json데이터로 제대로 입력이 된다. server단에서 @RequestBody로 받는다면 그거에 맞는 json데이터 타입을 보내줘야한다(프론트개발시)

비동기통신을 하면 약속어음을 발행한다 (promise) 비동기통신으로 구성하려면 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ 서버의 데이터를 기준으로 state를 잡아서 코딩해야한다.

처음부터 내가 만들 자료구조의 프로토타입(틀) 은 바깥쪽에 잡아주면 좋다 데이터를 다룰때는 데이터의 원형이 되는 아이는 함수의 바깥에 선언한다(컴포넌트밖에) axios가 요청을 두번 보낸다.. 이유는 무엇일까,,? -> Preflight request때문... 그렇다면 Preflight request가 뭘까? -> axios의 옵션때문에 사전에 요청을 보내고 성공하면 다시 보내는것이다. await은 기다리라는 의미인데 기다리다 지나가버리면 반납을못한다.. 그래서 async라는 함수에서밖에 사용하지 못한다(비동기로 처리하면 얼마든 기다리고 결과를 수행할수있으니..)

stopPropagation () addEventListener('click', false)

const numService = () =>{ //변경되는 값은 let으로 지정 let count = 0; const changeValue = (amount)=>{ count += amount; return count; } const resetCount = () => { count = 0; return count; }; return {changeValue,resetCount}; } export default numService(); closure의 기본원리이다 화면과 로직을 분리하는데는 성공했으나, 상태를 공유하고 관리하는 부분에서 고려사항이 있었다. 이래서 나온것들이 리덕스 등등...

클래스를 쪼갤때 기준(화면과 로직을 분리한다) 로직을 서비스라고 부른다. 모든 시스템이 원하는것은 nine five (99.999%) 가동률이다. 실제로는 eight five(88.888%)이다.

리스트를 만들때 map에는 key라는 애를 만들어야한다 근데 key로 잡을 아이가 없으면 idx값을 잡아서 쓰면 된다 const list = service.getItems().map((item, idx) =>{ return {item.name} --- {item.price} }); 컴포넌트를 한곳에서 2개만들수도 있고 파일로 따로 만들수도 있는데 기준은 한곳에서만 쓴다면 같은곳에서도 만들어도 괜찮다.

화면과 관련된애들중 괜찮다고 생각하는 리액트라이브러리는 ant design 컴포넌트를 폴더별로 만드는게 좋다 event를 걸때는 대소문자를 구분한다 과거에는 클래스형 컴포넌트를 사용했다. 그런데 16.8버전이 나오며 Hook(s)가 등장해서 함수형으로 만드는게 일반적이다. useState를 사용할때 조심해야하는 점 - react는 기존에 있는 아이의 값만 바뀌는게 아니라 기존애있는애 자체가 바뀌어야만 관리 감독한다(값만바꾸면 다시 랜더링안함)