멱군! 프로그래밍을 하자.

AWS EC2 서버 재시작 후 발생한 'java: error while loading shared libraries: libjli.so' 오류 해결 방법

멱군 — Wed, 21 Aug 2024 12:04:08 +0900

클라우드에서 서버를 운영하다 보면 정말 다양한 일이 벌어지죠? 특히 AWS EC2를 사용하다 보면 생각지도 못한 문제가 발생하기 마련입니다. 이번에 갑자기 서버가 업데이트하고 재시작했더니, 운영중이던 자바서버가 값자기 접속이 안되더라구요. "java: error while loading shared libraries: libjli.so: cannot open shared object file: No such file or directory"라는 오류 메시지를 마주했을 때의 당황스러움이란... 이번 포스팅에서는 저와 같은 문제를 겪는 분들을 위해, 제가 어떻게 이 문제를 해결했는지 함께 해결과정을 따라가보도록 하겠습니다.

1. 문제 발생: 서버 재시작 후 Java 경로 오류

서버를 업데이트하고 재시작한 후, Java 기반 애플리케이션을 실행하려고 했습니다.

java: error while loading shared libraries: libjli.so: cannot open shared object file: No such file or directory 메세지

그러나 예상치 못한 오류 메시지가 나타났습니다.

"java: error while loading shared libraries: libjli.so: cannot open shared object file: No such file or directory".

이는 Java 설치가 손상되었거나, 환경 변수가 올바르게 설정되지 않아 발생한 문제였습니다.

서버가 정상적으로 운영되기 위해서는 이 문제를 해결해야 했습니다.

2. 초기 시도: Java 재설치

문제를 해결하기 위해 가장 먼저 시도한 것은 Java를 재설치하는 것이었습니다.

sudo apt-get install openjdk-8-jdk 명령어를 사용하여 Java를 다시 설치하려 했습니다.

그러나 "이미 설치되어 있습니다"라는 메시지가 나왔고, 이는 실제로 Java가 설치되어 있지만 경로 설정이 올바르지 않다는 것을 의미했습니다.

3. 경로 확인

Java 설치 경로를 확인하기 위해 다음 명령어를 사용했습니다:

sudo update-alternatives --config java

ubuntu 서버에 설치된 자바 목록

이를 통해 /usr/lib/jvm/java-8-openjdk-amd64 경로에 Java가 설치된 것을 확인할 수 있었습니다.

또한 구성도 java8을 사용한다고 표기가 되어있습니다.

그러나 환경 변수가 올바르게 설정되지 않아 Java가 제대로 인식되지 않고 있었습니다.

4. 경로 재확인

그러나 java -version을 해도 여전히 libjli.so 파일을 찾지 못해 문제가 발생한 것입니다.

libjli.so 파일의 정확한 위치를 다시 확인하기 위해 아래의 명령어를 실행했습니다.

find /usr/lib/jvm/java-8-openjdk-amd64 -name libjli.so

find /usr/lib/jvm/java-8-openjdk-amd64 -name libjli.so 명령어 결과

이 명령어를 통해 두개의 경로가 나오는걸 확인 할수 있었습니다. 둘중에서 하나만 사용해도 됩니다.

저는 /usr/lib/jvm/java-8-openjdk-amd64/jre/lib/amd64/jli/libjli.so와 같은 경로에 libjli.so 파일을 사용하기로 했습니다.

처음 설정한 경로와 다른게 문제의 원인이였던거 같습니다.

업데이트 하면서 설정이 바꼈나봐요. -.-

5. 환경 변수 재설정

이제 문제의 원인을 확인했으니 Java가 올바르게 작동하도록 하기 위해 환경 변수를 다시 설정하기로 했습니다.

다음 명령어를 사용하여 JAVA_HOME, PATH, 그리고 LD_LIBRARY_PATH를 재설정했습니다.

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export PATH=$JAVA_HOME/bin:$PATH
export LD_LIBRARY_PATH=$JAVA_HOME/jre/lib/amd64/jli:$LD_LIBRARY_PATH

이 명령어들은 Java의 홈 디렉터리와 실행 파일 경로를 설정하고, 필요한 라이브러리를 찾을 수 있도록 LD_LIBRARY_PATH를 구성하는 역할을 합니다.

6. 영구적인 설정 적용

환경 변수를 재설정 한 다음, 이 설정들이 서버 재시작 후에도 유지되도록 `.bashrc` 파일에 추가했습니다.

echo 'export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64' >> ~/.bashrc
echo 'export PATH=$JAVA_HOME/bin:$PATH' >> ~/.bashrc
echo 'export LD_LIBRARY_PATH=/usr/lib/jvm/java-8-openjdk-amd64/jre/lib/amd64/jli:$LD_LIBRARY_PATH' >> ~/.bashrc
source ~/.bashrc

이렇게 하면 서버가 다시 시작되더라도 환경 변수가 올바르게 유지되어 Java가 정상적으로 작동하게 됩니다.

7. 문제 해결 확인

모든 설정을 마친 후, java -version 명령어를 사용하여 Java가 정상적으로 작동하는지 확인했습니다.

java -version 경로 성공메세지

Java 버전이 정상적으로 출력되었고, 애플리케이션도 무사히 실행되는 것을 확인했습니다. 이러한 과정을 통해 문제를 성공적으로 해결할 수 있었습니다.

결론

AWS EC2에서 서버를 운영할 때, 특히 서버 재시작이나 업데이트 후 발생할 수 있는 Java 관련 오류는 자주 발생할 수 있는 문제입니다. 이번 글에서는 서버 재시작 후 발생한 "libjli.so" 오류를 해결하기 위해 Java 경로를 재설정하고 환경 변수를 올바르게 구성하는 방법을 공유해드렸는데 도움이 되셨나요? 문제가 발생했을 때 당황하지 말고, 경로를 다시 확인하고 필요한 설정을 재구성하면 문제를 해결할 수 있습니다.

C#에서 HTTP와 HTTPS 요청 처리하기: HttpClient 사용 예제

멱군 — Wed, 21 Aug 2024 10:34:18 +0900

C#에서 웹 요청을 처리할 때, HTTP와 HTTPS 요청을 모두 처리해야 할 경우가 종종 있습니다. 이를 위해 HttpClient 클래스를 사용하여 손쉽게 HTTP와 HTTPS 요청을 보낼 수 있습니다. 이 글에서는 C#에서 HttpClient를 사용하여 HTTP 및 HTTPS 요청을 처리하는 방법과 SSL 인증서 검증 비활성화 방법에 대해 알아보겠습니다.

서버보안으로 HTTP에서 HTTPS로 변경

최근 서버 보안 문제가 발생하여 모든 HTTP 통신을 HTTPS로 변경해야 했습니다. 하지만 변경 후 일부 통신이 원활하지 않았고, 그로 인해 HTTP와 HTTPS 요청을 모두 처리할 수 있는 방법을 찾게 되었습니다.

1. HttpClient 인스턴스 생성

먼저, HTTP와 HTTPS 요청을 보내기 위해 HttpClient 인스턴스를 생성합니다. 아래 코드는 HttpClient를 사용하여 HTTP 및 HTTPS 요청을 보내는 예제입니다.

using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;

public class Program
{
    private static readonly HttpClient client = new HttpClient();

    public static async Task Main(string[] args)
    {
        await SendHttpRequest();
        await SendHttpsRequest();
    }

    private static async Task SendHttpRequest()
    {
        try
        {
            string url = "http://A.mydomain.com/api/endpoint";
            HttpResponseMessage response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();
            string responseBody = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"HTTP Response: {responseBody}");
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine($"HTTP Request Exception: {e.Message}");
        }
    }

    private static async Task SendHttpsRequest()
    {
        try
        {
            string url = "https://A.mydomain.com/api/endpoint";
            HttpResponseMessage response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();
            string responseBody = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"HTTPS Response: {responseBody}");
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine($"HTTPS Request Exception: {e.Message}");
        }
    }
}

2. SSL 인증서 검증 비활성화 (테스트용)

HTTPS 요청에서 SSL 인증서 검증 문제로 인해 요청이 실패하는 경우, SSL 인증서 검증을 비활성화하여 테스트할 수 있습니다. 그러나 이 방법은 보안상 좋지 않기 때문에 실제 운영 환경에서는 사용하지 않는 것이 좋습니다.

using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Net.Security;
using System.Security.Cryptography.X509Certificates;
using System.Threading.Tasks;

public class Program
{
    private static readonly HttpClientHandler handler = new HttpClientHandler
    {
        ServerCertificateCustomValidationCallback = (sender, cert, chain, sslPolicyErrors) => true
    };

    private static readonly HttpClient client = new HttpClient(handler);

    public static async Task Main(string[] args)
    {
        await SendHttpRequest();
        await SendHttpsRequest();
    }

    private static async Task SendHttpRequest()
    {
        try
        {
            string url = "http://A.mydomain.com/api/endpoint";
            HttpResponseMessage response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();
            string responseBody = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"HTTP Response: {responseBody}");
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine($"HTTP Request Exception: {e.Message}");
        }
    }

    private static async Task SendHttpsRequest()
    {
        try
        {
            string url = "https://A.mydomain.com/api/endpoint";
            HttpResponseMessage response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();
            string responseBody = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"HTTPS Response: {responseBody}");
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine($"HTTPS Request Exception: {e.Message}");
        }
    }
}

SSL을 비활성화 하는 구문은 "ServerCertificateCustomValidationCallback = (sender, cert, chain, sslPolicyErrors) => true"을 참고 하시면 됩니다.

위의 예제를 통해 C#에서 HTTP와 HTTPS 요청을 모두 처리할 수 있습니다. 필요한 경우 SSL 인증서를 올바르게 설정하여 보안성을 유지할 수 있습니다.

구글 지메일(Gmail) 메일 발송 취소 실수 방지 안심하고 메일을 보내는 방법

멱군 — Tue, 6 Aug 2024 22:53:52 +0900

구글지메일(Gmail)에서 실수로 메일을 보낸적이 있으신가요? 잘못보냈을 때 취소할 수 있나요? 우리는 매일 수많은 이메일을 주고받습니다. 하지만 바쁜 일상 속에서 실수로 잘못된 메일을 보내거나 중요한 첨부 파일을 누락하는 경우가 종종 발생하죠. 구글 지메일은 이러한 실수를 방지하기 위한 기능이 있습니다. 바로 메일 발송 취소 기능이죠. 이 기능을 활용하면 메일을 보낸 직후라도 실수를 바로잡을 수 있답니다. 이 글에서는 지메일 메일 발송 취소 기능에 대해 자세히 알아보도록 하겠습니다.

1. 지메일 메일 발송 취소 기능이란?

지메일 메일 발송 취소 기능은 메일을 보낸 직후 일정 시간 이내에 발송을 취소할 수 있는 기능입니다.메일이 발송되기전까지 잠깐 기다리는 동안, 사용자는 메일이 상대방에게 도착하기 전에 발송을 멈출 수 있는 것이죠.

2. 왜 지메일 메일 발송 취소 기능이 필요할까요?

1. 실수 방지

누구나 실수를 할 수 있습니다. 중요한 메일을 보낼 때 실수를 하면 큰 불편을 초래할 수 있죠. 이 기능은 이러한 실수를 방지하고, 업무 효율을 높여줍니다.

2. 안심하고 메일 이용

메일을 보낼 때 실수를 할까 봐 걱정하지 않아도 됩니다. 더욱 편안하게 메일을 주고받을 수 있죠.

3. 시간 절약

잘못 보낸 메일을 수습하는 데 드는 시간을 절약할 수 있습니다.

진짜 잘못보냈을 때 사과메일보내고, 삭제요청메일 보내고 장난아니죠.

3. 지메일 메일 발송 취소 설정 방법

1. 구글 지메일 로그인

우선 지메일 계정으로 로그인합니다.

2. 설정 메뉴 진입

구글 지메일 설정 메뉴 진입

오른쪽 상단의 톱니바퀴 모양 설정 아이콘을 클릭합니다.

3. 모든 설정 보기

구글 지메일 모든 설정 보기

'모든 설정 보기'를 클릭하여 상세 설정 화면으로 이동합니다.

4. 보내기 취소 설정

구글 지메일 보내기 취소 설정

'기본 설정' 탭에서 '보내기 취소' 항목을 찾아 원하는 취소 시간(5초, 10초, 20초, 30초)을 선택합니다.

5. 변경 사항 저장

하단의 '변경 사항 저장' 버튼을 클릭하여 설정을 완료합니다.

4. 메일 발송 취소 방법

메일을 보낸 후 왼쪽 하단에 나타나는 '실행 취소' 버튼을 클릭하면 메일 발송이 취소됩니다.

구글 지메일 메세지 전송전 실행취소 버튼

설정한 시간 내에 버튼을 클릭해야 취소가 가능하니, 실수를 발견하면 재빨리 클릭해야 합니다.

구글 지메일 메세지 전송 취소 완료

5. 지메일 메일 발송 활용 팁 보내기 예약

구글 지메일 보내기 예약

중요한 메일은 미리 작성해두고 특정 시간에 발송되도록 예약해 보세요. 더욱 안전하게 메일을 보낼 수 있습니다.

스마트폰 앱에서도 동일하게 설정이 가능하니, 어디서든 편리하게 사용하세요.

결론

지메일 메일 발송 취소 기능은 바쁜 현대인들에게 필수적인 기능입니다. 간단한 설정만으로도 실수로 인한 불편을 최소화하고, 더욱 효율적으로 메일을 관리할 수 있습니다. 이제 더 이상 실수로 인해 곤란한 상황에 처할 걱정은 NO! 지메일 메일 발송 취소 기능을 활용하여 편안하게 메일을 이용해 보세요!

Node.js Intellij에서 설정 및 프로젝트 생성 방법

멱군 — Wed, 31 Jul 2024 19:45:44 +0900

이번에 새로운 프로젝트를 진행하려고 합니다. 대용량 파일 업로드 프로젝트를 진행하기 위해 Node.js를 사용하려고 합니다. 제가 최근에 사용하고 있는 툴은 IntelliJ인데 설정창에서 Node.js가 보이지 않습니다. 어떻게 설정해야 할까요? 이 글에서는 IntelliJ에서 Node.js 개발 환경을 설정하고, 프로젝트를 생성하는 방법을 단계별로 자세히 알아보도록 하겠습니다.

1. IntelliJ에서 Node.js 개발 환경 설정하기 & 프로젝트 생성

1. Plug-in 설치

IntelliJ에서 Node.js 개발을 위해 필요한 플러그인을 설치해야 합니다.

플러그인은 IntelliJ에 특정 언어 또는 기능을 추가할 수 있는 확장 모듈이기 때문에 설치를 함으로써 Nodejs를 사용할 수 있습니다.

Setting 열기: Ctrl + Alt + S를 눌러 IntelliJ의 설정 창을 엽니다.

File > Setting 창 > Plugins Tab 열기

플러그인 설치

설정 창에서 왼쪽 패널의 Plugins 탭을 선택한 후, 상단의 Marketplace 탭을 클릭합니다.

여기서 NodeJS 플러그인을 검색하여 설치합니다.

EJS 플러그인 설치

EJS(Embedded JavaScript)는 HTML 내에서 JavaScript를 실행할 수 있게 해주는 템플릿 엔진입니다.

EJS를 사용하려면 EJS 플러그인도 설치합니다.

2. Node.js 설치

Node.js가 설치되지 않았다면, Node.js를 설치해야 합니다.

설치 방법은 아래의 글을 참고하세요. 버전만 변경되었을 뿐, 설치방법은 동일하답니다.

[Node.js] 설치하기 초보개발자 개발환경 세팅방법

개발을 시작하기로 마음먹었다면, 가장 먼저 해야 할 일은 개발 환경을 셋업하는 것입니다. 특히, 올바른 개발 환경을 설정하는 것은 초보 개발자에게 중요한 첫 단계입니다. 이 가이드에서는 No

devit.koreacreatorfesta.com

간략하게 설명하자면,

Node.js 홈페이지로 이동: Node.js 공식 사이트에 접속합니다.

최신버전 중 LTS(Long Term Support) 버전을 선택하여 다운로드합니다.

LTS 버전은 장기적으로 지원이 제공이기 때문에 안정적으로 서비스를 할 수 있습니다.

Node interpreter 설정

설치가 잘 되었다면 다시 세팅창으로가서 Languages & Frameworks > Node.js 탭을 선택합니다.

Node.js 설치 경로에서 node.exe 파일을 지정합니다. 기본 설치 경로는 "C:\Program Files\nodejs\node.exe"입니다.

Languages & Frameworks > Node.js 설정

3. 프로젝트 생성

IntelliJ에서 새로운 Node.js 프로젝트를 생성하는 방법입니다.

새 프로젝트 생성: IntelliJ의 메뉴에서 File > New > Project를 선택합니다.

New Project 창

왼쪽에 Express를 선택합니다.

Nodejs Express 모듈 사용하는 Nodejs 프로젝트 선택

템플릿으로 EJS를 선택합니다.

EJS는 HTML 내에 JavaScript를 내장하여 동적 웹 페이지를 쉽게 만들 수 있게 해줍니다.

프로젝트 생성완료

2. 프로젝트 실행 방법

IntelliJ에서 실행

프로젝트 실행: Shift + F10을 눌러 프로젝트를 실행합니다. IntelliJ는 프로젝트의 기본 설정에 따라 서버를 실행합니다.

기본 URL 확인: 브라우저에서 http://localhost:3000/을 입력하여 기본 Index 페이지가 정상적으로 호출되는지 확인합니다. 기본 Index 페이지는 views > index.ejs 파일입니다.

nodejs 실행

잘 따라오셨나요? 이 글을 따라하면 IntelliJ에서 Node.js 프로젝트를 설정하고 실행할 수 있습니다.

Apache Tomcat의 Host Manager 아이디와 비밀번호 설정 및 세션 종료 방법

멱군 — Sat, 27 Jul 2024 16:40:39 +0900

처음 Tomcat을 설치하고 설정 페이지에 접속했을 때 아이디와 비밀번호를 몰라 당황했던 기억이 있습니다. 그래서 PuTTY를 이용해 리눅스 서버에 접속해 설정 파일을 찾고, 아이디와 비밀번호를 변경하는 과정에서 헤맸어야 했었죠. 특히 Host Manager는 admin 권한이 필요하기 때문에 권한을 추가하고, 새로운 아이디를 만드는 데 많은 시간이 걸렸습니다. 그리고 어드민으로 로그인하려고 했을 때 이미 로그인된 사용자가 있어 세션을 종료해야 하는데 로그아웃버튼이 없어서 또 당황했네요. 이 글에서는 Tomcat Host Manager의 아이디와 비밀번호 설정 방법과 세션 종료 방법을 알아볼께요.

1. Host Manager 접속

Tomcat 설정페이지

처음 톰캣을 설치하고 Host Manager로 접속하려다보니 아이디와 비밀번호가 뭔지, 권한은 있는지 모르겠더라구요. 일단 putty를 이용해서 리눅스에 접속을 했는데 그다음은 뭘해야 할까요?

puTTY 설치 및 SSH 접속방법 Windows에서 리눅스 및 유닉스 서버 안전하게 원격 접속하기

PuTTY는 Windows 환경에서 리눅스나 유닉스 계열 서버에 안전하게 원격 접속하기 위한 필수 툴입니다. SSH (Secure Shell) 프로토콜을 이용해 암호화된 네트워크 연결을 통해 서버 관리 작업을 수행할 수

devit.koreacreatorfesta.com

2. Tomcat 설치 및 설정 경로 확인

Tomcat을 설치한 후, 사용자에 대한 설정 파일은 주로 conf/tomcat-users.xml에 위치합니다.

이 파일을 편집하여 Host Manager와 Manager 앱의 아이디와 비밀번호를 설정할 수 있습니다.

저의 경우 PuTTY를 이용해 리눅스 서버에 접속한 후, 다음 명령어로 설정 파일을 열었습니다:

sudo nano /opt/tomcat/conf/tomcat-users.xml

이 파일을 열어 사용자와 역할을 추가할 준비를 합니다.

3. 사용자와 역할 추가

tomcat login 화면

로그인을 하려면 아이디와 비밀번호가 필요한데 tomcat-users.xml파일에서 설정을 할 수 있습니다.

파일 내에서 다음과 같은 내용을 추가합니다:

<tomcat-users>
  <!-- 관리자 역할 추가 -->
  <role rolename="admin-gui"/>
  <!-- 매니저 역할 추가 -->
  <role rolename="manager-gui"/>

  <!-- 어드민 사용자 추가 -->
  <user username="admin" password="admin-password" roles="admin-gui"/>

  <!-- 매니저 사용자 추가 -->
  <user username="manager" password="manager-password" roles="manager-gui"/>

  <!-- 관리자와 매니저 권한을 모두 가진 사용자 추가 -->
  <user username="superuser" password="superuser-password" roles="admin-gui,manager-gui"/>
</tomcat-users>

위의 설정은 admin 사용자가 admin-gui 역할을 가지며, manager 사용자가 manager-gui 역할을 가집니다.

또한 superuser 사용자는 두 역할을 모두 가지도록 설정합니다.

이를 통해 Host Manager와 Manager 앱에 접근할 수 있습니다.

3. 서버 재시작

설정을 적용하려면 Tomcat 서버를 재시작해야 합니다. 다음 명령어를 사용했습니다:

sudo systemctl restart tomcat

이 명령어를 실행하면 새로운 설정이 적용됩니다.

4. 세션 종료 및 로그인 문제 해결

만들고 Tomcat Manager에 새롭게 로그인하려 할 때 이미 매니저로 로그인 되어있었어요.

Host Manager 로그인 에러

로그인된 사용자가 있는 경우, 브라우저의 세션을 종료하거나 쿠키를 삭제하여 문제를 해결할 수 있습니다.

저는 처음에 브라우저를 완전히 종료한 후 다시 시작하는 방법을 시도했습니다.

이 방법이 효과적이지 않다면 브라우저 설정에서 특정 사이트의 쿠키를 삭제할 수도 있습니다.

Chrome에서는 다음과 같은 단계로 쿠키를 삭제할 수 있습니다:

브라우저의 오른쪽 상단에 있는 메뉴 아이콘을 클릭합니다.
"설정"을 선택합니다.
"개인정보 및 보안" 섹션에서 "사이트 설정"을 선택합니다.
"쿠키 및 사이트 데이터"를 선택합니다.
"모든 쿠키 및 사이트 데이터 보기"를 선택하고, Tomcat Manager URL과 관련된 쿠키를 삭제합니다.

전 그냥 모든 브라우저를 껐다 켜서 해결했습니다.

결론

톰캣 Host Manager 로그인 성공

Tomcat을 설치하고 설정하는 과정은 처음에는 복잡하고 어려울 수 있지만, 차근차근 단계를 따라가면 성공적으로 완료할 수 있습니다.

이 글을 통해 설정 파일의 위치를 확인하고, 사용자와 역할을 추가하는 방법, 서버 재시작 및 세션 종료 방법을 알아봤습니다.

이제 Tomcat 관리 페이지에 안전하게 접근하고 필요한 설정을 하는 방법을 익힌거 같아요.

앞으로도 Tomcat을 활용한 다양한 웹 애플리케이션을 성공적으로 운영하시기를 바랍니다.

갤럭시 버즈3 PRO PC에 연결해서 사용하는 방법

멱군 — Thu, 18 Jul 2024 13:39:01 +0900

이번에 갤럭시 버즈 3 PRO가 새로 나왔습니다. 나오자마자 구입했는데, 버즈2도 좋았지만 더욱 풍부한 사운드에 반하고 말았습니다. 하지만, PC와 연결해야 할 일이 생기면서 어떻게 할지 고민이 되더군요. 그래서 이전에 버즈2 연결했던 그 방법을 그대로 해보니 되더라구요. 이 글에서는 갤럭시 버즈 3 PRO를 윈도우 PC에 연결하는 방법과 필요한 앱 설치 과정을 다시 한번 더 공유하고자 합니다.

1. 윈도우 앱 설치하기

먼저, 갤럭시 버즈 3 PRO와 PC의 원활한 연결을 위해 마이크로소프트 스토어에서 Galaxy Buds 앱을 설치해야 합니다.

다음 단계에 따라 설치를 진행해보세요.

1. 마이크로소프트 스토어 접속

마이크로소프트 스토어에 접속합니다.

윈도우키를 클릭해서 Microsoft Store를 찾을 수도 있습니다.

2. 앱 검색 및 설치

검색창에 'Galaxy Buds'를 입력하고 검색합니다.

검색 결과에서 Galaxy Buds 앱을 선택하고 다운로드 및 설치 버튼을 클릭합니다.

만약 검색이 힘드시다면 이 링크를 클릭해서 접속하면 됩니다.

3. 앱 실행

설치가 완료되면, 시작 메뉴에서 Galaxy Buds 앱을 찾아 실행합니다.

앱에서 지원하는 기기는 갤럭시 버즈시리즈를 모두 다 지원합니다.

2. 갤럭시 버즈 3 PRO 블루투스 페어링 모드 전환하기

앱 설치가 완료되면, 이제 갤럭시 버즈 3 PRO를 블루투스 페어링 모드로 전환해야 합니다.

1. 충전 케이스 열기

갤럭시버즈3프로 페어링하는 방법 - 뚜껑열기

이어버드를 충전 케이스에 넣은 상태에서 케이스 뚜껑을 엽니다.

2. 페어링 버튼 누르기

케이스 하단에 있는 페어링 버튼을 3초간 누릅니다.

갤럭시버즈3프로 페어링하는 방법 - 하단 버튼 3초누르기

이어버드의 LED가 빨강과 파랑으로 번갈아 깜빡이면 페어링 모드로 전환된 것입니다.

3. PC와 연결(페어링)하는 방법

이제 갤럭시 버즈 3 PRO가 페어링 모드에 들어갔으므로, PC와의 연결을 진행할 수 있습니다.

1. 기본적인 블루투스 연결

윈도우 검색 바에서 '설정'을 입력하고 열기

블루투스 장치 추가

'장치' 메뉴 선택 후 'Bluetooth 및 기타 장치 추가' 클릭
'Bluetooth' 선택 후 갤럭시 버즈 3 PRO를 검색하여 연결

2. 앱을 통한 연결

갤럭시버즈3 프로 윈도우 앱

앞서 설치한 Galaxy Buds 앱을 실행합니다.

갤럭시버즈3 프로 윈도우 앱

앱 내 지침에 따라 갤럭시 버즈 3 PRO를 검색하고 연결합니다.

갤럭시버즈3 프로 윈도우 앱

앱을 통해 다양한 설정을 조정할 수 있으며, 모바일과 같이 PC와의 호환성을 극대화할 수 있답니다.

결론

위의 방법을 따르면, 갤럭시 버즈 3 PRO를 윈도우 PC에 성공적으로 연결할 수 있습니다.

기본적인 블루투스 설정과 마이크로소프트 스토어의 Galaxy Buds 앱을 통해 더욱 안정적이고 다양한 기능을 활용할 수 있습니다.

갤럭시 버즈 3 PRO의 탁월한 사운드와 기능을 PC에서도 완벽하게 경험해 보세요!

함께보면 좋은글

갤럭시 버즈2 PC 연결안됨! 페어링하는 방법, 윈도우 앱 설치

갤럭시 버즈2를 사용하고 있으신가요? 저도 갤럭시 버즈2를 사용하고 있답니다. 휴대폰에서만 연결해서 사용하다가 노트북등 PC로 연결하고 싶어서 블루투스 연결을 해봤는데 생각처럼 잘 되지

devit.koreacreatorfesta.com

갤럭시 버즈 3 PRO 개봉기 및 사용 후기 착용샷

안녕하세요, 멱군입니다! 이번에 새로 출시된 갤럭시 버즈 3 PRO를 사전 예약 구매했어요. 갤럭시버즈2...

blog.naver.com

WPF 'Path'은(는) 'System.Windows.Shapes.Path' 및 'System.IO.Path' 사이에 모호한 참조입니다 오류 해결 방법

멱군 — Fri, 12 Jul 2024 11:43:36 +0900

C# 혹은 wpf로 개발 중 'Path'이라는 이름이 'System.Windows.Shapes.Path' 및 'System.IO.Path' 네임스페이스에 모두 존재할 때, 컴파일러가 어떤 'Path'를 사용할지 결정하지 못해 모호한 참조 오류가 발생 합니다. 이 문제를 해결하기 위해서는 모호한 참조를 명확하게 지정해야 합니다. 전체 다 작성해주면 좋지만, 명시적으로 지정해준다면 더 간편하게 해결할 수 있답니다.

문제 원인

이 오류는 동일한 이름의 클래스가 여러 네임스페이스에 존재할 때 발생합니다.

'Path'는 WPF의 그래픽 요소인 'System.Windows.Shapes.Path'와 파일 경로를 다루는 'System.IO.Path' 모두에서 사용됩니다.

path 모호한 참조

따라서 코드에서 'Path'를 사용할 때 어떤 네임스페이스의 'Path'를 사용하는지 명확히 지정해야 합니다.

해결 방법

1. 네임스페이스를 명시적으로 지정

가장 간단한 해결 방법은 'Path'를 사용할 때마다 네임스페이스를 명시적으로 지정하는 것입니다.

using System.Windows;
using System.Windows.Shapes; // WPF의 Path
using System.IO; // 파일 경로를 다루는 Path

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            
            // System.Windows.Shapes.Path 사용 예제
            System.Windows.Shapes.Path shapePath = new System.Windows.Shapes.Path();

            // System.IO.Path 사용 예제
            string filePath = System.IO.Path.Combine("folder", "file.txt");
        }
    }
}

위 예제에서, System.Windows.Shapes.Path와 System.IO.Path를 각각 명시적으로 지정하여 모호성을 해결합니다.

