inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 리뷰

검색 결과 페이지네이션 1페이지(일단해결)

해결된 질문

161

희주

작성한 질문수 4

0

결론부터 말하면 검색할 때 페이지네이션 현재 페이지가 1로 안 바뀌어서 바꿔봤습니다.

 

그외 궁금한 점

저는 이거 하는 과정에서 yarn dev 해놓은 상태에서 코드들을 저장 계속 하면서 고쳤는데 그럼 원래 바로바로 반영이 되잖아요. 코드에는 문제가 없어서 제대로 작동해야 했는데 페이지네이션 컴포넌트에서 props.keyword가 자꾸 undefined인 바람에 useEffect도 작동 안해서
코드가 문젠줄 알고 한참 삽질 후 그냥 vscode와 크롬 등등 다 끄고 좀 나중에 그대로 다시 켜보니까 잘 작동하게 됐는데 (yarn dev를 끊었다 다시 하는 거로는 아마 해결 안됐음)

이게 처음이 아니고 저번에도 한 번 포기하고 결국 다음날 켜보니까 코드는 그대로인데 갑자기 잘 되었는데

정확히 무엇때문에 이런 문제가 생기는건지 모르겠네요!!! (캐시? .next? 뭐 그런 거 때문인가요?)

react node.js seo graphql next.js

답변 2

1

노원두

안녕하세요! 희주님!
굉장히 꼼꼼히 공부하고 계신 것을 보니, 추후 완성될 프로젝트의 퀄리티가 기대되네요!^^

  1. 페이지네이션은 어쨌든 검색결과들의 페이지이기 때문에 영향이 존재하는 것이 맞아요!
    검색어에 따른 페이지네이션 결과는 항상 변해야하기 때문이지요!
    따라서, keyword를 전달해 주시는 것이 맞으며 현재 잘 작성하고 계신 것이랍니다!

    만약 추가적으로 더 고도화된 학습을 원하신다면, 추가적인 리팩토링 방법을 아래에 알려드릴게요!
    1단계) 키워드를 로컬데이터캐시(recoil, zustand 등)을 통해 전달 받는 방법
    2단계) 페이지 이동시 샬로우라우팅을 활용하는 방법

    나중에 시간이 나시면 해당 키워드를 참고하여 리팩토링도 도전해 보세요!^^

    추가 질문에 대한 답변도 드리자면, useEffect에서 setState는 피할 수 있으면 피하되, 상황이 어쩔 수 없다면 꼭 나쁘다고만 볼 수는 없어요!^^
    (특히, 억지로 피하려다가 오히려 유지보수를 해친다면 차라리 한 번 더 렌더하는게 나을 것 같네요!^^)
    따라서, 먼저 한 번 도전 해 보시고, 최종 결과를 보고 선택해 주세요!

  2. yarn dev 가 적용이 안되는 경우는, 어쨌든 yarn dev를 하였을 때 컴퓨터는 관련된 파일들을 모두 읽어서 하나로 묶고 어떤 내용들이 변경되었는지 등의 일을 해야 한답니다!(.next 폴더)
    하지만, 파일이 많아지면서 이러한 변화 감지가 제대로 되지 못할 수 있는데, 이럴 때는 .next 폴더를 삭제하고 다시 yarn dev를 해주시는 방법으로 시도해 보시면 좋을 것 같아요!
    (마찬가지로 타입체킹, eslint 체킹 등도 파일이 점점 많아지면서 읽어들이는데 시간이 소요되거나 잘 못 읽을 수도 있답니다^^)

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 희주님.

프론트엔드에서 페이지네이션과 관련된 문제점을 해결하기 위해 시도하신 방법들에 대해 설명해주셔서 감사합니다. 이런 문제는 주로 상태 관리 및 컴포넌트끼리의 의존 관계에서 생길 수 있습니다. 제가 몇 가지 관련된 정보를 찾아드리겠습니다.

  1. 페이지네이션 문제와 상태 관리

    • 페이지네이션 기능을 구현할 때, useEffect를 사용하여 검색어가 변경될 때마다 페이지네이션을 재설정하는 접근은 유효합니다. 다만, props로 전달받은 keyword에 의존하는 것 때문에 고민이 있으신 것 같은데요, 이는 특정 시점마다 상태를 초기화하기 위한 자주 사용하는 방법입니다. 현재처럼 props.keyword의 변화를 감지하여 그에 맞춰 상태를 재설정하는 것은 일반적입니다.
  2. 상태가 저장/전달되는 문제

    • yarn dev 상태에서 변경사항이 즉시 반영되지 않는 것은 개발 과정에서 많이 접하는 문제입니다. 이 문제는 주로 캐시나 서버 사이드 렌더링(SSR) 관련 파일들이 제대로 초기화되지 않아서 발생합니다. 이 경우 .next 폴더를 삭제하고 다시 빌드하는 방법(yarn build -> yarn dev)이 있습니다.

기존 답변 중 관련된 정보를 참고할 수 있는 링크를 첨부합니다.

  • Next.js 설치 시 새로운 요소 삭제 및 초기화 방법 - 이 링크에서는 Next.js 프로젝트 환경에서 불필요한 추가 파일들을 어떻게 정리하고 초기화 할 수 있는지를 다루고 있습니다. 비슷한 상황에서 .next 폴더나 기타 캐시 파일들을 어떻게 초기화할 수 있는지의 힌트를 얻을 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

38

1

댓글 기능 구현 중 질문드립니다.

0

66

1

쿠폰코드 발급

0

133

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

87

2

문의드립니다!! ㅠㅠ

0

101

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

76

2

_app.js 작성 이후로 에러가 발생하네요

0

93

2

학습자료

0

70

2

학습자료가 안열립니다.

0

50

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

61

0

기존강의 구매자, 업데이트 끝인가요?

0

110

3

업데이트 버전 수강

0

89

2

완벽한 프론트엔드

0

136

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

83

1

graphql 접속이 안됩니다.

0

100

2

const, let 사용 질문 드립니다.

0

70

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

122

2

회원가입 과제 피드백 부탁드립니다.

0

80

2

styled.span / styled.input "CSS 자동완성"

0

47

1

쿠폰 발급 관련

0

166

2

서버 502 error

0

247

2

쿠폰 다시 부탁드려도 될가여?

0

140

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

184

2

2분 44초 질문

0

131

3