메모이제이션 useCallback, useMemo, React.memo
위 영상에서 리랜더링이 발생하는 컴포넌트에 표시되도록 설정을 해놓았습니다. input창에 onChange이벤트가 발생하면 useState훅을 이용해서 state가 변경됩니다. React에서 컴포넌트가 렌더링하는 규칙에는 크게 세 가지가 존재합니다. state나 props가 변경되었을 때 forceUpdate()를 실행했을 때 부모 컴포넌트가 렌더링 되었을 때 위의 영상에서는 state가 변화함에 따라 전체 컴포넌트가 전부 리랜더링이 발생하고 있는 상황입니다. 지금은 컴포넌트의 크기가 작아서 큰 영향은 없지만 컴포넌트가 커지거나 로직이 매우 큰 함수가 있다면 버벅거리고 느려지는 현상이 발생할겁니다. 단지 input에 제목을 입력했을 뿐인데, 무거운 함수를 계속해서 새로 만들 필요가 없겠죠. 메모이제이션이란..
돔과 가상돔 DOM & Virtual DOM
https://pungwa.tistory.com/76 DOM으로 고민하지 말자! 발표자료 / DOM,가상DOM https://www.youtube.com/watch?v=5ZY0UScTNxk pungwa.tistory.com 처음 개발공부를 시작하고 항해99 부트캠프에서 공부한 내용으로 발표한 자료입니다. 초보자가 DOM에 대해 이해할 수 있는 수준으로 설명이 되어있습니다. 후반부에 가상돔 개념이 나오는데 많이 부족해서 이 글에 추가로 기록을 남깁니다. 가상돔에 대해 이해하려면 리얼돔이 있는데 가상돔이 왜 필요했는지 그 배경을 알아야 쉽습니다. 그리고 그 배경을 이해하기 위한 배경지식으로 브라우저 랜더링 과정에 대해 조금 더 알아야합니다. 1. 브라우저 랜더링 과정 2. 리얼돔을 사용했을때의 불편함(?) ..
컴포넌트 랜더링과 자바스크립트의 속도 차이(무한스크롤 part2)
인스타 클론을 할 때는 전체 document에서 무한스크롤을 구현했다면 이번 실전 프로젝트에는? 오른쪽 사진에 보이는 빨간색 테두리의 div만 무한스크롤을 적용하고 싶습니다! 인스타 클론 때 작업했던(강의에서 들었던 scroll파일 그대로) 파일입니다. 특히나 위에 부분이 이해가 잘 안 갔는데, 이번에 저부분을 건들지 않고는 무한스크롤을 구현할 수 없는 상황이 되었습니다. 저는 지금 모바일 화면으로 구현을 하고 있으며, 저 코드를 그대로 적용하면 scrollHeight - innerHeight - scrollTop < 100 이 되는 순간은 영원히 없을 것입니다. 그렇다면 어떻게 마지막 스크롤 지점을 찾을 것인가! 일단 막막하니까 dom을 가져와서 스크롤 이벤트를 찍어봅시다. 보면 뭔가 있겠지요..? 역..
무한스크롤 만들기 참쉽죠...
일단 스크롤 컴포넌트만 만들고 나면 로직은 참 쉽다. 단, 내가 한 것보다 분명히 더 쉬운 방법이 있을 것 같긴 하다 ㅋㅋ 일단 만들어둔 Scroll컴포넌트로 list.map()을 감싸준다. callNext는 미리 정해둔 위치가 왔을때 실행되는 함수, is_next는 다음페이지가 있는지 없는지 판단하는 불리언(다음 페이지가 없을 때는 스피너를 안 띄울 예정) loading은 비동기 처리중에 같은 이벤트가 두 번 발생하지 않도록 막아주는 불리언 저번 주 미니 프로젝트를 할 때 페이징 처리를 하면서 알았는데 서버에서 보내주는 데이터를 살펴보면 서버에서 각 페이지 별로 뿌려줄 게시물 수, 총 게시물 수, 총 페이지 수 등을 알 수 있고, 내가 페이지 번호만 보내면 그 번호에 맞는 게시물을 뿌려주는 게 가능하다..
프로필 사진 디폴트 만들어주기
오늘은 프론트 작업을 끝내 놓고 백엔드 팀원들의 IP를 받아 로컬 환경에서 테스트를 진행했다. 대체로 작업은 수월하게 끝났고, JWT방식을 처음 해본 팀원들이라서 로그인 인증에서 약간 에러가 있었지만 잘 해결했다! 인스타 클론을 1주일만에 끝내야 하며 우리는 웹소켓을 이용해서 DM기능에 도전하기로 했으므로 회원정보 수정 페이지는 생략하기로 했다. 그래서 회원가입 시에 프로필 사진을 받기로 했고 혹시 프로필 사진 설정을 원하지 않는 유저에게는 기본 이미지가 들어가도록 설정하고 싶었다. const [files, setFiles] = useState(); const onImgChange = (e) => { const file = e.target.files; setFiles(file); const reader ..
처음으로 백엔드팀원들과 협업해 본 미니 프로젝트입니다. 프론트엔드 깃헙코드 https://github.com/kiwonbyun/hanghae99-gaemoim-FE GitHub - kiwonbyun/hanghae99-gaemoim-FE Contribute to kiwonbyun/hanghae99-gaemoim-FE development by creating an account on GitHub. github.com 시연영상 https://youtu.be/FLZMjf2JNNc