2. 별칭 사용

다른 방법은 using 지시문에서 별칭을 사용하는 것입니다. 이를 통해 특정 네임스페이스를 간결하게 참조할 수 있습니다.

using System;
using System.Windows;
using WpfPath = System.Windows.Shapes.Path; // 별칭 사용
using IoPath = System.IO.Path; // 별칭 사용

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // WPF의 Path 사용 예제
            WpfPath shapePath = new WpfPath();

            // System.IO.Path 사용 예제
            string filePath = IoPath.Combine("folder", "file.txt");
        }
    }
}

위 예제에서, System.Windows.Shapes.Path를 WpfPath로, System.IO.Path를 IoPath로 별칭을 지정하여 모호성을 해결합니다.

3. 직접지정

path는 system.IO라고 바로 지정할 수 있습니다.

using System;
using System.Windows;
using Path = System.IO.Path; // 직접지정

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // WPF의 Path 사용 예제
            WpfPath shapePath = new WpfPath();

            // System.IO.Path 사용 예제
            string filePath = Path.Combine("folder", "file.txt");
        }
    }
}

별칭도 귀찮다면 직접 지정해서 사용함으로써 모든 클래스변수를 변형하지 않아도 오류를 해결 할 수 있습니다.

4. 혼용 사용 방지

가능하면 동일한 파일 내에서 두 네임스페이스를 혼용하지 않도록 설계하는 것이 좋습니다. 예를 들어, 파일 경로를 다루는 로직과 그래픽 요소를 다루는 로직을 분리된 클래스 또는 메서드로 분리할 수 있습니다.

결론

'Path'와 같이 동일한 이름을 가진 클래스가 여러 네임스페이스에 존재할 때, 명시적 네임스페이스 지정이나 별칭 사용을 통해 모호한 참조 오류를 해결할 수 있습니다.

이를 통해 코드를 더욱 명확하게 하고, 컴파일러가 올바른 클래스를 참조할 수 있도록 합니다.

전 간단하게 3번 방법으로 해결했답니다.

WPF에서 'System.Windows' 네임스페이스에 'Forms' 형식 또는 네임스페이스 이름이 없습니다 오류 해결 방법

멱군 — Fri, 12 Jul 2024 10:08:21 +0900

WPF(Windows Presentation Foundation)와 Windows Forms는 각각 독립적인 UI 프레임워크로, 서로 다른 네임스페이스와 클래스 라이브러리를 사용합니다. 그러나 WPF 애플리케이션에서 Windows Forms의 일부 기능을 사용하려면 System.Windows.Forms 네임스페이스를 참조로 추가해야 합니다. 이글을 보고 추가하는 방법을 따라해보면 해당오류는 금방 없어질꺼에요.

문제 원인

이 오류는 WPF 프로젝트에서 System.Windows.Forms 네임스페이스를 참조하지 않았기 때문에 발생합니다.

System.Windows.Forms 네임스페이스 오류

WPF와 Windows Forms는 서로 다른 프레임워크이기 때문에, Windows Forms 기능을 사용하려면 별도의 참조를 추가해야 합니다.

System.Windows.Forms 네임스페이스 오류원인

특히 OpenFileDialog와 같은 winform에서 사용하던 UI를 사용하기 위해서는 필수로 추가해야 합니다.

해결 방법

1. 프로젝트에 Windows Forms 참조 추가하기 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭합니다.

2. 참조 추가를 선택합니다.

참조추가방법

3. 어셈블리 > 프레임워크 탭에서 System.Windows.Forms를 선택하고 확인 버튼을 클릭합니다.

서비스 선택

4. 확인버튼을 클릭하면 참조하위 항목에 System.Windows.Forms가 추가됩니다.

예제

OpenFileDialog 사용하기 아래는 WPF 애플리케이션에서 Windows Forms의 OpenFileDialog를 사용하는 간단한 예제입니다.

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Name="OpenFileButton" Content="Open File" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="OpenFileButton_Click"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Forms; // System.Windows.Forms 네임스페이스 추가
using MessageBox = System.Windows.MessageBox; // WPF와 Windows Forms의 MessageBox 충돌 방지

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void OpenFileButton_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            if (openFileDialog.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                string filePath = openFileDialog.FileName;
                MessageBox.Show($"Selected file: {filePath}", "File Selected", MessageBoxButton.OK, MessageBoxImage.Information);
            }
        }
    }
}

코드 설명

1. 위의 방법대로 참조 추가: System.Windows.Forms 네임스페이스를 사용하기 위해 프로젝트에 참조를 추가합니다.

2. 네임스페이스 사용: System.Windows.Forms를 사용하기 위해 코드 파일에 네임스페이스를 추가합니다.

3. penFileDialog 사용: Windows Forms의 OpenFileDialog를 사용하여 파일을 선택할 수 있는 다이얼로그를 표시합니다.

4. MessageBox 사용: WPF의 MessageBox를 사용하여 선택된 파일 경로를 표시합니다.

결론

WPF 프로젝트에서 Windows Forms 기능을 사용하려면 System.Windows.Forms 네임스페이스를 참조로 추가하고 적절히 네임스페이스를 사용하는 것이 중요합니다.

이 방법을 사용하면 네임스페이스 관련된 다른 에러들도 해당 서비스를 참조하신다면 다양한 오류를 해결할 수 있을꺼에요.

AWS Elastic IP address 한도 초과 해결 방법1

멱군 — Thu, 20 Jun 2024 18:51:42 +0900

AWS(Amazon Web Services)를 사용하다가 "The maximum number of addresses has been reached"라는 에러 메시지가 발생했습니다. 이 문제는 주로 EC2 인스턴스, Elastic IP, 네트워크 인터페이스와 같은 자원의 사용 한도가 초과 되었을 때 발생합니다. 특히 외부에서 접속 가능한 탄력적 IP(Elastic IP)를 만들 때 많이 발생합니다. 탄력적 IP의 한도를 늘리는 방법은 무엇인지 상세히 알아보겠습니다.

최대 주소 수 초과의 원인

탄력적 IP(Elastic IP) 한도 초과

탄력적 IP(Elastic IP) 는 AWS에서 제공하는 고정 퍼블릭 IP 주소입니다.

AWS의 각 리전마다 할당 가능한 Elastic IP의 수에는 한도가 있습니다.

Support Plan이 Basic인 경우 리전당 최대 5개의 탄력적 IP(Elastic IP) 를 할당받을 수 있다고 하네요.

이 한도를 초과하면 더 이상 새로운 탄력적 IP(Elastic IP)를 할당할 수 없으며, "The maximum number of addresses has been reached" 에러 메세지가 발생합니다.

외부에서 접속가능하도록 VPC를 만드는 중이였는데 이미 탄력적 IP(Elastic IP)를 5개나 만들어서 쓰고 있었답니다.

VPC 생성중 The maximum number of addresses has been reached 에러

그러다보니 탄력적 IP(Elastic IP)가 한도 초과 상태인 경우, VPC 설정 중 새로운 Elastic IP를 할당할 수 없기 때문에 이 에러가 발생해버렸네요.

문제 해결 방안

1. Elastic IP 한도 증가 요청

Elastic IP가 더 필요할 경우 AWS Support를 통해 한도 증가 요청을 할 수 있습니다.

이는 AWS Management Console에서 Support Center로 이동하여 새로운 한도 증가 요청을 제출하면 됩니다.

다음은 자세한 절차입니다.

1. AWS Management Console에서 Support 서비스로 이동합니다.

AWS 지원센터 메뉴

2. 화면 오른쪽에 진행중인 사례 >> 사례생성을 클릭합니다.

사례 생성

3. 어떻게 도와드릴까요? 에서 파란색 글자인 "서비스 할당량을 늘릴 방법을 찾고 계신가요?" 를 클릭합니다.

서비스 할당량 늘리기

4. 서비스 할당량 증가페이지로 넘어왔다면, 서비스에서 Elastic IPs를 입력해서 찾습니다.

elastic ip 찾기

5. 증가시키고자 하는 리전을 선택하고 증가시키고 싶은 할당량을 입력합니다.

저같은 경우는 지금 5개의 두배인 10개로 입력했답니다.

리전에 할당량 증가 요청

6. 요청사유와 연락처 옵션을 선택하고 제출을 클릭합니다.

사유 적고 제출

7. 사례ID가 부여되었고, 해당 내용도 잘 제출되었습니다.

발송된 내용 확인

8. 이제 작업이 완료 될때까지 기다립니다.

답변이 완료 될때까지 기다림

그렇다면 다른 해결방법은 무엇이 또 있을까요? 기다리는 동안 좀 더 알아보도록 하겠습니다.

2. 사용하지 않는 Elastic IP 해제

사용하지 않는 Elastic IP를 해제하여 할당 가능한 IP 주소 수를 늘릴 수 있습니다. AWS Management Console에서 Elastic IPs 섹션으로 이동하여 사용하지 않는 IP를 해제하면 됩니다.

3. 네트워크 인터페이스 최적화

각 인스턴스에 필요한 네트워크 인터페이스 수를 최적화하여 한도를 초과하지 않도록 관리합니다. 필요 없는 네트워크 인터페이스를 삭제하거나, 여러 애플리케이션이 하나의 네트워크 인터페이스를 공유하도록 설정할 수 있습니다.

4. VPC CIDR 블록 확장

VPC의 CIDR 블록을 확장하여 추가 IP 주소를 확보할 수 있습니다. AWS Management Console에서 VPC 설정으로 이동하여 기존 VPC에 새로운 CIDR 블록을 추가할 수 있습니다.

결론

드디어 답변이 왔습니다. 요청이 처리되기까지는 1시간정도 기다렸습니다.

답변 결과 이제는 늘려주지 않는다고 하네요.

2013년부터 정책상 지원을 안해준다고 합니다. VPC에서 해결해야 한다고 하네요.

이럴수가.... EC2에서 Elastic IP를 생성해서 바로 다이렉트로 물렸는데 그렇게 하면 되긴하지만 안된다고 합니다.

AWS에서 "The maximum number of addresses has been reached" 에러를 해결하기 위해서는 안쓰는 Elastic IP를 정리하는게 해결 방법 중 하나겠네요.

위에서 제시한 해결 방안을 통해 자원 할당 문제를 효과적으로 해결하고 AWS 환경을 안정적으로 운영할 수 있기를 바랍니다.

크롬브라우저 오류코드 Out of memory 메모리 부족 에러 해결하기

멱군 — Thu, 30 May 2024 13:26:49 +0900

크롬 브라우저는 빠르고 효율적인 웹 브라우징 경험을 제공하지만, 때때로 메모리 부족 에러나 "Out of memory" 오류가 발생합니다. 이러한 문제는 특히 많은 탭을 열어 두거나 메모리 소모가 큰 웹사이트를 방문할 때 발생할 수 있습니다. 이 글에서는 크롬의 메모리 부족 에러를 해결하는 방법에 대해 알아보겠습니다.

1. 오류코드 : Out of memory 발생

크롬브라우저로 작업을 하다가 갑자기 에러창이 떴어요.

저도 한 번 중요한 업무를 처리하던 중 여러 개의 탭을 열어 두고 작업을 하다가 갑자기 브라우저가 멈추고 "Out of memory" 오류 메시지 때문에 저장하지 못한 데이터를 날린적이 있습니다.

당해보신분들은 알겠지만 그 순간의 짜증과 분노는 글로 다 표현 할 수 없죠.

2. 크롬의 메모리 사용 이해하기

크롬 브라우저는 각 탭과 확장 프로그램을 별도의 프로세스로 실행하여 안정성을 높입니다.

이로 인해 메모리 사용량이 증가할 수 있습니다.

내 블로그 관련 탭에서 사용하는 메모리량

크롬브라우저 탭위에 마우스를 올리거나 크롬의 작업 관리자(Task Manager)를 사용하여 어떤 탭이나 확장 프로그램이 많은 메모리를 사용하고 있는지 확인할 수 있습니다.

3. 불필요한 탭 닫기

많은 탭을 동시에 열어두면 메모리 사용량이 급격히 증가합니다.

내 블로그 글을 작성하기 위한 많은 탭 사용 중

현재 사용하지 않는 탭은 닫거나, 북마크에 저장하여 나중에 다시 열 수 있도록 합니다.

저의 경우에도 여러 개의 탭을 열어둔 상태에서 메모리 부족 오류가 발생한 적이 많았기 때문에, 이 방법을 통해 큰 효과를 보았습니다.

4. 확장 프로그램 관리

불필요한 확장 프로그램은 비활성화하거나 삭제합니다.

크롬 설정에서 확장 프로그램을 관리할 수 있으며, 사용하지 않는 확장 프로그램은 메모리 사용을 줄이기 위해 제거하는 것이 좋습니다.

예전에 CHATGPT를 설정하면서 관련된 다양한 확장 프로그램을 설치했었는데, 요즘은 거진 사용하지 않은 채 방치해두고 있었답니다.

[CHATGPT] 챗GPT 가입과 한글 자동 번역 대박 팁

요즘 유행하고 있는 chatGPT!!! 챗GPT가 뭐지? 옛날옛적을 생각하시는 분이라면 아마 심시미겠거니 라고 떠올리는 사람도 있을지도 모른다. 말을 가르쳐서 대답하게 만드는 프로그램이었는데 if문

devit.koreacreatorfesta.com

이런 확장프로그램들이 메모리 부족의 주원인이 될 수도 있더라구요.

그래서 불필요한 확장 프로그램을 정리한 후부터는 오류가 현저히 줄어들었습니다.

5. 하드웨어 가속 사용 중지

하드웨어 가속은 브라우저 성능을 향상시키는 기능이지만, 때로는 메모리 부족 문제를 일으킬 수 있습니다.

크롬 설정에서 하드웨어 가속을 사용 중지해보세요.

설정 > 시스템 > "가능한 경우 하드웨어 가속 사용" 옵션을 비활성화합니다.

설정 > 시스템 > "가능한 경우 하드웨어 가속 사용" 화면

6. 크롬 데이터 정리

크롬 사용 중 쌓이는 캐시 및 쿠키 데이터는 메모리 사용에 영향을 줄 수 있습니다.

정기적으로 브라우저 데이터를 정리하여 메모리 사용량을 줄입니다.

1. 인터넷 사용 기록 삭제 방법 크롬 브라우저를 열고 오른쪽 상단의 점 세 개 아이콘을 클릭하여 메뉴를 엽니다.

2. "설정"을 클릭합니다.

3. "개인정보 및 보안" 섹션에서 "인터넷 사용 기록 삭제"를 선택합니다.

"개인정보 및 보안" 섹션에서 "인터넷 사용 기록 삭제"를 선택

4. 팝업 창에서 삭제할 항목(예: 인터넷 사용 기록, 쿠키 및 기타 사이트 데이터, 캐시된 이미지 및 파일)을 선택합니다.

5. 상단에서 시간 범위를 선택합니다. 전체 기록을 삭제하려면 "전체 기간"을 선택합니다.

삭제할 항목 및 전체기간 삭제 선택

6. "인터넷 사용 기록 삭제" 버튼을 클릭하여 데이터를 삭제합니다.

7. 시스템 메모리 업그레이드

크롬의 메모리 부족 문제는 시스템의 물리적 메모리 용량과도 관련이 있습니다.

현재 메모리가 부족하다면, 시스템 메모리를 업그레이드하는 것도 좋은 방법입니다.

요즘은 프로그램들이 워낙 무거워서 16GB 이상의 메모리를 사용하시는걸 추천합니다.

결론

크롬 브라우저의 메모리 부족 에러는 불필요한 탭과 확장 프로그램 관리, 하드웨어 가속 사용 중지, 정기적인 데이터 정리 등을 통해 효과적으로 해결할 수 있습니다. 위의 방법들을 통해 크롬의 성능을 최적화하고, 보다 쾌적한 웹 브라우징 환경을 만들어 보세요.

PositiveSSL, EssentialSSL, Domain, Wildcard 어떤 SSL 인증서를 선택할까?

멱군 — Wed, 29 May 2024 05:56:58 +0900

웹사이트 보안은 현대 인터넷 환경에서 필수적인 요소입니다. 특히, 방문자와의 신뢰를 구축하고 데이터를 안전하게 보호하기 위해 SSL 인증서는 필수적입니다. Sectigo(과거에는 Comodo로 알려짐)에서 제공하는 PositiveSSL, EssentialSSL, Domain, Wildcard는 인기 있는 SSL 인증서입니다. 이 글에서는 이 인증서들의 주요 차이점을 살펴보고, 어떤 상황에서 어떤 인증서를 선택하는 것이 더 적합한지 알아보겠습니다.

1. 어떤 SSL 인증서를 선택할까?

웹사이트를 운영하면서 https 주소를 사용하기 위해서는 SSL 인증서가 필요합니다.

그런데 어떤 SSL을 사용해야 할지 용어도 여러개여서 어려울때가 많습니다.

또한 웹사이트의 보안 요구 사항과 예산에 따라 선택이 달라질 수 있습니다.

그렇다면, 어떤 SSL 인증서를 선택할까요?

개인 블로그나 소규모 비즈니스 웹사이트의 경우 PositiveSSL이나 Domain SSL이 비용 효율적인 선택이 될 수 있습니다.

반면, 더 높은 보증 금액과 신뢰성을 필요로 하는 중소기업이나 중간 규모의 전자 상거래 웹사이트라면 EssentialSSL이나 Multi-Domain SSL이 더 적합합니다.

여러 하위 도메인을 관리해야 하는 경우 Wildcard SSL이 최적의 선택이 될 수 있습니다.

그럼 각각 어떤걸 인증해주는지 알아보도록 하겠습니다.

2. 개인용과 상업용 SSL 선택

PositiveSSL: 저렴하고 빠른 SSL 솔루션

PositiveSSL은 개인 블로그, 소규모 비즈니스 웹사이트, 간단한 전자 상거래 사이트 등 비교적 간단한 웹사이트에 적합합니다.

이 인증서는 빠른 발급 시간과 저렴한 비용으로 가장 많이 사용하고 있습니다.

목적: 개인 블로그, 작은 비즈니스 웹사이트, 소규모 전자 상거래 사이트
보증 금액: $10,000
브라우저 호환성: 대부분의 브라우저와 호환
발급 시간: 일반적으로 몇 분 내에 발급
비용: 저렴

EssentialSSL: 더 높은 신뢰성과 보안을 제공

EssentialSSL은 중소기업 및 중간 규모의 전자 상거래 웹사이트에 적합합니다.

이 인증서는 PositiveSSL보다 약간 더 높은 수준의 보안과 신뢰성을 제공합니다.

목적: 중소기업, 중간 규모 전자 상거래 웹사이트
보증 금액: $50,000
브라우저 호환성: 높은 호환성
발급 시간: PositiveSSL과 비슷하지만, 일부 경우에는 약간 더 오래 걸릴 수 있음
비용: PositiveSSL보다 약간 더 비쌈

3. 종류에 따른 SSL 인증서 옵션

