투케이2K

212. (Aws/Amazon) [AWS Simple Queue Service] SQS GetQueueAttributes API 설명 정리 - SQS Queue 속성 정보 조회

투케이2K — Wed, 22 Jul 2026 20:13:14 +0900

[개발 환경 설정]

개발 환경 : Aws / Amazon Web Services

제 목 : [AWS Simple Queue Service] SQS GetQueueAttributes API 설명 정리 - SQS Queue 속성 정보 조회

[설명 정리]

// --------------------------------------------------------------------------------------
[개발 및 환경]
// --------------------------------------------------------------------------------------

- 인프라 : Aws / Amazon Web Services


- 기술 구분 : Aws / SQS / Simple Queue Service


- 사전)   SQS (Simple Queue Service) 심플 큐 서비스 간략 설명 :

  >> Aws SQS 란 서버들끼리 주고 받을 수 있는 메세지 큐를 제공하는 AWS 서비스 입니다

  >> Aws SQS 는 특정 플랫폼 서비스 확장 시 각 기능들을 여러 서버에서 처리하게 되면서, 서버들끼리 주고 받는 메세지를 잃어버리지 않고 정확하게 처리하는 데 도움을 주는 서비스입니다

  >> Aws SQS 는 시스템이 처리 해야할 일을 나중에 처리하거나, 다른 시스템이 처리할 수 있도록 하기 위한 비동기 메세징을 지원합니다

  >> Aws SQS 기본 개념 및 속성 용어 설명 : 

    - 메세지 : SQS 의 기본 데이터 단위 / XML, JSON과 같은 텍스트 형태이며 최대 64KB 까지 보낼 수 있음 / 메세지마다 고유한 ID가 부여 됨

    - 큐 (Queue) : 메세지를 담는 공간 / 리전 별로 생성 필요 / 자료형의 큐와 이름이 같지만, 선입선출(FIFO)을 보장 하지 않음

    - 배치 API : 한 번에 메세지를 최대 10개 혹은 최대 256KB까지 동시 처리 가능

    - 보기 제한 시간 (Visibility Timeout) : 메세지를 받은 뒤 특정 시간 동안 다른 곳에서 동일한 메세지를 다시 꺼내볼 수 없음 / 큐 하나에 여러 서버가 메세지를 받을 때 동일한 메세지를 동시에 처리하는 것을 방지 함

    - 지연 전송 (Delay Delivery) : 특정 시간 동안 메세지를 받지 못하게 한다

    - 처리 실패 큐 (Dead Letter Queues) : 메세지를 받고 작업이 처리되면 메세지를 삭제 하지만, 설정한 횟수를 초과하여 메세지를 받았는데 삭제되지 않고 남아있다면 처리 실패 큐로 보내진다

    - 짧은 폴링 (Short Polling) : 메세지 받기 요청을 하면 결과를 즉시 받을 수 있음

    - 긴 폴링 (Long Polling) : 메세지가 있으면 바로 가져오고, 메세지가 없으면 메세지가 올 때까지 기다림 / 기본 제한시간은 20초이며, 1초부터 최대 20초까지 설정할 수 있음

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[설 명] 
// --------------------------------------------------------------------------------------

1. GetQueueAttributes 는 특정 SQS Queue의 속성(Attribute) 정보를 조회하는 API 입니다.


2. GetQueueAttributes 를 사용해 Queue 설정과 상태 정보 조회 및 Queue 가 존재하는지 확인할 수 있습니다.


3.   GetQueueAttributes 호출 Request 전문 : 

  {
    "AttributeNames": [ "string" ], // 조회할 속성명을 지정합니다.
    "QueueUrl": "string" // 조회할 Queue의 URL입니다.
  }


4.   GetQueueAttributes 호출 Response 전문 : 

  {
    "Attributes": { 
        "string" : "string" 
    }
  }


5.   많이 사용하는 Attribute 정리 : 

    QueueArn : 큐의 ARN 조회

    AttributeNames: ["QueueArn"]
    
    {
      "Attributes": {
        "QueueArn": "arn:aws:sqs:ap-northeast-2:12345678912:iot-status-queue"
      }
    }

    ApproximateNumberOfMessages : 현재 소비되지 않은 메시지 수

    AttributeNames: ["ApproximateNumberOfMessages"]
    
    {
      "ApproximateNumberOfMessages": "25"
    }

    CreatedTimestamp : 큐 생성 시각(Unix Timestamp) 

    AttributeNames: ["CreatedTimestamp"]
    
    {
      "CreatedTimestamp": "1753070000"
    }

    VisibilityTimeout : 메시지를 읽은 후 다른 Consumer가 보지 못하도록 숨겨지는 시간(초)입니다.

    AttributeNames: ["VisibilityTimeout"]
    
    {
      "VisibilityTimeout": "30"
    }

    MessageRetentionPeriod : 메시지 보관 기간(초)입니다.

    AttributeNames: ["MessageRetentionPeriod"]
    
    {
      "MessageRetentionPeriod": "345600" // 345600초 = 4일입니다.
    }

    Policy : Queue Access Policy 조회

    AttributeNames: ["Policy"]

    SQS에 어떤 IAM/User/Role이 접근할 수 있는지 확인할 때 사용합니다.

    All : 모든 속성을 한 번에 조회합니다.

    AttributeNames: ["All"]


6. ⚠️ GetQueueAttributes 호출 제약 조건 정리 : 

  >> QueueUrl은 반드시 존재해야 함

    - 존재하지 않는 Queue URL이면 실패

    - Queue가 삭제되었거나 URL이 잘못된 경우 예외 발생

  >> AttributeNames 지정 권장

    - AWS 문서에 따르면 AttributeNames는 Optional이지만 지정하지 않으면 빈 결과가 반환될 수 있습니다.

  >> 메시지 개수는 실시간 값이 아님

    - AWS 문서에서는 생산자가 메시지 전송을 멈춘 후에도 최대 약 1분 정도 오차가 발생할 수 있다고 설명합니다.

  >> 권한 필요
  
    {
      "Effect": "Allow",
      "Action": [
        "sqs:GetQueueAttributes"
      ],
      "Resource": "*"
    }


7.   GetQueueAttributes 호출 주요 에러 코드

  >> QueueDoesNotExist : 

    - Queue 삭제
    - Queue URL 오타
    - 계정 불일치
    - Region 불일치

  >> InvalidAddress : 

    - 잘못된 Queue URL

  >> RequestThrottled : 

    - 호출량 초과
    - 너무 많은 API 호출

  >> UnsupportedOperation : 

    - 지원되지 않는 요청
    - 지원되지 않는 Attribute 나 잘못된 호출 방식 사용 시 발생 가능

  >> InvalidSecurity : 

    - 서명 또는 인증 문제
    - 잘못된 Access Key
    - 잘못된 Secret Key
    - SigV4 서명 오류

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ 196. (TWOK/LOGIC) [Aws] AWS SQS 서비스를 활용한 Server To Server 서버 간 이벤트 처리 로직 정리 - Simple Queue Service

https://kkh0977.tistory.com/8884

https://blog.naver.com/kkh0977/224306047793?trackingCode=blog_bloghome_searchlist


▶️ 88. (Aws/Amazon) [Aws SQS Message Queue] SQS 에서 Queue 큐에 메시지 전송 및 Lambda 트리거 함수 등록 Receive 응답 처리 정리

https://kkh0977.tistory.com/8144

https://blog.naver.com/kkh0977/223934877161?trackingCode=blog_bloghome_searchlist


▶️ 18. (Aws/Amazon) [Aws SQS Message Queue] SQS (Simple Queue Service) 심플 큐 서비스 개념 및 설명 정리

https://kkh0977.tistory.com/7620

https://blog.naver.com/kkh0977/223733090215?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8884

196. (TWOK/LOGIC) [Aws] AWS SQS 서비스를 활용한 Server To Server 서버 간 이벤트 처리 로직 정리 - Simple Queue

