무한스크롤 #32

beingPracticer · 2019-11-07T13:56:11Z

No description provided.

why 스타일링 작업한 컴포넌트가 너무 비대해져서 헤더 바디 푸터로 분리 how composition 이라는 곳을 만들어서 컴포넌트의 집합체들과 재사용을 하지 않는 컴포넌트들을 관리하기로 함 Container가 component들을 모아서 관리하는 곳으로 주 데이터 요청을 담당한다.

why 데이터 요청을 확인하기위해서 content 하나로 확인하는 쿼리 작성 더보기 부분 쿼리가 동작하는지 확인하기 위해서 요청 임시로 작성 how 피드들의 content를 확인하는 요청 쿼리를 apollo client로 작성 offset과 limit(neo4j에서는 skip과 limit)이 동작하도록 값을 넘기고 추가 fetch를 해오는 부분 동작을 확인하기 위해서 ref 동작 확인을 위한 연결의 과정이므로 정리되지 않은 상태 pagination은 cursor based 방식을 적용할 예정

why 재사용 가능성이 있고 파일이 너무 길어지기 때문에 분리함 how hook 디렉토리안에 useScrollEnd로 분리

why 기존에는 같은 데이터를 받아서 데이터 요청이 잘 작동하는지 확인하기 위함이었고 이번에는 실제 데이터를 받아서 데이터가 끝나면 스크롤링이 끝나는지 확인하기 위해서 작성 how offset 과 limit으로 현재 index를 기억하고 데이터 fetching을 보냄

WooYeonSeo · 2019-11-21T07:41:05Z

만약 새로운 데이터가 새로 막 생기면 같은 데이터를 또 조회해 올 수 있음 이를 개선하기 위해서 cursor based pagination이 필요
offset 갯수에 대해서 도 생각이 필요함
맨 마지막 페이지에 계속 있으면 계속 데이터를 요청함
각 페이지의 정보를 가지고 있을 수도 있음(뒤로가기의 경우)
useMemo에서 fetching 하는 바람에 계속 데이터를 중복으로 들고오는 이슈가 발생했었지만 updateQuery 의 prev에서 이전 데이터를 계속 가지고 있다는 것을 알게 되고 수정함

why client에서 피드 요청에 대한 스크롤링을 구현하기 위해서 서버쪽 api 를 임시로 작성 how graphql 에서 전달받은 시간 이후 값을 neo4j에서 쿼리로 조회 * 사용자 정보값은 추가 예정 client확인용으로 작업한 사항

This reverts commit bdbfdee.

why 사용하지 않는 코드가 있음 how cursor based 말고 offset 에 해당하는 부분 코드 삭제

router, writeFeed 부분과 conflict 발생으로 머지

why feed main 페이지를 보여주기 위해서 how 규종님이 작업하신 feed write 컨테이너 붙임 feed -> Feed 로 폴더이름 변경

why render쪽에서 checkEnd에서 하면 맨끝에서 계속 불러지고 state 변경에 따라 랜더링 할 수 있기 때문에 how useEffect에서 checkEnd값에 따라 render 되게 변경

why ci 에서 app test에서 provider 없어서 useQuery를 실행 할 수 없음 how app.test.tsx에서 provider 값 받아서 랜더링 되게 수정

why 작업중이던 내용이 올라감 how 삭제하고 올림

why 불필요한 주석으로 읽기 좋지 않음 how 주석 console삭제

why 비동기로 scrollEvent 를 감지하기 위해서 사용 how intersection observer를 hook으로 분리하여 사용

why react 에서는 Key로 반복적으로 랜더링되는 컴포넌트에 값을 주어야 함 how 작성된 시각으로 고유한 key 값을 등록

why 매직넘버가 가독성을 해침 how 날짜가 없을 때 데이터를 모두 조회하기 위해서 cursor에 MAX_DATE 상수 지정

why props가 명확하지 않은 이름으로 만들어져있었음 재사용이 많이됨 how 공통 컴포넌트에 있는 component로 교체

why 공통 컴포넌트로 프로필 로딩을 변경하면서 필요없어짐 how 삭제

why 같은 역할을 하는 FeedVars interface가 다른 인터페이스들과 떨어져있어서 가독성이 떨어짐 how FeedVars 인터페이스를 같은 위치로 이동

why 배열에서 계속 사용될 수 있는 interface임 how 공통 interface 파일로 분리

why 어떤 형태로 쿼리를 넣고 반환받는지가 애매함 how 쿼리를 파싱해주는 함수에 타입지정

why FeedContents가 이미 최상위 container 로 감싸고 있음. how <> </> 빈 프레그먼트 삭제

why 어떤 노드에서 가지고 온 값인지에 대해 명확하지 않음 how 해당 노드에 맞는 이름을 부여 f->feed a->user

