todays-recipe

기존 방식은 이렇게 api를 받아와 export해서,필요한 페이지에서 import해서 사용했음.받아오는 데이터가 많아 렌더링에 오랜 시간이 걸려 점점 개발 속도가 지체되어 일단 데이터 캐싱을해서 보완을 했다. 그리고 지금은 그 다음 단계인 무한 스크롤 코드를 짜고 있는

기존 데이터의 제목 또는 내용을 입력 후 검색 버튼을 눌러 내가 원하는 필터링 된 데이터를 얻고 싶었다.

useCallback, useMemo, React.memo

왜 무한 스크롤?ux 고려: 사용자가 볼 각 아이템은 이미지가 포함되어 있음. 이미지의 크기를 고려한다면 해당 페이지에 페이지네이션 방식은 적합하지 않다고 생각했음. 사용자가 페이지를 전환해 소량의 아이템을 한 페이지 씩 확인하기보다 필요에 따라 스크롤을 내리면 같은

디테일 페이지 이동 후 브라우저 뒤로 가기를 통해 다시 레시피 페이지로 돌아왔을 때, 리렌더링이 발생해 페이지 초기 상태로 돌아옴. 기존 분류 필터, 소팅을 거친 페이지를 기억하기 위해 필터링과 소팅 그리고 스크롤 상태를 기억해야했음. 기존 코드 및 상태 화면 녹화를

Next.js에서는 'next/head'에서 Head를 import해 title을 변경해주면 되지만, React는 SPA 방식이기 때문에 하나의 index.html만 크롤링되어 각 페이지에 대한 정보를 나타내기 어렵다.웹사이트 탭 이름을 동적으로 변경하고 싶어 reac

alt 속성은 img 태그에 대체 텍스트를 제공함. 이는시각 장애가 있는 사용자들이 스크린 리더를 사용할 때, alt 태그가 이미지의 내용을 설명해 줌.불특정 이유로 이미지가 로드되지 않았을 때, alt 태그가 대신해 이미지 정보 제공.검색 엔진 최적화 (SEO): 검

React 내장 API.컴포넌트를 렌더링하는 시점에 비동기적으로 로드할 수 있게 해줌.코드 분할을 통해 필요한 부분만 초기 로드, 나머지 부분은 필요 시 로드.CSR의 단점 중 하나인 초기 로딩 시간을 어느 정도 개선할 수 있음.각 페이지들은 첫 렌더링이 필요한 시점에

지난 팀 프로젝트에서는 완성 후 특별히 성능 개선에 대해서 신경쓰지 않았다. 디자인 요소 외 이미지 파일 등을 많이 사용하지 않아서? 확인할 수 있는 지표는 괜찮은 점수가 나온 것 같다. + 우리 팀원 전부가 잘해줬던 덕분에.그러나 이번 개인 프로젝트에서는 많은 이미지