개발 33

[AWS] S3에 웹 프로젝트 호스팅 하기

AWS의 S3에 웹 프로젝트를 호스팅 해볼게요.우선 S3가 뭔지 알아야 합니다. S3S3는 한 줄로 요약하자면 파일 저장 및 다운로드 서비스입니다.우리가 사진이나 동영상과 같은 파일들을 구글 드라이브나 iCloud에 저장하듯이, S3도 비슷한 서비스라고 생각하면 돼요.어떤 웹 서비스에 접속할 때 그 웹 페이지 속으로 들어가는 것처럼 느껴지지만, 실제로는 그렇지 않습니다.실제로는 웹 페이지를 운영하고 있는 서버로부터 HTML, CSS, JS, 이미지 파일 등을 다운 받아서 브라우저에 끼워 넣어서 실행시키는 방식입니다.따라서 파일을 다운로드 받아와야 하기 때문에 S3를 활용해서 사용하는 것이죠! 먼저 S3 버킷을 세팅해 보겠습니다.1. 버킷 만들기버킷을 만들어 줍니다. (로그인 후)이름을 지정해주고, [이 ..

개발/AWS 2024.11.27

[Database] 3-Tier 아키텍처

3-Tier 아키텍처소프트웨어 애플리케이션을 3개의 계층으로 나누어 구성하는 구조Presentation Tier, Application Tier, Data Tier로 나뉜다.각각의 계층은 독립적으로 설계되고 실행되어, 응용 프로그램의 유지보수성과 확장성을 높인다.3-Tier 아키텍처 장점1. 유지보수성 향상계층별로 독립되어 특정 계층만 수정해도 전체 시스템에 영향 X2. 확장성 높음각 계층이 독립적으로 확장 가능→ 대규모 애플리케이션에 적합3. 보안 강화데이터와 애플리케이션 로직이 분리되어, 민감한 데이터를 안전하게 관리 가능4. 재사용성각 계층이 독립적이므로 다른 애플리케이션에서 재사용 가능 3-Tier 아키텍처 단점1. 복잡성 증가구조와 구현이 복잡해질 수 있다.2. 응답 속도 지연클라이언트와 서버 ..

개발/Database 2024.11.25

[Database] ORM과 Prisma

ORM (Object-Relational Mapping)객체 지향 프로그래밍 언어의 객체를 관계형 데이터베이스의 테이블과 매핑하는 기술즉, 프로그래밍 언어에서 데이터베이스 작업을 SQL 쿼리를 직접 작성하지 않고 객체를 통해 간접적으로 수행할 수 있게 도와주는 도구나 기법. 대표적인 ORM 도구Hibernate(Java), SQLAlchemy(Python), Entity Framework(.NET), TypeORM(Javascript/TypeScript) 데이터베이스데이터를 체계적으로 저장하고 관리하는 시스템여러 사용자가 데이터를 효율적으로 저장, 수정, 삭제, 검색할 수 있도록 설계된 시스템주로 DBMS를 통해 접근한다. 데이터베이스 종류- 관계형 데이터베이스 (RDBMS, ex. MySQL, Post..

개발/Database 2024.11.25

[Node.js] OAuth 2.0을 사용하여 카카오 로그인 구현하기

OAuth 2.0이란?↓ ↓ ↓ ↓ ↓ [Node.js] OAuth 2.0OAuth 2.0이란? 사용자의 자원에 대한 액세스를 제한된 범위에서 제3자 애플리케이션이 안전하게 수행할 수 있도록 허용하는 인증 및 권한 부여 프로토콜 이 프로토콜은 사용자가 비밀번호와 같은xuwon.tistory.com 카카오 로그인을 구현하기 위해서 우선 카카오 디벨로퍼에서 애플리케이션 등록을 해야 합니다!등록 후 이 문서를 참고하며 구현해 보겠습니다. Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 애플리케이션 등록 후앱설정 - 앱키에서 REST API 키를 받아와 k..

개발/Node.js 2024.11.22

[Node.js] OAuth 2.0

OAuth 2.0이란? 사용자의 자원에 대한 액세스를 제한된 범위에서 제3자 애플리케이션이 안전하게 수행할 수 있도록 허용하는 인증 및 권한 부여 프로토콜 이 프로토콜은 사용자가 비밀번호와 같은 민감한 정보를 노출하지 않고 클라이언트가 이 사용자 데이터를 요청할 수 있게 한다.  OAuth 2.0의 구성 요소 1. Resource Owner- 데이터를 소유하고 있는 사용자2. Client- 자원 소유자의 데이터를 액세스하려는 제 3자 애플리케이션3. Authorization Server- 자원 소유자의 인증과 권한 부여를 관리하는 서버4. Resource Server- 자원 소유자의 데이터를 실제로 호스팅하는 서버5. Access Token- 클라이언트가 자원 서버에 요청을 보낼 때 사용하는 키- 제한된..

개발/Node.js 2024.11.20

[JavaScript] 클로저

자바스크립트에서 중요한 개념인 클로저!클로저함수가 자신이 선언될 때의 환경(변수, 상수 등)에 접근할 수 있는 권한을 가진 함수 일반적으로 함수가 실행을 마치고 종료되면, 그 함수 내에서 선언된 변수들은 소멸하게 접근할 수 없게 되지만,클로저는 함수가 종료된 후에도 그 함수가 선언된 시점의 환경을 기억하기 때문에, (렉시컬 스코프)외부 함수가 종료된 이후에도 내부 함수에서 외부 함수의 변수에 접근할 수 있다. 클로저의 생성 원리주로 함수 내에 중첩된 함수가 있을 때 생성자바스크립트는 함수가 생성될 때 외부 함수의 변수를 기억하는 방식으로 클로저를 형성함! 클로저의 동작 방식1. 중첩된 함수에서 외부 함수의 변수에 접근할 때 중첩 함수가 외부 함수의 변수들을 계속 참조할 수 있음2. 외부 함수가 실행을 마..

개발/JavaScript 2024.11.13

[Node.js] CORS와 SOP의 개념 및 구현 방법

CORSCross-Origin Resource Sharing웹 페이지가 다른 출처(origin)에 있는 리소스에 안전하게 접근할 수 있도록 허용하는 메커니즘* origin- 도메인, 프로토콜, 포트를 의미- 웹의 보안을 위해 기본적으로 SOP(Same-Origin Policy)가 적용되어, 동일 출처가 아닌 리소스에 접근하는 것을 차단함.- 그러나 여러 서비스가 연동되는 웹 환경에서는 다른 출처의 리소스를 사용해야 할 때가 생김.→ CORS를 사용하면 가능함. SOPSame-Origin Policy웹 브라우저가 동일한 출처(origin)에서 로드된 리소스에만 접근할 수 있도록 제한하는 보안 정책.(즉, 같은 도메인, 프로토콜, 포트를 가진 경우에만 접근 가능)- 여러 출처에서 데이터를 필요로 하는 웹 애..

개발/Node.js 2024.11.13

[Node.js] HTTP와 HTTPS의 차이점 및 보안 메커니즘

HTTP 및 HTTPSHTTP HyperText Transfer Protocol Secure 웹에서 클라이언트와 서버 간에 데이터를 주고받기 위한 프로토콜- 웹 브라우저와 같은 클라이언트가 서버에 요청을 보내고, 서버는 이에 대한 응답을 클라이언트에게 보내는 방식 HTTP의 주요 특징1. 비연결성- 요청-응답이 끝나면 연결을 끊음.- 매 요청마다 새로운 연결을 설정해야 함.2. 무상태성- 각 요청은 서로 독립적이며, 이전 요청이나 응답의 상태를 기억하지 않음.- 이를 보완하기 위해 쿠키, 세션 등의 개념을 도입하여 상태 관리3. 요청과 응답의 구조- 클라이언트가 서버에 요청을 보내고, 서버가 그에 맞는 응답을 반환하는 요청-응답 구조로 작동- 이 과정에서 HTTP 메서드(GET, POST 등)와 상태 코..

개발/Node.js 2024.11.13

[Node.js] 네트워크의 기본 구조

네트워크의 종류네트워크는 LAN, MAN, WAN 이렇게 3가지 종류가 있습니다. LAN (Local Area Network)근거리 통신망으로, 학교나 사무실, 가정 등 특정 구역 내에서 네트워크를 형성하는 네트워크 유형- 비교적 작은 범위에서 운영- 높은 전송 속도- 네트워크 내의 자원(파일, 프린터 등)을 공유하기 위해 사용- ex) 가정용 와이파이 네트워크, 소규모 사무실 네트워크 MAN (Metropolitan Area Network) 도시 단위의 중간 범위에서 사용되는 네트워크.여러 개의 LAN을 연결하여 형성!- 도시나 대학교 캠퍼스처럼 LAN보다 큰 지역에서 사용- 특정 지역의 여러 네트워크를 연결하여 더 큰 네트워크를 형성함.- ex) 대학교 캠퍼스 네트워크 WAN (Wide Area Ne..

개발/Node.js 2024.11.13

[React] 영화 추천 사이트 제작하기 (마무리)

안녕하세요.벌써 React 미니 프로젝트가 마무리 되었습니다.5단계 미션은 배포하는 것 뿐이라서 4단계와 같이 작성할 생각입니다! 4단계 미션은 바로 Supabase를 이용한 회원가입, 로그인, 소셜로그인 및 북마크 기능 구현 입니다!(정말... 정말 어려웠습니다. ㅜㅜ)이번에 제가 구현한 기능은1. 회원가입 구현하기2. 로그인/로그아웃 구현하기3. 소셜 로그인 (카카오) 구현하기4. 북마크 기능 구현하기5. netlify를 통해 배포하기입니다!가장 어려웠던 건... 제가 supabase 자체를 처음 써봐서 그냥 모든게 다 어려웠어요. ㅠㅠ 허엉그래도 한 번 해봅시다......https://supabase.com/ Supabase | The Open Source Firebase AlternativeBui..

개발/React&Redux 2024.11.13