why 불필요한 주석으로 가독성 저하 how 주석삭제

why 테스트환경은 브라우저이기 때문에 intersection api 가 없음 how mock 모듈 추가로 테스트 통과하게 설정

커서가 같은 값이 넘어와서 찍었었는데 실수로 못지움 --> 삭제

why 태그의 이름이 시멘틱하지 않음 how 제일 마지막에서 추가 로딩 여부를 확인하는 container 의 역할이므로 LoadCheckContainer 로 변경

…nite_scroll ### 개발한사항 - infinite scroll insepctobserver 로 구현 - hook으로 분리 - 코드리뷰 받은사항 수정해서 반영 - 불필요한 fragment 삭제 - 쿼리 네임스페이스 변경 - 매직넘버 상수분리 - component key값 지정 - 파라미터 타입지정 - 인터페이스 분리 - 프로필 공통 컴포넌트 사용하도록 수정 branch : feature-32/infinite_scroll

why like 버튼 동작 시 디비에 저장되어야 함 how - cookie로 사용자 정보 캐치 - 피드 정보에 feedid추가 - feedId로 해당 피드와 사용자 간의 like relation 연결 (중복으로 되지 않도록 merge 로 연결) - cors 설정 참고 unlike는 아직 안함

글쓰기 컴포넌트 안보여서 컴포넌트 추가로 보이게 처리

why 디비에서 비교할 때 datetime string으로 비교하기 위해서 how 같은 형태의 string으로 변환하는 util함수 작성

datetime 한국시간에 맞게 설정

마지막 피드일 때 없는 프로퍼티에 접근해서 생기는 오류 수정 마지막 피드일때 안내 컴포넌트 추가

친구가 없을 때 생긴 알림이 없기 때문에 버그가 발생했었음 그래서 친구 없을 때 예외처리

입력된 댓글 갯수 연결 댓글 입력할 때 자동으로 카운트가 올라가지는 않습니다..

피드 이미지 레이지 로딩 구현

…der_bugfix [Add] feed image lazy loading #32

beingPracticer added frontend 피드 labels Nov 7, 2019

beingPracticer changed the title ~~피드 무한스크롤~~ 무한스크롤 Nov 7, 2019

WooYeonSeo self-assigned this Nov 18, 2019

sang-eun added this to the 2주차 milestone Nov 18, 2019

WooYeonSeo added a commit that referenced this issue Nov 21, 2019

[Refactor] 스크롤 끝 확인하는 부분 hook 파일 분리 #32

fb20c56

why 재사용 가능성이 있고 파일이 너무 길어지기 때문에 분리함 how hook 디렉토리안에 useScrollEnd로 분리

WooYeonSeo mentioned this issue Nov 22, 2019

[우연서]w3_리뷰요청_피드_스크롤링 #121

Closed

WooYeonSeo added a commit that referenced this issue Nov 22, 2019

Revert "[Simplyfy] client 쿼리 조회하는 부분에서 필요 없는 코드 삭제 #32"

34ff701

This reverts commit bdbfdee.

WooYeonSeo added a commit that referenced this issue Nov 24, 2019

[Simplyfy] Feed 데이터 불러오는 부분에 필요 없는 부분삭제 #32

6a1430d

why 사용하지 않는 코드가 있음 how cursor based 말고 offset 에 해당하는 부분 코드 삭제

WooYeonSeo added a commit that referenced this issue Nov 25, 2019

[Merge] develop 부분 merge #32

f2dd397

router, writeFeed 부분과 conflict 발생으로 머지

WooYeonSeo added a commit that referenced this issue Nov 25, 2019

[Merge] develop 과 merge #32

3b8cc63

why feed main 페이지를 보여주기 위해서 how 규종님이 작업하신 feed write 컨테이너 붙임 feed -> Feed 로 폴더이름 변경

WooYeonSeo added a commit that referenced this issue Nov 25, 2019

[Fix] app test 에서 apollo privider 추가되게 수정 #32

37226cf

why ci 에서 app test에서 provider 없어서 useQuery를 실행 할 수 없음 how app.test.tsx에서 provider 값 받아서 랜더링 되게 수정

WooYeonSeo added a commit that referenced this issue Nov 25, 2019

[Fix] intersection observer 부분이 올라가서 삭제 #32

96c6e09

why 작업중이던 내용이 올라감 how 삭제하고 올림

WooYeonSeo added a commit that referenced this issue Nov 25, 2019

[Simplyfy] console log, 주석 삭제 #32

d6b1a03

why 불필요한 주석으로 읽기 좋지 않음 how 주석 console삭제

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Add] feed scroll intersect observer 사용으로 변경 #32

9e5f57e

