한우의 개발일기

Firebase Firestore에서 서브컬렉션 구조로 데이터 모델링 개선하기들어가며이전 글에서 express로 서버를 따로 연후 파이어베이스와 연동하는 작업을 진행 하였습니다.데이터베이스 설계는 애플리케이션의 성능과 확장성에 중요한 영향을 미친다는걸 알고는 있었지만 프론트엔드로써 직접 설계를 해본적은 한번도 없었다. 이번 작업 이후로 정말 데이터베이스 설계 또한 어플리케이션의 성능과 확장성에서 매우매우 중요하다는걸 느꼈다... ㅜ일단 서브컬렉션이란?Firebase Firestore에서 특별히 사용하는 개념입니다. 일반적인 데이터베이스 용어라기보다는 Firestore의 계층적 데이터 구조를 설명하기 위한 Firebase 전용 용어입니다. 일반 DB로 따지자면 아무래도*계층적 데이터 구조(Hierarchi..

Next.js와 Express 서버 분리하기: 더 나은 아키텍처를 위한 여정안녕하세요! 오늘은 제가 개발한 DevStudy Mate 프로젝트에서 기존에 Next.js에 통합되어 있던 서버 기능을 별도의 Express 서버로 분리하게 된 이유와 과정을 공유하려고 합니다.Express란 무엇인가?Express는 Node.js 환경에서 실행되는 웹 애플리케이션 프레임워크입니다. 미니멀하고 유연한 특성을 가지고 있어, 웹 애플리케이션과 API를 개발하기 위한 강력한 기능을 제공합니다. Node.js의 http 모듈 위에 구축되어 있으며, 라우팅, 미들웨어 구성, 템플릿 엔진 통합 등 웹 서버 개발에 필요한 다양한 기능을 쉽게 사용할 수 있게 해줍니다.서버 분리의 필요성1. Next.js API 라우트의 타임아웃..

MSW 서버도 함께 빌드하기현재 프로젝트는 벡엔드 서버가 아직 배포가 되지않아서 명세서에 맞게 msw를 이용하여 mock 서버를 통해서 작업을 하고있다.이때 도커에 빌드시 msw 서버를 같이 빌드해서 추후 벡엔드 서버가 나오면 msw 서버 부분만 지우고 사용하고자 했다MSW 서버와 같이 빌드를 하게 된 이유처음에는 docker로 빌드하고 yarn mock 을 통해 로컬에서 mock 서버를 열어주고 빌드된 프로젝트를 확인하는 작업을 하려했으나 도커와 mock 서버간에 충돌과 서버사이드렌더링 관련한 오류로 인하여 같이 배포를 하려고 하였다.빌드방법방법은 여러가지가 있었다. Docker.mock 이란 msw서버전용 파일을 새로 만들어도 되고 하나의 Dockerfile에서 같이 빌드를 시켜도 된다.나는 하나의 ..

트러블 슈팅도커 빌드시 환경변수를 읽어 오지 못하는 오류가 생겼다yml파일# docker-compose.ymlservices: web: build: context: . dockerfile: Dockerfile args: NEXT_PUBLIC_API_MOCKING: ${NEXT_PUBLIC_API_MOCKING} NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL} NEXT_PUBLIC_KAKAOMAP_KEY: ${NEXT_PUBLIC_KAKAOMAP_KEY} ports: - "3000:3000" environment: - NODE_ENV=production - NEXT..

도커 적용하기먼저 도커 홈페이지로 이동후 각각 OS 환경에 맞는 도커 데스크탑을 설치해준다. 편한 개발환경을 위해 vscode 익스텐션도 설치해주자!!설치를 한뒤 프로젝트 파일로 이동한 뒤루트디랙토리에 Dokerfile, doker-compose.yml 파일을 생성해준다.dokerignore 파일도 만들어주면 좋다!!(뒤에서 설명할 예정)# DockerfileFROM node:18-alpine AS base# DependenciesFROM base AS depsRUN apk add --no-cache libc6-compatWORKDIR /appCOPY package.json yarn.lock ./RUN yarn install --frozen-lockfile# BuilderFROM base AS build..