[로직 정리]정리 로직 : AWS / SQS / Simple Queue Service제 목 : [Aws] AWS SQS 서비스를 활용한 Server To Server 서버 간 이벤트 처리 로직 정리 - Simple Queue Service [설 명]// ----------------------------------------

kkh0977.tistory.com

576. (javaScript) [간단 소스] 자바스크립트 AWS SQS GetQueueAttributes 사용해 큐 Queue 존재 여부 확인 수행

투케이2K — Wed, 22 Jul 2026 19:40:50 +0900

[개발 환경 설정]

개발 툴 : Edit++ / Vscode

개발 언어 : JavaScript

[소스 코드]

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / AWS / SQS


- 사전)   SQS (Simple Queue Service) 심플 큐 서비스 간략 설명 :

  >> Aws SQS 란 서버들끼리 주고 받을 수 있는 메세지 큐를 제공하는 AWS 서비스 입니다

  >> Aws SQS 는 특정 플랫폼 서비스 확장 시 각 기능들을 여러 서버에서 처리하게 되면서, 서버들끼리 주고 받는 메세지를 잃어버리지 않고 정확하게 처리하는 데 도움을 주는 서비스입니다

  >> Aws SQS 는 시스템이 처리 해야할 일을 나중에 처리하거나, 다른 시스템이 처리할 수 있도록 하기 위한 비동기 메세징을 지원합니다

  >> Aws SQS 기본 개념 및 속성 용어 설명 : 

    - 메세지 : SQS 의 기본 데이터 단위 / XML, JSON과 같은 텍스트 형태이며 최대 64KB 까지 보낼 수 있음 / 메세지마다 고유한 ID가 부여 됨

    - 큐 (Queue) : 메세지를 담는 공간 / 리전 별로 생성 필요 / 자료형의 큐와 이름이 같지만, 선입선출(FIFO)을 보장 하지 않음

    - 배치 API : 한 번에 메세지를 최대 10개 혹은 최대 256KB까지 동시 처리 가능

    - 보기 제한 시간 (Visibility Timeout) : 메세지를 받은 뒤 특정 시간 동안 다른 곳에서 동일한 메세지를 다시 꺼내볼 수 없음 / 큐 하나에 여러 서버가 메세지를 받을 때 동일한 메세지를 동시에 처리하는 것을 방지 함

    - 지연 전송 (Delay Delivery) : 특정 시간 동안 메세지를 받지 못하게 한다

    - 처리 실패 큐 (Dead Letter Queues) : 메세지를 받고 작업이 처리되면 메세지를 삭제 하지만, 설정한 횟수를 초과하여 메세지를 받았는데 삭제되지 않고 남아있다면 처리 실패 큐로 보내진다

    - 짧은 폴링 (Short Polling) : 메세지 받기 요청을 하면 결과를 즉시 받을 수 있음

    - 긴 폴링 (Long Polling) : 메세지가 있으면 바로 가져오고, 메세지가 없으면 메세지가 올 때까지 기다림 / 기본 제한시간은 20초이며, 1초부터 최대 20초까지 설정할 수 있음

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [스크립트 : CDN 주소 설정] --> 
    <!-- <script src="https://code.jquery.com/jquery-latest.min.js"></script> -->

    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script>







    <!-- [자바스크립트 코드 지정] -->
    <script>    


        // -----------------------------------------------------------------
        // ✅ [Window.onload 웹 브라우저 로드 완료]
        // -----------------------------------------------------------------
        window.onload = function() {
            console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

            try {

                // ------------------------------------------------
                //   AWS 인증 및 사용 관련 변수 선언
                // ------------------------------------------------
                const accessKey = 'AK..7Q';
                const secretKey = 'Zz..xj';
                const region = 'ap-northeast-2';

                const sqsUrl = 'https://sqs.ap-northeast-2.amazonaws.com/123456789012/IoT_Role_Test_queue';


                // ------------------------------------------------
                //   AWS.config 지정
                // ------------------------------------------------
                AWS.config.update({
                    region: region,          
                    accessKeyId: accessKey,
                    secretAccessKey: secretKey
                });


                // -----------------------------------------
                //   AWS 객체 생성
                // -----------------------------------------
                const sqs = new AWS.SQS();


                // -----------------------------------------
                //   GetQueueAttributes 호출을 통해서 Queue 존재 여부 확인
                // -----------------------------------------
                // GetQueueAttributes 는 해당 Queue가 존재하는지 확인할 때도 많이 쓰지만, 원래 목적은 Queue의 상세 속성(Attribute)을 조회하는 API입니다.
                // -----------------------------------------                
                sqs.getQueueAttributes({
                    QueueUrl: sqsUrl,
                    AttributeNames: ['QueueArn']
                }, function(err, data) {

                    if (err) {
                        console.error('GetQueueAttributes : Queue not found : ', err);

                        if (err.code === 'AWS.SimpleQueueService.NonExistentQueue') {
                            console.error('GetQueueAttributes : Queue does not exist');
                        }

                    } else {
                        console.log('GetQueueAttributes : Queue exists : ', data, ' / ', data.Attributes);

                        // -----------------------------------------
                        //   응답 데이터 예시 
                        // -----------------------------------------
                        // Attributes: {QueueArn: 'arn:aws:sqs:ap-northeast-2:123456789012:IoT_Role_Test_queue'}
                        // ResponseMetadata: {RequestId: 'db592037-d020-5992-8de0-42ef0be782fc'}
                        // -----------------------------------------

                    }
                });
                
            }
            catch (exception) {
                console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
            }

        }; 
      
    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 196. (TWOK/LOGIC) [Aws] AWS SQS 서비스를 활용한 Server To Server 서버 간 이벤트 처리 로직 정리 - Simple Queue Service

https://kkh0977.tistory.com/8884

https://blog.naver.com/kkh0977/224306047793?trackingCode=blog_bloghome_searchlist


▶️ 88. (Aws/Amazon) [Aws SQS Message Queue] SQS 에서 Queue 큐에 메시지 전송 및 Lambda 트리거 함수 등록 Receive 응답 처리 정리

https://kkh0977.tistory.com/8144

https://blog.naver.com/kkh0977/223934877161?trackingCode=blog_bloghome_searchlist


▶️ 18. (Aws/Amazon) [Aws SQS Message Queue] SQS (Simple Queue Service) 심플 큐 서비스 개념 및 설명 정리

https://kkh0977.tistory.com/7620

https://blog.naver.com/kkh0977/223733090215?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8884

196. (TWOK/LOGIC) [Aws] AWS SQS 서비스를 활용한 Server To Server 서버 간 이벤트 처리 로직 정리 - Simple Queue

kkh0977.tistory.com

211. (Aws/Amazon) [AWS Lambda] AWS 콘솔 대시보드에서 Lambda 람다 실행 역할 (IAM Role) 정보 확인 방법

투케이2K — Wed, 22 Jul 2026 19:27:04 +0900

[개발 환경 설정]

개발 환경 : Aws / Amazon Web Services

제 목 : [AWS Lambda] AWS 콘솔 대시보드에서 Lambda 람다 실행 역할 (IAM Role) 정보 확인 방법

[설명 정리]

// --------------------------------------------------------------------------------------
[개발 및 환경]
// --------------------------------------------------------------------------------------

- 인프라 : Aws / Amazon Web Services


- 기술 구분 : Aws / Lambda / Function


- 사전)   AWS Lambda 간단 설명 : 

  >> Aws Lambda 는 서버 리스 FaaS 솔루션으로, 함수의 인스턴스를 실행하여 이벤트를 처리할 수 있습니다.

  >> Aws Lambda 는 이벤트에 응답하여 코드를 실행 하고 해당 코드에 필요한 컴퓨팅 리소스를 자동으로 관리합니다.


- 사전)   API Gateway 간단 설명 : 

  >> API Gateway 는 규모와 관계없이 REST 및 WebSocket API 를 생성, 게시, 유지, 모니터링 및 보호하기 위한 AWS 서비스입니다

  >> API Gateway 는 트래픽 관리, CORS 지원, 권한 부여 및 액세스 제어, 제한, 모니터링 및 API 버전 관리 등 최대 수십만 개의 동시 API 호출을 수신 및 처리하는 데 관계된 모든 작업을 처리합니다

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[설 명] 
// --------------------------------------------------------------------------------------