서비스 하는 SSL 종류(출처 - https://www.sslcert.co.kr)

Domain SSL

Domain SSL은 도메인 소유권만을 확인하는 방식의 인증서로, 주로 개인 웹사이트나 간단한 비즈니스 웹사이트에 사용됩니다. 비용이 저렴하며 발급이 빠릅니다.

하지만 진짜 사용하는 도메인을 등록해야 합니다.

예를 들어 www.domain.com과 domain.com은 각각 다른 SSL을 사용해야 합니다.

목적: 개인 웹사이트, 소규모 비즈니스 웹사이트
보증 금액: 보통 낮음
발급 시간: 매우 빠름
비용: 저렴

Multi-Domain SSL

Multi-Domain SSL은 하나의 인증서로 여러 도메인을 보호할 수 있는 인증서입니다.

대규모 웹사이트나 여러 도메인을 관리하는 기업에 적합합니다.

목적: 여러 도메인을 관리하는 기업
보증 금액: 보통 높음
발급 시간: 보통
비용: 개별 도메인보다 비용 효율적

Wildcard SSL

Wildcard SSL은 기본 도메인과 해당 도메인의 모든 하위 도메인을 보호할 수 있는 인증서입니다.

하나의 인증서로 여러 하위 도메인을 관리할 수 있어 매우 편리합니다.

예를 들어 *.domain.com을 등록할 수 있습니다.

domain.com 혹은 a.domain.com, b. domain.com...등 CNAME을 사용하는 여러 하위도메인의 등록이 가능합니다.

목적: 여러 하위 도메인을 가진 웹사이트
보증 금액: 보통 높음
발급 시간: 보통
비용: 개별 인증서보다 비용 효율적

4. SSL 인증서 설치 시 주의할 점

1. 도메인 소유권 확인

인증서 발급을 위해 도메인 소유권을 확인해야 합니다.

2. 정확한 정보 입력

인증서 신청 시 정확한 정보를 입력해야 합니다.

3. 서버 설정

SSL 인증서를 설치한 후, 서버 설정을 올바르게 구성해야 합니다.

4. 갱신 주기 관리

인증서의 유효 기간을 관리하고, 만료 전에 갱신해야 합니다.

결론

어떤 SSL 인증서를 사용해야 할지 많은 도움이 되셨나요?

웹사이트 보안은 지속적인 노력이 필요한 분야입니다.

SSL 인증서는 그 시작일 뿐이며, 다양한 보안 조치를 통해 웹사이트를 보호하는 것이 중요합니다.

사용목적에 맞춰서 SSL 인증서도 잘 선택해야 할 것입니다.

AWS EC2 인스턴스 종료 방지하는 방법

멱군 — Tue, 28 May 2024 16:28:23 +0900

AWS EC2 인스턴스를 실수로 종료하면 해당 인스턴스의 모든 데이터가 삭제될 수 있습니다. 따라서 중요한 인스턴스를 실수로 종료하지 않도록 종료 방지 설정을 하는 것이 좋습니다. 이번 가이드에서는 AWS EC2 인스턴스의 종료 방지 설정 방법을 설명합니다.

1. AWS 관리 콘솔에 로그인하기

먼저 AWS 관리 콘솔에 로그인합니다.

AWS 관리 콘솔은 다음 링크에서 접근할 수 있습니다: AWS 관리 콘솔

2. EC2 대시보드로 이동하기

로그인 후, 상단의 검색창에 'EC2'를 입력하고 EC2 대시보드로 이동합니다.

3. 인스턴스 선택하기

대시보드의 왼쪽 사이드바에서 '인스턴스'를 클릭하여 인스턴스 목록을 엽니다.

종료 방지 설정을 할 인스턴스를 선택합니다.

AWS EC2 선택

4. 인스턴스 상태 변경

인스턴스를 선택했다면, 우측 상단에 "작업 > 인스턴스 설정 > 종료 방지 기능 변경"을 클릭합니다.

작업 > 인스턴스 설정 > 종료 방지 기능 변경 선택 방법

5. 종료 방지 설정

'종료 방지'를 클릭하면 종료 방지 설정 창이 열립니다.

종료 방지 기능 변경 활성화 전

아래의 형광펜으로 칠한 부분처럼, '종료 방지 활성화'를 선택하고 '저장' 버튼을 클릭합니다.

종료 방지 기능 변경 활성화 후

이렇게 하면 해당 인스턴스는 종료 명령을 실행할 수 없게 됩니다.

6. 설정 확인 종료

방지 설정이 제대로 적용되었는지 확인하려면, 인스턴스 세부 정보에서 '종료 방지' 항목이 '활성화됨'으로 표시되어 있는지 확인합니다.

종료 인스턴스 종료 방지 활성화 된 상태

인스턴스 종료를 눌러보면 위의 그림처럼,

종료 방지가 활성화된 인스턴스는 종료되지 않습니다. 인스턴스 종료는 실행 취소할 수 없습니다.

와 같은 메세지와 함께 종료방지 Enabled가 되어있는걸 확인 할 수 있습니다.

주의사항

종료 방지 설정을 활성화하면 인스턴스를 실수로 종료하는 것을 방지할 수 있지만, 이 설정은 루트 또는 관리자의 권한으로 언제든지 변경될 수 있습니다.

따라서 중요한 인스턴스에 대해 주기적으로 설정을 확인하고, 종료 방지 상태를 유지하는 것이 좋습니다.

만약 삭제하고 싶다면, 3번 항목부터 다시 차례로 시작하여 종료방지 활성화의 체크를 해제해주면 됩니다.

결론

AWS EC2 인스턴스의 종료 방지 설정은 인스턴스를 실수로 종료하여 중요한 데이터를 잃는 것을 방지하는 데 매우 유용합니다. 위의 단계를 따라 종료 방지 설정을 활성화하고, 중요한 인스턴스를 안전하게 보호하세요.

같이 보면 좋은 글

AWS EC2 인스턴스 삭제하는 방법

AWS에서 인스턴스를 잘못 생성하셨나요? 그래서 삭제하고 싶으시죠? AWS EC2 인스턴스를 삭제하는 과정은 간단하지만, 중요한 단계이므로 주의 깊게 진행해야 합니다. 이번 가이드에서는 AWS EC2 인

devit.koreacreatorfesta.com

AWS EC2 인스턴스 삭제하는 방법

멱군 — Tue, 28 May 2024 15:14:29 +0900

AWS에서 인스턴스를 잘못 생성하셨나요? 그래서 삭제하고 싶으시죠? AWS EC2 인스턴스를 삭제하는 과정은 간단하지만, 중요한 단계이므로 주의 깊게 진행해야 합니다. 이번 가이드에서는 AWS EC2 인스턴스를 안전하게 삭제하는 방법을 단계별로 설명합니다.

1. AWS에 로그인하기

먼저, AWS 계정에 로그인합니다.

AWS 로그인

AWS 관리 콘솔에 접근하기 위해 다음 링크를 사용합니다 : AWS 관리 콘솔

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

필요한 만큼 이용할 수 있는 것은 물론 필요에 따라 몇 분 만에 확장 또는 축소할 수 있습니다. 자세히 알아보세요.

aws.amazon.com

2. EC2 대시보드로 이동하기

로그인 후, 상단의 검색창에 'EC2'를 입력하여 EC2 대시보드로 이동합니다.

AWS 대시보드에서 EC2 선택

3. 인스턴스 선택하기

대시보드의 왼쪽 사이드바에서 '인스턴스'를 클릭합니다.

인스턴스 목록이 나타납니다.

삭제하고자 하는 인스턴스 선택

삭제할 인스턴스를 찾은 후, 해당 인스턴스를 마우스 오른쪽 버튼으로 클릭합니다.

4. 인스턴스 중지

인스턴스를 삭제하기 전에 먼저 중지해야 합니다.

인스턴스를 오른쪽 클릭한 후 '인스턴스 상태'에서 '중지'를 선택합니다.

인스턴스 중지 선택

인스턴스가 중지 상태로 변경될 때까지 기다립니다.

중지 상태 확인: 인스턴스가 '중지됨' 상태로 표시되면 다음 단계로 진행할 수 있습니다.

5. 인스턴스 종료

인스턴스가 중지된 후, 다시 한 번 인스턴스를 오른쪽 클릭합니다.

이번에는 '인스턴스 상태'에서 '종료'를 선택합니다.

AWS 인스턴스 종료 선택

종료 확인: 종료 확인 팝업이 나타나면 '종료' 버튼을 클릭하여 인스턴스를 종료합니다.

6. 인스턴스 삭제 확인

인스턴스 상태가 '종료됨'으로 표시됩니다.

이 상태에서 5~10분 정도 경과하면 인스턴스 리스트에서 해당 인스턴스가 사라집니다.

이는 해당 인스턴스가 영구적으로 삭제되었음을 의미합니다.

주의사항

AWS에서 인스턴스를 종료하는 것은 해당 인스턴스를 삭제하는 것과 같습니다.

따라서 인스턴스를 종료하기 전에 꼭 한 번 더 확인하시기 바랍니다.

인스턴스에 종료 방지를 걸어 두시는것도 좋은 방법입니다.

AWS EC2 인스턴스 종료 방지하는 방법

AWS EC2 인스턴스를 실수로 종료하면 해당 인스턴스의 모든 데이터가 삭제될 수 있습니다. 따라서 중요한 인스턴스를 실수로 종료하지 않도록 종료 방지 설정을 하는 것이 좋습니다. 이번 가이드

devit.koreacreatorfesta.com

결론

위의 단계를 따르면 AWS EC2 인스턴스를 안전하게 삭제할 수 있습니다. 인스턴스를 삭제하는 과정에서 실수하지 않도록 주의하고, 필요 없는 인스턴스는 주기적으로 정리하여 AWS 리소스를 효율적으로 관리하시기 바랍니다.

Nodejs를 이용한 내 외부아이피 조회하는 웹사이트 만들기

멱군 — Mon, 27 May 2024 21:38:13 +0900

내 외부아이피를 조회하는 웹사이트를 만들려면, 서버 측에서 클라이언트의 IP 주소를 가져와 웹 페이지에 표시하는 간단한 웹 애플리케이션을 만들어야 합니다. 이를 위해 Node.js와 Express를 사용하여 서버를 구축하고, 클라이언트의 IP 주소를 반환하는 REST API를 생성한 후, 이를 프론트엔드에서 호출하여 표시할 수 있습니다.

1. Node.js와 Express 서버 설정

먼저 Node.js와 Express를 설치하고 서버를 설정합니다.

1. Node.js 프로젝트 초기화 및 Express 설치

mkdir ip-checker
cd ip-checker
npm init -y
npm install express

2. Express 서버 생성 (server.js 파일)

const express = require('express');
const app = express();
const path = require('path');

// 정적 파일 제공
app.use(express.static(path.join(__dirname, 'public')));

app.get('/api/ip', (req, res) => {
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    res.json({ ip });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

2. 클라이언트 측 설정

이제 클라이언트 측 HTML 파일과 JavaScript 파일을 설정합니다.

1. HTML 파일 (public/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP Checker</title>
    <script defer src="script.js"></script>
</head>
<body>
    <h1>Find My IP</h1>
    <p id="ip-address">Fetching your IP address...</p>
</body>
</html>

2. JavaScript 파일 (public/script.js)

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const response = await fetch('/api/ip');
        const data = await response.json();
        document.getElementById('ip-address').textContent = `Your IP Address: ${data.ip}`;
    } catch (error) {
        console.error('Error fetching the IP address:', error);
        document.getElementById('ip-address').textContent = 'Could not fetch IP address.';
    }
});

3. 서버 실행

이제 서버를 실행합니다.

node server.js

4. 내 외부 아이피 테스트 및 소스코드

브라우저에서 http://localhost:3000에 접속하여 IP 주소가 표시되는지 확인합니다.

내 외부 아이피 확인하기 ➔

위에서 사용한 소스코드를 파일로 첨부합니다.

내 아이피 조회하는 사이트 만들기.zip

0.00MB

마치며 설명하자면,

서버 설정
- Express를 사용하여 기본 서버를 설정하고, 클라이언트의 IP 주소를 반환하는 /api/ip 엔드포인트를 만듭니다.
클라이언트 설정
- HTML 파일과 JavaScript 파일을 설정하여 서버에서 IP 주소를 가져와 페이지에 표시합니다.
정적 파일 제공
- public 디렉터리를 정적 파일 제공 디렉터리로 설정하여 HTML, CSS, JavaScript 파일을 제공합니다.

이 예제를 확장하여 더 많은 기능을 추가하거나, 디자인을 개선하여 원하는 웹사이트를 만들 수 있습니다.

이 글을 통해서 외부에서 접속하는 IP주소를 확인하는 웹 사이트를 만들어보세요.

puTTY 설치 및 SSH 접속방법 Windows에서 리눅스 및 유닉스 서버 안전하게 원격 접속하기

멱군 — Tue, 7 May 2024 20:46:31 +0900

PuTTY는 Windows 환경에서 리눅스나 유닉스 계열 서버에 안전하게 원격 접속하기 위한 필수 툴입니다. SSH (Secure Shell) 프로토콜을 이용해 암호화된 네트워크 연결을 통해 서버 관리 작업을 수행할 수 있습니다. 다음은 PuTTY의 기본 사용법을 소개합니다

PuTTY 설치하기

1. PuTTY 공식 웹사이트(https://www.putty.org/)에서 운영 체제에 맞는 설치 파일을 다운로드합니다.

Download PuTTY - a free SSH and telnet client for Windows

Is Bitvise affiliated with PuTTY? Bitvise is not affiliated with PuTTY. We develop our SSH Server for Windows, which is compatible with PuTTY. Many PuTTY users are therefore our users as well. From time to time, they need to find the PuTTY download link. W

www.putty.org

2. 다운로드한 설치 파일을 실행하여 설치 과정을 따릅니다.

3. 설치 완료 후 PuTTY를 실행합니다.

PuTTY 사용법

SSH 접속 및 등록

PuTTY 화면

PuTTY를 실행하고 'Host Name' 칸에 접속할 서버의 IP 주소나 도메인 주소를 입력합니다.

'Connection type'에서 SSH를 선택하면 기본 포트인 22번이 자동으로 설정됩니다.

접속 정보를 저장하려면 'Saved Sessions'에 이름을 입력하고 'Save' 버튼을 클릭합니다.

이렇게 하면 서버 주소와 환경 설정이 저장되어 나중에 쉽게 접속할 수 있습니다.

프라이빗키를 이용한 접속방법

PuTTY SSH올리기 위한 프라이빗 키 선택 화면

Category > Connection > SSH > Auth > Credentials 의 카테고리를 선택합니다.

Private key 에서 Browse 버튼을 클릭하고, *.ppm파일이나 *. ppk파일을 선택하고 open버튼을 누른 후 연결을 할 수 있습니다.

PuTTY 실행 도중 설정 변경하기

PuTTY 세션 중에 환경 설정을 변경하려면, 창 상단의 타이틀 바를 마우스 오른쪽 버튼으로 클릭하고 'Change Settings'를 선택합니다.

변경하고자 하는 설정을 조정하고 적용합니다.

PuTTY 창 화면 크기 및 폰트 설정

창 크기 설정

'Window' 섹션에서 'Set the size of the window' 옵션을 사용해 가로와 세로 크기를 조정합니다.

폰트 설정

'Appearance' 섹션에서 'Change' 버튼을 클릭해 글꼴 종류와 크기를 설정할 수 있습니다.

텍스트 복사 및 붙여넣기

리눅스 서버 원격접속 화면

복사하기

PuTTY 창에서 복사하고자 하는 텍스트를 드래그하면 자동으로 클립보드에 복사됩니다.

붙여넣기

명령어 입력창에 커서를 놓고 마우스 오른쪽 버튼을 클릭하면 클립보드의 내용이 붙여넣어집니다.

외부 복사 및 붙여넣기

외부 에디터에서 복사한 텍스트도 마찬가지로 PuTTY 창에서 마우스 오른쪽 버튼을 클릭하여 붙여넣을 수 있습니다.

결론

PuTTY는 강력한 원격 접속 도구로서, 리눅스 및 유닉스 서버 관리에 있어 필수적인 프로그램입니다.

이 가이드를 통해 기본적인 PuTTY 사용법을 익혀 보다 안전하고 효율적인 서버 관리를 수행할 수 있습니다.

원격 서버 관리의 기본이 되는 이 도구를 통해 서버 운영 능력을 한 단계 업그레이드하세요!

이력서에 가족관계 기재하는 방법

멱군 — Tue, 7 May 2024 19:44:08 +0900

안녕하세요, 이력서에 가족관계 기재하는 방법이 헷갈리시죠? 오늘은 이력서에 가족관계를 어떻게 기재하는지, 정확하고 효과적인 방법을 알려드릴까 합니다. 이력서에 가족관계를 기재하는 것은 때로는 요구되는 사항이며, 올바르게 작성하는 것이 중요합니다.

1. 가족관계 작성의 필요성

가끔 가족관계의 호칭을 어떻게 해야 할까? 헷갈리는 경우가 많죠?

특정 산업이나 회사에서는 직원의 배경을 포괄적으로 이해하기 위해 가족관계를 요구하기도 합니다.

이는 팀과의 조화나 회사 문화 적응 가능성을 판단하기 위함일 수 있습니다.

정확한 정보 제공은 신뢰성을 높이는 요소가 될 수 있습니다.

최근 뉴스에서 합격통보와 함께 통장 사본과 신분증을 보내라는 말에 잘못된 이해로 잘못된 이미지를 보내서 합격통보 취소가 된일이 있었죠.

"그냥 일하지 마십시다" '통장 사본' 보낸 직원 '해고' [어떻게 생각하세요]

[파이낸셜뉴스] 면접 합격한 회사에서 첫 출근 전에 잘렸다는 한 취업준비생의 사연이 알려졌다.지난 25일 한 온라인 커뮤니티에는 '○○씨, 통장이랑 신분증 사진 보내주세요'라는 제목의 글

www.fnnews.com

이처럼 이력서에는 한글자 한글자가 정확하고 중요해야 합니다.

2. 가족관계 기재 방법

HR 이력서가족관계 및 기본사항 기입란

흔히 쓰는 예시이미지를 가져와봤습니다.

비상연랑망쪽에 관계를 적어야 하는 부분이 보이네요.

여기에 어떻게 작성해야 할지 알아봅시다.

1. 기본 구성원 표기

이력서에 가족 구성원을 표기할 때는 각 관계의 정확한 호칭을 사용해야 합니다.

한글과 한자를 함께 기재하면 더욱 정식으로 보입니다.

예를 들어, 아버지는 '부(父)', 어머니는 '모(母)'로 표기합니다.

2. 표기법

아버지: 부(父)
어머니: 모(母)
남편: 부(夫)
부인: 처(妻)
형제자매: 형(兄), 자(姉), 매(妹), 제(弟)
할아버지, 할머니: 조부(祖父), 조모(祖母)

이 같은 표기법은 명확성을 제공하며, 이력서를 검토하는 HR 담당자가 쉽게 이해할 수 있도록 도와줍니다.

3. 예시

본인을 기준으로 가족관계를 명시하며, 가족 구성원 간의 관계를 분명히 설명합니다.

예를 들어, '아버지 - 부 김철수(父金哲秀)'라고 기재할 수 있습니다.

3. 실수 방지 팁

형제자매의 호칭을 혼동하기 쉬운데, 남동생은 '제(弟)', 여동생은 '매(妹)'로 기재합니다.

형과 오빠는 '형(兄)', 언니와 누나는 '자(姉)'입니다.

이력서의 다른 부분들도 중요하지만, 가족관계에 실수가 없도록 주의하는 것이 좋습니다.

잘못된 정보는 부정적인 인상을 줄 수 있습니다.

결론

가족관계 기재는 이력서 작성시 세심한 주의를 요구하는 부분입니다.

제가 제공한 정보를 참고하여 이력서에 가족관계를 정확하게 기재하시면 좋겠습니다.

추가적인 자기소개서 작성 팁이 필요하시다면 관련 동영상을 참고하시는 것도 좋은 방법입니다.

다음 포스트에서 더 유용한 정보로 찾아뵙겠습니다!

Google 계정 하나에 여러 유튜브 채널 생성 하는 방법

멱군 — Tue, 23 Apr 2024 01:23:33 +0900

Google 계정 하나로 여러 유튜브 채널을 만들 수 있습니다. 이는 특히 다양한 주제의 컨텐츠를 제작하거나 다른 목적으로 여러 채널을 운영하고자 할 때 유용합니다. 각 채널은 독립적으로 운영되므로, 한 채널의 구독자가 다른 채널로 자동으로 이전되지 않습니다. 각각의 채널은 별도의 구독자 기반을 갖고, 서로 다른 컨텐츠를 제공할 수 있습니다. 그렇다면, 유튜브 채널을 여러개 생성하는 방법을 알아볼까요?

채널 관리 및 구독의 장점

유튜브에서는 사용자가 다른 사람의 여러 채널을 각각 구독할 수 있습니다. 각 채널은 독립적인 구독 리스트를 가지고 있어서, 한 사람의 채널을 구독한다고 해서 자동으로 그 사람의 다른 채널을 구독하게 되지는 않습니다.

예를 들어, 한 크리에이터가 여러 채널을 운영하고 있다면, 사용자는 자신의 관심에 따라 각각의 채널을 별도로 구독해야 합니다. 만약 A 채널에서 AA를 구독했다고 해서 B 채널의 구독 리스트에 AA가 자동으로 표시되지 않습니다. 각 채널의 구독 리스트는 독립적이기 때문에, 한 채널에서 특정 채널을 구독하는 것은 다른 채널에 영향을 주지 않습니다. 만약 B 채널에서도 AA 채널을 보고 싶다면, B 채널로 로그인하여 AA 채널을 별도로 구독해야 합니다.

정리해볼까요?

독립적인 구독 관리

만약 여러 채널을 운영한다면, 각 채널은 독립적인 구독 리스트를 가지고 있습니다.

한 채널에서 다른 유튜브 채널을 구독한다 해도, 이 구독 정보는 다른 채널에는 반영되지 않습니다.

채널별 구독 필요

다른 채널도 같은 채널을 구독하길 원한다면, 각각의 채널에서 해당 유튜브 채널을 따로 구독해야 합니다.

유튜브 브랜드 계정 만들기: 단계별 안내

브랜드 계정은 여러 명의 관리자가 동일한 채널을 관리할 수 있게 해주며, 개인 계정과는 독립적으로 운영됩니다.

이는 특히 비즈니스 또는 브랜드가 관련된 콘텐츠를 다룰 때 유용합니다.

다음은 유튜브 브랜드 계정을 만드는 단계별 안내입니다.

1. 구글 계정 로그인

유튜브에 접속하여 오른쪽 상단의 프로필 아이콘을 클릭한 다음, 구글 계정 정보로 로그인합니다.

2. 설정 접근 프로필

아이콘을 클릭하고 나타나는 메뉴에서 '설정'을 선택합니다.

구글계정 클릭

3. 내 계정 페이지 이동

설정 페이지로 이동한 후, 계정 정보 섹션에서 '채널 추가 또는 관리' 옵션을 클릭합니다.

내 계정 페이지 이동

4. 채널 추가

'채널 추가 또는 관리' 페이지에서 '새 채널 만들기'를 선택합니다.

'채널 추가 또는 관리' 페이지에서 '새 채널 만들기'를 선택

5. 브랜드 계정 정보 입력

브랜드 계정의 이름을 입력하고 '만들기'를 클릭합니다.

브랜드 계정의 이름을 입력

이때, 브랜드 계정 이름은 공개적으로 표시되는 이름이므로, 브랜드의 정체성을 잘 나타낼 수 있는 이름을 선택해야 합니다.

6. 채널 설정 및 사용자 정의

새로운 브랜드 계정으로 리다이렉트되면, 채널 아이콘, 배너 및 기본 설정을 사용자 정의할 수 있습니다.

채널 설정 및 사용자 정의

이는 채널의 첫 인상을 결정하는 중요한 단계입니다.

7. 관리자 및 역할 할당

브랜드 계정을 통해 여러 관리자를 추가할 수 있습니다.

'설정' > '권한' 섹션으로 이동하여, 새로운 관리자를 초대하고 그들에게 적절한 역할을 할당할 수 있습니다.

8. 채널 아이디 변경

오른쪽 상단 계정을 클릭한 후 내채널을 선택합니다.

채널 아이디 변경

맞춤설정에서 기본정보로 이동한다음 핸들 값을 변경합니다.

9. 채널 활성화

모든 설정을 마친 후 콘텐츠 업로드를 시작하여 채널을 활성화시킬 수 있습니다.

콘텐츠 업로드 유튜브 스튜디오

이렇게 만들어진 채널을 소개합니다.

여건이 되신다면 구독, 좋아요 꾹꾹 부탁드려요. ㅎㅎ

만들어진 내유튜브 보러가기 ➔

참고사항

이 과정은 주로 PC에서 수행됩니다.
모바일에서는 유튜브 앱의 기능 제한으로 인해 일부 옵션이 제공되지 않을 수 있습니다.
각 채널은 별도의 구독자와 별도의 컨텐츠를 가지게 되며, 각기 다른 관리자 권한을 부여받을 수 있습니다.

마치며,

이렇게 하나의 Google 계정으로 여러 유튜브 채널을 관리하는 것은 효율적인 컨텐츠 분리 및 전문적인 채널 운영에 도움을 줄 수 있습니다. 각기 다른 주제나 목적에 맞는 채널을 운영하면서, 독자적인 브랜드를 구축할 수 있습니다.

갤럭시 버즈2 PC 연결안됨! 페어링하는 방법, 윈도우 앱 설치

멱군 — Thu, 18 Apr 2024 19:05:13 +0900

갤럭시 버즈2를 사용하고 있으신가요? 저도 갤럭시 버즈2를 사용하고 있답니다. 휴대폰에서만 연결해서 사용하다가 노트북등 PC로 연결하고 싶어서 블루투스 연결을 해봤는데 생각처럼 잘 되지 않더라구요. 이글에서는 제가 어떻게 연결하기 위해 해결했는지 알려드리도록 하겠습니다.

1. 갤럭시 버즈2 PC 연결안됨

갤럭시 버즈2를 PC에 연결하려고 시도할 때, 종종 페어링이 되지 않는 문제가 발생하더라구요.

연결한 기기가 너무 많았던거일 수도 있고, 블루투스 버전이 맞지 않아서 일수도 있을거 같습니다.

하지만 이런문제는 큰 원인이 아닐꺼라고 생각했습니다.

PC의 블루투스가 검색이 가능하도록 해줘야 할 필요성이 있겠더라구요.

아래에 말하는 방법은 삼성 갤럭시 버즈2, 갤럭시 버즈2, 버즈2 프로, 버즈 FE( Samsung Galaxy Buds2, Buds2 Pro, Buds FE )등 갤럭시 버즈 시리즈 모두 동일하게 적용할 수 있습니다.

2. 갤럭시 버즈2 블루투스 페어링 모드 전환하기

이어버드를 충전 케이스에 넣고, 양쪽 이어버드를 동시에 3초 이상 길게 터치하여 수동으로 블루투스 페어링 모드로 진입할 수 있습니다.

갤럭시 버즈2 블루투스 페어링 모드

이어버드 배터리 상태 표시등이 빨간색, 녹색 순으로 깜박이면 블루투스 페어링모드로 진입했다는 표시입니다.
갤럭시 버즈2가 페어링모드로 들어갔기 때문에 이제 PC 혹은 노트북에서 블루투스 검색이 가능합니다.

3. PC와 연결(페어링)하는 방법

갤럭시 버즈2가 페어링모드로 들어갔기 때문에 이제 PC 혹은 노트북에서 검색이 가능합니다.

그렇다면 PC와 연결하는 방법을 알아보도록 하겠습니다.

1. 기본적인 블루투스 연결

우선, 윈도우에서 블루투스 검색으로 연결해보도록 할께요.

1. 윈도우 검색 바에서 '설정'을 입력하고 열기

설정 > 장치 선택

2. '장치' 메뉴 선택 후 'Bluetooth 및 기타 장치 추가' 클릭

블루투스 또는 기타 장치 추가

3. 'Bluetooth' 선택 후 갤럭시 버즈2를 검색하여 연결

블루투스 디바이스 추가

블루투스 연결 목록에서 갤럭시 버즈2를 찾아서 연결 할 수 있습니다.

2. 마이크로소프트 스토어에서 윈도우 앱 설치

위의 방법으로 페어링이 계속 실패한다면, 윈도우 앱을 설치해서 진행 할 수도 있습니다.

추가적인 솔루션을 찾기 위해 마이크로소프트 스토어에 접속했습니다.

Galaxy Buds - Microsoft Store 공식 앱

Galaxy Buds (갤럭시 버즈) 앱은 Galaxy Buds 시리즈와 연동하여 기기의 설정, 서비스 상태 보기 등의 기능을 제공 합니다. 지원되는 모델 · Galaxy Buds Live · Galaxy Buds Pro · Galaxy Buds2 · Galaxy Buds2 Pro · Galax

apps.microsoft.com

여기에서는 PC와 갤럭시 버즈2 간의 호환성을 높여 줄 수 있는 특정 애플리케이션을 찾을 수 있었습니다.

페어링 문제를 해결하기 위해 마이크로소프트 스토어에서 지원하는 앱을 설치하는 방법은 다음과 같습니다.

1. 마이크로소프트 스토어 접속 후 'Galaxy Buds' 관련 앱 검색

마이크로소프트 스토어 갤럭시 버즈 앱

2. 앱을 설치하고 실행한 뒤, 앱 내의 지침을 따라 갤럭시 버즈2를 검색하고 연결

갤럭시 버즈앱에서 버즈 검색

장치를 찾은 후 연결 여부 확인

갤럭시 버즈앱을 통한 갤럭시 버즈2 PC와 연결 완료

이 방법을 통해 기존의 블루투스 연결 문제를 해결하고, PC에서 갤럭시 버즈2의 모든 기능을 활용할 수 있게 됩니다.

결론

위의 방법대로 잘 해결하셨나요?

갤럭시 버즈2를 PC에 성공적으로 연결하기 위해서는, 기본적인 블루투스 설정과 함께 필요한 경우 마이크로소프트 스토어를 통해 관련 앱을 설치하는 것이 좋습니다.

이렇게 함으로써, 갤럭시 버즈2의 탁월한 사운드와 기능을 PC에서도 완벽하게 경험할 수 있습니다.

함께보면좋은글

갤럭시 버즈3 PRO PC에 연결해서 사용하는 방법

이번에 갤럭시 버즈 3 PRO가 새로 나왔습니다. 나오자마자 구입했는데, 버즈2도 좋았지만 더욱 풍부한 사운드에 반하고 말았습니다. 하지만, PC와 연결해야 할 일이 생기면서 어떻게 할지 고민이

devit.koreacreatorfesta.com

갤럭시 버즈 3 PRO 개봉기 및 사용 후기 착용샷

안녕하세요, 멱군입니다! 이번에 새로 출시된 갤럭시 버즈 3 PRO를 사전 예약 구매했어요. 갤럭시버즈2...

blog.naver.com

워드프레스 업데이트 후 사이트 접속 불가? 예약된 유지보수로 인해 잠시 사용할 수 없습니다. 해결방법

멱군 — Tue, 9 Apr 2024 10:46:11 +0900

워드프레스를 사용하다 보면 업데이트 과정 중 "예약된 유지보수로 인해 잠시 사용할 수 없습니다. 잠시 후에 다시 확인하세요."라는 메시지로 사이트 접속이 막히는 경우가 있습니다. 이는 워드프레스가 업데이트 중이거나 유지보수 모드에 있음을 나타내는 메시지입니다. 특히, 카페24와 같은 웹 호스팅을 이용할 때 이 문제가 발생하면 당황스러울 수 있습니다. 하지만 걱정하지 마세요! 이 문제는 간단한 방법으로 해결할 수 있습니다.

1. 문제의 발단

오래간만에 워드프레스에 접속했더니 6.5 버전으로 워드프레스가 업데이트가 되었네요.

워드프레스 6.5 업데이트

그래서 업데이트 하라는 공지에 업데이트를 진행했습니다.

그리고 잠시 기다렸다가 재접속을 하는데 다음과 같은 메세지가 출력되었답니다.

웓프레스 "예약된 유지보수로 인해 잠시 사용할 수 없습니다. 잠시 후에 다시 확인하세요." 메세지

좀 기다리면 되겠거니 했는데 한참을 이상태로 유지하고 있더라구요.

내 워드프레스 사이트 가기 ➔

나름 키우고 있는 블로그인데 어떻게 해결해야 할까요?

2. 예약된 유지보수 메세지의 원인

워드프레스가 업데이트 중이거나 플러그인, 테마를 업데이트할 때, 시스템은 자동으로 사이트를 유지보수 모드로 전환합니다.

이 과정에서 .maintenance 파일이 워드프레스의 루트 디렉터리에 생성되어, 업데이트가 완료될 때까지 사이트 접속을 제한합니다.

문제는 업데이트가 비정상적으로 중단되거나 지연될 경우, 이 파일이 자동으로 삭제되지 않아 사이트가 계속 유지보수 모드에 머무르게 되는 것입니다.

3. 해결 방법

저는 카페24의 워드프레스호스팅을 사용하고 있기 때문에 카페24 기준으로FTP 폴더 접근 기준으로 설명할께요.

결론부터 이야기하자면 .maintenance 파일을 삭제하면 됩니다.

FTP에 접속해서 삭제하는 방법을 알려드릴께요.

1. FTP 클라이언트 접속

카페24 등의 웹 호스팅 서비스를 이용 중이라면, FTP 클라이언트 프로그램(FileZilla, WinSCP 등)을 이용하여 서버에 접속합니다.

2. 루트 디렉터리로 이동

대부분의 경우 카페24에서는 www 폴더가 워드프레스 사이트의 루트 디렉터리입니다.

3. .maintenance 파일 찾기 및 삭제

루트 디렉터리 내에서 .maintenance 파일을 찾아 삭제합니다.

cafe24 워드프레스 ftp  maintenance 삭제

숨김 파일이 보이지 않는다면, FTP 클라이언트의 설정에서 숨김 파일을 표시하도록 변경해야 할 수도 있습니다.

4. 사이트 접속 재확인

.maintenance 파일을 삭제한 후 웹사이트에 다시 접속해보면, 사이트가 정상적으로 작동하는 것을 확인할 수 있습니다.

내 워드프레스 사이트 정상접속 확인 ➔

주의 사항

도메인을 특정 디렉터리에 설정한 경우, 그 디렉터리가 실제 워드프레스 사이트의 루트 디렉터리가 됩니다.

해당 디렉터리 내에서 .maintenance 파일을 찾아야 합니다.

FTP 접속이 익숙하지 않다면, 호스팅 서비스의 고객 지원 센터에 도움을 요청하는 것도 좋은 방법입니다.

마무리하며,

이렇게 워드프레스의 에러메세지를 해결을 또 하나 해결했네요.

이번 포스팅이 워드프레스 사이트 운영에 도움이 되기를 바랍니다.

더 이상 워드프레스 업데이트로 인한 유지보수 모드에 당황하지 않기를 바라며, 원활한 사이트 운영을 기원합니다!

페이스북과 티스토리를 자동 연동하여 블로그 유입량 증가시키는 방법 IFTTT 설정방법

멱군 — Mon, 8 Apr 2024 22:09:16 +0900

블로그를 운영하며 가장 큰 과제 중 하나는 어떻게 하면 더 많은 독자에게 내 콘텐츠를 노출시킬 수 있을까 하는 것입니다. 특히, 티스토리 같은 플랫폼에서 활동하는 블로거라면 외부 유입량을 늘리는 것이 중요한데요, 오늘은 페이스북을 통해 이를 실현할 수 있는 매우 간단하면서도 효과적인 방법을 소개하고자 합니다.

1. 페이스북과 티스토리 자동 연동하면 좋은점

1. SEO 최적화

SEO에서 백링크는 인기투표와 같다라는걸 알고 계신가요?

페이스북과 같은 외부 채널로부터의 백링크는 구글 SEO 최적화에 긍정적인 영향을 미칩니다.

2. 구독자 범위 확대

페이스북에 자동으로 게시됨으로써, 티스토리 블로그 이외의 채널을 통한 독자 유입이 가능해집니다.

무엇보다 내가 쓴 글이 큰 힘 들이지 않고 자동으로 올라가기 때문에 너무 편하죠.

내가 쓴글이 자동으로 올라간다면 페이스북 광고도 쉽게 진행 할 수가 있겠죠?

2. 페이스북과 티스토리 IFTTT 자동 연동 방법

티스토리와 페이스북을 자동으로 연동하는 방법은 무엇일까요?

바로 IFTTT라는 서비스를 이용하는 것입니다.

IFTTT(If This Then That)는 다양한 웹 서비스와 소셜 미디어 플랫폼을 연동할 수 있게 해주는 툴입니다.

이 서비스의 가장 큰 장점은 무료로 제공된다는 것입니다.

그럼 단계별로 따라하면서 직접 세팅해보도록 하겠습니다.

1단계: 페이스북 페이지 만들기

블로그를 페이스북과 연동하기 위해서는 페이스북 페이지 만들기를 진행해야 합니다.

개인적으론 개인 페이스북과는 다르게 운영하는게 더 깔끔해보이니까요.

페이스북 페이지 만드는 방법 ➔

2단계: IFTTT 회원가입 및 로그인

페이스북 페이지를 만들었다면, IFTTT 웹사이트에 접속하여 회원가입을 합니다.

이미 계정이 있다면 로그인합니다.

IFTTT 회원가입하기

저는 어차피 페이스북에 올릴거라서 페이스북 계정으로 가입했습니다.

IFTTT 페이스북 연동

페이스북으로 가입을 하고 나면 가입이 성공되고 나서 IFTTT PRO를 가입할것이냐고 묻습니다.

IFTTT PRO를 가입

'Continue'는 정말 크고, 'Not now'버튼은 정말 작습니다.

전 무료로 이용할 계획이기 때문에 Not now를 클릭했습니다.

3단계: IFTTT와 페이스북 연동 설정

IFTTT에서 'Facebook Pages' 설정을 찾아 선택합니다.

IFTTT에서  Facebook 검색

이는 티스토리 RSS 피드를 페이스북으로 자동 게시하는 기능입니다.

facebook pages 연동

'Connect' 버튼을 클릭하여 페이스북 계정과 연동합니다.

4단계: 페이스북 권한 설정

페이스북 페이지에 게시할 수 있도록 필요한 권한을 IFTTT에 부여합니다.

facebook 접근 허용

이 과정은 몇 번의 클릭으로 간단히 완료됩니다.

페이스북 페이지가 잘 연결이 되었다면 다음과 같은 내용을 확인 할 수 있습니다.

티스토리와 페이스북페이지 연동확인

저의 페이스북페이지와 잘 연동이 되었네요.

5단계: 티스토리 RSS 피드 주소 입력

Facebook Pages integrations Ready

페이스북 페이지를 연결했다면 Create를 클릭합니다.

RSS to FB Page Button

그러면 RSS to FB Page라는 버튼이 보이는데 티스토리 RSS를 페이스북 페이지로 보내는 기능을 합니다.

RSS to FB Page Connect Ready

'Connect' 슬라이드를 밀어서 나의 티스토리 RSS와 연결해봅니다.

티스토리 RSS 입력

티스토리 블로그의 RSS 피드 주소를 입력합니다.

주소는 보통 https://블로그주소/rss 라는거 다 아시죠?

연결 완료

6단계: 연동 확인 이제 티스토리에 새 글을 게시할 때마다 자동으로 페이스북 페이지에도 동일한 내용이 게시됩니다.

페이스북 페이지를 확인하여 연동이 잘 되었는지 확인해 보세요.

페이스북 페이지 글올라갔는지 확인 ➔

해보니 한시간마다 RSS를 스크래핑하는거 같아요.

연동했다고 바로 올라가진 않더라구요.

페이스북 유입

이제는 페이스북에서도 검색이 유입이 되는군요.

카카오스토리와 트위터, 유튜브, 인스타그램 등 다양한 백링크를 시도해볼 수도 있겠네요.

마무리

페이스북과 티스토리의 자동 연동은 블로그의 외부 유입량을 증가시키고, 독자 기반을 확대하는 데 매우 유용한 방법입니다.

IFTTT 같은 툴을 활용하여 손쉽게 설정할 수 있으니, 블로그 활성화를 위한 하나의 전략으로 페이스북 연동도 고려해보세요.

함께보면 좋은글

티스토리 블로그와 페이스북 연동하고 방문 유입 올리기

요즘 같은 디지털 시대에 블로그와 SNS는 단순히 일상을 공유하는 창구를 넘어서, 마케팅과 홍보의 핵심 도구로 자리 잡았습니다. 특히 티스토리 블로그는 그 자체로도 강력한 컨텐츠 플랫폼이

devit.koreacreatorfesta.com

티스토리를 구글서치와 네이버서치 사이트맵 등록하기

티스토리 블로그 운영자라면, 블로그의 검색 엔진 가시성을 높이기 위해 사이트맵 등록을 고려해야 합니다. 사이트맵은 검색 엔진이 블로그의 구조를 이해하고 효율적으로 색인을 생성할 수 있

devit.koreacreatorfesta.com

MYSQL NULL이 아닌 값 반환하는 COALESCE 사용방법

멱군 — Mon, 8 Apr 2024 15:23:05 +0900

COALESCE 함수는 MySQL에서 매우 유용하게 사용될 수 있는 함수로, 주어진 리스트 중에서 NULL이 아닌 첫 번째 값을 반환합니다. 만약 모든 인자가 NULL일 경우, COALESCE 함수는 NULL을 반환합니다. 이 함수는 기본적으로 데이터가 NULL일 수 있는 컬럼을 처리할 때, 기본값을 제공하는 용도로 사용될 수 있습니다.

1. COALESCE 함수란?

COALESCE 함수는 주어진 리스트 중에서 첫 번째 NULL이 아닌 값을 반환합니다.

만약 모든 인자가 NULL이라면, COALESCE는 NULL을 반환합니다.

이 함수는 데이터의 무결성을 유지하며, 사용자에게 더 의미 있는 정보를 제공하거나, 기본값을 설정하는 데 유용하게 사용됩니다.

기본 사용법

COALESCE(value1, value2, ..., valueN)

value1부터 valueN까지의 값 중에서 첫 번째 NULL이 아닌 값을 반환합니다.

모든 값이 NULL인 경우, 결과는 NULL입니다.

2. 사용 시나리오

1. 사용자 친화적인 정보 제공

데이터에 NULL 값이 포함되어 있을 때, 사용자에게 보다 친화적인 정보를 제공하고 싶은 경우가 있습니다.

예를 들어, 사용자 이름이 데이터베이스에 없는 경우 '이름 없음'이라고 표시하고 싶을 수 있습니다.

SELECT COALESCE(name, '이름 없음') AS user_name
FROM users;

데이터는 다음과 같습니다.

name

"김갑동"

"홍길동"

null

이 데이터를 위의 구문으로 진행한다면, "김갑동", "홍길동", "이름없음"과 같이 출력이 됩니다.

2. 데이터 분석과 계산

데이터 분석이나 계산을 할 때 NULL 값 때문에 올바른 결과를 얻지 못하는 경우가 있습니다.

예를 들어, 할인율이 NULL인 경우 0으로 간주하고 최종 가격을 계산하려 할 때 COALESCE를 사용할 수 있습니다.

SELECT price - (price * COALESCE(discount_rate, 0)) AS discounted_price
FROM orders;

3. 데이터 무결성 유지

NULL 값은 때로 데이터의 무결성을 해칠 수 있습니다.

예를 들어, 여러 컬럼 중 하나라도 NULL이 아니라는 것을 보장해야 할 때 COALESCE를 사용하여 최소한 하나의 유효한 값을 반환하도록 할 수 있습니다.

SELECT COALESCE(first_name, middle_name, last_name, '알 수 없음') AS full_name
FROM users;

데이터는 다음과 같습니다.

first_name	middle_name	last_name
김	철수	null
null	null	박
null	null	null

그렇다면 결과값은 "김", "박", "알 수 없음" 으로 나오게 됩니다. null 이 아닌 첫번째 값이 나오게 되는것이죠.

4. COALESCE 사용의 이점

유연성

다양한 데이터 상황에 대응할 수 있게 해줍니다.

데이터 무결성

기본값을 제공하여 데이터의 무결성을 유지할 수 있습니다.

사용자 경험 개선

사용자에게 더 의미 있는 정보를 제공할 수 있습니다.

결론

COALESCE 함수는 SQL 쿼리 작성 시 NULL 값으로 인해 발생할 수 있는 다양한 문제를 해결할 수 있답니다.

사용자 친화적인 정보 제공, 정확한 데이터 계산, 데이터 무결성 유지 등 여러 면에서 COALESCE의 사용은 데이터베이스 관리의 효율성과 효과성을 크게 향상시켜주죠.

따라서 데이터베이스 작업을 할 때 NULL값을 처리할 때, COALESCE 함수를 사용해보는것은 어떨까요?

함께보면 좋은글

[MYSQL] 쿼리문에서 NULL 값 체크 및 값 변경

데이터베이스에서는 종종 데이터가 누락되거나, 초기 값이 설정되지 않아 NULL 값을 가진 데이터를 마주하게 됩니다. NULL 값은 특정 값이 없음을 의미하며, 이를 제대로 처리하지 않으면 쿼리 실

devit.koreacreatorfesta.com

티스토리 블로그와 페이스북 연동하고 방문 유입 올리기

멱군 — Sun, 7 Apr 2024 00:51:31 +0900

요즘 같은 디지털 시대에 블로그와 SNS는 단순히 일상을 공유하는 창구를 넘어서, 마케팅과 홍보의 핵심 도구로 자리 잡았습니다. 특히 티스토리 블로그는 그 자체로도 강력한 컨텐츠 플랫폼이지만, 페이스북과 같은 SNS와 연동한다면 그 효과는 배가 됩니다. 저 역시 다양한 플랫폼에서 활동하며 이런 시너지 효과를 체감하고 있는데요, 오늘은 그 방법을 공유해보고자 합니다.

1. 페이스북 페이지 시작하기

페이스북 페이지는 단체나 브랜드를 위한 공식 SNS 계정으로, 개인 프로필과는 다르게 무제한의 팔로워를 보유할 수 있으며, 다양한 마케팅 활동에 활용할 수 있습니다. 페이지를 개설하는 것은 생각보다 간단한데요, 개인 계정으로 로그인 후 '페이지 만들기'를 클릭, 필요한 정보를 입력하는 것만으로도 시작할 수 있습니다.

1. 페이스북 로그인

먼저, 페이스북에 개인 계정으로 로그인합니다.

페이스북 바로가기 ➔

당연한 이야기겠지만, 페이스북 페이지는 개인 계정이 있어야만 만들 수 있습니다.

2. 페이지 생성 시작

페이스북 프로필 > 페이지만들기

로그인 후 홈페이지 오른쪽 상단에 위치한 프로필 버튼을 클릭합니다.

드롭다운 메뉴에서 '새로운 프로필 또는 페이지만들기'를 선택합니다.

3. 페이지 종류 선택

'비즈니스 또는 브랜드'와 '커뮤니티 또는 공공 인물' 중에서 페이지의 목적에 맞는 옵션을 선택합니다.

대부분의 경우, '비즈니스 또는 브랜드'를 선택하면 됩니다.

4. 페이지 정보 입력

페이스북 페이지에 티스토리 블로그정보입력하기

페이지 이름과 카테고리를 입력합니다.

페이지 이름은 당신의 비즈니스나 브랜드 명을 사용하는 것이 좋습니다.

카테고리는 페이지의 성격을 나타내며, 검색 시 노출되는 키워드 역할을 합니다.

소개도 간략하게 작성해줍니다.

5. 주소 및 연락처 정보 입력

페이스북페이지 개인정보입력

비즈니스 주소와 연락처 정보(선택 사항)를 입력합니다.

이 정보는 고객이 당신과 연락할 수 있는 방법을 제공합니다.

저는 그냥 이메일정도만 작성하고 넘어갔습니다.

6. 프로필 사진 및 커버 사진 업로드

페이스북 페이지 프로필 사진 설정 및 와츠앱 설정

페이지를 대표할 프로필 사진과 커버 사진을 업로드합니다.

프로필 사진은 보통 로고를 사용하며, 커버 사진은 비즈니스나 브랜드의 특성을 잘 나타낼 수 있는 이미지를 선택하는 것이 좋습니다.

그냥 간단하게 제블로그에서 쓰는 이미지로 업로드 해두었습니다.

그다음엔 와츠앱을 연결 해둘껀지 물어보는데 전 그냥 건너뛰였습니다.

7. 홍보연결하기

홍보 연동하기 질문

새로운 페이지를 만들었지만 기존에 연결되어있는 친구들에게도 알리겠냐 물어보는겁니다.

전 부끄러워서 그냥 건너뛰었습니다. ^^

그리고 업데이트가 일어나면 알림을 보내주는건데 주로 블로그랑 연결용이라서 알림이 크게 필요하진 않긴합니다만, 댓글은 반응을 해야 할거 같아서 업데이트가 일어나면 알림하라고 설정해주었습니다.

8. 페이스북 페이지 만들기 완료

페이스북 페이지 만들기 완료.

드디어 페이지 만들기에 완료 하였습니다.

2. 페이스북페이지에 내 티스토리 블로그 주소 연동

이제 만들어진 페이스북페이지에 내 티스토리 블로그 주소를 연동해두려 합니다.

1. 수정하기

페이스북 페이지 수정버튼

만들어진 페이스북 페이지 상단에 있는 수정 버튼을 클릭합니다.

2. 상세 정보 수정

상세정보수정

상세정보수정 창이 뜨면 아래쪽에 웹사이트라고 있는데 여기에 내블로그 주소를 입력합니다.

제 페이스북페이지니까 저는 당연히 저의 티스토리 블로그 주소(https://devit.koreacreatorfesta.com/)를 작성했답니다.

3. 티스토리 주소 페이스북 연동 완료

웹사이트 티스토리 올라가있는지 확인

이제 페이스북 페이지에 내 블로그의 주소가 입력 완료되었습니다.

멱군, 페이스북페이지가기 ➔

결론

페이스북에 새로운 페이지를 만들고 티스토리 블로그 주소를 연동하는 방법을 알아보았습니다.

티스토리 블로그와 페이스북 페이지의 연동은 블로그 방문자 수를 증가시킬 뿐만 아니라, 더 넓은 대중에게 컨텐츠를 홍보할 수 있는 기회를 제공합니다.

그리고 페이스북은 좋은 백링크로써 한 몫을 할 수 있답니다.

블로그를 운영하면서 백링크는 큰 역할을 하거든요.

이러한 소셜 미디어의 파워를 활용해 블로그의 방문자 수를 극대화하고, 블로그와 SNS 모두에서 활발한 소통을 이어가다 보면 디지털 시대의 마케팅과 홍보에 있어서, 이보다 더 효과적인 방법은 없을 것입니다.

다음글보기

페이스북과 티스토리를 자동 연동하여 블로그 유입량 증가시키는 방법 IFTTT 설정방법

블로그를 운영하며 가장 큰 과제 중 하나는 어떻게 하면 더 많은 독자에게 내 콘텐츠를 노출시킬 수 있을까 하는 것입니다. 특히, 티스토리 같은 플랫폼에서 활동하는 블로거라면 외부 유입량을

devit.koreacreatorfesta.com

히트맵으로 데이터 시각화 사용사례 amchart 사용방법

멱군 — Thu, 4 Apr 2024 18:47:15 +0900

히트맵은 다양한 색상을 사용하여 데이터의 상대적인 값이나 빈도를 나타내는 방식으로, 각 데이터 포인트의 중요도나 범주를 시각적으로 구분짓습니다. 이러한 방식은 특히 대량의 데이터 포인트를 갖는 데이터 세트에서 매우 유용합니다. 그렇다면 히트맵은 어디에서 주로 사용할까요? 그리고 웹상에서 그리는 방법은 어떤게 있을까요? 히트맵으로 데이터 시각화 사용사례 amchart 사용방법에 대해서 알아보도록 하겠습니다.

1. 히트맵이란 무엇인가?

히트맵은 복잡한 데이터 집합에서 패턴, 변화, 밀도 등을 시각적으로 파악하기 위한 효과적인 도구입니다.

색상의 강도를 이용해 데이터 포인트 간의 상대적인 차이를 표현함으로써, 대량의 데이터에서도 빠르게 인사이트를 얻을 수 있게 해줍니다.

이는 특히, 각각의 데이터 포인트를 개별적으로 분석하는 것이 현실적으로 불가능한 대규모 데이터 세트에 유용합니다.

2. 히트맵을 사용하는 이유와 장점

히트맵은 정보의 밀도가 높은 시각화를 제공하여, 사용자가 데이터 내의 패턴, 경향성 및 이상치를 직관적으로 파악할 수 있도록 돕습니다.

이러한 시각적 표현은 복잡한 데이터 세트를 더 쉽게 이해하고, 의미 있는 결론을 도출할 수 있는 기반을 마련합니다.

또한, 히트맵은 데이터의 시각적 분석을 위한 훌륭한 출발점이 되며, 추가 분석이나 보고서 작성에 있어 중요한 정보를 제공합니다.

3. 히트맵 사용 사례

과학 연구에서의 패턴 식별

유전자 발현 데이터나 기후 변화 데이터와 같은 과학 연구 분야에서 히트맵은 복잡한 데이터 세트 내의 패턴이나 경향성을 식별하는 데 중요한 역할을 합니다.

이를 통해 연구원들은 중요한 생물학적 또는 환경적 현상에 대한 깊은 인사이트를 얻을 수 있습니다.

금융 시장 분석에서의 가격 변동

시각화 금융 분야에서 히트맵은 주식 시장의 가격 변동, 위험 분석 등을 시각화하는 데 활용됩니다.

이를 통해 투자자들은 시장의 변화를 빠르게 파악하고, 보다 정보에 기반한 투자 결정을 내릴 수 있습니다.

웹사이트 사용성 테스트에서의 사용자 행동 분석

웹사이트 분석에서 히트맵은 사용자의 클릭률, 페이지 내 활동의 열 분포 등을 통해 사용자 행동을 분석하는 데 사용됩니다.

이 정보는 웹사이트의 사용성을 향상시키는 데 필수적입니다.

지리 정보 시스템에서의 인구 밀도 및 오염 수준 분석

지리 정보 시스템(GIS)에서 히트맵은 인구 밀도, 오염 수준 등 지리적 데이터의 분석에 활용됩니다.

이를 통해 정책 입안자나 연구원은 해당 지역의 사회적, 환경적 문제에 대한 해결책을 모색할 수 있습니다.

4. 히트맵 만들기: amCharts를 이용한 예제

저는 웹에서 그래프를 그릴 때 amCharts를 사용합니다.

암차트(amCharts)는 라이브러리화 되어있고, 사용방법도 잘 설명이 되어 있어서 사용하기가 편한 장점이 있습니다.

HTML 페이지에 히트맵 그리기 amCharts는 웹 기반 차트 및 지도를 만들기 위한 강력한 라이브러리입니다.

amCharts를 사용하여 간단한 히트맵을 만드는 방법

<!DOCTYPE html>
<html>
<head>
    <title>히트맵 예제</title>
    <link rel="stylesheet" href="https://cdn.amcharts.com/lib/4/core.css" />
    <link rel="stylesheet" href="https://cdn.amcharts.com/lib/4/charts.css" />
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
</head>
<body>
    <div id="chartdiv" style="width: 100%; height: 500px;"></div>
    <script>
        am4core.ready(function() {
            // am4core 사용 준비
            var chart = am4core.create("chartdiv", am4charts.XYChart);
            chart.data = 데이터_생성_함수(); // 실제 데이터를 생성하는 함수 호출
            
            // X축 및 Y축 설정
            var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
            var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
            xAxis.dataFields.category = "x";
            yAxis.dataFields.category = "y";
            
            // 히트맵 시리즈 설정
            var series = chart.series.push(new am4charts.ColumnSeries());
            series.dataFields.categoryX = "x";
            series.dataFields.categoryY = "y";
            series.dataFields.value = "value";
            series.columns.template.fillOpacity = 0.5;
            series.columns.template.strokeOpacity = 0;
            series.sequencedInterpolation = true;
            
            // 셀의 색상을 값에 따라 조정
            series.heatRules.push({
                target: series.columns.template,
                property: "fill",
                min: am4core.color("#ffffff"),
                max: am4core.color("#ff6347")
            });
        });
    </script>
</body>
</html>

데이터 생성 및 히트맵 설정 방법

설명 위 코드에서 데이터_생성_함수()는 실제 데이터를 생성하여 반환해야 합니다.

이 함수는 다양한 데이터 소스로부터 데이터를 가져오거나, 가상의 데이터를 생성하는 방식으로 구현할 수 있습니다.

각 데이터 포인트는 x, y, value 필드를 가져야 하며, 이는 각각 X축 값, Y축 값, 그리고 해당 좌표의 값(색상 강도)을 나타냅니다.

시각화된 데이터 해석하기

히트맵을 통해 시각화된 데이터를 해석할 때, 색상의 강도는 데이터 포인트 간의 상대적인 차이를 나타냅니다.

더 밝은 색상은 더 높은 값을, 어두운 색상은 더 낮은 값을 의미합니다.

이를 통해 사용자는 데이터 세트 내의 중요한 패턴이나 이상치를 쉽게 식별할 수 있습니다.

5. 실제 만들기 및 전체소스

위의 예제를 이용하여 실제로 만들어봤습니다.

1~100까지의 값을 각 축에 넣고 각 칸의 값은 x*y의 값으로 10000개 정도의 데이터로 넣어주었습니다.

이 정도의 데이터를 처리하고 출력하는데 제 PC 기준으로 8초정도 걸리더라구요.

아래의 파일은 이 이미지와 같은 히트맵을 그리는 전체소스코드입니다.

히트맵으로 데이터 시각화 amchart 사용방법.zip

0.00MB

다운로드받아서 목적에 맞게 변형해서 쓰시면 될것 같습니다.

결론

히트맵은 데이터 시각화의 중요한 도구로, 복잡한 데이터 세트에서 인사이트를 얻는 데 큰 도움을 줍니다.

amCharts와 같은 라이브러리를 사용하면, 개발자와 데이터 분석가는 손쉽게 히트맵을 생성하고, 다양한 분야에서 의미 있는 데이터 분석을 수행할 수 있습니다.

이러한 접근 방식은 데이터 시각화의 힘을 극대화하여, 복잡한 정보를 더 잘 이해하고 전달할 수 있게 해줍니다.

Javascript html 태그 div에서 onclick 속성을 추가하거나 삭제하는 방법

멱군 — Wed, 3 Apr 2024 17:05:09 +0900

div와 같이 HTML 태그에 onclick 속성을 추가하거나 삭제할 필요가 있을 때, 어떻게 자바스크립트를 만들어야 할까요? 이 글에서는 이 작업을 부드럽게 처리할 수 있는 방법에 대해 작성하려고 합니다. 사용자 상호작용을 동적으로 관리하고, 특정 이벤트에 대한 반응을 사용자 정의할 수 있도록, JavaScript와 jQuery를 사용하는 두 가지 접근법을 알려드릴게요.

JavaScript를 활용한 방법

onclick 속성 추가하기

HTML 요소에 onclick 속성을 프로그래매틱하게 추가하기 위해서는, JavaScript의 setAttribute 메서드를 활용할 수 있어요.

이 메서드를 통해, 원하는 요소에 onclick 이벤트 핸들러를 추가할 수 있답니다.

<div id="addButton">클릭 이벤트 추가하기</div>

document.getElementById('addButton').setAttribute('onclick', 'alert("버튼을 클릭하셨군요!")');

onclick 속성 제거하기

이미 설정된 onclick 속성을 제거하고자 할 때는, removeAttribute 메서드를 이용하면 돼요.

이 메서드는 지정한 요소에서 특정 속성을 쉽게 삭제할 수 있게 해줘요.

<div id="removeButton" onclick="alert('이 버튼은 더 이상 작동하지 않을 거예요')">클릭 이벤트 제거하기</div>

document.getElementById('removeButton').removeAttribute('onclick');

jQuery를 활용한 방법

jQuery를 사용하면, 이벤트 핸들링을 더 간단하게 할 수 있어요.

on과 off 메서드를 사용하여 이벤트 리스너를 추가하거나 제거할 수 있죠.

아니면 위의 방식과 비슷하게 attr()과 removeAttr()을 사용할 수도 있습니다.

onclick 이벤트 핸들러 추가하기

on 메서드를 사용해서 요소에 클릭 이벤트 핸들러를 추가할 수 있어요.

이 방법은 코드를 깔끔하게 유지하며, 이벤트 리스너를 쉽게 추가할 수 있습니다.

<button id="jqueryAddButton">jQuery로 클릭 이벤트 추가하기</button>

자바스크립트는 2가지 방법으로 표현할 수 있습니다.

$('#jqueryAddButton').on('click', function() {
    alert("jQuery를 통해 추가된 클릭 이벤트네요!");
});

혹은

$('#jqueryAddButton').attr('onclick', 'alert("클릭되었습니다!")');

onclick 이벤트 핸들러 제거하기

off 메서드를 사용해서 요소로부터 클릭 이벤트 핸들러를 제거할 수 있어요.

이 메서드는 특정 요소에 할당된 모든 이벤트 리스너를 쉽게 제거할 수 있게 도와줍니다.

<button id="jqueryRemoveButton">jQuery로 클릭 이벤트 제거하기</button>

자바스크립트도 또한 2가지 방법으로 표현할 수 있답니다.

$('#jqueryRemoveButton').off('click');

혹은

$('#jqueryRemoveButton').removeAttr('onclick');

전체소스코드

아래의 압축파일은 HTML 요소에 onclick 이벤트를 추가하고, 사용자가 원할 때 해당 이벤트를 제거할 수 있는 간단한 웹 페이지의 전체 소스 코드입니다.

아래의 파일을 다운로드 받아서 압축파일을 보면 자바스크립트 버전과 JQUERY버전 두가지 버전이 들어있습니다.

입맛에 맞게 사용하시면 될거 같아요.

html 태그 div에서 onclick 속성을 추가하거나 삭제하는 방법.zip

0.00MB

마무리

HTML 요소에 onclick 속성을 추가하거나 제거하는 것은 JavaScript와 jQuery를 활용하여 손쉽게 할 수 있어요.

JavaScript의 setAttribute와 removeAttribute메서드를 사용하거나, jQuery의 on과 off 혹은 attr과 removeAttr메서드를 이용해 이벤트 리스너를 관리할 수 있답니다.

이러한 방법들을 잘 활용한다면 웹 애플리케이션에서 사용자 상호작용을 동적으로 구현하는 데 큰 도움이 될 거예요.

MYSQL 같은 테이블의 컬럼 값 복사해서 다른 컬럼에 붙여넣는 방법

멱군 — Tue, 2 Apr 2024 09:56:55 +0900

데이터베이스를 관리하다 보면 때때로 같은 테이블 내에서 한 컬럼의 데이터를 다른 컬럼으로 복사하고 싶은 경우가 발생합니다. 특히, 새로운 데이터 컬럼을 추가하거나 기존 데이터를 업데이트할 필요가 있을 때 이런 작업을 수행해야 할 때가 생기게 됩니다. 이번엔 MYSQL에서 같은 테이블의 컬럼 값 복사해서 다른 컬럼에 붙여넣는 방법을 쿼리문으로 작성해보도록 할께요.

1. 상황 설명

가령, AAA 테이블이 있고, 여기에는 createdate와 updatedate라는 두 개의 날짜 컬럼이 있습니다.

createdate컬럼에는 데이터가 이미 존재하지만, updatedate 컬럼을 새로 추가하면서 데이터를 채워야 할 일이 생겼습니다.

시나리오는 createdate가 초기에 생성되면 updatedate도 같이 생성된다고 가정했습니다.

근데 조금 사용하다보니 몇몇개의 데이터는 updatedate의 값이 들어가있더라구요.

그래서 MYSQL에서 createdate의 데이터를 updatedate 컬럼으로 복사하고, 값이 있으면 복사하지 않는 업데이트 치기 위한 쿼리가 필요합니다.

2. 단순 복사 쿼리

저는 가장 간단하게 updatedate 컬럼이 비어있는 모든 행(NULL 값인 행)에 대해 createdate 컬럼의 값을 updatedate로 복사했습니다.

UPDATE AAA
SET updatedate = createdate
WHERE updatedate IS NULL;

이 쿼리는 updatedate 컬럼이 NULL인 행에 대해서만 createdate 컬럼의 값을 updatedate 컬럼으로 복사합니다.

이렇게 하면 이미 updatedate 컬럼에 값이 있는 경우에는 해당 행이 NULL이 아니기 때문에 값이 들어가지 않게 된답니다.

3. 고급 조건 설정

조금 더 어려운 조건을 걸어보도록 하겠습니다.

예를 들어, updatedate 컬럼에 특정 조건(createdate보다 오래된 날짜)을 만족하는 값이 있을 경우에만 복사를 하고 싶어요.

MYSQL 데이터를 복사할 때 더 세밀하게 제어하고 싶다면, COALESCE 함수를 사용하거나 IF 문을 사용하여 특정 조건을 만족하는 경우에만 데이터를 복사하도록 할 수 있습니다.

UPDATE AAA
SET updatedate = IF(updatedate < createdate, createdate, updatedate)
WHERE updatedate IS NOT NULL;

결론

MYSQL에서 같은 테이블 내의 다른 컬럼 값 복사 및 붙여넣기는 UPDATE 쿼리를 사용하여 쉽게 수행할 수 있습니다.

이러한 작업은 데이터베이스 내의 데이터 정합성을 유지하고, 데이터 관리의 효율성을 높이는 데 큰 도움이 됩니다.

본문에서 설명한 기본적인 방법과 조금 더 고급 조건 설정을 통해, 데이터베이스 관리자와 개발자는 필요에 따라 다양한 데이터 업데이트 작업을 손쉽게 수행할 수 있습니다.

함께보면 좋은글

[MYSQL] 쿼리문에서 NULL 값 체크 및 값 변경

devit.koreacreatorfesta.com

[MYSQL] 같은/다른 테이블에서 원하는 행들 복사 붙여넣기

데이터베이스에서 데이터를 다루면서 동일한 테이블 또는 다른 테이블에서 데이터를 복사하고 삽입하는 경우가 자주 발생합니다. MYSQL에서 이를 어떻게 수행하는지 간단하게 알아보겠습니다.

devit.koreacreatorfesta.com

[MYSQL] 검색한 결과를 넣기 select 하여 insert

테이블을 옮기는 작업은 데이터베이스 관리에서 자주 발생하는 작업입니다. 이때 원하는 데이터만 이전하는 방법을 알고 있으면 작업을 보다 효율적으로 수행할 수 있습니다. 테이블의 데이터

devit.koreacreatorfesta.com

AWS EC2에서 Ubuntu 인스턴스에 Tomcat 설치 및 실행 방법

멱군 — Wed, 27 Mar 2024 23:27:53 +0900

AWS EC2 인스턴스에서 웹 애플리케이션을 실행하기 위한 환경을 구축할 때, Java 웹 애플리케이션 서버인 Tomcat의 설치는 필수적입니다. 이번 포스팅에서는 Ubuntu 기반의 EC2 인스턴스에 Tomcat을 설치하고 실행하는 방법을 단계별로 알아볼께요.

1단계: 시스템 패키지 업데이트

Tomcat 설치 전, 사용 중인 Ubuntu 시스템의 패키지 목록을 최신 상태로 업데이트하여 모든 패키지가 최신 버전으로 유지되도록 합니다.

터미널에서 다음 명령어를 실행합니다.

$ sudo apt-get update

EC2 접속해서 $ sudo apt - get update 명령어

2단계: Tomcat 설치

시스템 패키지가 최신 상태로 업데이트되면, 다음 명령어를 사용하여 Tomcat을 설치합니다.

아래코드를 이용해서 Tomcat 9을 설치 합니다.

만약 Tomcat 8을 설치하고자 한다면, tomcat9 대신 tomcat8을 입력합니다.

$ sudo apt-get install tomcat9

설치가 완료되면, Tomcat 서버는 자동으로 시작되며, Ubuntu 시스템이 부팅될 때마다 자동으로 실행되도록 설정됩니다.

Tomcat 서비스 상태 확인

Tomcat 서비스가 정상적으로 작동하고 있는지 확인하기 위해 다음 명령어를 실행합니다.

$ sudo systemctl status tomcat9

EC2 접속해서 $ sudo systemctl status tomcat9 명령어

이 명령어는 Tomcat 서비스의 현재 상태를 보여줍니다.

‘Active: active (running)’이라는 메시지가 표시되면, Tomcat 서버가 성공적으로 설치되어 실행 중임을 의미합니다.

웹 브라우저를 통한 접속 확인

Tomcat 서버가 정상적으로 작동하는지 웹 브라우저를 통해 확인할 수 있습니다.

tomcat 설치후 8080포트 열려있는지 확인

웹 브라우저 주소창에 http://[EC2-인스턴스-IP-주소]:8080을 입력합니다.

Tomcat의 기본 화면이 표시되면, 설치 및 실행이 성공적으로 완료된 것입니다.

설치완료

이렇게 하면 AWS EC2 Ubuntu 인스턴스에 Tomcat이 설치 됩니다.

다운로드 받아서 업로드 후에 설치하는 방법보다는 이렇게 시스템명령어를 이용해서 설치하는게 더 편하네요.

JSP에서 spring security 적용 후 iframe 사용 시 Refused to display in a frame because it set 'X-Frame-Options' to 'deny' 에러

멱군 — Tue, 19 Mar 2024 09:09:09 +0900

JSP에서 iframe을 사용했을 때 갑자기 'X-Frame-Options' to 'deny'에러가 난적이 있으신가요? 특히 Spring Security를 java framework에 적용하면서 Refused to display in a frame because it set 'X-Frame-Options' to 'deny'의 내용이 뜨면서 원하는 페이지가 나오지 않는 경우가 발생합니다. 하지만 이 에러는 클릭재킹 공격을 방지하기 위한 방안이기도 합니다. 그래서 이번 글에서는 iFrame을 유연하게 사용할 수 있도록 Spring Security 설정하는 방법을 알아보도록 하겠습니다.

X-Frame-Options 헤더란 무엇인가?

'X-Frame-Options' HTTP 헤더는 웹 애플리케이션에서 페이지가 다른 페이지의 iFrame 내에서 렌더링되는 것을 제어하는 데 사용됩니다.

이 헤더는 주로 클릭재킹 공격을 방지하기 위해 사용되며, 여러 설정 옵션을 제공합니다

DENY

모든 iFrame에서의 페이지 로딩을 금지합니다.

SAMEORIGIN

같은 도메인 내의 iFrame에서만 페이지 로딩을 허용합니다.

ALLOW-FROM uri

특정 출처의 iFrame에서 페이지 로딩을 허용합니다.

Spring Security에서 X-Frame-Options 적절하게 설정하기

Spring Security는 기본적으로 보안성을 높이기 위해 'X-Frame-Options'를 'DENY'로 설정합니다.

그러나 iFrame을 통한 콘텐츠 통합이 필요한 경우, 이 설정을 'SAMEORIGIN'으로 변경하거나 특정 경우에는 헤더를 완전히 비활성화할 필요가 있을 수 있습니다.

Spring Security 설정에 SAMEORIGIN 적용

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            // 기존 보안 설정
            .headers()
                .frameOptions().sameOrigin()
            // 기타 필요한 보안 설정들
            ;
    }
}

cotrollor에서 값을 조정 할 수 있습니다.

저같은 경우는 java > configuration > SecurityConfig.java 파일에 위의 내용을 추가 적용해두었습니다.

이렇게 설정하면 같은 출처 정책을 적용하여, 동일한 도메인에서 호스팅되는 iFrame 내에서 페이지가 로드될 수 있도록 허용합니다.

X-Frame-Options 비활성화

// 위의 .frameOptions().sameOrigin() 부분을 아래와 같이 변경합니다.
.frameOptions().disable()

위 설정은 'X-Frame-Options' 헤더를 비활성화하여 모든 iFrame에서 페이지 로드를 허용합니다.

하지만 이 설정은 웹 애플리케이션의 보안 수준을 감소시킬 수 있으니 이부분은 마지막 방법으로 사용하기를 추천드려요.

주의사항

보안 설정을 조정할 때는 애플리케이션의 전반적인 보안 아키텍처를 한번 더 생각해봐야 합니다.
동일한 도메인 혹은 특정 페이지에만 'X-Frame-Options'를 완화하는 방법을 사용하는게 좋아요.
가능하다면, 'Content-Security-Policy' 헤더를 함께 사용하면 좋습니다.
클릭재킹 공격에 대한 보호를 완전히 해제하기보다는 필요한 최소 범위 내에서 설정하세요.

결론

Spring Security에서 'X-Frame-Options'의 적절한 설정은 웹 애플리케이션의 기능성과 보안성 사이의 균형을 맞추는 데 중요합니다.

iFrame을 사용해야 하는 경우에는 'SAMEORIGIN' 옵션을 사용한다면, Refused to display in a frame because it set 'X-Frame-Options' to 'deny'의 문제는 해결 할 수 있습니다.

그러나 어떤 경우에도 보안은 최우선으로 고려되어야 하며, 모든 변경 사항은 철저한 검토와 테스트를 거쳐야 합니다.

함께보면 좋은글

CORS는 왜 사이트를 만들 때 어렵게 만드는거야?

CORS(Cross-Origin Resource Sharing)는 웹 개발자들 사이에서 빈번하게 논의되는 주제입니다. 하지만 웹사이트 개발에 있어서 필수 보안 정책입니다. 웹사이트를 만들 때 마주치는 다양한 도전 중 하나인

devit.koreacreatorfesta.com

[web] 개발 할 때 iframe을 사용해야 하는가?

웹페이지를 개발하다보면 외부 콘텐츠를 삽입하기 위해서 iframe을 사용할 때가 종종 있다. 가령 유튜브를 블로그안에 넣는다고 해도 iframe을 이용해서 붙여넣도록 소스코드를 지원하고 있다. 웹

devit.koreacreatorfesta.com

JSP에서 세션 활용하여 이전 페이지url 정보 유지하기

멱군 — Mon, 18 Mar 2024 20:43:47 +0900

웹 애플리케이션을 사용하다 보면 사용자가 특정 작업을 수행한 후 이전 페이지로 자연스럽게 돌아가야 하는 경우가 자주 있습니다. 예를 들어, 품목을 편집하는 페이지에서 작업을 완료한 후 편집 전 페이지로 돌아가야 하는 경우가 그렇죠. JSP에서 세션을 이용해서 이전페이지 url 정보를 유지 할 수 있습니다. 이번 포스팅에서는 JSP에서 사용자가 방문했던 마지막 URL을 세션에 저장하고, 해당 정보를 활용해 작업 후 이전 페이지로 돌아가는 방법을 사용해볼께요.

세션에 URL 저장하기

사용자가 특정 페이지에 접근할 때마다 현재의 리퍼러 URL, 즉 이전 페이지의 URL을 세션에 저장하는 것으로 시작합니다. 이렇게 함으로써, 사용자가 다음 작업을 수행할 때 이전 페이지로 쉽게 돌아갈 수 있는 경로를 확보할 수 있습니다.

예를 들면 평소에는 품목을 수정하기 위해서 listItem페이지에서 수정하기 버튼을 눌러서 editItem페이지로 이동을 합니다. 그리고 수정을 완료 하면 다시 listItem페이지로 넘어오게 됩니다.

하지만 listItem페이지가 아닌 다른 페이지에서 editItem페이지로 넘어갈일이 있습니다. 이때 업데이트 완료 후 listItem페이지가 아닌 이전페이지를 유지해야 하는 것이지요.

특정 페이지 접근 시 세션에 URL 저장 예시

@GetMapping("/editItem")
public String editItemPage(HttpServletRequest request, HttpSession session) {
    // 현재 요청의 리퍼러 URL을 세션에 저장
    String referrer = request.getHeader("Referer");
    session.setAttribute("prevPageUrl", referrer);
    return "editItemPage";
}

위 코드는 사용자가 '/editItem' URL로 이동할 때 HTTP 요청에서 'Referer' 헤더를 추출해 세션에 'prevPageUrl'이라는 이름으로 저장합니다.

즉 어디서 접근하든 editItem페이지는 이전페이지에서 접근했던 정보를 모두 알고 있게 됩니다.

작업 처리 후 세션에 저장된 URL로 리다이렉트

@PostMapping("/updateItem")
public String updateItem(YourItem item, HttpSession session) {
    // 아이템 업데이트 로직 처리...

    // 세션에서 이전 페이지 URL 가져오기 및 리다이렉트
    String prevPageUrl = (String) session.getAttribute("prevPageUrl");
    return "redirect:" + (prevPageUrl != null ? prevPageUrl : "/listitemPage");
}

사용자가 아이템 업데이트 작업을 마치고 폼을 제출하면, 세션에서 이전 페이지의 URL을 가져와 해당 페이지로 리다이렉트합니다.

만약 세션에 저장된 URL이 없다면 /listitemPage 기본 페이지로 리다이렉트합니다.

그런데 이 루틴이면 항상 이전페이지 값이 계속 있을꺼 같네요.

전체소스코드

아래는 JSP에서 세션을 활용해 이전 페이지로 돌아가기 위한 전체소스코드입니다.

서블릿을 이용하여 HTTP 요청을 처리하고, 세션에 이전 페이지의 URL을 저장하며, 사용자가 작업을 완료한 후 해당 URL로 리디렉션을 합니다.

// EditItemController.java
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class EditItemController {

    @GetMapping("/editItem")
    public String editItemPage(HttpServletRequest request, HttpSession session) {
        // 현재 요청의 리퍼러 URL을 세션에 저장
        String referrer = request.getHeader("Referer");
        session.setAttribute("prevPageUrl", referrer);
        return "editItemPage";
    }

    @PostMapping("/updateItem")
    public String updateItem(YourItem item, HttpSession session) {
        // 아이템 업데이트 로직 처리...

        // 세션에서 이전 페이지 URL 가져오기 및 리다이렉트
        String prevPageUrl = (String) session.getAttribute("prevPageUrl");
        return "redirect:" + (prevPageUrl != null ? prevPageUrl : "/listitemPage");
    }
}

위의 코드는 YourItem 클래스와 editItemPage 및 listItemPage와 같은 JSP 뷰가 존재한다고 가정하고 작성했답니다.

실제 사용할 때는 해당 클래스와 뷰 이름을 실제 프로젝트에 맞게 변경해야 해요.

이 코드는 Spring Framework의 @Controller 에서 작성했어요.

JSP/서블릿 기반 프로젝트에서는 HttpServlet을 상속받는 서블릿 클래스를 작성하여 위와 같은 로직을 구현할 수 있습니다.

소스코드다운로드

위소스는 아래의 파일에서 다운로드 받을 수 있습니다.

JSP에서 세션 활용하여 이전 페이지url 정보 유지하기.zip

0.00MB

결론

JSP에서 세션을 사용해 사용자의 이전 페이지 URL을 관리하는 방식은 웹 애플리케이션의 사용성을 크게 향상시킬 수 있습니다.

이 방법은 사용자가 작업을 마친 후 예상한 페이지로 돌아가길 기대할 때 특히 유용합니다.

하지만, 세션을 사용할 때는 항상 서버메모리와 보안을 고려해야 하며, 적절한 시점에 세션을 관리하도록 하면 될거 같습니다.

MySQL 설치 중 발생하는 3306 포트 충돌 문제 해결 방법 3가지

멱군 — Tue, 12 Mar 2024 22:31:55 +0900

MySQL을 설치하려고 할 때, "3306 포트를 사용할 수 없다"는 에러때문에 설치를 못하고 있나요? 3306 포트는 MySQL의 기본 통신 포트로, 이미 시스템 상에서 다른 프로세스나 애플리케이션이 이 포트를 사용하고 있을 경우 MySQL 서버의 정상적인 설치와 실행이 안될 수도 있습니다. 이러한 상황은 특히 기존에 사용하던 컴퓨터에 새로운 웹 서버를 세팅하려고 할 때 자주 발생하며, 해결하지 않으면 서버 구축 작업에 큰 지장을 초래할 수 있습니다. MySQL 설치 중 발생하는 3306 포트 충돌 문제 해결 방법 3가지를 알아볼께요.

1. 문제의 발단

이번에 컴퓨터를 다시 세팅하면서 컴퓨터를 포멧했다면 너무 좋겠지만, 그럴상황이 아니라서 기존에 있는 프로그램들을 모두 삭제하고 필요한것만 다시 설치하고 있는 중이였답니다.

mysql community 설치 화면

그러던 중에 3306포트가 사용중이라고 뜨더라구요.

MySQL 설치 중 3306 포트 충돌 발생

보통 3306은 mysql관련된 포트라서 한번 삭제했음에도 프로세스는 살아있는것인지, 기존에 지웠다 설치했다를 반복하면서 mysqlid프로세스가 살아있는지 궁금해졌습니다.

2. 사용 중인 포트 확인

그래서 사용 중인 포트를 확인해보기로 했습니다. 시스템에서 어떤 프로세스가 3306 포트를 사용하고 있는지 파악해야 하거든요.이를 위해 두 가지 방법을 사용할 수 있습니다.

1. Netstat 명령어 이용하기

명령 프롬프트 또는 PowerShell을 열고 다음의 명령어를 입력합니다.

netstat -ano

그러면 아래와 같이 로컬주소와 함께 PID라는 프로세스 연결 된 아이디까지 다 나오게 됩니다.

cmd 창에서 netstat -ano 연결포트확인 명령어

너무 많이 나오니까 원하는 포트만 보기위해서 아래의 명령어를 입력합니다.

netstat -ano | findstr "3306"

이 명령은 시스템에서 3306 포트를 사용하고 있는 모든 연결을 출력하고, 각 연결에 대한 프로세스 ID(PID)도 함께 출력하도록 하는 명령어입니다.

2. 리소스 모니터 이용하기

'시작' 메뉴 검색에서 '리소스 모니터'를 찾아 실행하거나, 실행 창(Windows 키 + R)에 resmon을 입력합니다.

리소스 모니터의 '네트워크' 탭으로 이동한 후 '수신 대기 포트' 섹션을 확인합니다.

리소스모니터 네트워크 포트모니터링

이곳에서 3306 포트와 연결된 프로세스의 정보를 상세히 확인할 수 있습니다.

3. 포트충돌 해결방법 - 프로세스 중지 또는 포트 변경

3306 포트를 사용 중인 프로세스를 확인한 후, 다음 단계로 이 프로세스를 종료하거나 MySQL의 포트 번호를 변경해야 합니다.

1. 프로세스 중지

작업 관리자를 열고 '세부 정보' 탭으로 이동하여 PID를 기반으로 해당 프로세스를 찾습니다.

작업 관리자를 열고 '세부 정보' 탭

프로세스를 선택한 후 '작업 끝내기'를 클릭하여 프로세스를 종료합니다.

이 방법은 일시적으로 포트 충돌 문제를 해결할 수 있지만, 시스템 재시작 후 문제가 재발할 수 있습니다.

그렇기 때문에 작업을 끝내고 바로 설치를 재시도 하면 됩니다.

2. MySQL 포트 변경

MySQL 설치 중 또는 my.ini(Windows) 또는 my.cnf(Linux) 설정 파일을 통해 MySQL 서버의 포트 번호를 변경할 수 있습니다.

예를 들어, `port = 3307`과 같이 설정하여 기본 포트에서 다른 포트로 변경합니다.

반드시 3306을 써야 하는것은 아니니까요.

다만, 이 변경 후에는 MySQL 서버와의 모든 연결에서 새 포트 번호를 사용해야 합니다.

3. 포트 충돌 앞의 두가지로 안된다면 추가 조치 사항

1. 방화벽 설정 확인

MySQL 서버의 새 포트(변경한 경우)에 대해 Windows 방화벽 또는 기타 보안 소프트웨어에서 접근을 막는 방화벽이 설정되어있을 수도 있습니다.

위 두가지 방법대로 해도 안된다면 방화벽을 확인하고, 방화벽 설정에서 새 포트에 대한 규칙을 추가하세요.

2. ISP 및 라우터 설정 확인

드물게 인터넷 서비스 제공업체(ISP) 또는 라우터 설정으로 인해 특정 포트가 차단될 수 있습니다.

이 경우, ISP에 문의하거나 라우터 설정을 조정해야 할 수도 있습니다.

결론

본문에서 알려드린 3가지 방법 중 저는 첫번째 방법을 이용해서 이 문제를 해결하였답니다.

mysql community 설치 시 포트 문제 해결

MySQL 설치 중 3306 포트 충돌 문제는 프로세스 확인 및 중지, 포트 변경, 그리고 방화벽 및 네트워크 설정 조정을 통해 해결할 수 있습니다.

이 글을 통해서 포트충돌문제를 잘해결하셨으면 좋겠어요.

함께읽으면 좋은글

MySQL Community버전(무료) 설치 및 설정 가이드

웹 개발을 진행하다 보면 데이터를 관리할 데이터베이스의 필요성을 느끼게 됩니다. 많은 개발자들 사이에서 널리 사용되는 MySQL은 그러한 필요를 충족시키는 강력한 데이터베이스 관리 시스템

devit.koreacreatorfesta.com

MySQL 설치 Initializing database 에러 해결방법

MySQL을 설치하다가 에러가 발생하셨나요? MySQL 설치 중에 발생하는 다양한 오류 중 하나는 데이터 디렉토리 설정과 관련된 문제입니다. 특히, 컴퓨터의 이름이 한글로 되어 있을 경우, MySQL 서버

devit.koreacreatorfesta.com

MySQL 설치 Initializing database 에러 해결방법

멱군 — Mon, 11 Mar 2024 18:45:42 +0900

MySQL을 설치하다가 에러가 발생하셨나요? MySQL 설치 중에 발생하는 다양한 오류 중 하나는 데이터 디렉토리 설정과 관련된 문제입니다. 특히, 컴퓨터의 이름이 한글로 되어 있을 경우, MySQL 서버의 초기화 과정에서 문제가 발생할 수도 있답니다. 이번 포스팅에서는 MySQL 설치 중 발생하는 데이터 디렉토리 관련 오류를 해결하는 방법을 알아볼께요.

문제 진단

오래간만에 컴퓨터를 변경하면서 MYSQL을 다시 설치를 했습니다.

그런데 MySQL 설치 중에 Initializing database (may take a long time)에러가 발생했습니다.

MySQL 설치 중 Initializing database (may take a long time) 에러 발생

에러내용은 다음과 같습니다.

Attempting to run MySQL Server with --initialize-insecure option...
Starting process for MySQL Server 8.0.36...
Starting process with command: C:\Program Files\MySQL\MySQL Server 8.0\bin\mysqld.exe --defaults-file="C:\ProgramData\MySQL\MySQL Server 8.0\my.ini" --console --initialize-insecure=on --lower-case-table-names=1...
C:\Program Files\MySQL\MySQL Server 8.0\bin\mysqld.exe (mysqld 8.0.36) initializing of server in progress as process 15436
mysqld: File '.\?붿옄?대꼫-bin.index' not found (OS errno 2 - No such file or directory)
The designated data directory C:\ProgramData\MySQL\MySQL Server 8.0\Data\ is unusable. You can remove all files that the server added to it.
Aborting
C:\Program Files\MySQL\MySQL Server 8.0\bin\mysqld.exe: Shutdown complete (mysqld 8.0.36)  MySQL Community Server - GPL.
Process for mysqld, with ID 15436, was run successfully and exited with code 1.
Failed to start process for MySQL Server 8.0.36.
Database initialization failed.
Ended configuration step: Initializing database (may take a long time)

중간에 보이는 "mysqld: File '.\?붿옄?대꼫-bin.index' not found (OS errno 2 - No such file or directory)" 이 문구가 에러의 주된 원인인거 같네요.

이 오류는 MySQL이 데이터 디렉토리를 올바르게 인식하지 못하고, 필요한 파일을 찾지 못할 때 발생한답니다.

특히 컴퓨터의 이름이 한글로 되어 있으면, MySQL 서버가 파일 경로를 제대로 처리하지 못하는 문제가 일어날 수 있어요.

해결 방법

1. 컴퓨터 이름 변경

내PC에서 오른쪽마우스를 클릭해서 속성을 선택합니다.

내PC 우클릭 속성창

장치사양을 확인해보면 저의 장치이름은 `디자이너`로 되어있습니다.

윈도우 장치사양 정보

바로 저부분이 문제였었네요.

이 PC의 이름바꾸기를 클릭해서 영문으로 컴퓨터 이름을 변경합니다.

PC 이름 바꾸기

변경 후에는 컴퓨터를 재시작합니다.

2. MySQL 및 관련 파일 삭제

설치 중 발생한 모든 MySQL 관련 파일과 디렉토리를 삭제하고 다시 설치합니다.

C:\ProgramData\MySQL 폴더

"C:\ProgramData\MySQL" 폴더도 다 지워줍니다.

3. MySQL 재설치

MySQL을 다시 설치합니다. MySQL을 설치하는 방법은 다음 링크를 따라가시면 됩니다.

MySQL Community버전(무료) 설치 및 설정 가이드

devit.koreacreatorfesta.com

컴퓨터 재부팅후 다시 설치를 하게 되면 모든 과정이 무사히 통과 됩니다.

mysql 설치 완료

추가 팁

설치 전에는 MySQL 공식 문서와 설치 가이드를 참고하여 시스템 요구사항을 확인하는 것이 좋습니다.
설치 과정에서 커스텀 설치 옵션을 선택하여 데이터 디렉토리의 위치를 수동으로 지정할 수도 있습니다.
이를 통해 설치 중 발생할 수 있는 경로 관련 문제를 미리 방지할 수 있습니다.

결론

MySQL 설치 중 발생하는 데이터 디렉토리 관련 오류는 컴퓨터의 이름이 한글로 설정되어 있는 경우에 자주 나타납니다.

이러한 문제를 해결하기 위해서는 컴퓨터의 이름을 영문으로 변경한 후, MySQL을 포함한 관련 파일을 완전히 삭제하고 재설치하는 과정이 필요합니다.

이 포스팅을 따라 진행하셨다면 분명 MySQL 데이터베이스를 원활하게 설치하고 사용할 수 있을 거에요.

CSS 충돌 시 특정 스타일을 우선시하고 싶은 경우 !important 사용방법

멱군 — Sun, 10 Mar 2024 00:00:23 +0900

같은 속성 코드의 CSS가 작성됐을 경우, 웹 개발 과정에서 CSS 스타일 충돌은 흔하게 발생합니다. 특히, 여러 스타일 시트가 적용되거나 외부 라이브러리와 함께 작업할 때, 원하는 스타일이 예상대로 적용되지 않는 상황이 발생할 수 있어요. 이럴 때, 원하는 스타일을 강제로 적용하고자 할 때 유용한 도구가 바로 CSS의 !important 속성입니다. !important를 적절히 사용하면, 특정 스타일 선언의 우선순위를 높여 다른 스타일 규칙을 무시하고 적용시킬 수 있어요. 이 글에서는 !important 사용 방법과 그 주의사항에 대해 알아볼게요.

CSS !important 사용한 이유

제가 이번에 티스토리 스킨을 변경했답니다.

티스토리 스킨 변경 후 figure 이미지가 콘텐츠 영역을 벗어나는 문제가 발생했어요.

css width 영역을 넘어가는 이미지

바로 그림처럼 contents영역을 그림이 튀어나가더라구요.

원인을 살펴보니, figure 태그에 스타일이 직접 적용되어 있었고, 이 스타일로 인해 이미지가 영역을 벗어났더라구요.

contents 영역에서 100% 스타일을 적용하기 위해 자바스크립트로 열심히 작성해봤지만, 기존에 적용된 스타일 때문에 해결이 쉽지 않더라구요.

그러다가 !important를 알게 되었답니다.

!important 사용 방법

CSS에서 !important 규칙은 스타일 선언에 붙여 사용합니다.

이를 통해 해당 스타일 선언을 다른 어떤 선언보다도 우선시하게 만들 수 있어요.

구체적인 사용 방법은 다음과 같습니다:

선택자 {
    속성: 값 !important;
}

예를 들어, 이미지의 너비를 100%로 설정하고 이를 우선적으로 적용하고자 한다면, 다음과 같이 작성할 수 있어요.

img {
    width: 100% !important;
}

이러한 방식으로 !important를 사용하면, 해당 선택자에 대한 다른 모든 스타일 규칙을 무시하고 너비를 100%로 설정할 수 있습니다.

나의 문제 해결방법

일단 지금 적용하고 있는 hELLO 스킨을 뜯어봤습니다.

기본적으로 이미지를 업로드 하면 figure 속성이 아래와 같이 적용되더라구요.

<figure class="imageblock alignCenter" 
    data-ke-mobilestyle="widthOrigin" 
    data-filename="..." 
    data-origin-width="1024" 
    data-origin-height="1024" 
    style="margin-left: 50%; 
    transform: translateX(-50%); 
    width: 1024px; max-width: 1024px;">

여기서 style의 "width:1024px"가 문제였습니다.

문제를 해결하기 위해, !important를 사용하여 width 속성을 강제로 100%로 설정하려고 합니다.

#content .contents_style figure
{
  width:100% !important;
}

"#content" 아이디를 가진 ".contents_style" 클래스 내부의 "figure" 태그를 가진 녀석이라면 "width:100% !important;"라고 CSS를 추가해서 이미지가 콘텐츠 영역 내에서 적절하게 표시되도록 해주었답니다.

css width 영역을 지키는 이미지

이제 영역을 오버하지 않고 잘 그려주고 있습니다.

이렇게 !important를 사용함으로써, 자바스크립트같은 다른 방법으로 해결이 어려운 스타일 충돌 문제에 대한 적절한 해결했답니다.

특히, 외부에서 불러오는 스킨이나 라이브러리 때문에 발생하는 스타일 문제를 해결할 때 유용하게 사용할 수 있어요.

하지만 이 기능은 강력하므로, 신중하게 사용해야 하며, 가능한 한 다른 해결책을 먼저 고려하는 것이 좋아요.

주의사항

남용하지 않기

!important는 매우 강력한 도구이기 때문에 남용할 경우 스타일 시트의 가독성과 유지보수성이 저하될 수 있어요.

가급적이면 스타일 충돌을 해결하기 위한 첫 번째 수단으로 사용하지 않는 것이 좋습니다.

유지보수 고려

다른 개발자가 코드를 이해하고 수정하기 어렵게 만들 수 있으므로, !important 사용 이유를 주석으로 남기는 것이 좋아요.

최후의 수단으로 사용

CSS의 특정성 규칙을 이해하고 적용할 수 없는 경우, 또는 외부 스타일 시트와 충돌을 해결할 수 없는 상황에서만 !important를 사용하는 것을 고려하세요.

저는 소스 다른곳을 다 찾아보고 딱 저요소만 적용되는것인지 다 찾아보고 !important를 적용했답니다.

결론

!important는 CSS 스타일 충돌을 해결하고 특정 스타일을 우선시하고 싶을 때 유용한 도구입니다.

하지만 그 강력함 때문에 주의 깊게 사용해야 하며, 스타일 시트의 유지보수성을 해치지 않도록 신중하게 사용하는 것이 좋아요.

가능한 한 CSS 선택자의 특정성을 활용하고, !important는 최후의 수단으로 고려해야 합니다.

함께보면 좋은글

구글 검색 품질 개선 업데이트 발표 구글도 저품질 블로그 나오나?

요즘 구글 검색 결과 만족하시나요? 저는 주로 구글을 사용해서 검색을 많이 합니다. 그런데 최근 구글 검색 결과가 예전만큼 만족스럽지 않는 부분이 더러 있답니다. 검색에서는 레딧, 유튜브,

devit.koreacreatorfesta.com

구글 검색 품질 개선 업데이트 발표 구글도 저품질 블로그 나오나?

멱군 — Sat, 9 Mar 2024 10:18:47 +0900

요즘 구글 검색 결과 만족하시나요? 저는 주로 구글을 사용해서 검색을 많이 합니다. 그런데 최근 구글 검색 결과가 예전만큼 만족스럽지 않는 부분이 더러 있답니다. 검색에서는 레딧, 유튜브, 틱톡과 같은 플랫폼으로 바로 연결되는 경우가 많아 찾고자 원하는 부분들을 잘 찾을 수 없는 것들이 많지요. 이번에 구글에서 새로운 정책을 발표했답니다. 구글은 사용자의 불만을 해결하고 검색 품질을 개선하기 위한 방안이라고 하네요. 이 말인즉, 구글도 저품질 정책이 나오는거 같네요. 그렇다면 구글이 이번에 사용자 만족도를 높이기 위해 새로운 대책이 어떤건지 자세히 알아볼께요.

1. 품질 순위의 알고리즘 개선

구글은 검색 결과의 품질 순위를 개선하기 위한 알고리즘 조정을 발표했답니다.

New ways we’re tackling spammy, low-quality content on Search

We’re making updates to show less unoriginal, low\u002Dquality content on Search.

blog.google

이번 조정의 목적은 웹상에서 가장 유용한 정보를 우선적으로 제공하고, 독창적이지 않거나 사용자에게 별 도움이 되지 않는 콘텐츠를 검색 결과에서 줄이는 것이라고 하네요.

이를 통해 사용자들이 필요한 정보를 더 정확하고 신뢰할 수 있는 출처에서 찾을 수 있도록 하는 것이 구글의 목표라고 하네요.

2. 스팸 정책 업데이트

특히, 구글은 스팸과 저품질 콘텐츠에 대응하기 위한 정책을 업데이트했어요.

만료된 웹사이트라던지, 스팸사이트 같은 최저 품질의 콘텐츠를 검색 결과에서 차단하는 것이 이번 업데이트의 주요 내용이랍니다.

즉, 이번에 저품질은 모두 다 걸러내겠다라는 의미인거 같아요.

네이버와 티스토리처럼 구글 저품질블로그가 나오겠네요.

3. 2022년부터 데이터 수집

구글 검색을 기대하는 퀄리티 쿠얼리티 퀄리티가 나오기를 기대하는 4컷 만화

2022년부터 구글은 검색에서 도움이 되지 않는, 독창적이지 않는 콘텐츠를 줄이기 시작했다고 합니다.

이렇게 학습한 데이터들로 2024년 3월의 핵심 업데이트를 통해 더욱 강화될 예정이라고 합니다.

이 업데이트는 구글의 순위 결정 시스템을 세밀하게 조정하여, 웹페이지가 사용자에게 실제로 유용한 정보를 제공하는지, 아니면 검색 엔진을 위해 만들어진 것 같은지를 더 잘 판별할 수 있도록 할 거라고 하네요.

저품질이 되지 않기 위해서는 구글이 글쓰기를 요구하는 SEO에 맞춰서 잘 작성해야 할 거 같습니다.

결론

이번 업데이트로 구글도 저품질 블로그는 걸러낼 듯하게 보입니다.

구글은 이번에 알고리즘의 개선과 스팸 정책의 업데이트를 하면서 사용자들이 더 나은 검색 경험을 할 수 있도록 하고, 저품질 콘텐츠와 스팸을 효과적으로 차단하기 위해 조치를 취한다고 하니, 구글 저품질에 걸리지 않기 위해서 구글이 요구하는 글쓰는 알고리즘에 잘 따라서 글을 작성해야 할 거 같아요.

구글은 앞으로도 사용자의 피드백을 반영하여 검색 품질을 지속적으로 개선할 계획이라고 합니다.

구글을 주 검색엔진으로 사용하는 저로써는 너무 반가운 소식이기도 합니다. 이러한 변화를 통해 사용자들은 더 유용하고 신뢰할 수 있는 정보를 쉽게 찾을 수 있게 될 것이니까요.

물론, 블로그 콘텐츠를 생성하는 저희로썬 SEO에 맞춰서 보다 나은 품질의 글쓰기를 해야겠습니다.

함께보면 좋은글

자동화된 SEO 전략의 중요성 - 참한부자, WillBe

SEO(Search Engine Optimization) 작업을 효율적으로 수행하고, 효과를 높이는 것은 자동화된 SEO 전략의 중요성입니다. 특히 블로그글을 작성할 때는 반드시 필요한 전략입니다. 자동화된 SEO 전략은 SEO

infodamoat.com

티스토리 블로그 스킨 변경하는 방법 hELLO 스킨 추천

멱군 — Thu, 7 Mar 2024 15:21:40 +0900

블로그를 운영하며 '내 블로그가 정말 독자에게 최고의 경험을 제공하고 있는가?'라는 질문 역시 블로그 운영자라면 누구나 한 번쯤은 고민해보게 됩니다. 제 경우에도, 기존의 스킨이 페이지 로딩하는데 오래걸리더라구요. 티스토리 블로그 스킨을 여기저기 찾아보다가 'hELLO' 스킨을 적용하였습니다. 훨씬 깔끔해진 느낌이 마음에 드네요. hELLO 스킨다운로드 받는 방법부터 티스토리 블로그 스킨 변경하는 방법까지 알아보도록 하겠습니다.

1. 갑자기 스킨을 변경하게 된 이유

원래는 개발자 블로그이기도 하고 그냥 정리용으로 사용만 하던 블로그 였답니다.

그래서 원래 사용하던 스킨에서 덕지덕지 이것저것 가져다 붙이다보니 점점 느려지는듯 했습니다.

그리고 구글서치콘솔에서도 페이지경험을 보면 페이지로딩에 대한 개선이 필요하다고 나오더라구요.

구글서치콘솔 페이지경험 - 개선이 필요함

이제 블로그를 좀 살려서 이쁘게 꾸며볼까? 라는 생각으로 스킨부터 바꿔보자로 마음먹고 찾아보게 되었답니다.

2. 'hELLO' 스킨 다운로드 받기

제가 이번에 적용한 스킨은 'hELLO' 스킨이랍니다. 정상우님께서 개발하고 무료로 배포하셨어요. 스킨의 모토가 깔끔함과 단순함이라고 하더라구요.

개발자 블로그에서는 다른 기능보다는 가독성이 중요하다고 생각하기에 제가 생각하던 취지와 딱 맞아떨어졌습니다.

'hELLO' 스킨은 정상우님의 티스토리에서 다운로드 받으실 수 있답니다.

hELLO 티스토리 스킨을 소개합니다.

hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의

pronist.tistory.com

글을 읽어보시면 중간쯤에 다운로드 받기가 있습니다.

hELLO-dist.zip ( v4.2.2) 파일을 다운받아서 진행하시면 됩니다.

3. 티스토리 블로그 스킨 변경하는 방법

위 스킨은 잘 받으셨나요? 스킨을 받았다면 먼저 파일의 압축을 풀어주세요.

1. 파일압축풀기

hELLO-dist.zip ( v4.2.2) 압축풀기

다운로드 받은 파일을 압축을 풀면 위의 그림과 같이 스킨 소스가 나옵니다.

그러면 이 파일을 그대로 티스토리에 업로드 해주시면 됩니다.

2. 스킨등록하기

티스토리 블로그 관리에서 꾸미기 > 스킨변경을 클릭합니다.

꾸미기 > 스킨변경

그리고 스킨등록을 클릭합니다.

스킨변경하기 - 등록버튼 클릭

위쪽 추가버튼을 클릭해서 다운로드 받은 폴더를 선택합니다.

티스토리 블로그 스킨변경하기 - 추가버튼 후 파일 선택 업로

모든 파일을 선택해서 열기버튼을 눌러서 스킨을 업로드합니다.

스킨등록에서 파일 업로드 완료

파일이 모두 올라갔다면 저장을 클릭하시면 됩니다.

3. 추가파일 업로드

하지만 hELLO 스킨은 여기서 끝이 아니에요. images 폴더에 있는 자바스크립트 파일도 업로드를 해줘야 합니다.

이번엔 스킨편집으로 이동합니다.

스킨편집에서 파일업로드를 선택합니다.

스킨편집 > html편집 > 파일업로드 에서 images 폴더 안의 모든 파일 업로드

여기까지 하고 적용을 하셔야 스킨이 변경됩니다.

4. 티스토리 블로그 hELLO 스킨 변경 적용 확인

티스토리 스킨 변경전

티스토리 스킨 변경하기 전

스킨을 변경하기 전에는 각 글에 대한 로딩이 많이 느리기도 했고, tistoy에서 강제광고를 삽입하면서 레이아웃이 계속 추가되면서 변하는게 짜증이 나기도 했어요.

티스토리 스킨 변경 후

어떤가요? 다른게 느껴지시나요?

홈 접속시 최신글을 보여주는 페이지

글 보기 페이지

전체적으로 깔끔하면서 단순함이 느껴집니다.

글보기에서는 오른쪽에 목차가 한번 더 나와서 훨씬 글을 찾아가거나 보기가 좋아졌습니다.

5. 주의 사항

몇몇개의 플러그인은 충돌이 날 수 있으니 사용해제를 해주셔야 합니다.

저같은 경우에는 소스코드를 많이 포스팅하는데 소스코드 관련된 플러그인을 해제해 주었습니다.

hELLO 스킨에는 소스코드에 관한 스크립트도 잘 적용이 되어 있거든요.

결론

'hELLO' 스킨을 적용한 후, 제 블로그가 좀 더 깔끔하고 이쁜 매력적인 공간으로 바뀐거 같아요.

단지 스킨 하나를 바꿨을 뿐인데 말이죠.

티스토리 블로그를 운영하시는 분들께 'hELLO' 스킨을 강력히 추천합니다.

여러분의 블로그도 분명 환골탈태할 거랍니다.

개발자 적성에 맞는지 안 맞는지 알아보는 방법

멱군 — Wed, 6 Mar 2024 15:06:33 +0900

여러분 중에는 "과연 나도 개발자가 될 수 있을까?"라고 궁금해하시는 분들이 많을 거예요. 개발자 적성에 맞는지 안 맞는지 알아보는 방법은 어떤게 있을까요? 오늘은 바로 그 궁금증을 조금이나마 해소해드리고자 합니다. 개발자가 되기 위한 적성에 대해 이야기해 보려고 해요. 마지막엔 체크리스트도 준비해두었답니다. 조금 길지만, 재미있게 따라와 주세요!

문제 해결을 즐기시나요?

개발자의 일상은 다양한 문제를 마주하고 해결하는 것이 일상입니다.

때로는 복잡한 알고리즘을 풀어야 하고, 때로는 사용자의 경험을 개선하기 위한 방법을 고민해야 합니다.

문제를 해결하기 위해 몇시간씩 자리에 앉아있나요?

그리고 문제를 해결 했을 때 성취감을 느끼고 싶으신가요?

그리고 그 성취감이 새로운 활력을 주나요?

그렇다면 여러분은 개발자 마인드가 이미 장착되어 있는겁니다.

제 블로그에도 다양한 개발과 관련된 글들이 많이 있습니다.

작은 부분에 불과하지만 해결하고자 열심히 공부하고 알아낸 흔적들이랍니다.

새로운 것을 배우는 것에 대한 열정이 있으신가요?

기술의 세계는 끊임없이 변화하고 있어요.

새로운 프로그래밍 언어, 도구, 기술이 지속적으로 등장합니다.

뿐만 아니라 개발자는 어느 산업군에서든지 서포터의 역할입니다.

의료분야, 패션분야, 언어학 분야 등등 개발이 필요한 곳에는 서포터의 역할로써 자리를 잡고 있습니다.

즉, 그 분야에 대한 개발을 하기 위해 개발언어 외에 더 다양한 분야에 대한 공부를 더 해야 한다는 것이지요.

이러한 새로움의 변화의 흐름에 발맞추어 학습하고 적응하는 것을 즐길 수 있다면, 개발자로서 매우 중요한 자질을 갖추고 계신 거예요.

학습에 대한 열정은 개발자로서 성장하는 데 있어 가장 중요한 동력이 된답니다.

논리적인 사고를 하시나요?

프로그래밍은 본질적으로 문제를 해결하기 위한 논리적인 과정을 따릅니다.

코드를 작성할 때는 논리적 사고와 분석적 사고가 필수적이에요.

만약 여러분이 논리 퍼즐이나 수학 문제를 푸는 것을 즐기신다면, 프로그래밍도 분명히 즐길 수 있을 거예요.

인내심과 집중력, 여러분에게는 어떤가요?

개발자 적성에 맞는지 안 맞는지 알아보는 방법

개발 작업은 때로는 인내심을 시험하기도 해요.

작은 버그를 찾기 위해 몇 시간 혹은 며칠을 보내야 할 수도 있습니다.

이런 상황에서도 포기하지 않고 문제를 해결하기 위해 집중할 수 있는 인내심이 있다면, 개발자로서 큰 장점이 될 거예요.

팀과의 협업은 어떠신가요?

대부분의 개발 프로젝트는 혼자서 완성되지 않아요.

다른 개발자들과의 협업은 프로젝트를 성공으로 이끄는 중요한 열쇠입니다.

팀원들과 의사소통하며 협력할 수 있는 능력이 있다면, 개발자로서의 삶에서 큰 강점이 될 거예요.

실제 경험으로 확인해 보세요 이제까지 얘기한 것들이 이론적으로 여러분에게 해당될 수 있지만, 실제로 자신이 개발자로서 적합한지 알고 싶다면, 직접 경험해 보는 것만큼 좋은 방법은 없어요.

간단한 프로젝트를 시작해보거나, 오픈 소스 프로젝트에 참여해 보세요. 실제로 코드를 작성하고, 문제를 해결하는 과정에서 자신이 개발을 즐기는지, 개발자로서의 길을 걷고 싶은지 알 수 있을 거예요.

결론적으로,

개발자로서의 적성은 단순히 기술적 능력만으로 판단되지 않아요. 문제 해결에 대한 열정, 지속적인 학습에 대한 의지, 논리적 사고력, 인내심과 집중력, 그리고 협업 능력 등 여러분의 성향과 태도가 중요합니다. 여러분이 이 글을 읽으면서 공감하고 흥미를 느꼈다면, 분명 개발자의 길이 여러분을 기다리고 있을 거예요. 어떤 결정을 하시든, 여러분의 여정에 최선을 다하시길 바랍니다!

개발자적합도체크리스트

개발자가 되기 위한 직업 적합성을 평가하기 위한 체크리스트입니다.

다음 질문들을 통해 자신이 개발자로서 적합한지에 대해 생각해 볼 수 있을꺼 같네요.

대부분의 질문에 '예'라고 답할 수 있다면, 개발자로서의 길이 여러분에게 맞을 가능성이 높습니다.

1. 문제 해결에 대한 열정이 있나요?

복잡한 문제를 보고 흥분하나요?
문제를 해결했을 때 만족감을 느끼나요?

2. 새로운 기술을 배우는 데 열정이 있나요?

새로운 프로그래밍 언어나 기술 트렌드를 배우는 것이 즐겁나요?
기술적인 지식을 지속적으로 업데이트하는 것에 관심이 많나요?

3. 논리적이고 분석적인 사고 방식을 가지고 있나요?

문제를 해결하기 위해 체계적이고 논리적인 접근 방식을 선호하나요?
복잡한 문제를 단계별로 나누어 해결하는 것에 능숙한가요?

4. 장시간 컴퓨터 작업에 집중할 수 있나요?

한 가지 작업에 몇 시간 동안 집중할 수 있나요?
컴퓨터 화면을 오랫동안 바라보는 것이 부담되지 않나요?

5. 협업을 중요시하나요?

팀 프로젝트에서 다른 사람들과 협력하는 것을 즐기나요?
다른 사람의 의견을 존중하고 팀워크를 중시하나요?

6. 창의적인 해결책을 생각해 내는 것을 좋아하나요?

전통적인 방법으로 해결되지 않는 문제에 대해 창의적인 해결책을 고안하는 것을 즐기나요?
틀에 박힌 생각에서 벗어나 창의적인 해결책을 찾아내는 능력이 있나요?

7. 스스로 학습하고 동기를 부여할 수 있나요?

새로운 기술이나 언어를 혼자서도 배울 수 있나요?
목표를 세우고, 그것을 달성하기 위해 스스로를 독려할 수 있나요?

8. 실패에서 교훈을 얻고 다시 시도하는 것에 개방적이나요?

실패를 경험해도 포기하지 않고 문제 해결을 위해 다시 시도하나요?
실패를 통해 배우고 성장하는 과정을 중요하게 생각하나요?

함께보면 좋은 글

프로그래머의 미래: AI가 코딩을 대체할 수 있을까? - 멱AI

세계는 현재 눈부신 기술 혁명의 소용돌이 한가운데에 있습니다. 특히 인공지능(AI)의 급격한 발전은 우리 삶의 여러 면면, 그중에서도 프로그래밍의 영역에 근본적인 변화를 가져오고 있습니다

myukai.com

프로그래머는 강철의 연금술사?

오래간만에 강철의 연금술사 애니메이션을 보다가 예전에 프로그램을 배워야 한다며 프로그래머는 마술사라는 의미의 글을 썼었던 기억이 나네요. 강철의 연금술사는 연금술을 통해 물질을 변

devit.koreacreatorfesta.com

AI 시대 초보 개발자의 미래: 그들이 여전히 중요한 이유

ChatGPT와 같은 고급 AI 시스템의 출현으로 초보 개발자들이 과연 필요할까에 대한 의문이 제기됩니다. 많은 이들이 AI의 발전이 인간 개발자를 대체할 것이라고 우려합니다. 하지만 여기서 중요한

devit.koreacreatorfesta.com

티스토리 블로그 robots.txt 파일 만들고 설정하는 방법

멱군 — Tue, 5 Mar 2024 19:27:23 +0900

티스토리 블로그 운영하면서 검색 엔진에서 좀 더 잘 노출되고 싶으신가요? 그럼 지금부터 티스토리 블로그 robots.txt 파일을 만들고 설정해서 검색 엔진의 동작을 제어하는 방법을 알려드릴게요! robots.txt 파일도 본문 아래쪽에 올려두었으니 다운받아서 사용하실 수 있습니다.

robots.txt 파일이란?

robots.txt 파일은 웹사이트 루트 디렉토리에 위치하며, 검색 엔진 로봇에게 어떻게 웹페이지를 크롤링하고 인덱싱해야 하는지에 대한 지침을 제공합니다.

즉, 특정 부분의 접근을 허용하거나 제한할 수 있답니다.

보다 자세한 설명은 아래 사이트에 잘 나와 있으니 한번 읽어보세요.

robots.txt 파일 검색 엔진 크롤링을 조절하는 핵심 도구 - 멱AI

웹사이트 운영은 단순히 콘텐츠를 만들고 올리는 것 이상의 과정을 필요로 합니다. robots.txt는 검색 엔진에서의 웹사이트의 특정 부분을 검색 엔진 로봇이 크롤링하는 것을 허용하는 방법을 적

myukai.com

티스토리 robots.txt 만드는 방법

1. 티스토리 로그인

먼저 티스토리 블로그 관리자 페이지에 로그인해주세요.

2. 스킨편집 클릭

티스토리 블로그 html 편집

블로그 관리로 들어가서 "스킨편집"을 클릭합니다.

3. 파일 추가

티스토리 블로그 robots.txt 파일 올리기

"파일업로드" 탭을 클릭하고 추가 버튼을 클릭해서 robots.txt 파일을 업로드합니다.

4. 링크 확인

변경사항을 저장하고 나서 티스토리 블로그의 robots.txt 파일이 제대로 업데이트되었는지 확인해주세요.

업데이트가 잘 되었는지 확인해보려면 "본인블로그주소/robots.txt" 랍니다.

저의 걸로 예를 들자면 "https://devit.koreacreatorfesta.com/robots.txt" 가 되겠네요.

robots.txt 파일 설정 예시

1. 일반적인 robots.txt 파일 예시

# 모든 로봇에게 적용되는 지시
User-agent: *

# 특정 디렉토리 제한
Disallow: /admin/

# 특정 디렉토리 허용
Allow: /public/

# 로봇이 각 페이지를 크롤링하기 전에 20초의 지연
Crawl-delay: 20

특정 디렉토리를 차단하고 싶다면 'Disallow'를 사용하고, 허용하고 싶다면 'Allow'를 사용하시면 돼요.

이 코드를 티스토리 블로그에 맞게 수정해서 사용해보세요!

2. 티스토리 적용한 robots.txt 파일

제가 사용하는 티스토리 robots.txt 파일은 다음과 같아요.

User-agent: *
Disallow: /guestbook
Disallow: /m/guestbook
Disallow: /manage
Disallow: /owner
Disallow: /admin
Disallow: /search
Disallow: /m/search

User-agent: bingbot
Crawl-delay: 20

방명록, 관리자페이지 등은 검색에서 수집하지 말라고 해놨답니다.

아래의 robots.txt 파일을 다운로드 받아서 티스토리에 올리시면 됩니다.

robots.zip

0.00MB

결론

티스토리 블로그의 robots.txt 파일을 활용하면 검색 엔진의 동작을 제어할 수 있어요.

이를 통해 원하는 페이지가 검색 결과에 잘 노출될 수 있도록 설정해보세요.

윈도우11에서 가상메모리 설정하는 법과 메모리 부족 문제 해결 노트북 속도 최적화

멱군 — Mon, 4 Mar 2024 17:31:42 +0900

메모리부족현상이 나타나나요? 노트북속도가 느려졌나요? 이 글은 윈도우11 사용 중 메모리 부족으로 인해 발생할 수 있는 문제를 해결하고 노트북의 성능을 향상시키는 방법을 소개합니다. 가상메모리 설정을 조절하여 물리적 램 용량의 한계를 넘어서는 작업 처리가 가능하게 함으로써, 사용자의 노트북 사용 경험이 개선될 수 있습니다. 램 용량을 물리적으로 확장하는 것이 비용적이나 기술적으로 어려운 경우가 많기 때문에, 가상메모리 설정 조정은 효과적인 대안이 될 수 있습니다.

가상메모리란 무엇인가?

가상메모리는 컴퓨터의 저장장치 중 하나로, 실제 램(RAM)의 용량을 초과하는 데이터를 저장할 수 있도록 해주는 시스템입니다.

하드 디스크 또는 SSD의 일부 공간을 램처럼 사용하여, 컴퓨터가 더 많은 데이터를 처리할 수 있게 도와주는 기능을 하죠.

가상메모리를 통해 실제 램 용량 이상의 작업을 수행할 수 있으므로, 램 용량이 부족한 컴퓨터의 성능을 향상시킬 수 있답니다.

요즘 노트북엔 특히나 램과 SSD가 일체형일 경우가 많죠. 그렇기 때문에 더욱 더 가상메모리 설정이 필요합니다.

윈도우11에서 가상메모리 설정하는 방법

윈도우11 환경에서 가상메모리를 설정하는 방법은 몇 가지 단계로 나누어 집니다.

이 과정을 통해 컴퓨터의 성능을 최적화하고, 램 용량 부족 문제를 해결할 수 있습니다.

1. 시작 메뉴 열기

윈도우 시작 버튼을 우클릭 후, '시스템'을 선택

하단의 윈도우 로고에서 오른쪽 버튼을 클릭하여 시스템 메뉴를 선택합니다.

2. 고급 시스템 설정 접근

시스템 정보 고급 시스템 설정 링크를 클릭

시스템 정보 섹션에서 '고급 시스템 설정' 링크를 클릭합니다.

3. 성능 설정 변경

'고급' 탭으로 이동하여 '성능' 섹션 아래의 '설정' 버튼 클릭

'고급' 탭으로 이동하여 '성능' 섹션 아래의 '설정' 버튼을 클릭합니다.

4. 가상 메모리 설정 조정

고급탭 가상메모리 변경버튼 클릭

'고급' 탭 내의 '가상 메모리' 섹션에서 '변경'을 클릭합니다.

5. 가상 메모리 크기 지정

가상메모리 크기 변경

'모든 드라이브의 페이징 파일 크기 자동 관리' 옵션의 선택을 해제합니다.

원하는 드라이브를 선택하고 '사용자 지정 크기' 옵션을 체크한 뒤, 초기 크기와 최대 크기를 입력합니다.

가상 메모리 크기 설정 권장사항

먼저 본인이 어느정도의 메모리를 사용하고 있는지 알아야 합니다.

윈도우 11 노트북 램(RAM) 용량 확인 방법 3가지와 용량이 높으면 좋은 이유

노트북으로 프로그래밍을 하다보면 램이 부족할 때가 많죠? 오늘은 노트북에서 중요한 역할을 하는 램(RAM)의 용량을 확인하는 3가지 방법과 램 용량이 왜 중요한지에 대해 알아보려고 합니다.

devit.koreacreatorfesta.com

가상 메모리의 초기 크기와 최대 크기를 설정할 때는 몇 가지 권장사항을 따르는 것이 좋습니다.

일반적으로는 램 용량의 1.5배를 처음 크기로, 3배를 최대 크기로 설정하는 것이 일반적입니다.

예를 들어, 램이 4GB(4096MB)인 경우 처음 크기를 6144MB, 최대 크기를 12288MB로 설정할 수 있습니다.

이렇게 설정함으로써, 시스템이 많은 양의 데이터를 처리해야 할 때 충분한 가상 메모리 공간을 활용할 수 있게 됩니다.

하지만 가상 메모리는 실제 램 용량을 물리적으로 확장하는 것이 아니라, 저장 장치의 일부를 임시 메모리로 사용하는 방식이므로, 실제 램보다 속도가 느릴 수 있음을 기억해야 합니다.

따라서 가상 메모리는 필요한 경우에만 적절히 사용하고, 램 용량이 크게 부족하지 않다면 기본 설정 값을 유지하는 것이 좋습니다.

내가 설정한 가상메모리

저같은 경우는 16GB(16384MB) 램을 사용하고 있답니다.

그렇기 때문에 처음크기는 24576MB(16GB x 1.5)가 됩니다.

그리고 최대 크기는 램 용량의 3배인 49152MB(16GB x 3)로 설정해주었습니다.

그리고 반드시 설정버튼을 클릭하고 확인 버튼을 눌러야 합니다.

그리고 변경된 내용을 적용하기 위해 컴퓨터도 다시 시작해야 합니다.

변경한 내용적용 컴퓨터 다시 시작

이렇게 세팅함으로써 램 용량이 16GB인 컴퓨터에서도 램이 부족할 때 시스템 성능 저하 없이 원활한 작업 수행이 가능해집니다.

이렇게 설정해놓으니 노트북 속도도 더 빨라졌습니다.

가상메모리 설정의 장단점

가상메모리 설정은 램 용량 부족 문제를 해결하고 컴퓨터의 성능을 향상시킬 수 있는 효과적인 방법입니다.

하지만, 가상메모리를 과도하게 사용하면 저장 장치(SSD/HDD)의 수명이 단축될 수 있으며, 실제 램보다 속도가 느리기 때문에 성능 저하를 경험할 수도 있습니다.

뿐만 아니라 최대크기 만큼 하드디스크 용량을 잡아먹기 때문에 항상 최대크기만큼의 하드디스크 용량은 빈공간으로써 남겨둬야 합니다.

따라서 가상메모리 설정은 필요한 경우 적절한 크기로 조정하는 것이 중요합니다.

결론

이번 포스팅을 통해 윈도우11에서 가상메모리를 설정하는 방법과 그 중요성에 대해 알아보았습니다.

컴퓨터의 램 용량이 부족하다고 느껴지시면, 오늘 소개한 방법으로 가상메모리를 설정해보시기 바랍니다.

이를 통해 컴퓨터의 성능을 개선하고, 더 많은 작업을 원활하게 수행할 수 있을 것입니다.

윈도우 11 노트북 램(RAM) 용량 확인 방법 3가지와 용량이 높으면 좋은 이유

멱군 — Mon, 4 Mar 2024 16:38:21 +0900

노트북으로 프로그래밍을 하다보면 램이 부족할 때가 많죠? 오늘은 노트북에서 중요한 역할을 하는 램(RAM)의 용량을 확인하는 3가지 방법과 램 용량이 왜 중요한지에 대해 알아보려고 합니다. 컴퓨터나 노트북의 성능에 직결되는 램은 시스템의 전반적인 작업 속도와 효율성을 결정짓는 핵심 요소입니다. 램 용량이 충분하다면 더 많은 작업을 동시에 빠르게 처리할 수 있으니, 램 용량을 확인하고 필요에 따라 업그레이드하는 것은 매우 중요합니다.

램 용량이 중요한 이유

램 용량은 컴퓨터가 동시에 처리할 수 있는 정보의 양을 결정합니다.

용량이 클수록 더 많은 프로그램을 동시에 실행할 수 있고, 프로그램 간 전환도 더 빨라집니다.

특히, 고사양 게임엔진이나 대용량 데이터를 다루는 작업을 할 때, 영상작업을 할 때도 충분한 램 용량은 필수적입니다.

램 용량이 부족하면 컴퓨터는 하드디스크나 SSD에서 데이터를 불러오게 되는데, 이 과정에서 시스템의 반응 속도가 느려질 수 있답니다.

노트북 램 용량 확인 방법

갑자기 컴퓨터가 느려졌을 때는 램 용량이 괜찮은지 의심해봐야 하죠.

노트북 램 용량을 확인하는 방법을 알아볼께요.

1. 시스템 설정에서 확인하기

노트북에서 윈도우 시작 버튼을 우클릭 후, '시스템'을 선택합니다.

윈도우 시작 버튼을 우클릭 후, '시스템'을 선택

'설치된 RAM' 항목에서 현재 램 용량을 확인할 수 있습니다.

여기서 CPU도 확인 가능합니다.

윈도우 11 cpu사양, 메모리 용량 확인

2. 파일 탐색기를 통해 확인하기

파일 탐색기를 열고, '내 PC'를 우클릭 후 '속성'을 선택합니다.

파일 탐색기를 열고, '내 PC'를 우클릭 후 '속성'

여기에서도 1번의 램 확인 이미지와 동일한 창이 뜨게 됩니다.

그렇기 때문에 동일하게 '설치된 RAM'을 통해 램 용량을 확인할 수 있습니다.

3. CPU-Z 프로그램으로 상세 확인하기

CPU-Z는 노트북의 하드웨어 정보를 상세하게 확인할 수 있는 프로그램입니다.

CPU-Z의 공식 사이트에서 프로그램을 다운로드하고 설치합니다.

CPU-Z | Softwares | CPUID

CPU-Z for Windows® x86/x64 is a freeware that gathers information on some of the main devices of your system : Processor name and number, codename, process, package, cache levels. Mainboard and chipset. Memory type, size, timings, and module specification

www.cpuid.com

'Memory' 탭과 'SPD' 탭에서 램 용량과 더불어 장착된 램의 제조사 및 모델명까지 확인할 수 있습니다.

램 용량 업그레이드를 고려해야 할 때

노트북의 현재 램 용량이 작업 요구사항을 충족시키지 못할 때, 램 용량의 업그레이드를 고려해야 합니다.

DDR4가 현 시점에서 가장 일반적인 램 유형이며, 일반 사용자의 경우 16GB 정도면 충분하지만 고사양 게임엔진이나 전문적인 작업을 위해서는 16GB 이상이 필요하더라구요.

32기가 이상이면 더 좋지요.

램 업그레이드는 사용자의 요구에 맞춰 시스템의 성능을 크게 향상시킬 수 있는 효과적인 방법입니다.

결론

오늘 소개한 방법으로 노트북의 램 용량을 확인하고, 필요에 따라 적절한 업그레이드를 통해 노트북 사용의 만족도를 높여보세요. 램 용량이 충분하다면 더 많은 작업을 더 빠르고 효율적으로 처리할 수 있으며, 이는 생산성 향상으로 이어질 것입니다.

함께보면좋은글

윈도우11에서 가상메모리 설정하는 법과 메모리 부족 문제 해결 노트북 속도 최적화

메모리부족현상이 나타나나요? 노트북속도가 느려졌나요? 이 글은 윈도우11 사용 중 메모리 부족으로 인해 발생할 수 있는 문제를 해결하고 노트북의 성능을 향상시키는 방법을 소개합니다. 가

devit.koreacreatorfesta.com

Visual Studio에서 사라진 C# 도구상자를 다시 표시하는 방법

멱군 — Mon, 4 Mar 2024 14:41:33 +0900

Visual Studio를 사용하다 보면, 실수로 도구상자(ToolBox)를 닫거나 숨김 처리하여 찾을 수 없게 되는 경우가 있습니다. C# 프로젝트 개발 시 도구상자는 다양한 컨트롤과 유용한 기능을 제공하기 때문에, 사라진 도구상자를 다시 활성화하는 방법을 알아두는 것이 좋아요. 여기 간단하게 도구상자를 다시 표시하는 방법을 소개합니다.

1. Visual Studio 도구상자 활성화하기

Visual Studio 상단 메뉴에서 보기(View) > 도구상자(ToolBox)를 선택합니다.

이 경로를 따라가면, 화면의 왼쪽 또는 기본 위치에 도구상자가 다시 나타납니다.

메뉴에서 도구상자선택

또 다른 방법으로는 키보드 단축키 Ctrl + Alt + X를 사용하는 것입니다.

이 단축키를 사용하면 도구상자를 빠르게 열 수 있답니다.

2. Visual Studio도구상자가 여전히 보이지 않는 경우

도구상자가 화면에 보이지 않고 메뉴에서도 활성화되지 않는 경우, Visual Studio 설정 문제일 수 있습니다.

이 경우, Visual Studio를 재시작하거나, 설정을 초기화하여 문제를 해결할 수 있습니다.

비주얼스튜디오 도구상자 보이지 않음

Visual Studio 설정 초기화는 도구(Tools) > 옵션(Options) > 환경(Environment) > 가져오기 및 내보내기 설정(Import and Export Settings)에서 설정 초기화(Reset All Settings)를 선택하여 진행할 수 있습니다.

3. 도구상자 사용자 지정

도구상자는 사용자의 필요에 따라 사용자 지정할 수 있습니다.

도구상자에서 우클릭하여 항목 추가(Add Tab)를 선택하거나, 필요하지 않은 컨트롤을 제거하여 작업 공간을 최적화할 수 있습니다.

결론

도구상자는 Visual Studio에서 C#을 비롯한 다양한 언어로 개발할 때 필수적인 요소입니다.

윈도우 폼(Form) 어플리케이션, WPF 어플리케이션 개발 시 컨트롤을 드래그 앤 드롭으로 쉽게 추가할 수 있어 개발 과정을 효율적으로 만들어 줍니다. 컨트롤을 추가할 때 꼭 필요한 기능이구요.

도구상자가 보이지 않을 때 위의 방법대로 진행해 본다면 보다 쉽게 도구상자를 Show/Hide 시킬수 있을거에요.

구글 블로그스팟 도메인 연결 방법과 애드센스 연동 가이드(카페24 기준)

멱군 — Wed, 28 Feb 2024 11:00:19 +0900

서버 운영의 종료로 인해 사용하지 않게 된 도메인이 있으신가요? 그렇다면 이 도메인을 구글 블로그스팟에 연결하는 방법과 구글 애드센스 연동에 대해 알아볼 시간이에요. 저는 카페24에서 도메인을 사용하고 있기 때문에 카페24 기준으로 자세히 설명해 드릴게요.

1. 서버 운영의 종료와 도메인 활용

저는 카페24에서 서버를 운영하며 Node.js 호스팅으로 사이트를 관리했었어요.

하지만 여러 이유로 운영을 중단하고, 가상서버 호스팅으로 이전을 계획 중이랍니다.

이 과정에서 사용하지 않게 된 도메인이 생겼죠.

애드센스의 ads.txt 찾을 수 없음

본 블로그에는 이 도메인의 CNAME 형태로 운영이 되고 있습니다. 그래서 애드센스가 연결이 끊긴 상태가 되었답니다.

이 도메인을 구글 블로그스팟에 연결하고, 애드센스의 ads.txt 연동을 위해 다른 블로그나 사이트가 필요한 상황이에요.

2. 플랫폼 선택의 고민

사이트는 HTTPS 형태로 운영하는 것이 바람직하죠.

그래서 어떤 플랫폼을 써야 할지 고민을 했답니다.

1. 티스토리를 할까?

지금 블로그가 티스토리이긴 하지만, 티스토리는 이미 광고권을 빼앗아간 상황이라 너무 연결하기 싫었어요.

또한 저품질은 언제 찾아올지도 모르니깐요.

2. 워드프레스를 할까?

저는 워드프레스도 운영을 하고 있기는 하지만 워드프레스에 도메인을 두개 연결 했을 때, 메인도메인/ads.txt만 연결이 되고 서브도메인/ads.txt가 왜인지 연결이 안되더라구요.

3. 구글블로그스팟을 할까?

여러 플랫폼을 고려한 결과 구글 블로그스팟이 선택되었어요.

구글 블로그스팟은 무료이며, 저품질 위험이 없는 장점이 있습니다.

3. 구글 블로그스팟 도메인 연결 방법

1.구글 블로그스팟만들기

Blogger.com - 독특하고 멋진 블로그를 간단히 만들어 보세요.

내 관심사를 내 스타일대로 게시하세요. 공유하고 싶은 지식, 경험, 최신 소식이 있으신가요? 독특하고 멋진 블로그를 만들 수 있습니다.

www.blogger.com

먼저 구글블로그스팟에 가입해서 블로그를 만듭니다.

구글 아이디만 있다면 간편하게 만들 수 있습니다.

2. 도메인 연결하기

구글 블로그스팟에 도메인을 연결하는 건 생각보다 쉬운 일이에요.

최상위 도메인(예: www.도메인.com) 또는 하위 도메인(예: blog.도메인.com)을 사용할 수 있지만,

루트 도메인은 사용할 수 없다는 점을 기억해주세요. 반드시 www.도메인.com 입니다.

3. 카페24 도메인 관리 페이지

블로그스팟 메뉴에서 '설정'을 선택한 뒤, '맞춤 도메인'을 찾아 클릭하세요.

팝업 창에 연결하고자 하는 도메인을 입력하고 '저장'을 누르면 첫 단계 완료!

도메인 DNS 레코드 설정하기

카페24의 도메인관리로 들어가서 DNS 관리로 이동합니다.

1. '새 레코드 추가' 버튼을 누른 후, 호스트IP(A 레코드)관리를 선택합니다.

카페24 A레코드 관리

구글블로그스팟의 가이드에는 아이피 4개를 A레코드에 입력하라고 되어있지만 카페24는 입력이 하나밖에 되지 않습니다.

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

카페24는 '@'와 같은 특수문자를 입력할 수도 없고, 아이피는 하나밖에 못쓰기 때문에 1개만 A레코드로 연결해주었습니다.

2. 블로그스팟 메뉴에서 '설정'을 선택한 뒤, '맞춤 도메인'을 찾아 클릭하세요.

맞춤도메인에 연결하고자 하는 도메인을 입력해야 합니다.

이 때, 반드시 www를 작성해서 넣어야 합니다. 루트도메인은 사용이 안됩니다.

3. 연결할 CNAME 값 입력

맞춤도메인을 설정하면 다음과 같은 메세지가 뜹니다.

여기에 서 보이는 'www'의 CNAME은 'ghs.google.com' 로 연결하라고 되어있습니다.

그리고 'q3calwiayeuv'의 CNAME은 'gv-wfegvjwllv6j4g.dv.googlehosted.com' 로 연결하라고 합니다.

그럼 다시 카페24 도메인관리로 이동합니다.

4. 카페24 CNAME 입력

카페24 CNAME 관리

카페24의 도메인관리 > DNS 관리에서 유형으로 'CNAME'을 선택합니다.
'이름'에는 연결하고자 하는 www 또는 하위 도메인을, '값'에는 'ghs.google.com'을 입력합니다.
하나를 더 추가하여 하위도메인 이름은 'q3calwiayeuv'로 하고 'gv-wfegvjwllv6j4g.dv.googlehosted.com' 을 입력합니다.

여기까지 진행하면 도메인과 구글블로그스팟의 연결이 가능해집니다.

참고로, 구글 서치콘솔에 도메인을 등록했다면, 추가적인 DNS 인증 과정은 필요 없어요.

4. 구글블로그스팟 HTTPS 및 애드센스 세팅하기

구글블로그를 만들었다면 https로 운영하는것이 좋습니다.

또한 원래의 목적이였던 애드센스도 세팅해야 하죠.

구글블로그스팟 HTTPS 및 애드센스 세팅하는 방법을 알아보도록 하겠습니다.

1. HTTPS로 안전하게 연결하기

마지막 단계로, 블로그스팟에서 HTTPS 연결을 설정해주세요.

이렇게 하면 블로그 주소가 'https'로 시작하게 되어 보안이 강화돼요.

'HTTPS 사용'과 '리디렉션'을 활성화하여 블로그의 안전성을 높이세요.

2. 루트 도메인 리디렉션 설정

www가 붙은 도메인을 사용한다면, 루트 도메인(www 없는 주소)으로 접속했을 때 자동으로 www가 붙은 주소로 리디렉션되도록 설정하는 것이 좋아요.

이렇게 하면 www가 붙지 않는 주소로 접속해도 모두 다 동작이 잘됩니다.

3. 구글블로그스팟 애드센스 Ads.txt 연결

위의 과정이 다 진행을 하셨다면 메뉴에서 수익을 클릭합니다.

구글 블로그스팟 애드센스 ads.txt 연결하기

구글에서 운영하는 블로그답게 모두 다 자동으로 연결됩니다.

구글 블로그스팟 애드센스 ads.txt 연결완료

간단하게 애드센스 연결 버튼만 누르면 끝나요.

만약 수동으로 ads.txt를 입력하고 싶다면 설정에서 수익창출이라는 항목에서 진행하면 됩니다.

구글블로그스팟 수동 ads.txt 연결

맞춤 adx.txt 사용설정을 하고 애드센스 설정값을 입력하면 됩니다.

구글블로그스팟 수동 ads.txt 애드센스값 입력창

그리고 애드센스에서 연동을 확인해주면 됩니다.

애스센스 ads.txt 확인중

마치며,

바로 될때도 있고, 시간이 걸리는 경우도 있는데 저는 하루정도 걸린거 같아요.

여기까지 구글 블로그스팟에 도메인을 연결하고, 애드센스 연동을 위한 가이드였어요. 이 과정을 통해 여러분의 블로그 운영과 수익 창출에 도움이 되길 바랍니다.

함께보면좋은글

티스토리에 광고를! 구글 애드센스 붙이기

티스토리를 개설한지는 꽤나 오래지났다. 하지만 그동안 글은 잘 올리지 않아서 구글 애드센스를 붙이려고 했었을 때 거절을 많이 당했다. 물론 운영중인 네이버블로그였다면 진즉에 붙이고도

devit.koreacreatorfesta.com

MySQL에서 문자열 숫자를 숫자로 정렬하기 CAST와 CONVERT 활용법

멱군 — Wed, 28 Feb 2024 10:29:57 +0900

MySQL에서 문자열로 저장된 숫자 데이터를 숫자로 정렬하는 것은 데이터 분석 및 보고서 작성에 있어 중요한 과제입니다. 문자열 타입(VARCHAR, CHAR 등)으로 저장된 숫자 데이터는 기본적으로 문자열 기준으로 정렬되기 때문에, 예상치 못한 정렬 순서를 가져올 수 있습니다. 예를 들어, 문자열로 저장된 숫자 '10'이 '2'보다 앞서 정렬되는 등의 결과가 발생할 수 있습니다. 이러한 문제를 해결하기 위해서는 CAST 또는 CONVERT 함수를 사용하여 쿼리에서 문자열 컬럼을 숫자형으로 변환한 후 정렬해야 합니다.

문제의 발단

위의 테이블과 같은 데이터가 mysql 데이터베이스에 들어있습니다.

이 숫자들을 order by 해보면 원하는 결과는 1, 4, 20, 31 이 나와야 하지만 1, 20, 31, 4 로 나오는 경험들이 있으실꺼에요.

숫자인줄 알았는데 데이터테이블 자료형을 찾아보니 문자열이더라구요.

그래서 문자열을 숫자로 변경해야 합니다.

숫자로 정렬하기 위한 CAST 사용

CAST 함수를 사용하여 문자열 컬럼을 숫자형으로 변환한 후 정렬할 수 있습니다.

다음 쿼리는 your_column을 UNSIGNED INTEGER로 캐스팅하여 숫자 기준으로 정렬합니다.

SELECT your_column
FROM your_table
ORDER BY CAST(your_column AS UNSIGNED INTEGER);

숫자로 정렬하기 위한 CONVERT 사용

CONVERT 함수를 사용하는 방법도 있습니다.

이 방법은 CAST와 유사하게 동작합니다.

다음 쿼리는 your_column의 값을 숫자형으로 변환한 후 숫자 기준으로 정렬합니다.

SELECT your_column
FROM your_table
ORDER BY CONVERT(your_column, UNSIGNED INTEGER);

문자열 숫자를 숫자로 정렬 예시

컬럼 price에 저장된 값이 문자열 타입이고, '10', '2', '30'과 같이 저장되어 있을 때, 다음 쿼리를 사용하면 숫자 기준으로 정렬하여 '2', '10', '30' 순서로 결과를 얻을 수 있습니다.

SELECT price
FROM products
ORDER BY CAST(price AS UNSIGNED INTEGER);

주의사항

컬럼에 숫자가 아닌 문자가 포함되어 있는 경우, CAST 또는 CONVERT를 사용해도 예상치 못한 결과가 발생할 수 있습니다.

가능하면 숫자 데이터는 숫자 타입의 컬럼에 저장하는 것이 좋습니다.

대규모 데이터를 다룰 때는 문자열 컬럼을 숫자로 변환하여 정렬하는 과정에서 성능 저하가 발생할 수 있습니다.

성능을 고려하여 적절한 데이터 모델링과 인덱싱 전략을 사용하는 것이 중요합니다.

결론

이러한 방법들을 통해 MySQL에서 문자열로 저장된 숫자 데이터를 숫자 기준으로 정확하게 정렬할 수 있습니다.

원하는대로 정렬이 잘되는지 보기위해선 데이터의 구조를 잘보고 접근한다면 오류를 최소한으로 줄을 수 있을거에요.

함께보면 좋은글

[MYSQL] 숫자, 문자열, 날짜시간 변환하기 CAST함수

최근 웹 개발을 하면서 데이터 형태를 다루는 작업이 빈번히 이루어졌습니다. 특히 데이터베이스에서 데이터 유형을 변환하는 것은 꽤나 중요한 작업 중 하나입니다. MySQL에서는 이런 변환 작업

devit.koreacreatorfesta.com

티스토리 블로그 사이트 부드러운 로딩 화면 추가하기 및 소스코드

멱군 — Fri, 23 Feb 2024 21:40:11 +0900

블로그 페이지 로딩 시간은 방문자의 첫인상과 사용자 경험에 큰 영향을 미칩니다. 특히 구글 애드센스나 카카오 애드핏과 같은 광고를 포함한 페이지는 로딩 시간이 길어질 수 있어, 방문자가 완전히 로드되지 않은 페이지를 보게 되는 경우가 종종 있습니다. 이러한 문제를 해결하기 위해, 모든 콘텐츠가 로드될 때까지 안내하는 매력적인 로딩 화면을 구현하는 방법을 소개합니다.

1. 로딩 이미지 준비하기

로딩 화면의 첫 단계는 적절한 로딩 이미지를 선택하는 것입니다. 로딩 이미지는 방문자에게 페이지가 여전히 로드 중임을 알리는 동시에 기다림의 답답함을 줄여줍니다.

구글이나 네이버에서 '로딩 이미지'를 검색하거나, ICONS8( https://icons8.com/icons/set/loading)같은 사이트에서 다양한 로딩 이미지를 무료로 다운로드할 수 있으며, '로딩 이미지'를 검색하여 원하는 이미지를 찾을 수도 있습니다.

Loading Icons, Logos, Symbols – Free Download PNG, SVG

icons8.com

이미지 이름 설정의 중요성

다운로드한 이미지 파일의 이름을 "loading"으로 변경하는 것이 좋습니다.

이는 설정 과정에서의 혼란을 방지하고, 추후 유지보수를 용이하게 합니다.

티스토리에 로딩 이미지 업로드하기

선택한 로딩 이미지는 티스토리 블로그에 업로드해야 합니다. 티스토리 관리자 페이지에서 "꾸미기 > 스킨 편집 > HTML 편집"으로 이동한 후, "파일 업로드" 기능을 통해 이미지를 업로드합니다.

"HTML 편집"에서 "파일 업로드" 기능을 사용하여 로딩 이미지를 업로드합니다.

티스토리 파일 업로드

로딩 화면 구현을 위한 스크립트 적용

로딩 이미지가 준비되면, 다음으로는 해당 이미지를 활용하여 로딩 화면을 구현하는 코드를 작성해야 합니다.

HTML 편집기에서 아래 코드를 페이지의 태그 바로 위에 추가하세요.

티스토리 블로그 사이트 부드러운 로딩 화면 소스코드 위치

저는 소스 가장 아래쪽에 만들어주었습니다.

다음은 순수 자바스크립트와 CSS를 사용하여 부드러운 fade out 효과와 함께 로딩 화면을 구현하는 방법입니다

자바스크립트 소스

<script type="text/javascript">
window.onload = function() {
    var loading = document.getElementById('loading');
    
    // Fade out 효과
    loading.style.opacity = 0;

    // Fade out 완료 후 로딩 화면 숨김
    setTimeout(function() {
        loading.style.display = 'none';
    }, 500); // CSS transition 시간과 동일하게 설정
};
</script>

CSS 소스

<style type="text/css">
#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    opacity: 1; /* 초기 투명도 설정 */
    transition: opacity 0.5s ease-out; /* 투명도 변화에 대한 transition 설정 */
    z-index: 99;
}

#loading > img {
    max-width: 100px;
    max-height: 100px;
}
</style>

