개발 170 많은 데이터를 보여주는 방법에 대하여 (Tanstack query,table,react-virtual) 들어가며 안녕하세요. 편리함을 추구하는 개발자 핸디입니다. 이번 글에서는 Tanstack query, Tanstack table, Tanstack react-virtual로 이루어진 Tanstack 라이브러리 3형제를 이용해서 유저에게 더 많은 데이터를 편리하고 깔끔하게 보여주는 방법에 대해서 적어보았습니다. 대상독자는 무한스크롤, 혹은 페이지네이션을 이용하여 유저에게 데이터를 보여주고 싶지만, 개발하기가 귀찮아서 편리하게 만들고 싶은 개발자입니다. 시작하겠습니다. Tanstack Table Tanstack Table은 테이블을 만들어주는 라이브러리입니다. 여기서 주목할 점은 Headless와 React,Vue,Solid 의 환경에서도 동작한다는 점입니다. Tanstack Table은 모든 기능 및 디자.. 2024. 1. 21. [회고] 2023년 연간 회고 코딩 요약 아주 멋지게도 wakatime에서 내가 개발한 코드의 연간 리포트를 해줘서 코딩 요약을 대신해보고자 한다. 대략 1000시간을 코딩을 하였다. 일만 시간의 법칙에 따라면 대충 10년차 되면 전문가라고 할 수 있을 것 같다. 하루 평균 3시간 이상을 코딩하였으며 전체 Top 3%이상이라니 기분이 좋다. 내년에는 1%에 도전하고자 한다. 나는 몰랐지만 내가 수요일날 가장 열심히 코딩을 했더라. 이때가 가장 집중이 잘됬나 싶었다. (주간 회의가 이때 있는데 그럼에도 시간이 많다는 것이니깐) 코딩 언어는 타입스크립트, 다트 순으로 많았다. 주력으로 하고 있는 리액트, 넥스트 외에 플러터의 다트, 그리고 5번째로 많이 쓴 엘릭서가 있따.. (실은 20시간밖에 안되서 약간 민망하다) 이번 년도에는 타입스.. 2024. 1. 2. [개발회고] 23년 11월 회고 개발 이번 달은 무난무난한 한달이었다. 회사 AI 기술중에 노래와 가사를 싱크해주는 기술이 있는데, 해당 기술에 대한 에디터툴을 개발했고 이에 대한 QA 및 사용자 테스트를 진행중이다. 가장 빡센 기능은 Drag & Drop으로 선택하고 옮기고 또 재생하고 마우스 및 키보드 단축키도 연결하고 쨋든 이것저것 할게 많았다. 에디터툴은 어쩔 수 없이 복잡하다. 기능 요구 사항이 단순 웹보다 훨씬 높기 때문이다. 그래도 어쩌겠나? 팀원이 요구하면 만들어주는 것이 개발자의 덕목이 아니겠는가? 다행스럽게도 첫번째 회사인 티맥스에서 대시보드를 만들어보면서 Drag & Drop 기능을 만들어본 경험이 있어서 이번엔 좀 쉽게 했다. 코딩시간 | 86.5시간 이번달 많이 했다고 했는데 생각보다 코딩 시간이 짧다. 이유를 .. 2023. 12. 5. [Next.js] NextAuth와 Prisma로 인증 기능 구현하기 들어가며 이번 글에서는 NextAuth와 Prisma 그리고 PostgreSQL를 이용하여 인증 기능을 구현하는 글입니다. Prisma와 PostgreSQL의 세팅이 완료된 시점을 기준으로 하고 Google 로그인을 예제로 합니다. 사전 준비 Google 로그인을 하기 위해선 구글 로그인의 clientId와 clientSecret 키가 필요합니다. 이것을 발급받는거부터 빠르게 시작하겠습니다. 키 발급 구글 소셜 로그인 Client ID와 Client Secret Key 설정방법 구글에서 제공하는 소셜 로그인에 사용되는 Client ID와 Client Secret Key를 발급받는 과정을 설명합니다. medipress.co.kr 해당 글을 읽은 다음에 두 개의 값을 가져오면 되겠습니다. 그 외에 설정해야할.. 2023. 11. 27. 이전 1 2 3 4 5 ··· 43 다음
