react.js4 [React.js] 리액트에서 무한 스크롤 구현 + 모바일 문제 해결 캣츄 프로젝트의 게시판 목록에서, 페이지네이션의 일종으로 무한 스크롤을 구현하기로 했다. 1. 페이지네이션 (Pagination)이란? 백엔드에 저장된 모든 정보를 한 번에 보여주지 않고, 단위갯수별로 보여주는 방법이다. 티스토리 블로그 게시글이 page별로 보여지는 것도 페이지네이션이고, 인스타그램 피드처럼 스크롤을 내릴 때 새로운 글들이 불러와지는 것도 페이지네이션이다. 페이지네이션을 제대로 구현하려면 백엔드 API의 구현도, 프론트엔드의 로직도 그에 맞게 설계되어야 한다. 페이지네이션 방법 페이지네이션에는 크게 두 방법이 있다. 1. Offset-Based Pagination (오프셋 기반) : Offset & Limit 이용. * 데이터를 불러오기 시작할 시작점과, 읽어들일 정보의 수를 각각 OF.. 2021. 5. 14. [그룹 스터디 프로젝트] 여덟 번째 미팅 - Really Almost there!! :'D (0511) 회의록 [해야할 일] 백엔드 1. 이미징 처리 관련 백엔드 수정 필요. 2. AWS 프론트엔드 CORS관련 수정 확인 필요. 프론트엔드 1. 이미지 등록 부분 백엔드랑 연동 2. AWS 프론트엔드 서버 CORS 관련한 이슈 확인 필요. [특이사항] 팀전체 1. 소셜 로그인 기능 구현 미완성. 2. 몸무게 그래프 관련한 로직 구현 미완성. 3. 이미지 추가 부분 - 고양이 및 게시글 - 구현 미완성. [계획] 1. 빠른 시일 내에 부족한 부분을 생략 및 마무리 하고 실제 AWS서버에 정상적으로 배포. 2. 고생한 본인의 어깨 토닥토닥 해주기 회의 추가 설명 우리의 비교적 기나긴(?) 여정이 끝나가고 있다! React.js의 R자도 모르던 내가 어느 정도 자신감을 얻게 된 프로젝트여서 ㅠㅜ 너무 열심히 같이.. 2021. 5. 12. [그룹 스터디 프로젝트]일곱 번째 미팅 -Almost there!! (0502) 회의록 [현재 상황 공유] 백엔드 1. AWS EC2 배포 2. API 수정 3. 페이징 처리 * 무한 스크롤로 구현 * lastPostId, size를 POST 리퀘스트 보낼 때 같이 보내면 됨 1. 깃 머지, 데이터베이스 정리 2. 고양이 추가 할 때 이미지(photoFile) * local folder에 저장함 * deploy된 서버에는 어디에 저장할 지 연구 * DB column에 파일 이름만 해쉬해서 저장 (수정) > 방법: 파일 이름 + 업로드 날짜 프론트엔드 1. 소셜 회원가입 / 로그인 2. 다크 모드 적용 * theme provider 더 적절히 사용 3. 백엔드 연동 + 스타일 적용 1. PropTypes 추가 2. 백엔드 연동 + 스타일 적용 3. 전체적 Applayout 적용 (반응.. 2021. 5. 12. [React.js] Each child in a list should have a unique "key" prop 계속 뜰 때 분명 나는 unique한 key 값을 준 것 같은데!!!!!!! Warning: Each child in a list should have a unique "key" prop 에러가 계속 떴다. ㅜ 검색을 열심히 해보니 stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView` I built an app with ReactNative both for iOS a.. 2021. 5. 12. 이전 1 다음