html 소스

<!-- Loading Code Start -->
<div id="loading">
    <img src="./images/loading.gif" alt="loading">
</div>
<!-- Loading Code End -->

적용 결과 확인하기

설정을 마친 후, 티스토리의 메인 페이지나 개별 게시글을 열어 로딩 화면이 정상적으로 적용되었는지 확인합니다.

티스토리 블로그 사이트 부드러운 로딩 화면 완료

잘 적용이 되었네요.

추가 참고 자료

설정 과정을 나중에 참조하거나 다른 사용자와 공유할 수 있도록, 사용한 이미지와 코드를 파일로 저장해두는 것이 좋습니다.

아래는 완성된 소스 코드입니다. 이 코드는 티스토리 블로그에 로딩 화면을 추가하는 데 사용할 수 있으며, 페이지의 모든 콘텐츠가 로드될 때까지 로딩 이미지를 표시합니다.

<!-- Loading Code Start -->
<div id="loading">
    <img src="./images/loading.gif" alt="loading">
</div>

<style type="text/css">
#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    z-index: 99;
}
#loading > img {
    max-width: 100px;
    max-height: 100px;
}
</style>

<script type="text/javascript">
window.onload = function() {
    var loading = document.getElementById('loading');
    loading.style.opacity = 0;
    setTimeout(function() {
        loading.style.display = 'none';
    }, 500);
};
</script>
<!-- Loading Code End -->

