[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

관계형 데이터베이스와 비관계형 데이터베이스

관계형 데이터베이스(RDBMS) 관계형 데이터베이스는 테이블(표) 기반으로 데이터를 구조화하여 저장한다. 데이터를 행(row)과 열(column)의 형태로 관리하며 데이터 간 관계를 명확히 정의한다. SQL(Structured Query Language)을 사용하여 데이터를 조회, 삽입, 수정, 삭제할 수 있다. 관계형 데이터베이스는 데이터 구조가 엄격하게 정의되어 있어 테이블에 저장된 데이터들의 일관성을 유지할 수 있다. 또한 테이블 간의 관계를 정의하여 데이터 중복을 줄이고 데이터 무결성을 유지한다. (RDBMS의 고정된 스키마와 테이블 관계 특징) 대표적인 관계형 데이터베이스는 MySQL, Oracle Database, Microsoft SQL Server, PostgreSQL이 있다. 관계형 데이..

• format_list_bulleted DB
• · 2024. 11. 19.
• 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