강디너의 개발 일지

Next.js 에서 데이터를 가져오는 방법이 여러 가지 있습니다. getServerSideProps getStaticPaths getStaticProps Next.js에서는 서비스에 따라 다양한 방식으로 콘텐츠를 렌더링 할 수 있도록 지원해주는데 SSR, SSG, CSR, ISR 이 있습니다. 이러한 방식에 따라 데이터 패칭 하는 방식이 다릅니다.(사용하는 함수도 달라요.) getServerSideProps - SSR 공식문서 서버에서만 실행되고, 브라우저에서는 실행되지 않기 때문에 브라우저에 로그가 찍히지 않습니다. /* context object 에 있는 데이터 params: 페이지가 동적 경로일 경우 - 페이지 이름이 [id].js일 경우 params는 { id: 값 } req: HTTP reque..

React.js에서 타이틀, 설명 등 SEO 구색을 어느 정도 맞추기 위해서는 react-helmet 이란 라이브러리를 사용합니다. Next.js에서도 그럼 헬멧을 사용해야하나 ? 라는 의문에서 조사를 시작했습니다. 구글에서는 이제 SPA방식의 웹사이트도 어느 정도 크롤링 잘해주지만 특정 페이지의 title, og image 등을 바꾸기 위해 스크립트를 통해서 수정합니다. (카톡, 페이스북 공유 등.) react-helmet 동작 방식 Next.js는 조금 다릅니다. SSR 방식이기 때문에 굳이 렌더링 이후, 스크립트를 통해서 meta tag들을 바꾸지 않아도 됩니다. 렌더링 할 때 meta tag를 넣어서 렌더링 해주면 되기 때문입니다. Next.js에서는 편리하게 지정할 수 있도록 next/head ..

에러 바운더리 사용해보기 공통 오류 컴포넌트 적용하기 특정 컴포넌트만 다른 오류 컴포넌트 적용하기 고민 공식 문서 : https://react-query.tanstack.com/guides/suspense 코드 : https://github.com/DinnerKang/study_react/tree/main/packages/react-query 1. 공통 오류 컴포넌트 적용하기 최상위 루트에서 선언하고 QueryClient에 defaultOptions를 설정해서 suspense 값을 변경해줍니다. 그 후 ErrorBoundary를 선언해주면 하위 컴포넌트들은 이제 패칭 오류가 날 때 해당 ErorrComponent가 보입니다. import { QueryClient, QueryClientProvider, u..

React-Query는 이전 React 과제를 할 때 아무것도 모른 상태에서 사용해서 장점을 크게 깨닫지 못했었습니다. 그때 당시에 React-Query를 왜, 어떤 상황에서 사용하는지, 장점이 무엇인지 알고 넘어갔어야 했는데 그저 이런 라이브러리가 있구나 ~ 하고 넘어갔었습니다. 사내 기술 세션에서 React-Query 관련 이야기가 나오고, 발표도 해주셔서 관심이 가고, 도입하려면 스터디가 필요하다는 생각에 따로 공부해야겠다고 마음먹고 적게 되었습니다. 우선 React-Query의 장점은 많지만, 아래 장점들 때문에 프로젝트에서 사용하고 싶었습니다. 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 들어가기 전..

2년 넘게 있던 딜리셔스 생활을 마쳤습니다. 조금 더 다양하고 넓은 경험을 하기 위해 이직했습니다. 왜 ? 특별히 맘에 안 들어서 이직을 마음먹은 것이 아니라, 조금 더 다양하고 넓은 경험을 하고 싶고, '다른 회사는 어떻게 일할까? 다른 개발자들은 어떻게 협업할까?' 등 여러 가지로 궁금했습니다.(한창 궁금한 게 많을 나이죠..) 회사를 선택하는 것도 예전 이직할 때 생각했던 것들을 만족하면 될 것 같았습니다. 과정 여러 회사의 과제, 면접을 진행하게 되었고, 그 와중에 성장도 많이 한 것 같습니다. 처음에는 말도 잘 못하고 어정쩡하게 대답했다면, 나중에는 여유롭게 웃으면서 면접을 보는 상황까지 갔습니다.(이래서 가장 원하는 곳은 나중에 봐야 하나 봅니다.) 과제, 면접을 진행하면서 좋았던 점이 있는데..