1. Aws 사이트 접속 후 1차 계정 로그인 수행 실시


2. Aws 사이트에서 상단  [ 검색 ] 메뉴 진입 -> Lambda 검색 수행


3. Lambda 화면에서 표시 된 함수 리스트에서 특정 함수 선택

  >> 함수 이름 | 설명 | 패키지 유형 | 런타임 | 유형 | 마지막 수정


4. 특정 함수 화면에서 [ 구성 ] 메뉴 선택 실시

  >> 코드 | 테스트 | 모니터링 | 구성 | 별칭 | 버전


5. 구성 목록에서 [ 권한 ] 메뉴 선택 실시


6. 권한 화면에서 부여 된 ✅ [ 역할 이름 ] 클릭 또는 ✅ [ 역할 문서 보기 ] 수행


7.   AWS Lambda 실행 역할 (Execution Role) 추가 설명 정리

  >> AWS Lambda 실행 역할은 람다 함수가 실행될 때 다른 AWS 리소스(예: S3, DynamoDB, CloudWatch)에 안전하게 접근하거나 로그를 남길 수 있도록 권한을 부여하는 IAM 역할입니다.

  >> 주요 권한 부여 범위 : 

    - AWS 리소스 접근 : S3 버킷 읽기/쓰기, DynamoDB 테이블 데이터 조회/수정 등 다른 AWS 서비스를 람다 코드 내에서 호출할 때 필요한 권한입니다.

    - 로그 및 모니터링 : 람다가 실행된 로그를 기록하기 위해 필수적인 AmazonCloudWatchLogsFullAccess 또는 AWSLambdaBasicExecutionRole 권한입니다.

    - VPC 접근 : 람다 함수가 프라이빗 VPC 내부의 리소스에 접근해야 할 경우 AWSLambdaVPCAccessExecutionRole 권한이 필요합니다.

  >> 설정 방법 및 관리 : 
  
    - 람다를 생성할 때 지정하며, IAM 콘솔이나 AWS 문서를 통해 필요한 리소스에 대한 정책을 추가하거나 인라인 정책으로 편집할 수 있습니다.

    - https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/lambda-intro-execution-role.html


8.   자바스크립트에서 AWS Lambda 함수 세부 정보 조회 방법 코드 첨부 : GetFunction

  <!-- [CDN 주소 설정] -->
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script>


  // [전역 변수 선언]        
  const region = 'ap-northeast-2';
  const accessKey = 'AK..A6';
  const secretKey = 'mP..5J';

  const functionName = 'device-status-manager'; // 람다 함수 명칭


  // [AWS.config 지정]
  AWS.config.update({        
    region: region,      
    accessKeyId: accessKey,
    secretAccessKey: secretKey
  });


  // [AWS 객체 생성]
  const aws = new AWS.Lambda();


  // [요청 파라미터 생성]
  const param = { // ✅ Request_파라미터
    FunctionName: functionName
  };


  // [getFunction] : AWS 람다 특정 함수 정보 조회 수행
  aws.getFunction( param , function(err, data) { 
    
    if (err) {
      console.error("[getFunction] : [Error] : ", err);
    }
    else {
      console.log("[getFunction] : [Success] : ", data);
    }

  });

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ 187. (Aws/Amazon) [AWS Lambda] AWS Lambda 람다 함수 목록 리스트 조회 ListFunctions API 설명 정리

https://kkh0977.tistory.com/8646

https://blog.naver.com/kkh0977/224191409655


▶️ 188. (Aws/Amazon) [AWS Lambda] AWS Lambda 람다 함수 정보 조회 GetFunction API 설명 정리

https://kkh0977.tistory.com/8649

https://blog.naver.com/kkh0977/224194452206


▶️ 107. (Aws/Amazon) [Amazon API Gateway] API 게이트웨이 람다 Lambda 프록시 통합 설정 옵션 설명 정리

https://kkh0977.tistory.com/8234

https://blog.naver.com/kkh0977/223983117575


▶️ 106. (Aws/Amazon) [Amazon API Gateway] API 게이트웨이 REST Get 호출 및 Lambda 프록시 통합 설정 Return 응답 반환 형식 정리

https://kkh0977.tistory.com/8229

https://blog.naver.com/kkh0977/223980399876


▶️ 100. (Aws/Amazon) [AWS Lambda] Aws 람다 Python 3.13 기반 기본 함수 구조 설명 정리

https://kkh0977.tistory.com/8188

https://blog.naver.com/kkh0977/223962723156


▶️ 494. (javaScript) 자바스크립트 AWS Lambda 함수 세부 정보 조회 수행 - GetFunction

https://kkh0977.tistory.com/8647

https://blog.naver.com/kkh0977/224193151696?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8646

187. (Aws/Amazon) [AWS Lambda] AWS Lambda 람다 함수 목록 리스트 조회 ListFunctions API 설명 정리

[개발 환경 설정]개발 환경 : Aws / Amazon Web Services [설명 정리]// --------------------------------------------------------------------------------------[개발 및 환경]// ---------------------------------------------------------

kkh0977.tistory.com

90. (Bitbucket/Git) [Git 명령어] git remote rename 명령어 사용해 원격 저장소 (Repository) 이름 변경 수행

투케이2K — Tue, 21 Jul 2026 21:32:01 +0900

[환경 설정]

저장소 : Git / 깃 / Bitbucket

사용 목적 : 소스 코드 버전 관리 실시

제 목 : [Git 명령어] git remote rename 명령어 사용해 원격 저장소 (Repository) 이름 변경 수행

[내 용]

-----------------------------------------------------------------------------------------
[구 분]
-----------------------------------------------------------------------------------------

구 분 : Git / 원격 저장소


제 목 : [Git 명령어] git remote rename 명령어 사용해 원격 저장소 (Repository) 이름 변경 수행


사전)   Git 간단 설명 정리 : 

  >> Git 은 소스 코드 버전 관리를 위한 분산 버전관리 시스템 (Distributed Version Control System, DVCS) 입니다.

    - 코드의 변경 이력을 모두 기록하고, 여러 개발자가 안전하게 협업할 수 있게 도와주는 도구입니다.

  >> Git 을 통해 코드의 과거부터 현재까지 모든 변경 이력을 기록하고, 여러 사람이 동시에 작업해도 충돌 없이 협업할 수 있습니다.

  >> Git 주요 용어 정리 : 

    - 저장소 (Repository) : 프로젝트의 파일과 변경 이력을 저장하는 장소 (로컬 저장소: 내 컴퓨터 / 원격 저장소: GitHub, GitLab 등의 서버)
    - 커밋 (Commit) : 저장 버튼 + 스냅샷 (특정 시점의 전체 파일 상태를 기록한 것)
    - 브랜치(Branch) : 독립된 작업 공간 (각 기능(feature)마다 따로 작업할 수 있음 / 개발을 마치면 메인 브랜치에 merge (병합) 하여 통합)
    - remote : 원격 저장소
    - Merge : 두 브랜치를 합치는 가장 흔한 방식
    - Rebase : 히스토리를 깔끔하게 재정렬하며 합치는 방식

  >> Git 주요 명령어 정리 : 

    - git clone : 원격 저장소를 내 로컬에 그대로 복제
    - git pull : 원격 저장소 변경 사항을 가져와 내 브랜치에 자동 병합
    - git fetch : 변경 사항만 로컬에 가져오고 병합은 직접 해야 함
    - git push : 내 변경 사항을 원격 저장소로 올림

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설명 정리]
-----------------------------------------------------------------------------------------

1.   사전) git remote rename 설명 : 

  >> git remote rename은 원격 저장소(Remote Repository)의 이름을 변경하는 명령어입니다.

  >> git remote rename → 원격 저장소의 이름(Name)을 변경


