Frontend
조회 7약 1분 읽기
AWS에 MERN 스택 노트 앱 배포하기
이 튜토리얼에서는 AWS를 이용해 MERN 스택 노트 앱을 배포하는 과정을 다룹니다. EC2, RDS, S3를 활용하여 백엔드와 프론트엔드를 구성하며, AWS의 핵심 서비스를 직접 다뤄봅니다.
#aws#mern-stack#ec2#s3#rds#nodejs#react
출처: freeCodeCamp News — https://www.freecodecamp.org/news/how-to-deploy-mern-stack-notes-app-aws/
구축할 것
- 브라우저 기반 프론트엔드
- 백엔드 API
- 데이터베이스
사전 준비 사항
- AWS 계정 및 CLI 설정
- Node.js 18+, npm
- Git 및 GitHub 레포지토리
단계별 가이드
- 로컬에서 실행: 앱이 정상 작동하는지 확인
- GitHub에 코드 푸시: EC2가 코드를 가져올 수 있도록 설정
- AWS 리소스 생성: RDS, S3, EC2 설정
- EC2 설정: Node.js 및 필요한 패키지 설치
- 프론트엔드 빌드 및 업로드: S3에 업로드
- 문제 해결: 일반적인 오류 및 해결책
추가 옵션
- CloudFront 및 Route 53을 통한 성능 및 도메인 관리 개선
같이 읽으면 좋은 글
같은 주제이거나 태그가 겹치는 글을 연결해 탐색 흐름을 강화했습니다.
Create React App의 서비스 종료
Create React App이 새로운 앱에 대해 더 이상 지원되지 않으며, 기존 앱은 Vite, Parcel, RSBuild와 같은 빌드 도구로 마이그레이션할 것을 권장합니다. 또한, 프로젝트에 적합하지 않은 경우나 React를 직접 배우고 싶은 경우를 위한 문서도 제공됩니다.
#create-react-app#migration#vite#parcel
Quickpick UI: React와 Vanilla JavaScript를 위한 타입 필터 피커 구현 가이드
이 글에서는 Quickpick UI를 활용하여 React와 Vanilla JavaScript에서 타입 필터 피커를 구현하는 방법을 심층적으로 설명합니다. 실무 적용 사례, 흔한 함정, 최적화 팁 등을 포함하여 개발자들이 쉽게 이해하고 활용할 수 있도록 구성했습니다.
#quickpick-ui#react#vanilla-javascript#ui-design
React Conf 2021 Recap
2021년 React Conf에서는 React 18의 출시와 동시 기능 채택을 포함한 다중 플랫폼 비전을 공유했습니다. 이 회의는 React 생태계의 미래 방향성을 제시하며, 개발자들에게 중요한 변화와 기회를 제공합니다.
#react-conf#react-18#concurrent-features#multi-platform-vision
이전 글
CSS 상대 색상으로 테마 애니메이션 구현
다음 글
Astro, Cloudflare에 합류
댓글
불러오는 중…