likeornament 님의 블로그

프로젝트 진행 중 클라이언트 컴포넌트에서 useRouter()를 사용하면  NextRouter was not mounted라는 오류가 떴다.해당 오류는 useRouter() 훅이 서버 사이드에서 호출될 때 발생하는 오류이다. "use client";import { useRouter } from "next/router";export default function RecentActivities() { const router = useRouter(); ... return (...);};내가 작성한 코드를 보면 코드의 상단에 "use client"를 적어주어 클라이언트 컴포넌트로 변경했다.그렇다면 클라이언트 사이드에서 useRouter()가 호출되었기 때문에 문제가 없어야 하는데 왜 오류가 발생한 걸까? ..

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..

프로젝트를 진행 중 CORS 에러가 발생했다.   CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션의 보안 정책 중 하나로, 클라이언트가 서로 다른 출처(Origin)에서 자원을 요청할 때 브라우저가 허용할지 말지를 결정하는 메커니즘이다.  즉, 서로 다른 도메인끼리 데이터를 주고 받을 수 없기에 백엔드에서 CORS 관련 설정을 해주어야 한다.  그런데 백엔드에서 CORS 관련 설정을 다 했음에도 불구하고 해당 오류가 계속해서 발생하였다... //SecurityConfig.java@Configurationpublic class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity h..

해당 내용은 제로초님의 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) =>..

프로젝트 중 MSW를 다운받기 위해 ' npx msw init public/ --save' 명령어를 입력했는데이러한 오류가 떴다.구글링을 해보니 %USERPROFILE% 환경변수가 잘못 설정이 되었다고 하는데...path에 환경변수는 잘 들어가 있었다.경로도 문제 없고, Node.js를 재설치 해도 같은 오류가 발생했다.혹시나 싶어서 내 노트북으로 해봤는데 이러한 오류가 뜨지 않았다.그렇다면 내 데스크탑이 문제라는 건데... 그래서 C:\Users\user 경로에 존재하는 .npmrc 파일을 열어봤는데' prefix=%USERPROFILE%\AppData\Roaming\npm' 이러한 내용이 적혀있었다.이 경로는 잘못된 경로다...위의 경로는 %USERPROFILE% 환경 변수가 제대로 확장되지 않아 잘..