2.   git remote rename 기본 문법 : 

  >> git remote rename <기존이름> <새이름>


3.   git remote rename 사용 예시 : 

  >> git remote rename origin upstream

    - 원격 저장소의 이름을 origin에서 upstream으로 변경한다.

  >> AS-IS : origin  https://bitbucket.org/twok-2k/ios-swiftproject.git (push)

  >> TO-BE : upstream  https://bitbucket.org/twok-2k/ios-swiftproject.git (push)


4. ✅ 추가 설명) Remote (Remote Repository)

  >> Git 프로젝트는 원격 저장소 정보를 가지고 있습니다.

  >> 현재 등록된 원격 저장소는 다음 명령으로 확인할 수 있습니다.

  >> 명령어 : git remote -v

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 88. (Bitbucket/Git) [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행

https://kkh0977.tistory.com/8994

https://blog.naver.com/kkh0977/224352388691


▶️ 82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

https://kkh0977.tistory.com/8988

https://blog.naver.com/kkh0977/224350968799


▶️ 83. (Bitbucket/Git) [SSH Key 설정 방법] : [2] : 비트버킷 ssh key 생성 방법 및 ssh 연결 테스트 확인 방법

https://kkh0977.tistory.com/8989

https://blog.naver.com/kkh0977/224350974963


▶️ 84. (Bitbucket/Git) [SSH Key 설정 방법] : [3] : App passwords are deprecated .. URL returned error: 410

https://kkh0977.tistory.com/8990

https://blog.naver.com/kkh0977/224350985203


▶️ 85. (Bitbucket/Git) [SSH Key 설정 방법] : [4] : Git SSH Key 공개키 기반 인증 방식 설명 정리

https://kkh0977.tistory.com/8991

https://blog.naver.com/kkh0977/224352336395


▶️ 79. (GitLab/Git) [깃랩] Personal Access Token (PAT) Git 액세스 토큰 생성 방법 정리

https://kkh0977.tistory.com/8654

https://blog.naver.com/kkh0977/224198943947


▶️ 76. (Bitbucket/Git) App passwords are recommended .. fatal: Authentication failed for 'https ..'

https://kkh0977.tistory.com/8082

https://blog.naver.com/kkh0977/223910363021

-----------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8988

82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

[환경 설정]저장소 : Git / 깃 / Bitbucket사용 목적 : 소스 코드 버전 관리 실시제 목 : [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법 [설 명]---------------

kkh0977.tistory.com

89. (Bitbucket/Git) [Git 명령어] git remote set-url 명령어 사용해 Git 저장소 (Remote Repository) URL 주소 변경 수행

투케이2K — Tue, 21 Jul 2026 21:16:54 +0900

[환경 설정]

저장소 : Git / 깃 / Bitbucket

사용 목적 : 소스 코드 버전 관리 실시

제 목 : [Git 명령어] git remote set-url 명령어 사용해 Git 저장소 (Remote Repository) URL 주소 변경 수행

[내 용]

-----------------------------------------------------------------------------------------
[구 분]
-----------------------------------------------------------------------------------------

구 분 : Git / 원격 저장소


제 목 : [Git 명령어] git remote set-url 명령어 사용해 Git 저장소 (Remote Repository) URL 주소 변경 수행


사전)   Git 간단 설명 정리 : 

  >> Git 은 소스 코드 버전 관리를 위한 분산 버전관리 시스템 (Distributed Version Control System, DVCS) 입니다.

    - 코드의 변경 이력을 모두 기록하고, 여러 개발자가 안전하게 협업할 수 있게 도와주는 도구입니다.

  >> Git 을 통해 코드의 과거부터 현재까지 모든 변경 이력을 기록하고, 여러 사람이 동시에 작업해도 충돌 없이 협업할 수 있습니다.

  >> Git 주요 용어 정리 : 

    - 저장소 (Repository) : 프로젝트의 파일과 변경 이력을 저장하는 장소 (로컬 저장소: 내 컴퓨터 / 원격 저장소: GitHub, GitLab 등의 서버)
    - 커밋 (Commit) : 저장 버튼 + 스냅샷 (특정 시점의 전체 파일 상태를 기록한 것)
    - 브랜치(Branch) : 독립된 작업 공간 (각 기능(feature)마다 따로 작업할 수 있음 / 개발을 마치면 메인 브랜치에 merge (병합) 하여 통합)
    - remote : 원격 저장소
    - Merge : 두 브랜치를 합치는 가장 흔한 방식
    - Rebase : 히스토리를 깔끔하게 재정렬하며 합치는 방식

  >> Git 주요 명령어 정리 : 

    - git clone : 원격 저장소를 내 로컬에 그대로 복제
    - git pull : 원격 저장소 변경 사항을 가져와 내 브랜치에 자동 병합
    - git fetch : 변경 사항만 로컬에 가져오고 병합은 직접 해야 함
    - git push : 내 변경 사항을 원격 저장소로 올림

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설명 정리]
-----------------------------------------------------------------------------------------

1.   사전) git remote set-url 설명 : 

  >> git remote set-url은 Git 저장소(Remote Repository)의 URL을 변경하는 명령어입니다.

  >> 예를 들어 현재 프로젝트가 Bitbucket의 HTTPS 주소를 사용하고 있는데 SSH 주소로 변경하거나, 저장소가 이전되어 새로운 URL로 변경해야 할 때 사용합니다.


2.   git remote set-url 기본 문법 : 

  >> git remote set-url <remote-name> <new-url>

  >> <remote-name> : 원격 저장소 이름 (origin, upstream 등)

  >> <new-url> : 변경할 새로운 URL


3.   git remote set-url 사용 예시 : 

  >> git remote set-url origin git@bitbucket.org:twok-2k/ios-swiftproject.git


