📌 github copilot 구독 방법

1️⃣ GitHub의 페이지 오른쪽 상단에서 프로필 사진을 선택한 다음,  설정 (Settings) 을 선택합니다.


2️⃣
 
사이드바의 "액세스(Access)" 섹션에서  청구 및 플랜(Billing and plans)을 클릭한 다음 플랜 및 사용량(Plans and usage)을 클릭합니다.


3️⃣
 
‘추가 기능(Add-ons)’의 ‘GitHub Copilot’ 섹션에서 오른쪽에 있는 업그레이드(UPgrade to Copilot Pro) 버튼을 클릭합니다.


4️⃣
원하는 구독방법 (개월단위 / 연단위)
를 선택후 Upgrade to Pro 버튼을 클릭 후 결제를 진행합니다.

 

🙌 결제가 완료되면 화면의 표시 내용이 업데이트 됩니다. 

 

 

 

 

'Tool > 일반' 카테고리의 다른 글

github copilot 구독 취소 방법  (0) 2025.02.24

 📢   text-shadow는 CSS에서 텍스트에 그림자 효과를 추가하는 속성입니다.

📝 text-shadow 기본 문법

text-shadow: x-offset y-offset blur-radius color;

x-offset : 그림자의 가로 위치(오른쪽으로 이동은 양수, 왼쪽은 음수)
y-offset : 그림자의 세로 위치(아래쪽 이동은 양수, 위쪽은 음수)
blur-radius (선택 사항) : 흐림 효과의 정도 (값이 클수록 더 흐려짐)
color : 그림자의 색상


🎨 일반 text-shadow 사용법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            /* background-color: #333; */
        }

        h1 {
            font-size: 50px;
            text-transform: uppercase;
        }

        /* 기본 그림자 효과  */
        /* 회색 그림자가 오른쪽 아래로 퍼지게 됩니다. */
        h1.text-shadow1 {
            text-shadow: 4px 4px 6px gray;
        }

        /* 여러 개의 그림자 적용  */
        /* 쉼표(,)를 사용하면 여러 개의 그림자를 겹칠 수 있습니다. */
        /* 빨간색 그림자가 오른쪽 아래로, 파란색 그림자가 왼쪽 위로 퍼지게 됩니다. */
        h1.text-shadow2 {
            text-shadow: 2px 2px 5px red, -2px -2px 5px blue;
        }        

        /* 네온(Glow) 효과  */
        /* 초록색 빛이 번지는 네온사인 효과가 나타납니다. */
        h1.text-shadow3 {
            text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
        }        

        /* 3D 텍스트 효과  */
        /* 텍스트가 입체적으로 보이게 됩니다. */
        h1.text-shadow4 {
            text-shadow: 1px 1px 0 #999, 2px 2px 0 #666, 3px 3px 0 #333;
        }        

        /* 윤곽선(Outline) 효과  */
        /* 텍스트 주위에 테두리가 생겨 강조됩니다. */
        h1.text-shadow5 {
            text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
        }        

    </style>    
</head>
<body>
<h1 class="text-shadow1">Hello, Welcome to world!</h1>    
<h1 class="text-shadow2">Hello, Welcome to world!</h1>    
<h1 class="text-shadow3">Hello, Welcome to world!</h1>    
<h1 class="text-shadow4">Hello, Welcome to world!</h1>    
<h1 class="text-shadow5">Hello, Welcome to world!</h1>    
</body>
</html>


👉 결과 