이 코드를 티스토리 블로그의 HTML 편집기 내 body 태그 바로 위에 추가합니다.

위 소스코드는 아래 파일을 다운로드 받으셔도 됩니다.

티스토리 블로그 사이트 부드러운 로딩 화면 추가하기 및 소스코드.zip

0.00MB

결론

로딩 화면은 티스토리 블로그의 사용자 경험을 크게 개선할 수 있는 간단하면서도 효과적인 방법입니다. 방문자가 블로그의 모든 콘텐츠가 완전히 로드될 때까지 기다리는 동안 긍정적인 인상을 줄 수 있으며, 이는 방문자의 만족도를 높이고 사이트에 머무는 시간을 연장할 수 있습니다. 위에서 소개한 방법을 통해 여러분의 티스토리 블로그에 매력적이고 효과적인 로딩 화면을 추가해 보세요.

구글 서치 콘솔 특정 조건 충족 시에만 URL 색인 생성 오류 해결 가이드

멱군 — Fri, 23 Feb 2024 15:56:26 +0900

구글 서치 콘솔에서 "특정 조건이 충족되는 경우에만 URL의 색인이 생성됩니다."라는 메시지가 떴을 때 당황하게 됩니다. 좋은 콘텐츠를 작성했고, 페이지 뜨는 속도도 빠른데 왜 뜨는것일까요? 이는 구글이 당신의 웹 페이지를 색인 생성에 포함시키기 위한 몇 가지 기준을 충족시키지 못했다는 것을 의미합니다. 이 문제를 해결하기 위해서는 구글이 웹 페이지를 색인으로 만들기 위해 요구하는 조건들을 확인하고, 해당 조건들을 만족시켜야 합니다. 다음은 이 오류 메시지가 나타날 수 있는 몇 가지 일반적인 원인과 해결 방법입니다.

