AI Platform / Web

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

autofocus nextjs/react 사용시 component 내부를 들어가면, 자동으로 input 창에 커서가 들어가게 하는 방법을 알아보자. 그리고 antd, material UI 등등의 툴에서도 input 태그에 autoFocus/autofocus를 넣어도 작동을 안하는 경우가 있다. 이러한 해결책을 코드를 통해 적어보도록 하겠다. 디테일한 설명은 빼고 바로 코드로 적어보겠다.(react/nextjs 관련 설명은 제외한다.) 만약 vanilla js에서 사용하는 관련 설명은 아래의 링크를 보고오자. [form] input 태그을 focus 하기 1. useRef 설정 input과 같은 DOM 요소(element)를 수정해야한다면, 가장 먼저해야할 것은 어떤 요소를 변경/수정 할 것인지에 대한 선..

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

넥스트(nextjs)로 개발 시 기본적으로 개발 환경과 배포 환경, QA 환경에 대한 설정(next.config.js)을 다르게 해야한다. 특히나 process.env에 포함되는 변수에 대한 설정도 분리해서 저장을 해야한다. 그리고 보통은 개발/배포로 나누지만, 실무에서는 개발, QA, 실서비스에 따른 환경도 각각 다르게 설정을 해야한다. 이러한 환경 변수(environmental variables) 설정하는 방식에 대해 알아보자. 우선은 아래의 글을 참고하여 PHASE_DEVELOPMENT_SERVER에 대한 이해를 하자. 그리고 react 배포 환경에 대한 .env에 대한 지식을 보고 오자. [react] 실무 개발 환경/배포 환경 설정(.env) [nextjs] next.config.js 기초 정리..

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

nextjs에서 환경설정을 하고, custom한 설정(configuration of Next.js)을 하기위해서 next.config.js를 사용하면 된다. next.config.js에 대한 기초적인 지식부터 심화 부분까지 정리해 보자. 우선은 실무단계에서 기본적으로 크게 development 단계와 deployment 단계로 구분한다. 배포를 하는 setting과 개발 setting를 다르게 해야한다. dotenv를 많이 사용하여, env.dev와 env.prod 사용하여 환경변수 설정을 해도 되지만, frontend 개발자라면, 아래와 같이 next.config.js 로 설정하는 방법도 알아두자. const { PHASE_DEVELOPMENT_SERVER } = require('next/constan..