4. ✅ 추가 설명) Remote (Remote Repository)

  >> Git 프로젝트는 원격 저장소 정보를 가지고 있습니다.

  >> 현재 등록된 원격 저장소는 다음 명령으로 확인할 수 있습니다.

  >> 명령어 : git remote -v

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 88. (Bitbucket/Git) [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행

https://kkh0977.tistory.com/8994

https://blog.naver.com/kkh0977/224352388691


▶️ 82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

https://kkh0977.tistory.com/8988

https://blog.naver.com/kkh0977/224350968799


▶️ 83. (Bitbucket/Git) [SSH Key 설정 방법] : [2] : 비트버킷 ssh key 생성 방법 및 ssh 연결 테스트 확인 방법

https://kkh0977.tistory.com/8989

https://blog.naver.com/kkh0977/224350974963


▶️ 84. (Bitbucket/Git) [SSH Key 설정 방법] : [3] : App passwords are deprecated .. URL returned error: 410

https://kkh0977.tistory.com/8990

https://blog.naver.com/kkh0977/224350985203


▶️ 85. (Bitbucket/Git) [SSH Key 설정 방법] : [4] : Git SSH Key 공개키 기반 인증 방식 설명 정리

https://kkh0977.tistory.com/8991

https://blog.naver.com/kkh0977/224352336395


▶️ 79. (GitLab/Git) [깃랩] Personal Access Token (PAT) Git 액세스 토큰 생성 방법 정리

https://kkh0977.tistory.com/8654

https://blog.naver.com/kkh0977/224198943947


▶️ 76. (Bitbucket/Git) App passwords are recommended .. fatal: Authentication failed for 'https ..'

https://kkh0977.tistory.com/8082

https://blog.naver.com/kkh0977/223910363021

-----------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8994

88. (Bitbucket/Git) [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행

[환경 설정]저장소 : Git / 깃 / Bitbucket사용 목적 : 소스 코드 버전 관리 실시제 목 : [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행 [내 용]-------------------

kkh0977.tistory.com

106. (Http/Beacon) Beacon API (비콘 API) sendBeacon 사용해 페이지가 닫히거나 다른 페이지로 이동하더라도 백그라운드 요청 수행

투케이2K — Tue, 21 Jul 2026 20:48:38 +0900

[개발 환경 설정]

개발 툴 : Edit++ / VsCode

개발 기술 : Http / API

제 목 : Beacon API (비콘 API) sendBeacon 사용해 페이지가 닫히거나 다른 페이지로 이동하더라도 백그라운드 요청 수행

[소스 코드]

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript / 자바스크립트


- 개발 툴 : Edit ++ / VsCode


- 구분 : HTTP / API


- 사전)   Beacon API 간단 설명 :

  >> Beacon API 는 웹 서버에 비동기적인 논블로킹 요청을 보내기 위해 사용됩니다.

    - ✅ HTTP POST 요청으로 보내집니다.

  >> Beacon API 요청은 서버로부터 응답을 요구하지 않으며, 페이지가 종료되는 시점에도 요청이 취소되지 않고 비동기로 전송을 보장합니다.

  >> Beacon API 주요 특징

    - 전송 보장 : 기존 fetch나 XMLHttpRequest는 페이지가 언로드(unload)되면 요청이 중단될 수 있으나, Beacon 요청은 브라우저가 종료되거나 페이지가 변경되어도 백그라운드에서 안전하게 완료됩니다.
    - 비동기 및 논블로킹 : 메인 스레드를 차단하지 않아 페이지 로드나 이동 속도에 영향을 주지 않습니다.
    - 응답 미수신 : 서버의 응답이나 데이터를 반환받지 않는 '발송 후 잊기(fire and forget)' 방식입니다.
    - 제한사항 : HTTP POST 방식만 지원하며, 대용량 데이터 전송에는 적합하지 않습니다.

  >> ✅ 데이터 크기 제한 (중요)

    - 64KB 제한 : 브라우저는 진행 중인 모든 keepalive 요청 및 sendBeacon() 요청의 총 데이터 크기를 최대 64KB로 제한합니다.
    - 실패 가능성 : 남은 버퍼 용량(64KB)을 초과하는 요청을 보내면 TypeError: fetch failed 에러가 발생하며 요청이 전송되지 않습니다.


- 사전)   document.visibilityState 간략 설명 : 

  >> document.visibilityState 는 현재 웹 페이지가 사용자에게 보이는 상태인지 여부를 알려주는 Document API 입니다.

  >> document.visibilityState 가 주로 사용 되는 경우

    - 사용자가 다른 탭으로 이동했는지 감지
    - 브라우저가 백그라운드 상태인지 감지
    - 동영상 자동 일시정지
    - 실시간 데이터 조회 중지
    - 성능 최적화 및 배터리 절약

  >> document.visibilityState 상태 값
  
    - "visible" : 페이지가 사용자에게 보이는 상태
    - "hidden" : 탭이 백그라운드에 있거나 최소화된 상태

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [스크립트 : CDN 주소 설정] --> 
    <!-- <script src="https://code.jquery.com/jquery-latest.min.js"></script> -->







    <!-- [자바스크립트 코드 지정] -->
    <script>    


        // -----------------------------------------------------------------
        // ✅ [Window.onload 웹 브라우저 로드 완료]
        // -----------------------------------------------------------------
        window.onload = function() {
            console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

            try {

                // ------------------------------------------------
                //   사전) Beacon API 간략 설명
                // ------------------------------------------------
                /*
                1. Beacon API 는 웹 서버에 비동기적인 논블로킹 요청을 보내기 위해 사용됩니다.

                  >> ✅ HTTP POST 요청으로 보내집니다.

                2. Beacon API 요청은 서버로부터 응답을 요구하지 않으며, 페이지가 종료되는 시점에도 요청이 취소되지 않고 비동기로 전송을 보장합니다.

                3. Beacon API 주요 특징

                  >> 전송 보장 : 기존 fetch나 XMLHttpRequest는 페이지가 언로드(unload)되면 요청이 중단될 수 있으나, Beacon 요청은 브라우저가 종료되거나 페이지가 변경되어도 백그라운드에서 안전하게 완료됩니다.

                  >> 비동기 및 논블로킹 : 메인 스레드를 차단하지 않아 페이지 로드나 이동 속도에 영향을 주지 않습니다.

                  >> 응답 미수신 : 서버의 응답이나 데이터를 반환받지 않는 '발송 후 잊기(fire and forget)' 방식입니다.
                  
                  >> 제한사항 : HTTP POST 방식만 지원하며, 대용량 데이터 전송에는 적합하지 않습니다.

                4. ✅ 데이터 크기 제한 (중요)

                  >> 64KB 제한 : 브라우저는 진행 중인 모든 keepalive 요청 및 sendBeacon() 요청의 총 데이터 크기를 최대 64KB로 제한합니다.

                  >> 실패 가능성 : 남은 버퍼 용량(64KB)을 초과하는 요청을 보내면 TypeError: fetch failed 에러가 발생하며 요청이 전송되지 않습니다.

                5. 추가 설명 사이트 : https://developer.mozilla.org/ko/docs/Web/API/Navigator/sendBeacon
                */
                // ------------------------------------------------



                // ------------------------------------------------
                //   실시간 브라우저 표시 및 보이는 상태 확인
                // ------------------------------------------------

                document.addEventListener('visibilitychange', () => {

                    if (document.visibilityState === 'hidden') {
                        console.log("visibilitychange :: hidden");


                        // [URL 선언 실시]
                        var urlData = "https://jsonplaceholder.typicode.com/posts";


                        // [Object 객체 생성 및 body 값 추가 실시]
                        var jsonObject = new Object();
                        jsonObject["userId"] = 1;
                        jsonObject["id"] = 1;

                        
                        // ✅ [Beacon API 요청 수행]
                        // [문자열, FormData, Blob 등을 전송할 수 있습니다.]
                        const data = JSON.stringify(jsonObject);
                        navigator.sendBeacon(urlData, data);


                    }

                });
                
                

                // ------------------------------------------------
                //   출력 로그 예시
                // ------------------------------------------------
                /*                
                visibilitychange :: hidden
                
                ✅ 개발자 모드 > 네트워크 탭에서 요청한 API 상태 확인
                */
                // ------------------------------------------------
                
            }
            catch (exception) {
                console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
            }

        }; 
      
    </script>


</head>


<body>

</body>

</html>

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ [간단 소스] callback 콜백 방식 사용해 fetch api (페치) API 호출 및 결과 확인 수행

https://kkh0977.tistory.com/8786

https://blog.naver.com/kkh0977/224262801929


▶️ [function 함수 콜백 (callback) 리턴 데이터 반환 실시]

https://kkh0977.tistory.com/2080

https://blog.naver.com/kkh0977/222794828517?trackingCode=blog_bloghome_searchlist


▶️ [fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시간 대기 후 재요청 수행]

https://kkh0977.tistory.com/8653

https://blog.naver.com/kkh0977/224198939582


▶️ [fetch (페치) Web API 사용해 async await 동기 방식 http 요청 및 response header 및 body 확인 실시]

https://kkh0977.tistory.com/3514

https://blog.naver.com/kkh0977/222952720427?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 http post body json 방식 요청 수행 실시]

https://kkh0977.tistory.com/3513

https://blog.naver.com/kkh0977/222952665953?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 http get 방식 요청 수행 실시]

https://kkh0977.tistory.com/3510

https://blog.naver.com/kkh0977/222951679283?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8653

102. (Http/fetch) fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시

[개발 환경 설정]개발 툴 : Edit++ / VsCode개발 기술 : Http / API제 목 : fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시간 대기 후 재요청 수행 [소스 코드] //

kkh0977.tistory.com

105. (Http/fetch) fetch api (페치) 요청 시 keepalive 옵션 지정해 페이지가 닫히거나 다른 페이지로 이동하더라도 백그라운드 요청 보장 설정

투케이2K — Tue, 21 Jul 2026 20:39:27 +0900

[개발 환경 설정]

개발 툴 : Edit++ / VsCode

개발 기술 : Http / API

제 목 : fetch api (페치) 요청 시 keepalive 옵션 지정해 페이지가 닫히거나 다른 페이지로 이동하더라도 백그라운드 요청 보장 설정

[소스 코드]

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript / 자바스크립트


- 개발 툴 : Edit ++ / VsCode


- 구분 : HTTP / API


- 사전)   Fetch API 간단 설명 :

  >> Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.

  >> Fetch API 는 브라우저에서 비동기 HTTP 요청을 수행할 수 있습니다.

    - 데이터를 서버에 요청(request) 하고 응답(response)을 받아 처리할 때 사용합니다.

  >> Fetch API 핵심 기능 : 

    - Promise 기반 : 비동기 처리가 쉽고 .then(), .catch() 또는 async/await로 직관적으로 코드를 작성할 수 있습니다.
    - JSON 처리 간편 : response.json()만 호출하면 비동기로 JSON 데이터 파싱 가능
    - 다양한 옵션 제공 : HTTP 메서드 (GET, POST, PUT, DELETE 등) , 헤더 설정 , 요청 바디(JSON, FormData 등) , CORS 설정 , 인증 토큰 추가
    - 스트림 기반 처리 지원 : 대용량 다운로드에도 효율적