1. 특정 조건이 충족되는 경우에만 URL의 색인이 생성된다는 경고 메세지 받음

저는 글을 작성하고 구글서치콘솔에서 수동으로 글을 등록합니다. 사이트맵을 등록하면 자동으로 되지만 오래걸리거든요. 그래서 조금이라도 더 빨리 검색에 등록이 되라고 수동으로 넣어주고 있습니다. 그런데 "특정 조건이 충족되는 경우에만 URL의 색인이 생성됩니다." 라는 경고가 떴습니다.

분명 글도 잘썼고, 글을 열었을 때 페이지에도 이상이 없었습니다.

과연, 어떻게 이 문제를 해결할 수 있을까요?

아래의 방법으로 차근차근 해보면서 결국 해결했답니다.

노하우를 공개합니다.

2. 해결 방법

1. 사이트맵 제출 및 업데이트

원인

구글이 웹사이트의 모든 페이지를 찾지 못하는 경우, 일부 페이지가 색인에서 누락될 수 있습니다.

해결 방법

사이트맵을 생성하고 구글 서치 콘솔을 통해 다시 제출하세요.

또한, 웹사이트에 새로운 페이지가 추가되거나 기존 페이지가 변경될 때마다 사이트맵을 업데이트해야 합니다.

2. robots.txt 파일 검사

