본문 바로가기

Coding127

Redux- search page Scroll 제어하기(무한 scroll down) Redux를 활용하여 Scroll을 일정 위치를 도달 했을 때, api call을 하면서 data를 받아와 render 시켜주는 기능을 구현했다. scroll이 최종하단에 도달했을 때, api call을 요청 하도록 했다. (search api는 github api docs를 활용 link: docs.github.com/en/rest/reference/search) search를 하는 곳에 useEffect를 걸어서 window.innerHeight + documen.documentElement.scrollTo 값이 document.documentElement.offsetHeight 값이 같을 때, dispatch를 이용하여 addPage() 함수가 실행이 된다. *innerHeight은 화면의 크기를 .. 2021. 4. 4.
Javascript - fetch api(2) fetch(url, option) POST요청을 할 때는 option을 넣어줘야 한다. method, body는 필수이다. headers는 대부분 server에서 요구하는 경우가 많다. 보통 login을 할때 header에 access-token 값을 요구를 하면 headers에 access-token 값을 넣어서 보내야 한다. 기본적으로 content-type: application/json은 넣어주는데, POST 요청할 때 body를 json 형태로 보내겠다는 의미이다. 그래서 body에서 JSON.stringify로 데이터를 보낸다.(axios 라는 라이브러리를 사용하면 JSON.stringify 같은 메소드 없이 객체로 보낼 수 있는 장점이 있다.) 그리고 headers는 server에서 요구하는.. 2021. 3. 4.
React - flicking 많은 웹사이트를 보면 배너가 있고 버튼을 누르거나, 배너 navigator(?) 같은거를 누르면 배너가 이동을 한다. React에서 이러한 기능을 해주는 라이브러리가 있다. flicking이라는 라이브러리다. npm 사이트에서 flicking이라고 검색을 하면 flicking에 관련된 많은 라이브러리가 나온다. React를 사용했기 때문에 하기와 같은 라이브러리를 설치를 했다. npm install --save @egjs/react-flicking flicking에 대한 많은 property들은 공식 사이트에 나와있다. 설명이 잘되어 있다 @egjs/react-flicking : "^3.5.2" naver.github.io/egjs-flicking/release/latest/doc/index.html I.. 2021. 2. 21.
React - Next - Material ui Warning: Prop className did not match Warning: Prop className did not match Next js에 Material ui를 setting 할 때, 문제점이 발생했다. 처음 켤때는 아무런 문제가 없지만 새로고침을 하거나 다른 페이지를 이동하동 하다보면 콘솔에 위와 같은 message가 발생한다. 이것을 해결하고자 google을 열심히 뒤져서 해결을 할 수 있었다. 우선 먼저 찾아 볼수 있는 페이지는 Material ui 공식문서 사이트 이다. 여기서 이문제가 왜 발생하고 있는지 잘 설명되어 있다. material-ui.com/guides/server-rendering/ Server Rendering - Material-UI The most common use case for server-side rendering is t.. 2021. 2. 14.
반응형

티스토리툴바