- 사전)   document.visibilityState 간략 설명 : 

  >> document.visibilityState 는 현재 웹 페이지가 사용자에게 보이는 상태인지 여부를 알려주는 Document API 입니다.

  >> document.visibilityState 가 주로 사용 되는 경우

    - 사용자가 다른 탭으로 이동했는지 감지
    - 브라우저가 백그라운드 상태인지 감지
    - 동영상 자동 일시정지
    - 실시간 데이터 조회 중지
    - 성능 최적화 및 배터리 절약

  >> document.visibilityState 상태 값
  
    - "visible" : 페이지가 사용자에게 보이는 상태
    - "hidden" : 탭이 백그라운드에 있거나 최소화된 상태

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [스크립트 : CDN 주소 설정] --> 
    <!-- <script src="https://code.jquery.com/jquery-latest.min.js"></script> -->







    <!-- [자바스크립트 코드 지정] -->
    <script>    


        // -----------------------------------------------------------------
        // ✅ [Window.onload 웹 브라우저 로드 완료]
        // -----------------------------------------------------------------
        window.onload = function() {
            console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

            try {

                // ------------------------------------------------
                //   사전) fetch keepalive 옵션 간략 설명
                // ------------------------------------------------
                /*
                1. fetch()의 keepalive 옵션은 페이지가 닫히거나 다른 페이지로 이동하더라도 HTTP 요청이 취소되지 않고 백그라운드에서 끝까지 완료되도록 보장하는 옵션입니다.

                2. 기존 fetch() 요청은 사용자가 브라우저 탭을 닫거나 링크를 클릭해 다른 페이지로 이동하면 즉시 중단(Abort)되지만, keepalive: true를 설정하면 브라우저가 해당 요청을 메모리에 남겨두고 끝까지 실행합니다.

                3. 핵심 특징 : 

                  >> 페이지 종료 시 전송 보장 : navigator.sendBeacon()과 동일하게 웹페이지의 수명 주기와 상관없이 요청을 안전하게 전송합니다.

                  >> 자유로운 커스텀 : sendBeacon()과 달리 커스텀 HTTP 헤더 설정, 다양한 HTTP 메서드(PUT, DELETE 등) 사용, 상세한 바디(body) 데이터 포맷 지정이 모두 가능합니다.

                  >> 비동기/논블로킹 : 메인 스레드를 붙잡지 않아 다음 페이지로 이동하는 속도를 늦추지 않습니다.

                  >> 응답 무시 (Fire and Forget) : 보통 페이지가 완전히 언로드된 후 요청이 처리되므로, 자바스크립트 코드로 서버의 응답 데이터를 받아와 UI를 업데이트하는 작업은 불가능합니다.

                4. ✅ 데이터 크기 제한 (중요)

                  >> 64KB 제한 : 브라우저는 진행 중인 모든 keepalive 요청 및 sendBeacon() 요청의 총 데이터 크기를 최대 64KB로 제한합니다.

                  >> 실패 가능성 : 남은 버퍼 용량(64KB)을 초과하는 요청을 보내면 TypeError: fetch failed 에러가 발생하며 요청이 전송되지 않습니다.
                */
                // ------------------------------------------------



                // ------------------------------------------------
                //   실시간 브라우저 표시 및 보이는 상태 확인
                // ------------------------------------------------
                document.addEventListener('visibilitychange', () => {

                    if (document.visibilityState === 'hidden') {
                        console.log("visibilitychange :: hidden");


                        // [URL 선언 실시]
                        var urlData = "https://jsonplaceholder.typicode.com/posts";


                        // [Headers 객체 선언 및 헤더 값 추가]
                        const myHeaders = new Headers();
                        myHeaders.append("Content-Type", "application/json");
                        myHeaders.append("Cache-Control", "no-cache");


                        // [Object 객체 생성 및 body 값 추가 실시]

                        var jsonObject = new Object();
                        jsonObject["userId"] = 1;
                        jsonObject["id"] = 1;

                        
                        // [Fetch 요청 수행 실시]
                        // [사용자가 웹사이트를 나가지 않고 서비스를 계속 이용 중인 상태에서 keepalive 요청을 보냈다면 정상적으로 서버의 리턴 응답을 확인할 수 있습니다.]
                        fetch(urlData, {
                            method: "POST",
                            headers: myHeaders, // [헤더 값 지정]
                            body: JSON.stringify(jsonObject), // [Body 값 지정]

                            keepalive: true // ✅ 페이지가 닫혀도 요청 전송을 보장하는 핵심 옵션
                        })
                        .then((response) => {
                            console.log("");
                            console.log("======================================================");
                            console.log("[Http] : [response] : [http 응답 코드 및 헤더 확인]");
                            console.log("-----------------------------------------");
                            console.log("Status Code : " + response.status);
                            console.log("-----------------------------------------");
                            console.log("Content-Type : " + response.headers.get('Content-Type'));
                            console.log("======================================================");
                            console.log("");

                            // [상태 코드 확인]
                            if (!response.ok) {
                                throw new Error("Http Status Error : " + response.status);
                            }

                            // [리턴 반환 설정]
                            //return response.json(); // JSON 형식 반환

                            return response.text(); // TEXT 형식 반환
                        }) 
                        .then((data) => {
                            console.log("");
                            console.log("======================================================");
                            console.log("[Http] : [response] : [http 응답 데이터 확인]");
                            console.log("-----------------------------------------");
                            console.log("response : " + data);
                            console.log("======================================================");
                            console.log("");
                        })
                        .catch((error) => {
                            console.error("");
                            console.error("======================================================");
                            console.error("[Http] : [error] : [http 에러 결과 확인]");
                            console.error("-----------------------------------------");
                            console.error("[error] : " + error);
                            console.error("======================================================");
                            console.error(""); 
                        });


                    }

                });
                
                

                // ------------------------------------------------
                //   출력 로그 예시
                // ------------------------------------------------
                /*                
                visibilitychange :: hidden
                
                ======================================================
                [Http] : [response] : [http 응답 코드 및 헤더 확인]
                -----------------------------------------
                Status Code : 201
                -----------------------------------------
                Content-Type : application/json; charset=utf-8
                ======================================================
                
                
                ======================================================
                [Http] : [response] : [http 응답 데이터 확인]
                -----------------------------------------
                response : {
                "userId": 1,
                "id": 101
                }
                ======================================================
                */
                // ------------------------------------------------
                
            }
            catch (exception) {
                console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
            }

        }; 
      
    </script>


</head>


<body>

</body>

</html>

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ [간단 소스] callback 콜백 방식 사용해 fetch api (페치) API 호출 및 결과 확인 수행

https://kkh0977.tistory.com/8786

https://blog.naver.com/kkh0977/224262801929


▶️ [function 함수 콜백 (callback) 리턴 데이터 반환 실시]

https://kkh0977.tistory.com/2080

https://blog.naver.com/kkh0977/222794828517?trackingCode=blog_bloghome_searchlist


▶️ [fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시간 대기 후 재요청 수행]

https://kkh0977.tistory.com/8653

