[LLM 경제 뉴스 요약 서비스] # 06. React/Next js로 프론트엔드 구축 with 모노레포

안녕하세요-지난 포스팅에 이어, 오늘은 배포된 FastAPI 서버를 활용해 경제 뉴스 요약 리스트를 보여주는 프론트엔드를 구축해보겠습니다.프로젝트 구성- Framework: React/Next js- PNPM 기반 모노레포 구조- 스타일: TailwindCSS- 서버 상태 관리: Tanstack Query- Lint/Formatter: Biome- 번들러: Turbopack 시작에 앞서..Next js란?Next.js는 React를 기반으로 SSR(Server Side Rendering), SSG(Static Site Generation), Server Components 등을 지원하는 프레임워크입니다.CSR 중심이었던 기존 React의 한계를 보완하며, 성능·SEO·개발 경험(DX) 측면에서 많은 ..

프론트엔드를 개발하다보면, 웹팩, 번들링 이런 단어들을 자주 접하게 됩니다.다만 개발 구현에만 허덕이던 초초초짜 주니어 시절에는 나중얘기로 미뤄두기만 했었죠 번들링에 대해 알면 알수록 클라이언트 시스템에 대한 전반적인 아키텍쳐도 이해할 수 있고,성능과는 어떤 연관성이 있는지 어떤 필요성이 있는지 알게되어 포스팅으로 남겨보려합니다. 번들러란?모듈 시스템 등장 배경초기의 웹 개발은 HTML, CSS, JavaScript 파일을 각각 작성한 뒤HTML에서 태그를 통해 JavaScript 파일을 직접 불러오는 방식이었습니다.이 과정에서 파일 간 의존성 순서(삽입 순서)부터 전역 스코프 오염까지모든 것을 개발자가 직접 관리해야 하면서 프로젝트 규모가 커질수록 유지보수는 점점 어려워졌습니다. 이러한 문제를 해결..

이전 직장에서 오만가지. 상태를 관리해야하는 대규모 프론트엔드 프로젝트를 경험했습니다.그 과정에서 상태 관리가 단순한 구현 문제가 아니라,서비스의 성능과 사용성, 그리고 확장성까지 좌우하는 뼈대와 같은 요소라는 점을 깊이 체감하게 되었습니다. 특히 UI를 기준으로 상태를 지나치게 잘게 모델링하면서디자인 변경에 대한 의존성은 점점 커지고,반대로 도메인 자체의 응집력은 약해졌던 지난 과오들을 돌아보게 되었습니다. subscribe 남용이나 useEffect로 얽힌 복잡한 상태 흐름처럼,유지보수성과 예측 가능성을 해치는 패턴들도 직접 경험하면서이후에는 컴포넌트 하나를 개발하더라도 상태 관리 구조부터 고민하게 되었습니다. 이러한 시행착오를 통해 쌓이게 된View Model에 대한 고민과, 지향하게 된 상태 관..

안녕하세요-이번에는 N8N을 ECS에 배포하는 과정을 포스팅하겠습니다.작업 순서1. EFS 추가2. ECS 배포2-1. 클러스터 정의2-2. 태스크 정의2-3. 보안그룹 설정2-4. 서비스 정의1. EFS 추가우선 n8n은 공식 레포에서 도커 이미지를 pull 받고, 워크플로우는 개별 스토리지에 저장하게 됩니다. 그래서 스토리지를 연결하지 않으면 DB처럼 매번 서비스가 새로 배포될 때마다 초기화 됩니다.따라서 태스크에 별도의 스토리지를 연결해줘야합니다. 여기서 n8n은 내부적으로 아래와 같이 동작합니다. workflow JSON을 파일로 저장execution 상태를 파일로 flushbinary node 결과를 disk에 write큐 모드에서 worker 간 filesystem 동기화따라서 여러 스토리지중..

이번 포스팅에서는 저번에 구축한 배포환경의 CI/CD를 구성해보려합니다.작업 순서1. 배포 전용 IAM 사용자 생성2. Git Secret 생성3. Git Actions Workflow 작성 1. 배포 전용 IAM 사용자 생성Github Actions에서 AWS에 액션을 취하기 위해서는,권한이 있는 IAM 사용자로 인증을 거쳐야 합니다. 아래 3가지 정책이 ECS/ECR 관련해서 필요한 정책들이니 추가해주세요.2. Github Secret 생성Workflow에서 AWS인증을 위해서는 1번에서 만든 IAM 사용자의 ACCESS_KEY와 SECRET_ACCESS_KEY가 필요합니다. ... - name: Configure AWS credentials uses: aws-actions/co..

이번 포스팅에서는 저번에 구현한 FastAPI/Postgresql 을 배포해보려합니다.작업 순서1. DB EC2 배포2. Docker Build3. ECR에 Docker 이미지 Push4. ECS 배포4-1. 클러스터 정의4-2. 태스크 정의 (PostgreSQL, FastAPI)4-3. 서비스 정의 DB EC2 배포서버 배포 전에 DB 부터 배포해보겠습니다.DB는 컨테이너처럼 내려갔다 올라갔다 하면 안되니, EC2로 따로 배포했습니다.1. 인스턴스 생성AMI: Ubuntu 22.04 LTSInstance type: t3.microStorage: 20GB gp3Key pair: .pem 생성 후 저장보안 그룹SSH를 뚫어서, 로컬에서 포트포워딩으로 접속해보겠습니다.인바운드 규칙에서 22포트를 허용하고소스..