1. 배경상황Next.js 프로젝트에서 다음과 같이 DB를 연결하는 코드를 작성했는데,import { MongoClient } from "mongodb";const url = 'mongodb+srv://'const options = { useNewUrlParser: true,}let connectDB;if (process.env.NODE_ENV === 'development') { if (!global._mongo) { global._mongo = new MongoClient(url, options).connect() } connectDB = global._mongo} else { connectDB = new MongoClient(url, options).connect()}  코드가 동작은..

작년부터 자바스크립트를 조금씩 배워보고있는데 요즘 많이들 쓴다는 Next.js도 한번 배워놓아보려고 한다. Next.js는 React 기반이라 React에서 활용하던 문법을 사용할 수 있고, 풀스택 프레임워크라 프론트엔드와 백엔드를 하나의 프레임워크를 사용해서 짤 수 있는게 장점이다. 그리고 SSR(어디서 보기로는 CSR으로도 구현할 수 있다고 듣긴했는데 대부분 SSR로 활용하는 듯 하다)이기 때문에 초기 로딩 속도나 검색 노출(SEO 최적화)에 있어서 유리한 부분들이 있어 지금 회사에서도 FE의 프레임워크는 Next.js 기반으로 가져가려고 하는 듯 하다.  각설하고 Next.js를 사용하기 위한 설치 과정과 개발환경 세팅 방법을 간단하게 정리해두려고 한다. 1. Next.js 설치 방법Next.js를..

자바스크립트 관련 강의를 듣다가 터미널에서 VSCode 새 창을 바로 띄울 수 있는 편리한 기능을 발견하여 정리해둔다. 일반 터미널의 경우 아래 키를 눌러 명령 팔레트를 열고 shell을 입력하면 아래 캡처 화면과 같은 연관 명령어들을 확인할 수 있다. cmd + shift + p 이 중 Shell Command: Install 'code' command in PATH를 선택한다. 이렇게 설정한 뒤에 터미널에서 새 창을 열기를 원하는 디렉터리에서 아래 명령어를 입력하면 New windows > Open folders > 화면 탐색기에서 열고 싶은 폴더 찾기... 과정을 할 필요 없이 VScode에서 현재 디렉터리의 새 창을 띄워준다. code .zsh을 사용할 경우 위 단계를 거쳐 code..

1. 에러 발생 파이썬 공부 목적으로 FastAPI + Svelte로 간단한 게시판 구현 실습 중에 백엔드 서버 주소를 별도 환경변수 파일(.env)로 뺐는데 브라우저에서 아래 캡처화면과 같이 빈 json(?)을 리턴하는 문제가 발생했다. 2. 해결 방법 크롬 개발자 도구로 확인하니 프론트엔드에서 필요한 파일들은 다 잘 받아오는 듯 보여서 백엔드와의 통신 문제를 의심하고 Vite 프록시 설정이나 환경변수 파일의 서버 주소의 오탈자들을 확인했었는데..... 알고보니 환경변수 파일 위치를 잘못 넣어놔서 백엔드 서버 주소를 못찾아 생긴 문제였다... 머쓱 (Svelte 프로젝트 기준으로 루트 경로에 넣어놨어야 하는데 src 디렉터리에 잘못 넣어놓음;;;) .env 파일 위치를 제대로 변경하니 백엔드 서버 주소..