https://blog.naver.com/kkh0977/224198939582


▶️ [fetch (페치) Web API 사용해 async await 동기 방식 http 요청 및 response header 및 body 확인 실시]

https://kkh0977.tistory.com/3514

https://blog.naver.com/kkh0977/222952720427?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 http post body json 방식 요청 수행 실시]

https://kkh0977.tistory.com/3513

https://blog.naver.com/kkh0977/222952665953?trackingCode=blog_bloghome_searchlist


▶️ [fetch (페치) Web API 사용해 http get 방식 요청 수행 실시]

https://kkh0977.tistory.com/3510

https://blog.naver.com/kkh0977/222951679283?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8786

104. (Http/fetch) [간단 소스] callback 콜백 방식 사용해 fetch api (페치) API 호출 및 결과 확인 수행

[개발 환경 설정]개발 툴 : Edit++ / VsCode개발 기술 : Http / API제 목 : [간단 소스] callback 콜백 방식 사용해 fetch api (페치) API 호출 및 결과 확인 수행 [소스 코드]// ---------------------------------

kkh0977.tistory.com

88. (Bitbucket/Git) [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행

투케이2K — Mon, 20 Jul 2026 20:08:13 +0900

[환경 설정]

저장소 : Git / 깃 / Bitbucket

사용 목적 : 소스 코드 버전 관리 실시

제 목 : [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행

[내 용]

-----------------------------------------------------------------------------------------
[구 분]
-----------------------------------------------------------------------------------------

구 분 : Git / 원격 저장소


제 목 : [Git 명령어] cat ~/.ssh/id_ed25519.pub 명령어 사용해 Git SSH Key 공개키 정보 확인 수행


사전) Git 간단 설명 정리 : 

  >> Git 은 소스 코드 버전 관리를 위한 분산 버전관리 시스템 (Distributed Version Control System, DVCS) 입니다.

    - 코드의 변경 이력을 모두 기록하고, 여러 개발자가 안전하게 협업할 수 있게 도와주는 도구입니다.

  >> Git 을 통해 코드의 과거부터 현재까지 모든 변경 이력을 기록하고, 여러 사람이 동시에 작업해도 충돌 없이 협업할 수 있습니다.

  >> Git 주요 용어 정리 : 

    - 저장소 (Repository) : 프로젝트의 파일과 변경 이력을 저장하는 장소 (로컬 저장소: 내 컴퓨터 / 원격 저장소: GitHub, GitLab 등의 서버)
    - 커밋 (Commit) : 저장 버튼 + 스냅샷 (특정 시점의 전체 파일 상태를 기록한 것)
    - 브랜치(Branch) : 독립된 작업 공간 (각 기능(feature)마다 따로 작업할 수 있음 / 개발을 마치면 메인 브랜치에 merge (병합) 하여 통합)
    - remote : 원격 저장소
    - Merge : 두 브랜치를 합치는 가장 흔한 방식
    - Rebase : 히스토리를 깔끔하게 재정렬하며 합치는 방식

  >> Git 주요 명령어 정리 : 

    - git clone : 원격 저장소를 내 로컬에 그대로 복제
    - git pull : 원격 저장소 변경 사항을 가져와 내 브랜치에 자동 병합
    - git fetch : 변경 사항만 로컬에 가져오고 병합은 직접 해야 함
    - git push : 내 변경 사항을 원격 저장소로 올림

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설명 정리]
-----------------------------------------------------------------------------------------

1.   사전 설정 필요 사항 : 

  >> 로컬 PC 에서 SSH Key 정보 생성 필요


2.   사전 Git SSH Key 간략 설명 : 

  >> Git 에서 SSH Key 는 Git 서버 (GitHub, GitLab, Bitbucket 등) 에 비밀번호를 입력하지 않고 안전하게 인증하기 위한 공개키 기반 인증 방식입니다.

  >> SSH Key를 사용해 Git 저장소에 코드를 Push/Pull 할 수 있습니다.

  >> HTTP 방식 URL 주소 : https://github.com/user/repo.git

  >> SSH Key 방식 URL 주소 : git@github.com:user/repo.git


3.   Git 명령어 수행 형식 : 

  >> cat ~/.ssh/id_ed25519.pub


4.   Git 명령어 수행 결과

  >> ssh-ed25519 AA..5l test@gmail.com

  >> ✅ 해당 정보를 Git 또는 Bitbucket 에 등록 필요

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

https://kkh0977.tistory.com/8988

https://blog.naver.com/kkh0977/224350968799


▶️ 83. (Bitbucket/Git) [SSH Key 설정 방법] : [2] : 비트버킷 ssh key 생성 방법 및 ssh 연결 테스트 확인 방법

https://kkh0977.tistory.com/8989

https://blog.naver.com/kkh0977/224350974963


▶️ 84. (Bitbucket/Git) [SSH Key 설정 방법] : [3] : App passwords are deprecated .. URL returned error: 410

https://kkh0977.tistory.com/8990

https://blog.naver.com/kkh0977/224350985203


▶️ 85. (Bitbucket/Git) [SSH Key 설정 방법] : [4] : Git SSH Key 공개키 기반 인증 방식 설명 정리

https://kkh0977.tistory.com/8991

https://blog.naver.com/kkh0977/224352336395


▶️ 79. (GitLab/Git) [깃랩] Personal Access Token (PAT) Git 액세스 토큰 생성 방법 정리

https://kkh0977.tistory.com/8654

https://blog.naver.com/kkh0977/224198943947


▶️ 76. (Bitbucket/Git) App passwords are recommended .. fatal: Authentication failed for 'https ..'

https://kkh0977.tistory.com/8082

https://blog.naver.com/kkh0977/223910363021

-----------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8988

82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

kkh0977.tistory.com

87. (Bitbucket/Git) [Git 명령어] ssh -T git@bitbucket.org 사용해 Git SSH Key 연결 테스트 수행

투케이2K — Mon, 20 Jul 2026 19:36:23 +0900

[환경 설정]

저장소 : Git / 깃 / Bitbucket

사용 목적 : 소스 코드 버전 관리 실시

제 목 : [Git 명령어] ssh -T git@bitbucket.org 사용해 Git SSH Key 연결 테스트 수행

[내 용]

-----------------------------------------------------------------------------------------
[구 분]
-----------------------------------------------------------------------------------------

구 분 : Git / 원격 저장소


제 목 : [Git 명령어] ssh -T git@bitbucket.org 사용해 Git SSH Key 연결 테스트 수행


사전) Git 간단 설명 정리 : 

  >> Git 은 소스 코드 버전 관리를 위한 분산 버전관리 시스템 (Distributed Version Control System, DVCS) 입니다.

    - 코드의 변경 이력을 모두 기록하고, 여러 개발자가 안전하게 협업할 수 있게 도와주는 도구입니다.

  >> Git 을 통해 코드의 과거부터 현재까지 모든 변경 이력을 기록하고, 여러 사람이 동시에 작업해도 충돌 없이 협업할 수 있습니다.

  >> Git 주요 용어 정리 : 

    - 저장소 (Repository) : 프로젝트의 파일과 변경 이력을 저장하는 장소 (로컬 저장소: 내 컴퓨터 / 원격 저장소: GitHub, GitLab 등의 서버)
    - 커밋 (Commit) : 저장 버튼 + 스냅샷 (특정 시점의 전체 파일 상태를 기록한 것)
    - 브랜치(Branch) : 독립된 작업 공간 (각 기능(feature)마다 따로 작업할 수 있음 / 개발을 마치면 메인 브랜치에 merge (병합) 하여 통합)
    - remote : 원격 저장소
    - Merge : 두 브랜치를 합치는 가장 흔한 방식
    - Rebase : 히스토리를 깔끔하게 재정렬하며 합치는 방식

  >> Git 주요 명령어 정리 : 

    - git clone : 원격 저장소를 내 로컬에 그대로 복제
    - git pull : 원격 저장소 변경 사항을 가져와 내 브랜치에 자동 병합
    - git fetch : 변경 사항만 로컬에 가져오고 병합은 직접 해야 함
    - git push : 내 변경 사항을 원격 저장소로 올림

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설명 정리]
-----------------------------------------------------------------------------------------