원인

robots.txt 파일이 구글 봇이 페이지를 크롤링하는 것을 방지하고 있을 수 있습니다.

해결 방법

robots.txt 파일을 검사하여 구글 봇이 중요한 페이지를 크롤링할 수 있도록 허용하세요.

구글 서치 콘솔의 'robots.txt 테스터' 도구를 사용하여 파일을 검사할 수 있습니다.

3. 메타 태그 및 HTTP 헤더

원인

페이지에 noindex 메타 태그나 HTTP 헤더가 설정되어 있어서 색인 생성이 차단될 수 있습니다.

해결 방법

noindex 메타 태그나 HTTP 헤더를 제거하거나 수정하여 페이지가 색인될 수 있도록 하세요.

4. 페이지 품질과 콘텐츠

원인

콘텐츠의 품질이 낮거나, 중복된 콘텐츠가 많은 경우 구글이 페이지를 색인에서 제외할 수 있습니다.

해결 방법

고품질의 독창적인 콘텐츠를 제공하세요.

사용자에게 가치를 제공하고, 중복 콘텐츠를 피하세요.

5. 구글 서치 콘솔의 URL 검사 도구 사용

원인

특정 페이지가 왜 색인 생성에서 제외되었는지 구체적인 원인을 파악하기 어려울 수 있습니다.

해결 방법

구글 서치 콘솔의 'URL 검사' 도구를 사용하여 문제가 있는 URL을 검사하세요.

이 도구는 페이지의 크롤링, 렌더링, 색인 생성 상태에 대한 정보를 제공하며, 문제를 해결하기 위한 구체적인 조언을 제공할 수 있습니다.

6. 모바일 친화성

원인

웹사이트가 모바일 기기에서 제대로 표시되지 않는 경우, 구글이 모바일 검색 결과에서 페이지를 제외할 수 있습니다.

해결 방법

모바일 친화적인 디자인을 적용하고, 모바일 성능을 개선하세요.

구글 서치 콘솔의 '모바일 사용성' 보고서를 사용하여 모바일 친화성 문제를 확인할 수 있습니다.

7. 될때까지 새로고침

위의 방법으로도 다했지만 되지 않았을 때, 저는 그냥 계속 다시 색인 요청을 시도했습니다.

구글서치콘솔 실제 URL 테스트

그렇게 몇번을 시도하고, 얼마의 시간이 지난 다음 다시 시도를 계속 하다보니 결국 색인 생성 요청에 성공하였습니다.

구글서치콘솔 색인 생성 요청됨

정확한 원인은 알 수 없지만, 계속 시도를 해보니 결국은 되더라구요.

결론

이와 같은 문제 해결 방법을 통해 웹사이트의 페이지들이 구글 색인에 포함될 확률을 높일 수 있습니다.

저는 마지막 방법으로 해결했답니다.

문제 해결 후에는 변경 사항이 구글에 반영되기까지 시간이 소요될 수 있으므로, 인내심을 가지고 기다려야 합니다.

함께보면 좋은글

구글서치콘솔 RSS 제출 가져올 수 없음 해결경험공유

구글서치콘솔에 RSS를 등록하셨나요? 구글 서치 콘솔에서 RSS 등록 시 발생하는 `가져올 수 없음` 오류를 해결하는 방법을 알아보겠습니다. 많은 분들이 티스토리 블로그를 개설 후 검색 노출에

devit.koreacreatorfesta.com

티스토리를 구글서치와 네이버서치 사이트맵 등록하기

devit.koreacreatorfesta.com

비주얼스튜디오코드(VSCode)에서 웹브라우저 실행하기

멱군 — Fri, 23 Feb 2024 14:06:44 +0900

Visual Studio Code(VSCode)는 다양한 확장 기능을 통해 개발 환경을 효율적으로 개선할 수 있는 훌륭한 도구입니다. 웹 개발 시 HTML 파일을 브라우저에서 빠르게 열어보고 싶은 경우가 많은데, 이를 손쉽게 해주는 확장 기능 중 하나가 "Open in Browser"입니다. 이 확장 기능을 설치하면 단축키를 사용하여 현재 작업 중인 HTML 파일을 즉시 웹 브라우저에서 열 수 있습니다.

설치 방법

1. VSCode 마켓플레이스 접속

VSCode 마켓플레이스

VSCode에서 확장(Extension) 탭을 열거나, Ctrl+P(Command+P on Mac)를 누른 후 ext install을 입력하여 마켓플레이스에 접근합니다.

2. 확장 기능 검색 및 설치

VSCode에서 브라우저열기 설치

"Open in Browser"을 검색창에 입력하고 검색 결과 중 해당 확장 기능을 찾아 설치합니다.

사용 방법

1. 일반적인 사용

HTML 파일이 열려 있는 상태에서 Alt + B를 누르면 기본 웹 브라우저에서 현재 파일이 열립니다.

2. 브라우저 선택하여 열기

VSCode에서 단축키로 브라우저열기

Alt + Shift + B를 누르면 사용 가능한 브라우저 목록이 표시되고, 여기서 원하는 브라우저를 선택하여 파일을 열 수 있습니다.

3. 마우스오른쪽버튼으로 열기

VSCode에서 마우스 클릭하여 브라우저열기

파일에서 마우스 오른쪽 버튼을 클릭하면 "Open In Default/Other Browser" 항목이 나옵니다. 각 항목을 선택하면 원하는 브라우저로 실행 할 수 있습니다.

이 확장 기능을 사용하면 파일 탐색기를 열고 파일을 수동으로 찾아 브라우저로 드래그하는 번거로움 없이, VSCode 내에서 바로 HTML 파일을 웹 브라우저에서 빠르게 확인할 수 있습니다. 특히 웹 페이지 디자인이나 프론트엔드 개발 작업을 할 때 시간을 절약해주는 유용한 도구입니다.

주의사항

단축키 충돌: 다른 확장 기능이나 VSCode 자체 단축키와 충돌할 수 있으니, 충돌 발생 시 설정에서 단축키를 변경해 사용하세요.
브라우저 호환성: 기본적으로 시스템의 기본 브라우저를 사용하지만, 특정 브라우저를 선호하는 경우 설정에서 변경할 수 있습니다.

결론

"Open in Browser" 확장 기능은 웹 개발자들에게 매우 유용한 도구로, VSCode를 사용하는 개발자라면 반드시 설치해두면 좋을 확장 기능 중 하나입니다. HTML 파일 뿐만 아니라 다른 웹 파일들도 빠르게 브라우저에서 확인할 수 있어 개발 효율성을 크게 높여줍니다.

구글서치콘솔 RSS 제출 가져올 수 없음 해결경험공유

멱군 — Tue, 20 Feb 2024 11:11:06 +0900

구글서치콘솔에 RSS를 등록하셨나요? 구글 서치 콘솔에서 RSS 등록 시 발생하는 `가져올 수 없음` 오류를 해결하는 방법을 알아보겠습니다. 많은 분들이 티스토리 블로그를 개설 후 검색 노출에 어려움을 겪고 계신데, 특히 네이버에서는 더욱 그렇습니다. 인터넷을 뒤져보아도 명확한 해결책을 찾기 어려운 경우가 많죠. 저 또한 비슷한 문제가 발생했답니다. 하지만 이 글에서 제시하는 방법으로 성공했답니다. 그 방법을 공유할께요.

구글 서치 콘솔에서 RSS를 제출해야 하는 이유

티스토리 블로그에 글을 게시하면, 구글을 포함한 여러 검색 엔진에서 해당 글이 검색되어야 합니다.

구글 서치 콘솔에서 RSS 사이트맵을 제출하면, 구글의 검색 로봇이 사이트의 정보를 탐색하여 검색 결과에 반영합니다.

이는 블로그 운영에 있어 필수적인 절차입니다.

구글 서치 콘솔에서 RSS 제출하기

구글 서치 콘솔에 접속 후, 왼쪽 메뉴에서 Sitemaps를 클릭합니다.

새 사이트맵 추가에 블로그 URL을 https://사이트주소/rss 형식으로 입력하고 제출합니다.

정상적으로 제출되면 상태에 `정상`으로 표시됩니다.

RSS 제출 `가져올 수 없음` 해결 방법

제출한 RSS 사이트맵이 가져올 수 없음으로 표시될 경우, 여러 시도 끝에 해결할 수 있었습니다.

다음은 저의 해결 과정입니다

1. 티스토리 블로그 Google Search Console 계정 연결하기

티스토리 플러그인 구글서치콘솔

티스토리 블로그 관리 페이지에서 플러그인 메뉴를 통해 Google Search Console 계정을 연결합니다.

티스토리 플러그인 구글서치콘솔 계정연

계정연결하기로 간단하게 연결 할 수 있습니다.

