개발이랑 일상이랑

요즘 싱글페이지들이 뒤로가기해도 이전 url로 가지않는 이유 - HTML5에서 히스토리라는것을 지원하기 때문 SPA에서 히스토리 제어를 하는법 (리액트에서) - > router라는 것을 이용한다. [router] - 분기를 처리해주는 기능 - 특정상황에서 특정 컴포넌트만 보여준다. html5기능중 history.pushstate()를 하면 주소만 바꾼다음에 추가해준다. SPA에서는 a태그를 쓰면 안된다 (아예 새로 요청을 하는것이기 때문에 화면이 처음부터 랜더링 되는것이라 SPA의 단점인 첫 로딩이 느린부분이 a태그를 누를떄마다 적용되는것..) 그래서 link라는 태그를 쓴다.

SPA의 단점: - 첫 로딩이 느리다(라이브러리랑 이것저것 처음에 다 구성시켜놓고 나중에 페이지만 바꿔끼는 방식이라 첫 로딩이 느림) - 메모리 문제 ( 사용하지 않아도 유지해야하는 데이터들이 많다... Store에 상태들을 다 저장해두기 때문..) 리덕스를 사용하는 기준: 1. 서버의 데이터를 스냅샷 하지 말자 => 계속 서버에서 빠르게 바뀌는 애들은 리덕스로 관리하지 말자./ useEffect를 사용하자. 2. 상태가 다양하면 리덕스를 쓰지 말자 => slice하나에서 너무많은 상태를 관리하거나 너무많은 slice를 만들 상황이 생긴다. 3. 상태 데이터가 단순하고 고정적인 데이터만 리덕스를 이용하자. 4. 자주 변경이 되지 않는 데이터라면 리덕스로 관리해도 괜찮다 종합: 현재 로그인한 사용자 정보 ..

리덕스는 채팅이라고 생각하면 된다 리덕스에는 스토어라는 저장소가 있다(상태를 저장하는 곳이다) 뭔가 쏘려면 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%)이다.