[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

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 4

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Learn Next.js: Creating Layouts and Pages | Next.jsCreate the dashboard routes and a shared layout that can be shared between multiple pages.nextjs.org 현재 애플리케이션에는 홈 페이지만 있습니다. 이제 레이아웃과 페이지를 활용하여 더 많은 라우트를 생성하는 방법을 배워봅시다.이 장에서 다룰 내용파일 시스템 라우팅을 사용하여 대시보드 라우트를 ..

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

[Next.js] Next.js Middleware로 로그인 검증하기

Middleware란?미들웨어(Middleware)는 Next.js 12 버전부터 도입된 기능으로, 서버로 들어오는 요청(request)와 응답(response) 사이에 실행되는 함수이다.미들웨어는 요청이 완료되기 전에 실행되어 요청 또는 응답 헤더를 다시 작성, 리디렉션, 수정하거나 직접 응답하여 응답이 가능하다.이를 통해 Next.js 미들웨어 공식 문서에서 아래와 같은 작업을 예시로 보여준다.인증 및 권한 부여: 특정 페이지나 API 경로에 대한 액세스 권한을 부여하기 전에 사용자 신원을 확인하고 세션 쿠키를 확인한다.서버 측 리디렉션: 특정 조건(예: locale, user role)에 따라 서버 수준에서 사용자를 리디렉션한다.경로 재작성: 요청 속성에 따라 API 경로나 페이지에 대한 경로를 동..

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

[JavaScript] 배열과 객체 빈 값 비교하기 - null, undefined ...

Falsy 값 체크JavaScript에서 빈 값을 검사할 때 가장 간단한 방법은 Falsy 값을 확인하는 것이다. JavaScript의 Falsy 값에는 null, undefined, "" (빈 문자열), 0, NaN, false가 있다. 이러한 값들은 조건문에서 false로 인식되므로 if (!value) 문을 통해 빈 값 여부를 검사할 수 있다. function isEmpty(value) { return !value;}// 사용 예시console.log(isEmpty(null)); // trueconsole.log(isEmpty(undefined)); // trueconsole.log(isEmpty("")); // trueconsole.log(isEmpty(0)); ..

• format_list_bulleted Frontend/JavaScript
• · 2024. 11. 13.
• textsms