AI Platform / Web

redux-toolkit이란 redux를 조금 더 쉽게 사용하기 위해 나온 라이브러리이다. 이 글에서는 개념보다는 쉽게 프로젝트에 redux를 적용할 수 있도록 코드 위주로 설명해 보겠다. 구현 정도는 redux로 전역 변수를 관리하는 부분까지 진행할 예정이다. 왜냐하면 Redux-Saga나 Redux-thunk 같은 미들웨어는 최근 프런트 진영에서 포일러플레이트 이슈로 잘 사용하지 않고, 대신 react-query, SWR 같은 라이브러리는 사용하는 추세이기 때문이다. 하지만, react-query나 SWR은 서버와 동기화를 위해 사용되는 것이기 때문에, 완전한 전역변수 관리는 불가능하다. 따라서 Frontend 자체의 전역변수 관리는 Redux나 Recoil을 사용하는 것이 좋다. redux-tool..

nextjs 한 번의 설정으로 모든 파일에서 사용할 수 있는 global css 적용하는 방법에 대해 알아보자. Nextjs가 12 버전에서 13 버전으로 업데이트되면서, 디렉터리 구조가 co-location이 강화된 형태로 많이 변경되었다. 따라서 특정 간단히 12 버전에서 전역 스타일 적용 방식을 알아보고, 13 버전으로 넘어가도록 하겠다 Nextjs 12. 전역 스타일 적용하기 13 버전 초반 버전까지도 12버전과 동일한 디렉토리를 사용하기 때문에, 13 버전이라도 헷갈리는 경우가 있으니 조심하자.. 따라서 우선 12와 13 버전의 가장 큰 차이점은 _app.tsx/_document.tsx(_app.js/_document.js)의 유무라고 할 수 있다. page 폴더 안에 앞의 파일이 있다면, 지금..

nextjs 버전이 올라가면서 유용한 기능들이 많이 생겨나고 있다. 여기서 사용해볼 Rewrite에 대해 알아보자. 원리는 간단하다. 나는 /api/hanpy로 들어오는 요청을 처리하는 API를 만들었다. 그런데, /hanpy로 들어오는 요청도 /api/hanpy의 로직을 따르게 만들고 싶은 경우가 있을 것이다. 이때 사용하는 것이 Rewrite이다. 0. 사용 준비 npx를 통해 프로젝트 하나를 생성하자. $ npx create-next-app@latest 1. rewrite 설정하기 npx를 통해 프로젝트 하나를 생성하자. 위와 같이 프로젝트를 만들면, 기본 next.config.js는 아래와 같다. /** @type {import('next').NextConfig} */ const nextConfi..

annot update a component (`MyApp`) while rendering a different component (`AuthticatedComponent`). 에러(경고) 발생 문제 원인 위와 같은 에러(경고)가 발생했다. 이는 useState를 변경하는 부분이 useEffect나 이벤트리스터에 의한 변화가 아닌 로직내부에 들어있어서 나는 에러이다. 즉, react는 props나 상태 변화에 따라 여러번 re-render를 한다. 그리고 개발단계에서는 re-render를 통해서 변화를 확인하기도 한다. 해결책 간단히 useEffect 내부에 넣어주면된다. 직관적으로 쉽게 예를 들겠다. const Test = (prop) => { const [data, setData] = useState..

mongodb를 nextjs에 연결을 해보자. 연결하는 방법은 여러가지가 있다. 오늘은 mongoose를 활용하여 필요한 위치에서 SSR을 활용하여 바로 사용하는 방법에 대해 알아보자. nextjs는 아래와 같은 명령어를 통해서 만들었다. $ npx create-next-app@latest 기본적으로 mongoDB 설치는 되어 있다 가정하고 nextjs 로직위주로 설명하겠다. 개인적으로 docker로 실행하면 편하다. 도커(Docker) 기초 정리 1. mongoose 설치하기 아래의 명령어를 통해서 mongoose를 설치한다. mongoose를 사용하는 이유는 schema를 지정할 수 있기 때문이다. 사실 mongodb는 관계형 db가 아니기 때문에 아무꺼나 넣으면 막들어간다. 이러한 문제를 schem..

nextjs를 진행하다 보면, 새로고침 시 console.log가 여러 번 찍히는 현상이 발생했다. 관련 이슈에 대한 조사를 진행하면서, 같은 고민을 할 개발자 분들에게 공유해 보고자 한다. 해결책 위주로 설명을 풀어보겠다. 아래의 여러 case 중에 어느 부분과 연관이 되어 있는지 확인해 보자. 1. next.config.js 의 reactStrictMode react 18이 넘어오면서 엄격모드에 관련된 console.log가 아래와 같이 2번 찍히는 경우가 있다. reactStrictMode가 true라 엄격 모드 확인에 관련된 console이 회색으로 찍히는 것이다. 이러한 현상은 development 환경에서만 발생하며, production 환경에서는 발생하지 않는다. development 환경에..

이 글은 create-next-app으로 프로젝트를 생성한 후에, next.config.js 내부의 swcMinifty에 대해 적어보도록 하겠다. secMinifty는 코드의 압축 암호화와 관련이 있다고 할 수 있다. nextjs에서 next.config.js를 통해 custom 설정을 진행한다. 관련된 기초내용은 아래의 글을 참고하자. next.config.js 기초 정리 next.config.js reactStrictMode 정리 프로젝트를 시작한 후에 next.config.js 내부의 코드를 보면 아래와 같다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, } mo..

이 글은 create-next-app으로 프로젝트를 생성했을 때, next.config.js 내부의 reactStrictMode가 무엇인지에 대해 알아보도록 하자. nextjs에서 next.config.js를 통해 custom 설정을 진행한다. 관련된 기초내용은 아래의 글을 참고하자. next.config.js 기초 정리 프로젝트를 시작한 후에 next.config.js 내부의 코드를 보면 아래와 같다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, } module.exports = nextConfig 위의 nextConfig의 설정 중에 reactStrictMode에 ..