리액트4 [React.js] 리액트에서 무한 스크롤 구현 + 모바일 문제 해결 캣츄 프로젝트의 게시판 목록에서, 페이지네이션의 일종으로 무한 스크롤을 구현하기로 했다. 1. 페이지네이션 (Pagination)이란? 백엔드에 저장된 모든 정보를 한 번에 보여주지 않고, 단위갯수별로 보여주는 방법이다. 티스토리 블로그 게시글이 page별로 보여지는 것도 페이지네이션이고, 인스타그램 피드처럼 스크롤을 내릴 때 새로운 글들이 불러와지는 것도 페이지네이션이다. 페이지네이션을 제대로 구현하려면 백엔드 API의 구현도, 프론트엔드의 로직도 그에 맞게 설계되어야 한다. 페이지네이션 방법 페이지네이션에는 크게 두 방법이 있다. 1. Offset-Based Pagination (오프셋 기반) : Offset & Limit 이용. * 데이터를 불러오기 시작할 시작점과, 읽어들일 정보의 수를 각각 OF.. 2021. 5. 14. [React.js] useEffect 더 잘 사용하기 리액트 훅에서 useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 해주는 Hook이다. class형 life cycle methods로 생각하면 componentDidMount + componentDidUpdate + componentWillUnmount 가 합쳐진 거라고 생각할 수 있다. ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org 다양한 사용 케이스 참고 ↓ stackoverflow.com/questions/53070970/infinite-loop-in-useeffect# Infinite lo.. 2021. 5. 1. [그룹 스터디 프로젝트] 네 번째 미팅 - 구현 In Progress! (0411) 회의록 Weekly Meeting - 210411 [진행사항 공유] 백엔드 * Swagger로 API 주소 및 데이터 정리 * 깃헙에서 Clone해서 서버 돌리면 접근 가능 * 고양이 CRUD 구현AWS 셋업 (백엔드 서버용) * Windows 사용 시 PuTTY 필요 * IAM 계정 팔 것 * Jenkins라는 CI(Continuous Integration) 툴 사용할 지 추후 결정 프론트엔드 * 메인화면 (로그인 / 회원가입) 구현 * 소셜 로그인 - 네이버, 카카오톡 > 카카오 - 로그인 성공시 액세스 토큰 반환 > 네이버 - URL로 정보를 반환. location 사용해 후처리 * 유저 메인화면 (고양이 정보) 구현 * 고양이 추가화면 구현 * 게시판 구현 진행중 [의논 사항] 1. 로그인 관련 .. 2021. 4. 30. [그룹 스터디 플젝] 두 번째 미팅 - 본격적 구현 전 방향 설정 (0401) 회의록 회의2 (20210401) 1. 프론트엔드 백엔드 서비스 분리에 관해서 논의. : SH님이 제시한 자료에서 전자(통합)와 후자(분리)에 대해 프론트 서비스와 백엔드 서비스를 AWS로 완전히 분리하는 것이 전자(통합)에 비해, 취할 수 있는 이득이 많다는 의견이 주류. 2. 프론트의 배포는 AWS 예정, 백엔드의 경우도 AWS 예정. Team 1. IA와 흐름도 기반으로 4월4일 (일)에 전체적인 API 네이밍, 깃관련 규칙에 관련해 논의. Front 1. 현재 일정으로 4월4일(일)부터 폴더 구조화 및 페이지 분담 예정. 4월5일(월)부터 개발 착수예정 기타 (HY님 의견) 개발을 시작하기 전에 깃허브에서 이슈를 활용해보자 서론 (혹은 변명) 그룹 스터디 프로젝트를 하면서 많이 배우고 있다. 책과.. 2021. 4. 24. 이전 1 다음