🎨 다양한 text-shadow 사용법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }

        /* ✨ 부드러운 빛나는 효과 */
        h1.text-shadow1 {
            font-size: 80px; /* 글자 크기 설정 */
            color: gold; /* 글자 색상을 금색으로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */
            text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5); 
            /* 그림자를 30px 정도 흐릿하게 설정하여 빛나는 효과 */
        }

        /* 🏆 입체적인 그림자 효과 */
        h1.text-shadow2 {
            font-size: 80px; /* 글자 크기 설정 */
            color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */
            text-shadow: 
                5px 5px 0px darkblue,  /* 첫 번째 그림자 (진한 파란색) */
                10px 10px 0px dodgerblue; /* 두 번째 그림자 (밝은 파란색) */
            /* 두 개의 그림자를 겹쳐서 입체적인 그림자 효과 */
        }

        /* ☁️ 은은한 그림자 효과 */
        h1.text-shadow3 {
            font-size: 80px; /* 글자 크기 설정 */
            color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */
            text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
            /* 하얀색 반투명 그림자를 적용하여 은은한 효과 */
        }

        /* 🔵🔴 양쪽으로 퍼지는 입체적인 그림자 효과 */
        h1.text-shadow4 {
            font-size: 80px; /* 글자 크기 설정 */
            color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */

            text-shadow: 
                2px 2px 5px red,   /* 오른쪽 아래 방향으로 퍼지는 붉은 그림자 */
                -2px -2px 5px blue; /* 왼쪽 위 방향으로 퍼지는 푸른 그림자 */

            /* 
               🔹 효과 설명:
               - 빨간색 그림자가 오른쪽 아래 방향으로 흐릿하게 퍼짐
               - 파란색 그림자가 왼쪽 위 방향으로 흐릿하게 퍼짐
               - 결과적으로 텍스트가 입체적으로 보이는 효과를 연출
            */
        }

    </style>    
</head>
<body>
<h1 class="text-shadow1">Hello, Welcome to world!</h1>    
<h1 class="text-shadow2">Hello, Welcome to world!</h1>    
<h1 class="text-shadow3">Hello, Welcome to world!</h1>    
<h1 class="text-shadow4">Hello, Welcome to world!</h1>    
</body>
</html>


👉 결과 

 

📢  [spring boot] mybatis - mssql application.yml 설정

📌 spring boot 3.4.3 version에서의 설정 예제입니다. 


Dependencies 추가 

Dependencies에 MyBatis Framework와 MSSql Driver를 추가하면 
build.gradle 에 dependencies에 아래와 같이 추가됩니다.

    implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.4'
    runtimeOnly 'com.microsoft.sqlserver:mssql-jdbc'
    testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.4'

🤔 추가 후 프로젝트를 Run하면 에러가 발생합니다.


application 설정 추가

  application.properties, 또는 application.yml에 아래와 같이 설정을 해 주어야 합니다.

# application.yml
# 서버 설정
server:
  port: 8080  # 서버가 실행될 포트를 지정합니다. 여기서는 8080번 포트를 사용합니다.

# Spring 프레임워크 설정
spring:
  datasource:  # 데이터베이스 연결 정보를 설정합니다.
    driver-class-name: com.microsoft.sqlserver.jdbc.SQLServerDriver
    url: jdbc:sqlserver://localhost:1433;databaseName=databasename;encrypt=true;trustServerCertificate=true
    username: username  # 데이터베이스 접속에 사용할 사용자 이름입니다.
    password: password  # 데이터베이스 접속에 사용할 비밀번호입니다.

# MyBatis 설정
mybatis:
  mapper-locations: classpath:mapper/**/*.xml  # MyBatis 매퍼 파일(.xml)의 위치를 지정합니다.


🙌 성공적인 실행이 되었기를.... 

 

 

 

 

📢 [ms-sql] mssql server 버전 확인하기 

SELECT @@VERSION

 

 

📢 [windows 10/11] 작업표시줄 뉴스 및 관심사 메뉴를 완전히 없애는 방법

✅ 작업표시줄 설정 선택

  작업표시줄에서 우클릭하여 작업표시줄 설정 선택

 

✅ 뉴스 및 관심사 표시 끔으로 설정

뉴스 및 관심사 항목에서 표시 끔 선택

🤔 이렇게 설정을 하면 뉴스 및 관심사가 작업표시줄에 보이지 않지만 시간이 지나면 다시 보이는 경우가 있습니다. 그런 경우에는.. 

로컬 그룹 정책 편집기 열기

