likeornament 님의 블로그

Tanstack Query(예전 명칭: React Query)는 데이터 패칭, 캐싱, 동기화 및 상태 관리 라이브러리다. 입대 전에 학교 선배들과 했던 프로젝트에서는 상태 관리할 때 Redux를 사용했다.그런데, 데이터를 가져올 때 세 가지 동작(loading, error, success)에 대한 코드를 다 작성해야 하니 코드량에 대한 부담이 엄청났다. 그래서 이번 프로젝트에서는 코드량의 부담이 적은 Tanstack Query를 사용했다.[특징]1) 데이터 패칭과 캐싱Tanstack Query의 큰 장점인데, 데이터를 요청하고 응답을 캐시하여 동일한 요청에 대해 반복적으로 서버와 통신하지 않도록 한다.사용자가 매우 빠른 속도로 컨텐츠를 볼 수 있어 UX 증대 2) 자동 리패치여러 데이터 상태를 제공하기에..

Auth.js(이전 명칭: NextAuth.js)는 Next.js에서 인증 시스템을 구현하기 위해 설계된 오픈 소스 라이브러리다. 장점Login Provider로 구글, 네이버, 카카오 등의 소셜 로그인 등을 지원하기에 간편 로그인을 쉽게 구현할 수 있다.Credential Provider로 기본적인 로그인, 로그아웃을 지원하고 로그인에 따른 쿠키를 관리하기 쉽다.위의 장점들 때문에 프로젝트에서 인증 시스템을 구현할 때 Auth.js를 사용했다.이제 설치 방법과 구성요소, 사용법에 대해 알아보자.1. 설치$ npm i next-auth@beta위의 명령어로 auth.js 설치한다.@auth/core 관련 작업은 Auth.js가 알아서 처리하기에 굳이 직접 설치할 필요는 없다. npx auth secret..

해당 내용은 제로초님의 React 기본 강좌를 듣고 정리한 내용입니다.https://youtu.be/aYwSrzeyUOk?si=9PrkwJyQyRiCFFfc 3년 전에 동아리에서 리액트로 프로젝트를 했을 당시빨리 개발을 해야 한다는 부담감에 리액트 공부도 하지 않은 상태로 무작정 코딩을 했다.그때 프로젝트는 next.js로 했었는데 리액트도 모르는 상태에서 당연히 제대로 했을 리가 없다.그냥 '이런 식으로 하면 되겠지...?'라는 생각으로 코딩을 했었다.그래서 전역을 한 후 리액트를 공부해야겠다는 생각을 하고 제로초님의 강의를 들으며 공부했다.이 강의의 좋았던 점은 Create React App으로 빠르게 React 개발 환경을 만드는 것이 아닌Create React App 없이 하나하나 라이브러리를 설..

호출스택과 이벤트 루프에 대한 내용은 아래의 제로초 TV 자바스크립트 강의를 참고하였습니다.https://youtu.be/XkOxLB7MCIk?si=XrU_1zX6Voy53-Zl 자바스크립트에는 비동기 함수가 있어 다른 언어들과는 코드들이 다른 방식으로 작동하기 때문에 자바스크립트를 공부한다면 알아야 할 가장 중요한 내용 중 하나라고 생각합니다.일단 먼저 호출 스택과 이벤트 루프의 개념도를 먼저 보겠습니다.여기에서는 백그라운드(background)와 태스크 큐(task queue)라는 개념도 나옵니다. 1. 호출 스택함수들이 실행되는 공간이 바로 호출스택입니다.여기서 실행된 함수들은 호출스택에서 빠져나오게 됩니다.2. 백그라운드타이머를 처리하거나 이벤트 리스너들을 저장하는 공간입니다. setTimeout..

해당 내용은 아래의 제로초님 강의 영상을 듣고 정리한 내용입니다.https://youtu.be/NUOPdY14JKo?si=eTQwg49sclen6YLr 제로초님 javascript 강의를 듣던 중 너무 좋은 내용이 있어서 정리하면서 복습할 겸 글을 쓰기로 했다.이 내용은 javascript 뿐만 아니라 다른 언어에서도 공통적으로 적용이 되니 다른 사람들이 많이 봤으면 좋겠다. let numOne = '';let operator = '';let numTwo = '';const $operator = document.querySelector('#operator');const $result = document.querySelector('#result');const onClickNumber = (event) =>..