AI Platform / Web

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하게 업데이..

이 글을 읽는 사람은 frontend과 backend의 차이에 정도는 알고 있을 것이다. 그리고 client인 frontend에서 server인 backend로 요청을 보내면 응답을 받는 부분도 알고 있을 것이다. 예를 들면, react에서 spring으로 요청을 보내면, 응답이 오는 것과 같다. 그렇다면, server에서 client로 바로 요청을 보내는 방법 없을까? 이러한 방법을 해결하기 위해서 나온 것이 바로 Websoket이다. Websoket은 상호 간의 데이터를 전달할 수 있어서, 카카오톡과 같은 채팅이나 영상회의 같은 것들을 구현할 때 사용이 가능하다. 이 글을 통해 WebSoket에 대해 알아보고, Websoket과 Socket.io의 차이에 대해서도 알아보도록 하자. WebSoket과 ..

window에서 nodejs 설치와 환경변수 설정을 해보자. 기본적으로 nodejs는 아래의 홈페이지에서 설치를 한다. nodejs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치할 수 있는 선택이 LTS와 현재버전으로 두가지가 있다. LTS 버전은 비교적 옛날 버전으로 안정화된 버전이다. 따라서 현업에서는 LTS 버전을 많이 받아서 사용한다. 반면에 현재버전은 현재 개발된 버전으로 사실 둘 다 써도 상관없다. 현재 버전이 미래에 LTS버전이 된다. 그렇기 때문에 혼자 프로젝트를 한다면 현재버전을 받고, 아니라면 LTS 버전을 받자. 설치..

위의 에러나 났다면, 간단히 crossorigin을 crossOrigin으로 변경해주면 된다. html의 태그에 class를 className이라 적는 것과 같은 에러라고 생각하면 된다. 기본적으로는 build가 잘 안 될 수 있기 때문에 변경해주고 다시 build를 하면 실행이 될 것이다. // 변경전 // 변경후 crossOrigin으로 변경을 하면 위의 Error는 발생하지 않는다.