728x90 반응형 프론트엔드21 S3와 CloudFront를 활용한 React 프로젝트 배포 가이드 ````htmlS3와 CloudFront를 활용한 React 프로젝트 배포 가이드안녕하세요! 오늘은 AWS S3와 CloudFront를 이용하여 React 프로젝트를 배포하는 방법에 대해 알아보겠습니다. 이 가이드를 통해 여러분은 처음부터 끝까지 React 애플리케이션을 배포할 수 있게 될 것입니다. 자, 그럼 시작해볼까요?1. React 프로젝트 생성하기먼저, 새로운 React 애플리케이션을 만들어야 합니다. 아래의 명령어를 사용하여 프로젝트를 생성해 주세요.npx create-react-app my-appcd my-app이렇게 하면 my-app이라는 폴더가 생성되고, 그 안에 기본 React 프로젝트 구조가 만들어집니다.2. 애플리케이션 빌드하기React 애플리케이션을 배포하기 위해서는 먼저 빌드를 .. 2025. 5. 27. ORM의 개념,Prisma의 개념,3Tier의 개념 ORM (Object-Relational Mapping)란 무엇인가요?ORM(Object-Relational Mapping)은 객체 지향 프로그래밍 언어의 객체와 관계형 데이터베이스의 데이터 간의 변환을 자동으로 처리해주는 기술입니다. ORM을 사용하면 개발자가 데이터베이스 쿼리를 직접 작성하지 않고도 데이터베이스와 상호작용할 수 있습니다. 대신, 객체를 통해 데이터베이스의 데이터를 조작할 수 있습니다.데이터베이스란 무엇인가요?데이터베이스는 데이터를 체계적으로 저장하고 관리하기 위한 구조화된 시스템입니다. 데이터베이스는 다양한 형태의 데이터를 저장할 수 있으며, 이를 효율적으로 검색, 삽입, 업데이트 및 삭제할 수 있도록 해줍니다. 일반적으로 데이터베이스는 관계형 데이터베이스 관리 시스템(RDBMS)과 .. 2025. 5. 22. OAuth2.0의 개념 OAuth 2.0 인증 체계의 완벽 가이드OAuth 2.0은 현대 웹과 모바일 애플리케이션에서 안전한 권한 위임을 위한 업계 표준 프레임워크입니다. 이 프로토콜은 타사 애플리케이션이 사용자의 민감한 계정 정보(비밀번호 등)에 직접 접근하지 않으면서도 사용자를 대신하여 보호된 리소스에 접근할 수 있게 해줍니다.핵심 구성 요소리소스 소유자 (Resource Owner)보호된 리소스에 대한 접근 권한을 가진 사용자일반적으로 서비스를 이용하는 최종 사용자클라이언트 (Client)리소스 소유자의 보호된 리소스에 접근하려는 애플리케이션웹 애플리케이션, 모바일 앱, 데스크톱 프로그램 등이 해당리소스 서버 (Resource Server)보호된 사용자 리소스를 호스팅하는 서버유효한 액세스 토큰으로 인증된 요청을 처리인가.. 2025. 5. 16. CORS와 SOP의 개념 및 구현 방법 이해하기 C0RS란?Cross-Origin Resource Sharing의 약자다른 출처(도메인, 포트, 프로토콜)의 리소스에 접근할 수 있게 하는 HTTP 헤더 기반 메커니즘웹 애플리케이션이 자신의 출처가 아닌 다른 출처에서 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제필요성현대 웹 애플리케이션은 여러 도메인의 리소스를 필요로 함REST API와 프론트엔드가 서로 다른 도메인에서 실행되는 경우가 많음서드파티 API 활용 시 필수적SOP의 제한을 안전하게 완화하기 위해 필요SOP란?Same-Origin Policy(동일 출처 정책)의 약자웹 브라우저가 실행 중인 웹 페이지와 동일한 출처의 리소스만 접근할 수 있도록 제한하는 보안 정책동일 출처 = 같은 프로토콜 + 같은 호스트 + 같은 .. 2025. 5. 12. HTTP와 HTTPS의 차이점과 보안 메커니즘 이해하기 HTTPS와 암호화 방식HTTPS란?HTTP over Secure Socket Layer의 약자웹 브라우저와 웹 서버 간 통신을 암호화하는 보안 프로토콜기본 포트: 443 (HTTP는 80)주소창에 "https://" 및 자물쇠 아이콘으로 표시됨SSL/TLS 프로토콜을 사용하여 데이터 암호화필요성중간자 공격(Man-in-the-Middle) 방지데이터 무결성 보장사용자 개인정보 보호웹사이트 신뢰성 검증검색 엔진 순위 향상 (SEO 이점)암호화 방식대칭키 암호화 (Symmetric Key Encryption)암호화와 복호화에 동일한 키 사용특징:빠른 처리 속도적은 컴퓨팅 자원 필요키 교환 문제 존재알고리즘 예: AES, DES, 3DES비대칭키 암호화 (Asymmetric Key Encryption)공개키.. 2025. 5. 12. 네트워크의 기본 구조와 개념 이해하기 네트워크 기초 지식네트워크의 종류LAN (Local Area Network)건물이나 캠퍼스 같은 제한된 지역 내의 네트워크빠른 데이터 전송 속도 (10Mbps~10Gbps)낮은 지연 시간과 높은 안정성대표적 기술: 이더넷, Wi-Fi사용 사례: 가정, 사무실, 학교 네트워크MAN (Metropolitan Area Network)도시 규모의 지역을 커버하는 중간 크기 네트워크여러 LAN을 연결하는 형태LAN보다는 느리지만 WAN보다는 빠른 속도대표적 기술: DQDB, SMDS, ATM사용 사례: 도시 행정망, 케이블 TV 네트워크WAN (Wide Area Network)국가나 대륙처럼 넓은 지역을 연결하는 네트워크다양한 통신 기술과 장비 사용상대적으로 느린 속도와 높은 지연시간대표적 기술: MPLS, Fr.. 2025. 5. 12. 14 Context API란?Context API는 React에서 전역 상태를 관리하기 위한 기능입니다. 여러 컴포넌트에서 동일한 데이터를 공유해야 할 때, props를 통해 일일이 전달하지 않고도 데이터를 쉽게 전달할 수 있게 해줍니다.언제 Context API를 사용하나요?Context API는 다음과 같은 경우에 사용합니다:여러 컴포넌트에서 공유해야 하는 데이터가 있을 때상태 관리 라이브러리 없이 간단한 전역 상태 관리가 필요할 때props drilling(중첩된 컴포넌트에서 props를 계속 전달하는 현상)을 피하고 싶을 때Context API 사용 방법1. createContext로 전역 상태 만들기먼저, createContext를 사용하여 전역 상태를 만듭니다.import React, { creat.. 2025. 4. 21. 함수형 컴포넌트 생명주기 1. useEffect의 배열 형태에 따른 실행 시점 차이useEffect는 두 번째 인자로 전달되는 의존성 배열에 따라 다음과 같이 동작합니다.(1) 의존성 배열이 없는 경우실행 시점: 컴포넌트가 마운트된 직후와 리렌더링될 때마다 실행됩니다.예시:javascriptuseEffect(() => { console.log('컴포넌트가 마운트되었거나 리렌더링되었습니다.'); });(2) 의존성 배열이 빈 배열([])인 경우실행 시점: 컴포넌트가 마운트된 직후에만 실행됩니다.예시:javascriptuseEffect(() => { console.log('컴포넌트가 마운트되었습니다.'); }, []);(3) 의존성 배열에 값이 있는 경우실행 시점: 컴포넌트가 마운트된 직후와 의존성 배열의 값이 변경될 때마다 실행됩.. 2025. 4. 10. 이전 1 2 3 다음 728x90 반응형