1.   사전 설정 필요 사항 : 

  >> 로컬 PC 에서 SSH Key 정보 생성 필요

  >> Git 또는 Bitbucket 사이트에서 SSH Key 등록 필요


2.   Git 명령어 수행 형식 : 

  >> ssh -T git@bitbucket.org


3.   Git 명령어 수행 결과

  The authenticity of host 'bitbucket.org (104.192.140.24)' can't be established.
  ED25519 key fingerprint is SHA256:ybg..SM.
  This key is not known by any other names
  Are you sure you want to continue connecting (yes/no/[fingerprint])? yes ✅ 수동으로 yes 입력 필요
  Warning: Permanently added 'bitbucket.org' (ED25519) to the list of known hosts.
  authenticated via ssh key.

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

https://kkh0977.tistory.com/8988

https://blog.naver.com/kkh0977/224350968799


▶️ 83. (Bitbucket/Git) [SSH Key 설정 방법] : [2] : 비트버킷 ssh key 생성 방법 및 ssh 연결 테스트 확인 방법

https://kkh0977.tistory.com/8989

https://blog.naver.com/kkh0977/224350974963


▶️ 84. (Bitbucket/Git) [SSH Key 설정 방법] : [3] : App passwords are deprecated .. URL returned error: 410

https://kkh0977.tistory.com/8990

https://blog.naver.com/kkh0977/224350985203


▶️ 85. (Bitbucket/Git) [SSH Key 설정 방법] : [4] : Git SSH Key 공개키 기반 인증 방식 설명 정리

https://kkh0977.tistory.com/8991

https://blog.naver.com/kkh0977/224352336395


▶️ 79. (GitLab/Git) [깃랩] Personal Access Token (PAT) Git 액세스 토큰 생성 방법 정리

https://kkh0977.tistory.com/8654

https://blog.naver.com/kkh0977/224198943947


▶️ 76. (Bitbucket/Git) App passwords are recommended .. fatal: Authentication failed for 'https ..'

https://kkh0977.tistory.com/8082

https://blog.naver.com/kkh0977/223910363021

-----------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8988

82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

kkh0977.tistory.com

86. (Bitbucket/Git) [에러 관리] SSH key Permission denied (publickey) fatal: Could not read repository

투케이2K — Mon, 20 Jul 2026 19:12:29 +0900

[환경 설정]

저장소 : Git / 깃 / Bitbucket

사용 목적 : 소스 코드 버전 관리 실시

제 목 : [에러 관리] SSH key Permission denied (publickey) fatal: Could not read repository

[내 용]

-----------------------------------------------------------------------------------------
[구 분]
-----------------------------------------------------------------------------------------

구 분 : Git / 원격 저장소


제 목 : [에러 관리] SSH key Permission denied (publickey) fatal: Could not read repository


사전) Git 간단 설명 정리 : 

  >> Git 은 소스 코드 버전 관리를 위한 분산 버전관리 시스템 (Distributed Version Control System, DVCS) 입니다.

    - 코드의 변경 이력을 모두 기록하고, 여러 개발자가 안전하게 협업할 수 있게 도와주는 도구입니다.

  >> Git 을 통해 코드의 과거부터 현재까지 모든 변경 이력을 기록하고, 여러 사람이 동시에 작업해도 충돌 없이 협업할 수 있습니다.

  >> Git 주요 용어 정리 : 

    - 저장소 (Repository) : 프로젝트의 파일과 변경 이력을 저장하는 장소 (로컬 저장소: 내 컴퓨터 / 원격 저장소: GitHub, GitLab 등의 서버)
    - 커밋 (Commit) : 저장 버튼 + 스냅샷 (특정 시점의 전체 파일 상태를 기록한 것)
    - 브랜치(Branch) : 독립된 작업 공간 (각 기능(feature)마다 따로 작업할 수 있음 / 개발을 마치면 메인 브랜치에 merge (병합) 하여 통합)
    - remote : 원격 저장소
    - Merge : 두 브랜치를 합치는 가장 흔한 방식
    - Rebase : 히스토리를 깔끔하게 재정렬하며 합치는 방식

  >> Git 주요 명령어 정리 : 

    - git clone : 원격 저장소를 내 로컬에 그대로 복제
    - git pull : 원격 저장소 변경 사항을 가져와 내 브랜치에 자동 병합
    - git fetch : 변경 사항만 로컬에 가져오고 병합은 직접 해야 함
    - git push : 내 변경 사항을 원격 저장소로 올림

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[에러 원인]
-----------------------------------------------------------------------------------------

1.   SSH Key 생성 후 git push 수행 시 공개키가 Git (또는 Bitbucket) 에 등록되어 있지 않아서 발생하는 이슈


2.   에러 발생 전체 로그 : 

    git@github.com: Permission denied (publickey).
    fatal: Could not read from remote repository.


3.   현재 상황 정리 :

  >> ssh key 는 정상 생성되어 있는 상태

  >> git 특정 프로젝트 remote origin url 을 ssh 방식으로 변경해 놓은 상태

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[해결 방법]
-----------------------------------------------------------------------------------------

1.   Git (또는 Bitbucket) 에 공개키 등록 후 SSH 테스트 및 push 수행 실시


2.   Git (또는 Bitbucket) 에 공개키 등록 후 SSH 테스트 명령어 : 

  >> ssh -T git@bitbucket.org


3.   추가 Permission denied (publickey) 가 발생할 수 있는 상황 정리 : 

  >> 공개키가 GitHub 에 등록되지 않음 : Git (또는 Bitbucket) 에 내가 생성한 SSH Key 가 정상 등록 되었는지 확인

  >> SSH Agent 에 키가 등록되지 않음 : ssh-add -l 명령어를 통해 확인 시 The agent has no identities. 에러가 발생함

  >> 잘못된 SSH Key 사용 중 : 회사 및 개인 계정 혼용 사용으로 잘못 설정 되어 있는 경우

  >> Remote URL 이 SSH 가 아님 : git remote -v 명령어를 통해 확인 시 HTTPS 주소로 되어 있는 경우 ssh 방식이 아님

  >> 권한 없는 Repository 접근 : 키는 정상인데 Repository 권한이 없음 -> ssh -T git@github.com 명령어 테스트 시 Repository not found. 에러가 발생함

  >> SSH Key 파일 권한 문제 : chmod 를 사용해 ssh key 파일 권한 확인

  >> 회사 방화벽 또는 22번 포트 차단 : telnet github.com 22 를 통해서 포트 연결 테스트 수행

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

https://kkh0977.tistory.com/8988

https://blog.naver.com/kkh0977/224350968799


▶️ 83. (Bitbucket/Git) [SSH Key 설정 방법] : [2] : 비트버킷 ssh key 생성 방법 및 ssh 연결 테스트 확인 방법

https://kkh0977.tistory.com/8989

https://blog.naver.com/kkh0977/224350974963


▶️ 84. (Bitbucket/Git) [SSH Key 설정 방법] : [3] : App passwords are deprecated .. URL returned error: 410

https://kkh0977.tistory.com/8990

https://blog.naver.com/kkh0977/224350985203


▶️ 79. (GitLab/Git) [깃랩] Personal Access Token (PAT) Git 액세스 토큰 생성 방법 정리

https://kkh0977.tistory.com/8654

https://blog.naver.com/kkh0977/224198943947


▶️ 76. (Bitbucket/Git) App passwords are recommended .. fatal: Authentication failed for 'https ..'

https://kkh0977.tistory.com/8082

https://blog.naver.com/kkh0977/223910363021

-----------------------------------------------------------------------------------------

[참고 사이트]

https://kkh0977.tistory.com/8988

82. (Bitbucket/Git) [SSH Key 설정 방법] : [1] : mac os 에서 ssh key 생성 및 프로젝트에 remote origin 설정 방법

kkh0977.tistory.com