본문 바로가기

리액트 25

[Next.js] NextAuth를 활용한 우아한 유저 관리 들어가며 이번 글은 NextAuth를 활용하여 실제 서비스에서 우아하게 유저를 관리한 경험에 대해 말씀드리는 글입니다. NextAuth와 Middleware를 이용해서 인증, 인가를 어떻게 관리하였는가에 대한 주제를 다룹니다. 다루지 않는 내용 해당 글에서는 NextAuth의 기본 사용법에 대해 상세히 알려주지 않습니다. (공식문서 아주 추천) Next13 환경에서 구현된 예시지만, 다른 버전에서도 크게 상이하진 않습니다. 우아한 유저 관리 이전까지 NextAuth는 주로 구글인증기로만 써왔습니다. 정확히 말하자면 인증만 썼던 거죠. 하지만 실제 서비스를 하다 보면 인증으로만 끝나지 않고 해당 유저에게 권한까지 주는 인가 단계를 거쳐야 합니다. 이전까지 구현한 서비스들은 인증, 인가에 대한 큰 구별 없이.. 2024. 2. 25.
많은 데이터를 보여주는 방법에 대하여 (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.
[Phoenix] Phoenix LiveView 간단 리뷰 들어가며 이번 글에서는 Phoenix LiveView(이하 라이브뷰)를 다뤄보면서 느꼈던 장단점을 리액트와 비교하면서 느낀 점을 적어보도록 하겠습니다. 리액트는 4년차, 라이브뷰는 이제 막 사용해 본 뉴비입장으로 쓴 글이니 참고 바랍니다. Phoenix LiveView란 Phoenix liveview의 공식 설명을 살펴보고 가겠습니다. Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. - https://github.com/phoenixframework/phoenix_live_view 풍부하고, 실시간의 유저 경험을 지원하는 서버에서 랜더링 된 HTML이라고 되어있습니다. 이것만 보면 그냥 html를 랜더.. 2023. 7. 23.
[상태관리] Zustand 조금 더 편하게 쓰기 ( snippet ) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 저번 글에 이어서 이번 글에서는 Zustand를 조금 더 편하게 사용하는 방법에 대해 알아보도록 하겠습니다. [상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교 all-dev-kang.tistory.com Snippet Extension 우리가 개발을 하다보면 많은 Extension를 만납니다. 이미 react snippet를 쓰고 있는 저에겐 snippet extension는 코파일럿보다 훨씬 중요한 도구인데요... 2023. 7. 10.