윈도우키 + R 키를 누르고 gpedit.msc를 입력 후 엔터 키를 누릅니다. 


✅ 뉴스 및 관심사 항목을 선택합니다.

관리 템플릿 > Windows 구성 요소 > 뉴스 및 관심사 항목을 선택합니다. 

 

✅ 사용 안 함 선택

 사용 안 함을 선택 후 확인 버튼을 누릅니다. 


🙌 이렇게 하면 완전히 작업표시줄에서 제거할 수 있습니다. 

 

📢 mybatis parameter가 2개 이상일 경우 사용방법

💡 parameterType="map"를 이용하면 된다.

    <select id="findById" parameterType="map" resultType="Member">
        SELECT
        <include refid="memberColumns" />
        FROM member
        WHERE id = #{id, jdbcType=BIGINT}
          and member_id = #{memberId, jdbcType=VARCHAR}
    </select>


@Param 이용 

Controller

memberService.findById(Long id, String memberId)

Service

memberMapper.findById(Long id, String memberId)

Mapper

Member findById(@Param("id") Long id, @Param("memberId") Long memberId);


Map 이용 

Controller

Map<String, Object> param = new HashMap<>();
param.put("id", id);
param.put("memberId", memberId);

memberService.findById(id, memberId);

✔ Service

memberMapper.findById(Map<String, Object> param)

Mapper

Member findById(Map<String, Object> param)

 

📌 [mybatis] resultType이 String인 경우 경고 메시지가 뜨네요


Mybatis에서 DB정보를 이용하여 가공된 텍스트값을 받으려고 합니다. 

    <select id="getInfo" resultType="String">
        select 'abc'
    </select>


그런데 mapper interface에서 다음과 같은 경고메세지가 빨간줄과 함께 표시됩니다.

@Mapper 
public interface InfoMapper {
	String getInfo();
}

===============================================
Result type not match for select id="getInfo" 

srcType: java. lang. String 
targetType: java. lang. String
===============================================

분명 같은 타입인데도 말이죠. 

MyBatis에서 resultType="String"을 지정하면 "Result Maps collection does not have a type handler for result object" 또는 비슷한 경고 메시지가 발생할 수 있습니다. 이는 MyBatis가 반환할 데이터 타입을 명확하게 매핑하는 과정에서 발생하는 경고입니다.

📝 해결 방법

resultType="java.lang.String"으로 명시

경고가 단순한 매핑 이슈라면 resultType="java.lang.String"처럼 패키지명을 명확하게 적어주는 것만으로도 해결되는 경우가 있습니다. 

    <select id="getInfo" resultType="java.lang.String">
        select 'abc'
    </select>

이 방법으로 해결이 안된다면..

✅ resultType="String" 대신 resultMap 사용

MyBatis의 resultMap을 정의하고, 이를 select 문에서 참조하는 방식으로 해결할 수 있습니다.

<resultMap id="StringResultMap" type="java.lang.String"/>
<select id="getInfo" resultMap="StringResultMap">
    select 'abc'
</select>

저는 이방법으로 해결했습니다.  🤔

 

 

📌 [mariadb / mysql / mybatis ] Like문 사용방법 

회원테이블에서 김씨 성을 검색하는 방법입니다. 

select *
  from 회원테이블
 where member_id like '김%'

 Mybatis에서 변수로 처리하기 위해서 검색부분을 분리하면 검색이 안됩니다. 

select *
  from 회원테이블
 where member_id like '김' + '%'

concat 함수를 이용하여 분리해야 합니다. 

select *
  from 회원테이블
 where member_id like concat('김', '%')

