강디너의 개발 일지

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

벌써 상반기가 사라졌다. 상반기에 별로 한 것이 없어 보였는데, 적다 보니깐 뭔가 많아져서 뿌듯하다. 1. 회사 상반기에는 초반에는 엄~~청 바쁘지는 않고 살만은 했다. 그래서 여행도 다녀오고 힐링을 좀 했던 것 같다. 1-1. 생활 음... 코로나 때문?에 재미있는 일은 특별하게 없었다. 늘 그러하였듯이 평화롭게 탁구와 플랭크... 1-2. 리뷰 사내 리뷰 시스템이 생겼다. 작년 한 해 동안 같이 프로젝트를 진행했던 동료들이 나에게 피드백을 주고, 나도 그분들에게 피드백을 주는 시스템이다. 처음에는 다들 `좋은말만 쓰지 않을까, 친한 사람한테만 좋게 하지 않을까 ?, 의미가 있을 까?` 라는 의견이 분분 했지만, 결국 평가에 들어가는 내용이다 보니 다들 솔직하게 쓰는 것 같았다. 나도 누군가를 리뷰/피..

원본 글: HTML Tips 몰랐던 것들도 있어서 정리합니다. 1. The `loading=lazy` attribute 이미지 태그에 loading=lazy 속성을 넣으면 사용자가 스크롤해서 볼 때 까지 이미지를 호출 하지 않습니다. 웹 사이트의 로딩 시간, 성능 관리 측면에서 매우 좋으며, 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있습니다. 아래 GIF를 보시면 이미지가 보일 때 쯤 로딩하는 것을 볼 수 있습니다. 2. 이메일, 전화, 문자 links Send us an email Call us Send us a message 이메일 보내기, 전화 걸기, 마지막은 문자 보내기 입니다. 3. OL의 `start` 속성. 신기방기합니다 ㅋㅋ.. 쓸일이 있을지.. 4. meter 태그 음.......

장장 4개월에 걸친 토이프로젝트가 드디어 끝났습니다. 4월 말 오픈 예정이었으나, 역시 사람일은 알 수 없기 때문에... 각자의 업무가 일단 중요하니깐... 연애도 해야하고... 서비스 한 개를 만들면서 개발 플로우를 경험하고자 홀로 도전하게 되었습니다. 프론트엔드부터 백엔드, 데브옵스까지 많은 회사 동료분들께 도움을 받아서 감사의 말씀 먼저 올립니다. 초기 시작은 간단해 보였습니다.(이렇게 큰 거인 줄 그땐 몰랐지...) 백엔드, AWS 쪽을 도전하는 것이었기 때문에, 프론트엔드는 익숙한 Vue.js를 이용했습니다. 프론트엔드 모바일 전용으로 만들었으며, PWA도 생각해서 서비스 워커를 붙였습니다. 타입 스크립트 적용과 sentry를 붙여서 오류도 클라이언트 쪽에서 로깅할 수 있도록 설정했습니다. 카카..

회사 기술 블로그에 출간했습니다...! 첨부 https://dealicious-inc.github.io/2021/05/17/axios-integrate.html Axios 통신 한줄기로 만들기 로그인 프로세스 개선 dealicious-inc.github.io

서버를 구성하지도, 백엔드 로직을 직접 짜지 않아도 백엔드 개발을 쉽게 도와주는 strapi라는 프레임워크가 있다는 것을 듣고 바로 찾아봤습니다. strapi는 엄청 복잡한 로직이 아니라면 간단한 CRUD는 금방 뚝딱 나와서 백엔드에 시간을 많이 안 쏟아도 되는 장점이 있습니다. strapi 문서에서는 opensource headless CMS라고 하며, 로컬에 띄워서 버튼 몇 번 클릭으로 테이블을 만들 수 있습니다. 튜토리얼 문서 1. 설치 CLI CLI 로 설치하려니깐 무슨... access denied 가 계속 뜨면서 설치가 안돼서 실패했습니다... Node, npm 버전만 맞추면 되는 줄 알았는데 그게 아닌가 봅니다... sudo를 통해서 권한까지 주면서 했는데 실패 ... ! 다른 설치 방법도 ..