AI Platform / Web

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

stripe Stripe의 탄생 원인은 불평한 올라인 결제 시스템을 변경하기 위함에 있다. Pay-Pal과 비교를 통해 특징을 조금 더 살펴보자. PayPal과 Stripe은 오늘날의 회사에서 사용할 수있는 결제 처리 옵션 중에 가장 강력한 두 가지 옵션이라고 할 수 있다. 2010년 당시에는 PayPal은 혁신적인 온라인 결제이긴 했지만, 서비스 연동을 위해서는 최대 9단계까지 거쳐야하는 어려움이 있었다. stripe는 9단계를 3단계를 줄인 결제시스템으로 10년이 넘는 기간동안 빠른 성장을 이루었다고 할 수 있다. 그리고 최근 saas가 유행하면서 간편한 결제를 위해 stripe를 많이 찾기도 하고, 해외 결제를 위해 많이 찾기도 한다. (stripe에 대한 문의가 많아, 다시 detail하게 업데이..