[React] AWS S3로 리액트 프로젝트 배포

리액트(React) 프로젝트를 AWS S3에 배포하면 정적 웹 사이트를 간단하고 효율적으로 배포 가능하다. 이번에는 리액트 프로젝트를 배포 하던 방식에 대해 알아보고 더 나아가 Github Action을 통해 자동화 프로세스를 만들어 보자. 먼저 이번 글에서는 AWS S3를 활용한 리액트 프로젝트 배포의 장점과 S3의 주요 특징 그리고 배포 방법을 알아보자.AWS S3의 장점사용의 용이성AWS Management Console, CLI, SDK 등을 이용해 누구나 쉽게 S3를 관리할 수 있다.무제한 확장성저장 용량 제한이 없어 대규모 데이터나 대규모 웹사이트도 문제없이 호스팅할 수 있다.다양한 스토리지 클래스 제공자주 사용하지 않는 파일을 위한 Glacier, 비용 절감을 위한 Intelligent-Ti..

• format_list_bulleted Frontend/React
• · 2024. 12. 10.
• textsms

[Next.js] Next.js 도커 이미지 생성 + Nginx를 리버스 프록시로 사용

최근 진행하고 있던 프로젝트의 개발이 끝나 배포에 대한 방법을 고민하던 중 이전에 데모 어플리케이션으로 사용해본 도커와 github action을 사용한 배포 자동화를 적용해보기로 하였다. 사실 데모가 아닌 프로젝트에 CI/CD 전체의 자동화를 적용해보려는 것은 처음이라 많이 헷갈렸다.. (회사에서 근무할 당시에는 사용자가 없는 시간에 수동 배포를 했던 기억이 난다..)먼저 이번 글에서는 Next.js와 Nginx를 도커 이미지로 만들어 컨테이너로 실행시키는 과정까지 진행한다.❗️참고 내용요약Next.js 서버를 메인으로, Nginx를 리버스 프록시 서버로 구성dockerfile 설정 및 docker image 생성로컬에서 정상 작동 확인 - Nginx 리버스 프록시 확인서버 측 렌더링(SSR) 방식을 ..

• format_list_bulleted Frontend/Next.js
• · 2024. 12. 4.
• textsms

[Next.js] 웹사이트로 어플리케이션 만들기 - PWA(Progressive Web App)

PWA(Progressive Web App)를 알아보자PWA(Progressive Web App)는 웹 기술을 사용해 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션이다. 일반 웹 앱처럼 URL로 접속할 수 있으면서도 네이티브 앱처럼 설치하고 오프라인에서도 사용할 수 있다는 점이 주요 특징이다. PWA의 특징빠른 로딩 속도: 서비스 워커(Service Worker)를 활용해 캐싱 기능을 제공하므로 재방문 시 빠르게 로드된다.오프라인 지원: 네트워크 연결이 없어도 중요한 기능이 작동한다.앱 설치: 사용자가 브라우저를 통해 설치해 홈 화면에서 앱처럼 실행할 수 있다.푸시 알림: 푸시 알림을 통해 사용자와의 지속적인 상호작용이 가능하다.앱과 유사한 인터페이스: standalone 모드로 실행되면 ..

• format_list_bulleted Frontend/Next.js
• · 2024. 11. 26.
• textsms

클라우드 컴퓨팅의 개념과 활용 예

클라우드 컴퓨팅이란?클라우드 컴퓨팅은 인터넷을 통해 IT 리소스를 제공하는 서비스 모델이다. 기업이나 개인은 서버, 데이터베이스, 스토리지, 네트워크 등 필요한 리소스를 구축하거나 소유할 필요 없이 클라우드 제공업체의 인프라를 임대하여 사용한다. 클라우드 컴퓨팅의 주요 사용 사례서버 구축 및 배포물리적 서버 대신 클라우드 환경에서 서버를 생성하고 네트워크를 구성한다.클라우드 플랫폼 위에 애플리케이션을 빌드 및 배포하여 서비스를 제공한다.DNS 설정 및 도메인 관리도메인명을 구매하고 클라우드 서버의 IP 주소와 연결하여 사용자가 서비스를 접속할 수 있도록 설정한다. 클라우드 컴퓨팅을 선택하는 이유1. 비용 절감 (Cost Efficiency)클라우드 컴퓨팅은 온디맨드(on-demand) 모델을 통해 사용한..

• format_list_bulleted DevOps
• · 2024. 11. 24.
• textsms

[DB] Normalization 정규화 이해하기

정규화란 무엇인가?정규화는 데이터베이스의 테이블을 설계할 때 데이터를 중복 없이 구성하고, 이상(Anomalies)을 제거하는 과정이다.이를 통해 데이터 일관성을 유지하고 효율적인 데이터베이스를 설계할 수 있다. 정규화의 목적데이터 중복 제거: 중복으로 인한 저장 공간 낭비를 줄인다.데이터 무결성 보장: 삽입, 삭제, 갱신 시 이상 현상을 방지한다.데이터 유지보수성 향상: 데이터를 논리적으로 분리하여 변경이 쉬워진다.정규화를 하지 않은 데이터베이스는 삭제, 삽입, 수정 작업에서 문제가 발생할 수 있다. 이를 이상현상(Anomaly)이라고 하며, 주요 사례는 다음과 같다. 삭제 이상(Delete Anomaly)데이터를 삭제하면 의도치 않게 관련된 다른 정보도 삭제되는 문제.예시: 선수 데이터를 삭제하면 "..

• format_list_bulleted DB
• · 2024. 11. 20.
• textsms

[DB] 트랜잭션의 격리 레벨 Isolation Level

트랜젝션의 격리 레벨데이터베이스 트랜잭션(Transaction)은 데이터 무결성(Data Integrity)을 보장하기 위해 설계된 개념이다. 그러나 모든 트랜잭션의 완전한 독립성을 보장하면 성능 문제가 발생할 수 있다. 따라서 DBMS에서는 격리 수준(Isolation Level)이라는 개념을 도입하여 동시성과 성능 간 균형을 맞추고 있다. 왜 격리 수준을 조정할까?격리 수준은 트랜잭션 간 격리 정도를 정의하며, 성능과 데이터 정합성 간의 균형을 조정한다.성능 최적화: 높은 격리 수준은 데이터 무결성을 보장하지만, 동시성이 감소해 성능 저하를 초래할 수 있다.격리 수준의 다양성: 각 격리 수준은 특정 상황에서 발생할 수 있는 문제를 해결하기 위해 정의된다. 격리 수준의 유형과 특징격리 수준은 느슨한 격..

• format_list_bulleted DB
• · 2024. 11. 19.
• textsms