why 비동기로 scrollEvent 를 감지하기 위해서 사용 how intersection observer를 hook으로 분리하여 사용

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Fix] feed component key 설정 #32

ee181e2

why react 에서는 Key로 반복적으로 랜더링되는 컴포넌트에 값을 주어야 함 how 작성된 시각으로 고유한 key 값을 등록

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Fix] 매직 넘버 상수로 분리 #32

faa039d

why 매직넘버가 가독성을 해침 how 날짜가 없을 때 데이터를 모두 조회하기 위해서 cursor에 MAX_DATE 상수 지정

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Fix] 프로필 이미지 공통 컴포넌트로 교체 #32

7170448

why props가 명확하지 않은 이름으로 만들어져있었음 재사용이 많이됨 how 공통 컴포넌트에 있는 component로 교체

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Remove] 사용하지 않는 인터페이스 삭제 #32

43be102

why 공통 컴포넌트로 프로필 로딩을 변경하면서 필요없어짐 how 삭제

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Simpyfy] 공통으로 사용될 수 있는 interface 분리 #32

17da564

why 배열에서 계속 사용될 수 있는 interface임 how 공통 interface 파일로 분리

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Set] 파라미터에 타입 지정 #32

6de5201

why 어떤 형태로 쿼리를 넣고 반환받는지가 애매함 how 쿼리를 파싱해주는 함수에 타입지정

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Remove] 불필요한 fragment 삭제 #32

ae9ca29

why FeedContents가 이미 최상위 container 로 감싸고 있음. how <> </> 빈 프레그먼트 삭제

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Set] 쿼리의 네임스페이스 적용 #32

7439afd

why 어떤 노드에서 가지고 온 값인지에 대해 명확하지 않음 how 해당 노드에 맞는 이름을 부여 f->feed a->user

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Remove] 주석삭제 #32

7fc98dc

why 불필요한 주석으로 가독성 저하 how 주석삭제

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Add] intersection observer test용 모듈 추가 #32

c40c5e6

why 테스트환경은 브라우저이기 때문에 intersection api 가 없음 how mock 모듈 추가로 테스트 통과하게 설정

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Remove] 콘솔 로그 삭제 #32

a91865a

커서가 같은 값이 넘어와서 찍었었는데 실수로 못지움 --> 삭제

WooYeonSeo added a commit that referenced this issue Nov 26, 2019

[Update] styled component 이름 수정 #32

f6cbf18

why 태그의 이름이 시멘틱하지 않음 how 제일 마지막에서 추가 로딩 여부를 확인하는 container 의 역할이므로 LoadCheckContainer 로 변경

WooYeonSeo closed this as completed Nov 27, 2019

WooYeonSeo added a commit that referenced this issue Nov 28, 2019

[Add] writing Feed 추가 #32

87ee60a

글쓰기 컴포넌트 안보여서 컴포넌트 추가로 보이게 처리

WooYeonSeo added a commit that referenced this issue Dec 4, 2019

[Add] datetime 변환용 date util #140 #32

a91e04c

why 디비에서 비교할 때 datetime string으로 비교하기 위해서 how 같은 형태의 string으로 변환하는 util함수 작성

WooYeonSeo added a commit that referenced this issue Dec 13, 2019

[Fix] datetime locale 설정 #32

1caf6aa

datetime 한국시간에 맞게 설정

WooYeonSeo added a commit that referenced this issue Dec 13, 2019

[Fix] 친구 없을 때 피드 등록 안되는 버그 수정 #32

546d5ed

친구가 없을 때 생긴 알림이 없기 때문에 버그가 발생했었음 그래서 친구 없을 때 예외처리

WooYeonSeo added a commit that referenced this issue Dec 13, 2019

[Fix] 댓글 갯수 보여지게 수정, 공유 갯수 삭제 #32

404a2e9

입력된 댓글 갯수 연결 댓글 입력할 때 자동으로 카운트가 올라가지는 않습니다..

WooYeonSeo added a commit that referenced this issue Dec 22, 2019

[Add] feed image lazy loading #32

e946ea7

피드 이미지 레이지 로딩 구현

WooYeonSeo added a commit that referenced this issue Dec 23, 2019

Merge pull request #252 from connect-foundation/feature-33/comment_or…

0aac847

…der_bugfix [Add] feed image lazy loading #32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

무한스크롤 #32

무한스크롤 #32

beingPracticer commented Nov 7, 2019

WooYeonSeo commented Nov 21, 2019 •

edited

Loading

무한스크롤 #32

무한스크롤 #32

Comments

beingPracticer commented Nov 7, 2019

WooYeonSeo commented Nov 21, 2019 • edited Loading

WooYeonSeo commented Nov 21, 2019 •

edited

Loading