xu의 성장일지

Git Branch 전략은 협업할 때 효율적으로 코드를 관리하고 협업을 진행하기 위해 사용되는 방식입니다.주로 사용되는 Git Branch 전략에 대해 소개하겠습니다. 1. Git FlowVincent Driessen이 제안한 전략으로, 안정성과 체계적인 배포 관리를 목표로 합니다.주요 브랜치- Main: 항상 배포 가능한 상태. 릴리스된 코드만 포함- Develop: 개발 진행의 중심. 다음 릴리스를 준비하는 브랜치보조 브랜치- Feature Branch: 새로운 기능 개발을 위해 생성. 완료 후 develop에 병합.- Release Branch: 배포 전 최종 테스트와 수정 작업. 완료 후 main과 develop에 병합.(이름 예시: release/v1.0)- Hotfix Branch: 긴급 버그..

Github Actions로 CI/CD를 구축하여, github에 push 했을 때 S3와 CloudFront에 자동으로 업데이트가 되도록 해보겠습니다.S3, CloudFront에서 수동으로 업데이트 하는 방법은 밑의 글을 참고해 주세요!↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ [AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가xuwon.tistory.com Github Actions소스 코드 저장소와 밀접하게 통합된 CI/CD 도구코드 변경 ..

배포한 React 프로젝트에 도메인을 연결해 보겠습니다.S3, CloudFront를 활용하여 배포하였는데,자세한 내용은 아래의 글을 참고 부탁드립니다. [AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가xuwon.tistory.com 사용자 정의 도메인을 연결하려면, 일단 도메인이 있어야겠죠??저는 내도메인.한국 사이트에서 도메인을 무료로 얻었습니다. 내도메인.한국 - 한글 무료 도메인 등록센터한글 무료 도메인 내도메인.한국, 웹포워딩..

오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가까운 서버에서 데이터를 제공하여 웹사이트, 애플리케이션, 또는 미디어 파일을 빠르고 안전하게 전송하도록 돕습니다. CloudFront는 전 세계 엣지 로케이션(Edge Location)을 활용해 속도와 안정성을 보장합니다. CloudFront의 주요 기능1. 빠른 콘텐츠 제공: 전 세계에 위치한 엣지 로케이션을 통해 사용자가 가까운 서버에서  콘텐츠를 전달 받음.2. 보안 강화: HTTPS를 지원하고, AWS Shield와 통합하여 DDoS 공격을 방어함.3...

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

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

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

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..

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

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