✅ 이제 Mybatis에서 parameter로 검색어를 받아서 조회할 수 있습니다. 

    <select id="findByMember" parameterType="String" resultType="Member">
        select member_id, member_name
        from member
        where member_name like concat(#{searchTxt},'%')
    </select>

 

📌 mariadb / mysql 함수

📝 문자열 함수

left(문자열,자리수) : 왼쪽에서 문자열 자르기
✅ right(문자열,자리수) : 오른쪽에서 문자열 자르기
✅ substring(문자열,시작위치,길이) : 시작위치부터 길이만큼 문자 반환, 길이가 생략되면 문자열의 끝까지 반환

select left('abcdefg',3);
결과 : abc

select right('abcdefg',3);
결과 : efg

select substring('abcdefg', 3, 2);
결과 : cd

LPAD(str, len [,padstr])
✔ str의 값을 len에서 설정한 숫자만큼 표시한다. 
✔ str의 값의 길이가 len에서 설정한 값보다 크면 str이 일부분 표시된다.
✔ str의 값의 길이가 len에서 설정한 값보다 작으면 차이만큼 padstr이 표시된다. (생략하면 space가 표시됨)

 select lpad('abcde',3,'0')
 결과 : abc 
 
 select lpad('abcde',10,'0')
 결과 : 00000abcde 

 select lpad('abcde',10)
 결과 :      abcde


📝 형변환 함수

✅ 문자를 숫자로 변환 

SELECT CAST("001" AS INTEGER);
결과 : 1


📝 null 처리 

✅ ifnull(값1, 값2)
  값1이 null이면 값2로 치환한다

select ifnull(10, 0)
결과 : 10

select ifnull(null, 0)
결과 : 0

 

 

📢 무료 Rest API data 제공 사이트 - JSONPlaceholder

    JSONPlaceholder는 프론트엔드 개발자API 테스트를 원하는 개발자를 위해 무료로 제공되는 REST API 서비스입니다. 실제 서버를 구축하지 않고도 가상의 데이터를 사용하여 API 호출을 테스트할 수 있도록 도와줍니다.

💻 JSONPlaceholder 사이트 바로가기 

 

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.

jsonplaceholder.typicode.com

📝 JSONPlaceholder를 사용하는 이유

 프론트엔드 개발자가 백엔드 없이 API 테스트 가능
 백엔드 개발자가 API 구조를 설계하고 샘플 데이터로 테스트 가능
 단순하고 빠르게 가짜 데이터를 활용하여 개발 환경 구축 가능
 무료이면서도 강력한 REST API 제공

📝 게시글 목록 조회 (GET /posts)

👉 요청 : 

// command line, 또는 bash 
curl https://jsonplaceholder.typicode.com/posts

// 브라우저에서는 url만 입력합니다.
https://jsonplaceholder.typicode.com/posts

👉 응답 (JSON 데이터):

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit..."
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae..."
  }
]

 

📝 사용 가능한 엔드포인트 (API)

JSONPlaceholder에서 제공하는 주요 API 엔드포인트는 다음과 같습니다.

엔드포인트 설명
/posts 게시글 목록 조회
/posts/{id} 특정 게시글 조회
/comments 댓글 목록 조회
/comments?postId={id} 특정 게시글의 댓글 조회
/albums 앨범 목록 조회
/photos 사진 목록 조회
/users 사용자 목록 조회
/todos 할 일 목록 조회

👉 요청 예 : 

https://jsonplaceholder.typicode.com/albums

https://jsonplaceholder.typicode.com/todos/3


📝 
주요 특징

✅ 무료(Mock API) 제공
  API 개발이나 프론트엔드 연동을 테스트할 때 실제 백엔드 없이도 사용할 수 있는 무료 서비스입니다.

 RESTful API 지원
 GET, POST, PUT, PATCH, DELETE 등의 HTTP 요청을 지원하여 실제 API처럼 활용할 수 있습니다.

 샘플 데이터 제공
 가상의 사용자, 게시글, 댓글, 사진 등의 JSON 데이터를 미리 제공해줍니다.

 CORS & JSON 지원
 CORS(Cross-Origin Resource Sharing)를 지원하여, 다양한 환경에서 테스트할 수 있습니다.

 빠르고 간편한 사용
 회원가입이나 인증 없이 API 호출만으로 바로 사용할 수 있습니다.

 

 

+ Recent posts