2. 구글 서치 콘솔에 블로그 등록 확인

계정 연결 후, 구글 서치 콘솔에서 블로그가 올바르게 등록되었는지 확인합니다.

RSS 제출 성공

사이트맵 성공

첫 번째 경우

구글 서치 콘솔에서 처음으로 RSS를 제출하는 경우, https://내블로그주소/rss를 입력하면 상태에 `성공`으로 나타납니다.

두 번째 경우

사이트맵은 등록했으나 RSS만 제출하지 않은 경우, 이미 등록된 블로그 주소에 /rss를 추가하고 제출하면 "성공"으로 나타납니다.

그리고 무엇보다 일자가 어느정도 소요됩니다. 새롭게 등록하는 도메인의 블로그일 경우, 3일에서 일주일정도 걸린답니다.

가져올 수 없음이라는 단어에서 당황하지 않고 조금 기다려 주는것도 좋을거 같아요.

결론

이 과정을 통해 RSS 제출 문제를 해결할 수 있었고, 이 방법이 인터넷상에 잘 알려져 있지 않아 공유하게 되었습니다.

여러분도 이 방법을 통해 비슷한 문제를 해결하시길 바랍니다.

함께보면 좋은글

티스토리를 구글서치와 네이버서치 사이트맵 등록하기

devit.koreacreatorfesta.com

모바일 홈 화면 아이콘 최적화 다양한 기기에서 완벽하게 표시되는 아이콘 만들기

멱군 — Tue, 20 Feb 2024 10:14:53 +0900

모바일 기기의 홈 화면 아이콘 크기는 기기의 운영 체제(OS)와 화면 해상도에 따라 달라질 수 있습니다. 일반적으로, 웹 개발자들은 다양한 크기의 아이콘을 준비하여 다수의 기기와 호환될 수 있도록 합니다. 아래는 주요 모바일 OS에서 권장하는 아이콘 크기입니다

Android

192x192px

Android 기기에서 권장하는 기본 아이콘 크기입니다.

이 크기는 대부분의 안드로이드 기기에서 홈 화면에 추가할 때 적절한 해상도를 제공합니다.

144x144px, 96x96px, 72x72px, 48x48px

다른 해상도를 지원하기 위한 추가 크기입니다.

다양한 해상도의 기기에서 적절한 아이콘을 표시하기 위해 사용됩니다.

iOS (Apple)

180x180px (iPhone)

iOS 8 이후 버전에서 iPhone의 홈 화면 아이콘으로 사용됩니다.

167x167px (iPad Pro)

iPad Pro에서 사용되는 아이콘 크기입니다.

152x152px (iPad, iPad mini)

iOS 7 이후 버전에서 iPad와 iPad mini의 홈 화면 아이콘으로 사용됩니다.

웹 애플리케이션 모바일 기기 홈 화면 아이콘 설정

웹 애플리케이션에서 모바일 기기의 홈 화면 아이콘을 설정할 때는, 다음과 같은 HTML 태그를 사용하여 다양한 크기의 아이콘을 지정할 수 있습니다

<link rel="icon" sizes="192x192" href="/path/to/icon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/path/to/icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icon-152x152.png">

이와 같이 다양한 크기의 아이콘을 준비하고 선언해 두면, 다양한 해상도와 기기에서 웹사이트를 홈 화면에 추가할 때 최적의 아이콘을 사용할 수 있게 됩니다.

또한, 웹 애플리케이션 매니페스트 파일(manifest.json)에도 아이콘에 대한 정보를 명시하여, 안드로이드 기기에서 웹 앱을 설치할 때 사용되는 아이콘을 정의할 수 있습니다.

결론

모바일 기기의 홈 화면 아이콘을 최적화하는 것은 사용자 경험의 중요한 부분입니다.

다양한 해상도와 기기를 고려하여 여러 크기의 아이콘을 준비하고 적절하게 설정함으로써, 사용자는 어떤 기기에서든지 웹사이트나 앱의 아이콘을 선명하고 적절한 크기로 볼 수 있습니다.

이는 웹사이트나 앱의 전문성과 사용자 친화성을 높이는 데 기여합니다.

따라서, 개발자들은 모바일 기기 홈 화면 아이콘에 대한 권장 사항을 따르고, 이를 통해 사용자의 모바일 UX/UI를 최적화 해보세요.

Git 설치 및 기본 사용법

멱군 — Fri, 16 Feb 2024 17:41:15 +0900

버전 관리 시스템인 Git의 설치 방법과 기본적인 사용법에 대해 알아보겠습니다. Git은 개발 프로젝트에서 소스 코드의 변경 사항을 추적하고 여러 명의 개발자 간 협업을 용이하게 하는 데 필수적인 도구입니다.

Git 설치하기

1. Git 다운로드

Git 공식 웹사이트로 이동합니다.

Git - Downloads

Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp

git-scm.com

운영체제에 맞는 버전을 선택해 다운로드합니다.

Windows 사용자는 "Standalone Installer"를, Portable 버전이 필요한 경우 "Portable" 옵션을 선택합니다.

2. 설치 프로세스

다운로드한 설치 파일을 실행합니다.

설치 경로와 함께 추가적으로 설치할 Components를 선택합니다.

기본 설정으로 설치하는 것을 추천하지만, 필요에 따라 다음 옵션을 고려할 수 있습니다

Additional icons: 바탕화면 아이콘 생성.
Windows Explorer integration: 'Git Bash Here'와 'Git GUI Here' 옵션 추가.
Git LFS: 대용량 파일 지원.
File Association: .git 구성 파일과 .sh 스크립트 파일 관련 설정.

3. 설정 선택

Git Bash와 기본 에디터, PATH 환경, SSH 및 HTTP 설정, 줄 바꿈 옵션, 터미널 선택 등을 구성합니다.

각 설정은 설치 환경과 사용자의 선호에 따라 달라질 수 있으며, 대부분의 사용자에게는 기본 설정이 적합합니다.

저장공간설정

Let Git decide
- git이 기본 분기 이름(master)을 사용
Override the default branch name for new repositories
- 새 레포지토리의 기본 업로더 이름을 작성합니다.

보통 혼자 진행할 땐 master라서 Let Git decide에 체크하고 진행합니다.

PATH 환경설정

Use Git from git bash only
- Git bash의 Git만 이용
Git from the command line and also frm 3rd-party software
- 명령줄에서 Git 및 타사 소프트웨어에서도 Git 제공
Use git and optional unix tools from the command prompt
- 명령 프롬프트에서 git 및 선택적 유닉스 도구 사용

ssh 실행 도구

Use bundled openssh
- Git에서 제공되는 opensh 번들 사용
Use (Tortoise)Plink
- PuTTy와 같은 툴을 이용해서 접속 연결
Use external openssh
- 외부 opensh 사용

HTTP 설정

Use the OpenSSL library
- OpenSSL 라이브러리 사용
Use the native Windows Secure Channerl library
- 기본 Windows 보안 채널 라이브러리 사용
- 윈도우즈 인증서 저장소를 사용하여 검증

줄 바꿈 옵션

Checkout Windows-style, commit Unix-style line endings
- Git이 저장소에서 파일을 체크아웃할 때, Windows 스타일의 줄 바꿈 문자(CRLF)를 Unix 스타일의 줄 바꿈 문자(LF)로 자동변환
- Git이 커밋할 때, Unix 스타일의 줄바꿈 문자(LF)를 사용하여 커밋
Checkout as-is, commit Unix-xtyle line endings
- Git이 체크아웃할 때 줄바꿈 문자를 변환하지 않음
- Git이 커밋할 때 Unix 스타일의 줄 바꿈 문자(LF)를 사용하여 커밋
Checkout as-is, commit as-is
- Git이 체크아웃할 때 줄 바꿈 문자를 변환하지 않음
- Git이 커밋할 때 줄바꿈 문자 그대로 커밋

터미널옵션

Use MinTTY(the default terminal of MSYS2)
- Git Bash를 실행할 때, MSYS2 프로젝트에서 개발한 MinTTY 터미널 애뮬레이터를 사용
- MinTTY는 리눅스와 유사한 터미널 환경 제공
Use Windows' default console window
- Git Bash를 실행할 때, 윈도우 기본 콘솔 창을 사용

git pull의 기본 동작 선택

git pull 은 원격 저장소에서 변경 사항을 가져와 로컬 브랜치에 병합하는 명령어입니다.

fast-forward or merge
- fast-forward가 가능한 경우, fast-forward 병합을 수행하고, 그렇지 않은 경우 merge 병합 수행
Rebase
- 'git pull --rebase'를 실행할 때, Git은 원격 저장소에서 변경 사항을 가져온 후, 로컬 브랜치의 이력을 원격 브랜치의 이력 위에 쌓아 올리는 작업(rebase) 수행
Only ever fast-forward
- 'git pull --ff-only'를 실행할 때, Git은 fast-forward 가능한 경우에만 fast-forward 병합 수행
- 그렇지 않은 경우, 병합 수행 x, 오류 발생

fast-forward는 Git에서 브랜치 병합을 수행할 때, 브랜치 이력을 간단히 이동시키는 방법 merge는 두 개 이상의 브랜치를 병합하는 작업 자격 증명 도우미를 선택합니다.

자격 증명 도우미

자격 증명 도우미는 Git을 사용할 때 인증 정보를 관리하는 도구입니다.

Git Credential Manager
- 자격 증명 도우미 사용
- 인증 정보를 한 번 입력하면 그 이후로 자동으로 인증 정보를 사용하여 Git 저장소에 접근
None
- 자격 증명 도우미 사용 안함
- Git에서 인증 정보를 입력할 때마다 매번 사용자 이름과 비밀번호를 입력

옵션 추가

Enable file system caching
- Git이 파일 시스템 캐시를 사용하는 옵션
- Git이 파일을 읽고 쓰는 속도가 더 향상
Enable symbolic links
- Git이 심볼릭 링크를 지원하는 옵션
- 심볼릭 링크는 파일이나 디렉토리를 가리키는 포인터
- 사용하지 않으면 Git이 심볼릭 링크를 저장소에 저장하지 않고 대신 링크 대상 파일의 내용 저장
- 링크 대상 파일이 변경되었을 때 Git에서 적절하게 대처할 수 없으므로, 심볼릭 링크를 사용하는 경우 이 옵션 활성화

외부옵션추가

Enable experimental support for pseudo consoles
- Git이 윈도우 환경에서 가상 콘솔(pseudo console) 지원
- 가상 콘솔은 프로그램과 터미널 간의 인터페이스로, 커맨드 라인 애플리케이션과 터미널 간의 상호작용이 가능
Enable experimental built-in file system monitor
- Git이 내장 파일 시스템 모니터(experimental build-in file system monitor) 지원
- 파일 시스템 모니터는 파일 시스템의 변경 사항을 감지하여 Git 작업을 자동으로 업데이트할 수 있는 기능 제공

설치완료

설정하는게 많아보이지만 대 부분은 next 버튼을 눌러서 설치를 진행하면 됩니다.

Git 기본 사용법

Git이 설치되고 나면 간단하게 Git을 사용하고자 하는 폴더에서 마우스 오른쪽 버튼을 눌러서 사용할 수 있습니다.

팝업메뉴 중에 Git Bash here을 선택하면 Git 창이 뜹니다.

여기서 Git clone 와 같은 명령을 작성해서 프로젝트를 다운받을 수 있습니다.

기본적인 Git 명령어

1. Git 버전 확인

git --version

설치가 제대로 되었는지 확인합니다.

2. 사용자 설정

Git을 사용하기 전에, 커밋에 서명하기 위한 사용자 이름과 이메일 주소를 설정해야 합니다.

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

3. 새 저장소 초기화

새 프로젝트 폴더에서 Git 저장소를 초기화하려면, 해당 폴더에서 Git Bash를 열고 다음 명령어를 입력합니다.

git init

4. 원격 저장소 복제

GitHub 또는 다른 Git 호스팅 서비스에 있는 프로젝트를 로컬에 복제하려면 다음 명령어를 사용합니다.

git clone https://github.com/username/repository.git

5. 변경 사항 커밋

파일 변경 사항을 스테이징 영역에 추가하고 커밋합니다.

git add .
git commit -m "Initial commit"

6. 원격 저장소 연결

GitHub 등의 원격 저장소와 연결하려면, 먼저 원격 저장소를 생성하고 다음 명령어로 로컬 저장소와 연결합니다.

git remote add origin <repository-URL>

7. 변경 사항 푸시

로컬 커밋을 원격 저장소에 푸시합니다.

git push -u origin master

결론

Git은 이보다 훨씬 많은 기능을 제공하지만, 이 글에서 소개한 기본적인 명령어들은 Git을 시작하는 데 필요한 기초를 마련해 줍니다. Git의 강력한 기능을 더 깊이 탐구하고 싶다면, 공식 문서나 온라인 튜토리얼을 참조하세요.

삼성전자 노트북 포맷 후 드라이버 설치 가이드 (Samsung Update 사용법)

멱군 — Thu, 15 Feb 2024 16:13:23 +0900

노트북을 포맷한 후 가장 중요한 단계 중 하나는 드라이버를 올바르게 설치하는 것입니다. 삼성전자 노트북 사용자라면, Samsung Update를 통해 필요한 모든 드라이버와 소프트웨어를 쉽게 설치할 수 있습니다. 본 가이드에서는 삼성 노트북을 새롭게 설정할 때 필요한 드라이버와 소프트웨어 업데이트 과정을 단계별로 설명합니다.

1. Samsung Update 다운로드

먼저, 삼성전자 서비스 홈페이지에 접속하여 '삼성 업데이트' 프로그램을 다운로드합니다. 홈페이지 하단으로 스크롤하여 해당 프로그램을 찾을 수 있습니다.

다운로드 자료실 | 스스로해결 | 삼성전자서비스

다운로드 자료실 원하시는 정보를 못 찾으셨다면 아래 서비스를 이용해보세요. 문제해결이 되지 않거나 어려우시다면 인공지능 채팅 로봇으로 상담을 받아보시기 바랍니다. 무상 보증기간 이

www.samsungsvc.co.kr

다운로드 자료실에서 파란박스안에 노트북 모델명을 입력합니다.

삼성전자 서비스 홈페이지 다운로드 자료실

제가 쓰고 있는 노트북은 삼성노트북펜S모델이랍니다.

모델명은 NT950SBE-X716A이기 때문에 모델명을 입력해서 검색해보았습니다.

검색해보니 삼성업데이트 프로그램이 두가지가 나왔습니다.

삼성업데이트 프로그램 선택

윈도우 버전에 맞춰서 각각을 다운로드 받아서 진행하면 좋을거 같습니다.

2. 윈도우스토어앱(Windows Store App)에서 다운로드

위처럼 삼성전자를 찾아서 들어가도 되고, 저는 윈도우 11로 업그레이드를 했기 때문에 윈도우스토어앱에서 진행을 해도 됩니다.

Samsung Update - Microsoft Store 공식 앱

Samsung Update는 Samsung PC에 최적화된 최신의 바이오스, 드라이버 및 어플리케이션을 쉽게 설치하거나 업데이트할 수 있도록 도와주는 프로그램입니다. * Samsung Update는 Windows 10 S를 지원하지 않습니

apps.microsoft.com

설치 과정

설치는 간단합니다. 파일을 다운로드 한 후 설치 프로그램을 실행합니다.

설치 마법사의 지시에 따라 설치를 완료합니다.

3. Samsung Update 실행

설치가 완료된 후, 시작 메뉴에서 'Samsung Update'를 검색하여 실행합니다.

윈도우11에서 삼성업데이트 검색

첫 실행 시, Samsung App에서 추가 설치가 필요할 수 있으며, 화면의 안내에 따라 진행합니다.

삼성 모델과 관련된 모든 프로그램을 선택해서 다운받을 수 있습니다.

추가 패키지 설치

만약 설치해야 할 프로그램이 바로 뜨지 않는다면, Samsung Update 실행 중 추가 패키지 설치가 요구될 수 있습니다.

필요한 모든 추가 패키지를 설치하여 프로그램이 원활히 작동하도록 합니다.

4. 드라이버 및 소프트웨어 업데이트

Samsung Update 내에서 '모두 업데이트' 옵션을 선택하여 노트북에 필요한 모든 드라이버와 소프트웨어를 자동으로 업데이트합니다.

삼성업데이트 프로그램 실행화면

업데이트 과정에서 시스템이 여러 번 재부팅될 수 있으니, 과정이 완전히 끝날 때까지 기다립니다.

5. 업데이트 완료

모든 업데이트가 완료되면, 삼성전자 노트북이 최신 상태로 설정됩니다.

이제 최신 드라이버와 소프트웨어를 통해 최적의 성능을 경험할 수 있습니다.

결론

삼성전자 노트북을 포맷한 후, Samsung Update를 사용하여 드라이버와 필요한 소프트웨어를 설치하는 과정은 매우 간단합니다. 이 가이드를 통해 단계별로 쉽게 따라 할 수 있으며, 이로써 노트북의 성능을 최적화하고 최신 상태를 유지할 수 있습니다. 삼성 노트북 사용자라면 누구나 손쉽게 실행할 수 있는 이 과정을 통해, 노트북을 더욱 효율적으로 관리하고, 안정적인 사용 환경을 만들 수 있습니다.

WPF 프로그램 시작 경로 알아내는 방법 3가지

멱군 — Wed, 7 Feb 2024 01:43:35 +0900

WPF(Windows Presentation Foundation) 애플리케이션에서 프로그램의 시작 경로를 확인하는 것은 여러 상황에서 유용할 수 있습니다. 예를 들어, 응용 프로그램과 함께 배포되는 파일을 참조하거나 로컬 데이터베이스와 상호 작용할 때 시작 경로를 알아야 할 수 있습니다. WPF 애플리케이션에서 시작 경로를 얻는 방법 3가지를 알아보도록 하겠습니다.

1. System.Reflection 네임스페이스 사용

System.Reflection 네임스페이스의 Assembly 클래스를 사용하여 실행 파일의 경로를 얻을 수 있습니다. Assembly.GetExecutingAssembly() 메서드는 현재 실행 중인 어셈블리의 인스턴스를 반환하며, Location 속성은 파일 시스템 경로를 포함합니다.

using System.Reflection;

string startupPath = Assembly.GetExecutingAssembly().Location;

Location 속성은 어셈블리(응용 프로그램)의 전체 경로를 반환합니다. 디렉터리 경로만 필요한 경우 System.IO.Path 클래스의 GetDirectoryName 메서드를 사용할 수 있습니다.

using System.IO;

string directoryPath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);

2. AppDomain.CurrentDomain.BaseDirectory 사용

AppDomain.CurrentDomain.BaseDirectory 속성을 사용하면 현재 실행 중인 애플리케이션의 기본 디렉터리를 얻을 수 있습니다. 이 방법은 실행 파일이 있는 디렉터리의 경로를 직접 반환합니다.

string baseDirectory = AppDomain.CurrentDomain.BaseDirectory;

3. Environment.CurrentDirectory 사용

Environment.CurrentDirectory 속성은 현재 작업 디렉터리의 경로를 반환합니다. 이 값은 프로그램 실행 중에 변경될 수 있으므로, 일반적으로 애플리케이션의 시작 경로를 얻는 데 사용되지는 않지만, 특정 경우에 유용할 수 있습니다.

string currentDirectory = Environment.CurrentDirectory;

결론

이 중에서 어떤 방법을 사용할지는 애플리케이션의 요구 사항과 상황에 따라 달라질 수 있습니다. 일반적으로 Assembly.GetExecutingAssembly().Location 또는 AppDomain.CurrentDomain.BaseDirectory를 사용하는 것이 WPF 애플리케이션에서 시작 경로를 얻는 데 가장 일반적인 방법입니다.

함께보면 좋은글

[C#] 프로그램 시작 경로 알기 2가지

C# 프로그래밍을 하다 보면, 프로그램이 실행되는 현재 경로를 알아야 할 필요가 종종 있습니다. 이는 로컬 파일에 접근하거나, 상대 경로를 사용하여 리소스를 로드할 때 유용합니다. 윈도우 폼

devit.koreacreatorfesta.com

[WPF] BitmapImage로 이미지 파일(image file load) 읽기

멱군 — Wed, 7 Feb 2024 00:35:48 +0900

Windows Presentation Foundation(WPF)는 .NET에서 사용되는 그래픽 시스템으로, 다양한 UI 요소를 쉽게 만들고 관리할 수 있게 해줍니다. WPF에서 이미지를 표시하는 것은 매우 일반적인 작업 중 하나입니다. 이번 포스트에서는 WPF 애플리케이션에서 BitmapImage를 사용하여 이미지 파일을 로드하고 Image 컨트롤에 표시하는 방법을 소개합니다. 이 방법은 UI에 이미지를 통합하고자 할 때 유용하게 사용될 수 있습니다.

1. WPF 프로젝트 생성 및 Image 컨트롤 추가

먼저 Visual Studio에서 새로운 WPF 애플리케이션 프로젝트를 생성합니다. 그리고 MainWindow.xaml 파일에 Image 컨트롤을 추가합니다. 이 컨트롤은 로드된 이미지를 표시하는 데 사용됩니다.

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Image Loader" Height="450" Width="800">
    <Grid>
        <Image Name="LoadedImage" Stretch="Uniform" />
    </Grid>
</Window>

2. BitmapImage를 사용하여 이미지 로드

MainWindow.xaml.cs 파일에 이미지를 로드하고 Image 컨트롤의 Source 속성에 할당하는 코드를 추가합니다. 이를 위해 BitmapImage 클래스를 사용하며, 이미지 파일의 경로는 해당 시스템에 맞게 지정해야 합니다.

using System;
using System.Windows;
using System.Windows.Media.Imaging;
using System.IO; // FileInfo를 사용하기 위해 추가

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            string imagePath = @"C:\path\to\your\image.jpg"; // 이미지 파일 경로 지정
            LoadedImage.Source = Imgload(imagePath);
        }

        private BitmapImage Imgload(string strpath)
        {
            try
            {
                FileInfo fio = new FileInfo(strpath);
                if (fio.Exists)
                {
                    BitmapImage img = new BitmapImage();

                    img.BeginInit();
                    img.CacheOption = BitmapCacheOption.OnLoad;
                    img.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
                    img.UriSource = new Uri(strpath, UriKind.RelativeOrAbsolute);
                    img.EndInit();

                    if (img.CanFreeze) img.Freeze();

                    return img;
                }
                else
                    return null;
            }
            catch
            {
                return null;
            }
        }
    }
}

Imgload("이미지파일전체경로.확장자");

이 함수를 이용해서 이미지를 불러올 수 있습니다.

함수안에 BitmapImage를 생성하는 순서를 지켜줘야 합니다.

img.BeginInit();
- 이미지 객체의 초기화를 시작합니다.
- BeginInit 메서드는 BitmapImage의 여러 속성을 설정하기 전에 호출되어야 합니다.
img.CacheOption = BitmapCacheOption.OnLoad;
- 이미지의 캐시 옵션을 설정합니다.
- BitmapCacheOption.OnLoad는 이미지를 메모리에 캐시하며, 이미지가 로드되는 즉시 캐시됩니다.
- 이는 이미지 파일이 로드된 후에는 원본 파일에 대한 의존성이 없어지도록 합니다.
img.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
- 이미지 생성 옵션을 설정합니다.
- BitmapCreateOptions.IgnoreImageCache는 이미지를 로드할 때 시스템의 이미지 캐시를 무시하고 항상 파일로부터 이미지를 로드하도록 지시합니다.
- 이는 이미 동일한 URI로 로드된 이미지가 있더라도 새로운 이미지를 로드하고자 할 때 유용합니다.
img.UriSource = new Uri(strpath, UriKind.RelativeOrAbsolute);
- 로드할 이미지의 파일 경로를 지정합니다.
- Uri 객체는 파일의 경로(상대 또는 절대 경로)를 나타내며, strpath 변수에는 이미지 파일의 경로가 포함됩니다.
img.EndInit();
- 이미지 객체의 초기화를 완료합니다.
- 모든 속성 설정 후 EndInit 메서드를 호출하여 초기화 과정을 마무리합니다.
if (img.CanFreeze) img.Freeze();
- Freeze 메서드를 호출하여 이미지 객체를 변경 불가능하게 만듭니다.
- CanFreeze 속성으로 객체가 Freeze 가능한지 확인한 후, Freeze를 호출합니다.
- 이는 스레드 안전성을 보장하고, 성능을 최적화하기 위해 사용됩니다.
- Freeze된 객체는 다른 스레드에서 안전하게 사용할 수 있으며, 변경할 수 없게 됩니다.

저는 프로그램 경로에 멱군로고파일을 불러오도록 프로그램을 만들었습니다.

로고가 잘 불러와지네요.

3. 프로젝트 소스코드 다운로드

본 포스팅에서 사용한 프로젝트의 소스는 아래의 링크를 다운로드 받으시면 됩니다.

WPF_BitmapImage_load.zip

0.19MB

결론

WPF에서 BitmapImage를 사용하여 이미지 파일을 로드하고 표시하는 방법은 간단하면서도 효과적입니다. 이 방법을 통해 사용자 인터페이스에 다양한 이미지를 쉽게 통합할 수 있으며, 사용자 경험을 풍부하게 만들 수 있습니다. 실제 이미지 경로를 올바르게 설정하는 것이 중요하며, 이 예제를 기반으로 다양한 이미지 처리 작업을 시도해 볼 수 있습니다.

함께보면 좋은글

[C#] OpenFileDialog 활용하여 파일 선택하기

C#을 사용하다보면 파일을 선택하거나 불러오는 작업이 필요할 때가 많습니다. 이럴 때 사용하는 기능 중 하나가 OpenFileDialog입니다. 이번 글에서는 OpenFileDialog의 기본 사용법과 주요 기능들에 대

devit.koreacreatorfesta.com

WPF 프로그램 시작 경로 알아내는 방법 3가지

WPF(Windows Presentation Foundation) 애플리케이션에서 프로그램의 시작 경로를 확인하는 것은 여러 상황에서 유용할 수 있습니다. 예를 들어, 응용 프로그램과 함께 배포되는 파일을 참조하거나 로컬

devit.koreacreatorfesta.com

자바스크립트에서 랜덤 번호 생성하기

멱군 — Tue, 6 Feb 2024 18:17:48 +0900

자바스크립트는 웹 개발에서 필수적인 언어 중 하나로, 다양한 기능을 제공하는 동시에 사용자에게 매력적인 인터랙션을 가능하게 합니다. 오늘은 그 중에서도 '랜덤 번호 생성'이라는 주제를 다루고자 합니다. 이 기능은 게임, 추첨, 통계적 시뮬레이션 등에서 널리 사용됩니다. 본 글에서는 자바스크립트를 사용하여 어떻게 랜덤 번호를 생성하는지, 그리고 이를 활용하는 다양한 방법에 대해 알아보겠습니다.

1. 기본 랜덤 번호 생성

자바스크립트에서 랜덤 번호를 생성하는 가장 기본적인 방법은 Math.random() 함수를 사용하는 것입니다. 이 함수는 0 이상 1 미만의 부동소수점 난수를 생성합니다.

let randomNumber = Math.random();
console.log(randomNumber); // 0.1234567890123456 같은 수 출력

이 숫자를 확장하여 원하는 범위의 랜덤 번호를 생성할 수 있습니다. 예를 들어, 1부터 100까지의 랜덤 정수가 필요하다면 다음과 같이 계산할 수 있습니다.

let randomInt = Math.floor(Math.random() * 100) + 1;
console.log(randomInt); // 1 ~ 100 사이의 정수

2. 범위 지정 랜덤 번호 생성

특정 범위 내에서 랜덤 번호를 생성하려면, 사용자 정의 함수를 작성할 수 있습니다. 아래 함수는 최소값 min과 최대값 max를 매개변수로 받아, 해당 범위 내의 랜덤 정수를 반환합니다.

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(1, 100)); // 1과 100 사이의 랜덤 정수 반환

3. 랜덤 번호를 이용한 간단한 게임 만들기

랜덤 번호 생성 기능을 활용하여 간단한 추측 게임을 만들어 볼 수 있습니다. 사용자가 1부터 10 사이의 숫자를 추측하고, 프로그램이 랜덤하게 숫자를 생성하여 맞추는 게임을 만들어 보도록 하겠습니다.

function guessNumber() {
  let userGuess = prompt("1에서 10 사이의 숫자를 추측해보세요:");
  let randomNumber = getRandomInt(1, 10);
  if (userGuess == randomNumber) {
    alert("축하합니다! 정답입니다!");
  } else {
    alert("아쉽지만, 틀렸습니다. 정답은 " + randomNumber + "였습니다.");
  }
}

guessNumber();

전체사용소스코드

본 글에서 사용한 소스코드는 아래의 파일을 다운로드 받아서 확인 할 수 있습니다.

자바스크립트에서 랜덤 번호 생성.zip

0.00MB

자바스크립트를 이용한 랜덤 번호 게임

결론

자바스크립트에서 랜덤 번호를 생성하고 활용하는 것은 매우 간단하지만, 다양한 방식으로 응용될 수 있는 강력한 기능입니다. 이를 통해 게임, 시뮬레이션, 사용자 경험 개선 등 다양한 분야에서 창의적인 솔루션을 제공할 수 있습니다. 오늘 배운 내용을 바탕으로 여러분만의 독창적인 프로그램을 만들어보세요!

함께보면 좋은글

[nodejs] 지정된 범위 내에 난수(랜덤 숫자, random number) 출력하기

Node.js는 자바스크립트를 서버 사이드에서 실행할 수 있게 해주는 강력한 환경입니다. 이러한 환경에서도 자바스크립트의 기본 기능인 난수 생성을 활용할 수 있습니다. 이번 포스트에서는 Node.j

devit.koreacreatorfesta.com