분류 전체보기

페이지네이션이란? - 책의 페이지처럼 데이터를 나눠서 제공하는 것 페이지네이션의 종류 - 오프셋 기반 - 커서 기반 오프셋 기반 페이지 네이션 오프셋은 한마디로 '지금까지 받아온 데이터의 개수` 리미트(limit)는 더 받아올 데이터의 개수 오프셋 기반 페이지 네이션의 문제점 데이터가 추가되면 21~30번까지 받아와야 하는데 20~29까지 받아 20이라는 데이터가 중복되게 된다. 글이 삭제되면 21데이터가 누락되게 된다. 커서 기반 페이지네이션 커서 = 데이터를 가리키는 값 = 지금까지 받은 데이터를 표시한 책갈피 커서 기반의 장점: 위의 문제들이 해결된다. 커서 기반의 단점: 서버입장에서는 구현하기 까다롭다. 데이터가 자주 바뀌지 않는다면 오프셋으로 충분하다. 정리하자면 오프셋은 받아온 개수 기준 커서..

useEffect와 useRef를 사용하여 렌더링의 이유를 밝힐 수 있음. memo를 사용 최후의 수단으로 useMemo사용 react developers tool에서 전부다 초록이면 최적화가 급하지는 않음. 하지만 빨간색이면 최적화를 해야함

fetch('url') .then((response) => response.text()) .then((result) => console.log(result)); 브라우저 api 이므로 fetch() 로 사용가능하다. response.text()도 promise객체를 반환하므로 then()을 사용한다. fetch()는 promise 를 반환하는데 then을 이용하면 response가 도착했을때의 특정 작업을 할 수 있다.

리액트로 배열을 렌더링 할 때 다음과 같은 문구를 마주치신 적이 있나요? Warning: Each child in a list should have a unique "key" prop. 브라우저 콘솔에 이러한 경고가 나오게 됩니다. 이는 리액트에서 배열을 렌더링 할 때 렌더링한 리스트들의 추가, 삽입, 삭제의 기준을 Key Prop을 이용해서 하기 때문에 이를 적어주지 않아서 나타나는 오류 입니다. 예를들어서 영화리뷰들이 있는 게시판이 있습니다. 각각의 영화 리뷰들을 렌더링 하는데 반복문으로 렌더링 할 수 있겠죠? 이때 key prop을 지정해주지 않고 리뷰에 있는 input태그 안에 텍스트를 입력하고 그 리뷰를 삭제했다면 어떻게 될까요? 리뷰는 삭제가 될 수 있어도 input 태그 안의 텍스트는 다른 ..

1. UI가 복잡할수록 DOM 조작이 매우 불편해진다. 페이스북 같이 UI가 많고 이벤트도 많은 웹에서는 DOM 조작이 매우 복잡합니다. 가령 태그를 만들고 그 안에 컨텐츠와 클래스 이름을 넣는다고 하면 벌써 코드가 3줄 이상입니다. 흔히 명령형 방식이라고 하죠. 하지만 리액트는 컴포넌트로 선언적으로 작성하여 유지보수가 훨씬 쉽습니다. 2. SPA 1번의 연장선으로서 SPA를 쓰면 DOM조작이 매우 빈번하게 일어나는데 이때 바닐라 자바스크립트를 이용해 구현하여 매우 복잡해집니다. 따라서 리액트로 쉽게 SPA를 만들 수 있습니다. 3. 제로초강의를 참고하자면 페이스북 웹에서 데이터를 바꿨더니 적용이 안되는 부분이 있었다는 것입니다. 예를들어 닉네임을 바꿨는데 내 프로필에는 제대로 변경된 닉네임이 보여지고 ..

시중에 많은 리액트 강의들의 대부분은 CRA부터 사용하여 webpack에 대한 설정과 바벨의 대한 설정을 가르치지 않고 바로 리액트의 핵심 기능들을 설명한다. 나는 처음에 이러한 강의에 불만을 느꼈고 혼자 구글에서 CRA없이 리액트 프로젝트 만드는 법을 찾았었다. 이런 강의들은 그저 리액트의 기능들을 나열하여 가르치겠다는 거고 그렇다 보니 강의를 들었다 할지라도 차후에 강의를 보고 얻은 지식으로 만든 프로젝트의 퀄리티가 (심하게 말하자면)매우 구렸다. 그리고.. 그건 바로 기본을 안 다져서 그렇다. 리액트에서 state가 뭔지 제대로 이해해야 하는데 단순 기능만을 설명하는 강의에서는 그런 종류의 습득은 불가능 하다. 그 와중에 나는 제로초강의를 알게되었다 웹팩 설정을 가르친다니!! 여기서 부터 다른 강의..

안녕하세요!!오늘은 자바스크립트로 제가 만든 flappy bird 게임을 소개해드리고자 합니다.지난 자바스크립트 달력 투두 리스트 이후 오랜만이네요.오늘은 지난번과 마찬가지로 풀소스를 공유하고자 합니다.저는 게임을 만들며 자바스크립트로 이 정도의 게임을 만들 수 있는 실력이 된 것에 뿌듯함을 느꼈습니다.깃허브 링크를 올릴테니 여러 분도 자바스크립트 풀소스를 참고하시어 자바스크립트 프로그래밍 실력을 높이는 계기가 됐으면 좋겠네요!이후에도 팩맨 게임이나 포켓몬 게임 등도 업로드할 예정입니다. 소스코드https://github.com/kimtaejin3/Flappy_Bird_Clone GitHub - kimtaejin3/Flappy_Bird_Clone: Flappy Bird게임 scratch부터 만들기Flap..

[문제점 - 개선점] JS게임 만드는 것은 착실히 하였지만 리액트에 대한 공부가 많이 부족했던 한 주였다. 또 JS문법도 기대만큼 결과를 내지 못했다. [어떻게 할까?] 그래서 앞으로는 리액트 공부의 비중을 많이 늘려도 무리가 없겠다 싶어 그렇게 할 예정이다. 또 리액트나 JS 배운것을 허접하다고 할지라도 블로그에 포스팅하자. 1주일에 1리액트 1JS 포스팅을 목표로 하자.