bskyvision.com

오랫동안 운영했던 티스토리 블로그 안녕. 이제 직접 만든 블로그 시작!

bskyvision.com — Wed, 4 Dec 2024 21:59:12 +0900

안녕하세요. bskyvision입니다. 오랜만에 티스토리에 글을 쓰는 것 같습니다.

나름대로 열심히 가꿔왔던 티스토리 블로그 bskyvision.com을 이제 그만하고, 제가 직접 개발한 저만의 블로그 vault.dev-sim.com으로 넘어가려고 합니다.

현재까지 580만명 이상이 방문한 블로그이기에 꽤 애착이 있었습니다. 한때 하루에 7000, 8000명에 가까운 사람이 방문하기도 했었고요.

제가 블로그를 옮기는 이유는 다음과 같습니다.

1. 티스토리 블로그가 언젠가 망할 수도 있겠다. 세상의 모든 서비스가 그런 가능성을 갖고 있듯이.

2. 티스토리 자체 검색 기능이 너무 약하다. 글이 많이 쌓인 상황에서 내가 원하는 글 검색이 어렵다.

3. 기획, 프론트엔드, 백엔드, 인프라 처음부터 끝까지 다 직접 만든 블로그를 운영해보고 싶었다. (aws, next.js, spring boot로 만들었음)

4. 평생 나만의 데이터를 아카이빙할 블로그를 만들고 싶었다. 1, 2년 운영할 목적이 아니라 30, 40년 운영할 목적의 블로그.

5. 새롭게 익힌 기술을 적용해볼 샌드박스로 블로그를 사용하고 싶었다. 예를 들어, chatgpt API를 연동해서 어떤 기능을 붙여본다던가 등등.

6. SEO에 있어서 이런저런 설정을 직접 적용해보면서 검색엔진에 잘 노출되려면 어떻게 해야하는지 경험해보고 싶었다.

7. 마크다운 에디터로 글을 쓰고 싶었다. 티스토리로도 가능하긴 하지만, 제가 원하는 방식으로 마크다운 편집기를 사용할 수는 없었다.

정든 티스토리 블로그를 떠나려고 하니 많이 아쉽네요.

제 새 블로그에 많이많이 놀러와 주세요. ㅎㅎ

AS-IS: bskyvision.com

TO-BE: vault.dev-sim.com

[javascript] 템플릿 리터럴로 문자열 내에 변수 쉽게 대입하기

bskyvision.com — Fri, 30 Aug 2024 23:40:32 +0900

javascript에서 문자열을 만들 때 빽틱(`)으로 감싸주면 문자열 내에 변수 값을 쉽게 넣어줄 수 있습니다.

let num1 = 5;
let num2 = 7;
let result = `${num1} 더하기 ${num2}은 ${num1 + num2}입니다.`;
console.log(result); // 5 더하기 7은 12입니다.

아주 쉽죠?

끝.

참고자료

[1] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

[vscode] prettier - format on save 적용 안 될 때 대처 방법

bskyvision.com — Thu, 29 Aug 2024 21:41:57 +0900

vscode에서 설치해서 사용 가능한 확장 프로그램 중에 prettier라는 코드 포맷터가 있습니다. 파일을 저장할 때 prettier를 통해서 코드를 아름답게 만들어주고 싶을 때 format on save를 적용해주곤 합니다.

그런데 이와 같이 설정해줬는데 format on save가 적용이 안 된다면 설정에서 default formatter가 무엇으로 설정되어 있는지 확인해볼 필요가 있습니다.

이렇게 default formatter에 prettier를 설정해줘야 format on save가 잘 적용될 수 있습니다.

끝.

PDF에 적용된 폰트 확인하는 방법 (Adobe Acrobat Reader)

bskyvision.com — Tue, 27 Aug 2024 22:01:59 +0900

오늘은 PDF 문서에 적용되어 있는 폰트 목록을 확인하는 방법에 대해 살펴보도록 하겠습니다.

PDF에 적용된 폰트 확인하는 방법

우선 Adobe Acrobat Reader로 PDF 파일을 엽니다.

Ctrl + D를 누릅니다.

그러면 문서 속성 창이 뜰 텐데, 거기서 글꼴 탭에 들어가면 해당 PDF 문서에서 사용된 폰트 목록을 확인할 수 있습니다.

끝.

[javascript] ?? 연산자 Nullish Coalescing이란

bskyvision.com — Sat, 17 Aug 2024 09:57:57 +0900

자바스크립트에서 || 문법은 아마 많이들 사용하고 계실 것입니다. 왼쪽에 있는 값이 거짓 값일 때(0, '', false, null, undefined) 오른쪽 값으로 설정하고자 할 때 많이 사용하는 문법입니다.

const age = 35;
console.log(age || 40); // 35

const age1 = ''
console.log(age1 || 40); // 40

const age2 = 0;
console.log(age2 || 40); // 40

const age3 = null;
console.log(age3 || 40); // 40

const age4 = undefined;
console.log(age4 || 40); // 40

그런데 ''와 0을 의도한 경우라면 || 연산자 대신 null과 undefined인 경우에만 기본값을 선택해주는 ?? 연산자를 사용하면 됩니다. Nullish Coalescing 연산자라고 불리는 ??는 ES11(2020년)에 도입되었습니다.

const age = 35;
console.log(age ?? 40); // 35

const age1 = ''
console.log(age1 ?? 40); // ''

const age2 = 0;
console.log(age2 ?? 40); // 0

const age3 = null;
console.log(age3 ?? 40); // 40

const age4 = undefined;
console.log(age4 ?? 40); // 40

정리하자면,

|| 연산자는 false 값일 때 기본값을, ??는 null 또는 undefined일 때 기본값을 반환합니다.

참고자료

[1] https://kir93.tistory.com/entry/Javascript-ES11-%EB%AC%B8%EB%B2%95%EC%A0%95%EB%A6%AC

[javascript] ?. 옵셔널 체이닝(optional chaining)이란?

bskyvision.com — Wed, 14 Aug 2024 16:45:40 +0900

옵셔널 체이닝(optional chaining)은 ES11 (2020년)에 도입된 문법입니다. 객체의 속성에 접근할 때 해당 속성이 존재하는지 먼저 확인한 후에 접근하는 기능입니다. 만약 해당 속성이 존재하지 않는 경우네는 TypeError 대신에 undefined를 반환합니다. "돌다리도 두들겨보고 건너라" 전법을 시전하는 것이라고 볼 수 있습니다. 해당 객체 내에 특정 속성이 존재할지에 대해 확신을 할 수 없다면 옵셔널 체이닝을 써주는 것이 좋습니다.

const user = {
    name: "Alice",
    address: {
        city: "Seoul",
        street: "123 Main St"
    }
}

console.log(user?.address?.city); // Seoul
console.log(user?.phone?.number); // undefined
console.log(user.phone.number); // TypeError

위 코드를 실행한 결과는 다음과 같습니다. 옵셔널 체이닝을 쓰지 않은 경우에는 TypeError가 발생했음을 알 수 있습니다.

이 옵셔널 체이닝을 사용하면 다음과 같이 존재 여부를 확인하는 지저분한 코드를 안 써도 됩니다. 아마 비교적 예전에 작성된 자바스크립트 프로그램들에서는 다음과 같은 코드를 많이 보셨을 것입니다.

const ApiResp = {
    name: "Alice",
    // address: {
    //     city: "Seoul",
    //     street: "123 Main St"
    // }
}

if (ApiResp && ApiResp.address && ApiResp.address.city == "Seoul"){
    console.log("서울사람입니다.");
}

대신에 아래와 같이 코드를 작성할 수 있습니다. 코드가 한결 간결해진 것을 알 수 있습니다.

const ApiResp = {
    name: "Alice",
    // address: {
    //     city: "Seoul",
    //     street: "123 Main St"
    // }
}

if (ApiResp?.address?.city == "Seoul"){
    console.log("서울사람입니다.");
}

참고자료

[1] https://ko.javascript.info/optional-chaining

[2] https://haenny.tistory.com/241

SI 개발자 vs SM 개발자

bskyvision.com — Tue, 13 Aug 2024 14:42:11 +0900

IT 프로젝트는 크게 보면 이 두 가지로 분류할 수 있습니다.

SI와 SM.

SI는 System Integration의 약어로 "시스템 구축"을 뜻합니다.

반면, SM은 System Management의 약어로 "시스템 운영(유지보수)"를 뜻합니다.

SI를 통해 시스템이 구축되었다면 그 이후에는 SM이 시작되겠죠.

개발자는 이렇게 분류하는게 맞을지는 모르겠지만 SI 개발자와 SM 개발자로 나눌 수도 있을 것 같습니다.

대개 SI 업무를 하는 개발자들은 스타트업, 중소기업에서 근무할 가능성이 높고, SM 업무를 하는 개발자는 대기업에서 근무할 가능성이 높습니다. 물론 많은 예외가 있으니 오해는 말아주세요.

보통 대기업은 SI 업체들에 외주를 줘서 시스템을 구축한 후 자사 개발자들을 통해서 운영(SM)하는 경우가 많기 때문입니다.

그러다보니 SI 개발자로서 습득할 수 있는 역량과 SM 개발자로서 습득할 수 있는 역량은 다소 다른 것 같습니다.

SI 개발자

1. SI 개발자들은 처음부터 끝까지 전체 시스템을 구축할 기회가 많다보니 전체적으로 시스템이 어떻게 작동하는지 이해하면서 개발을 하는 경우가 많습니다.

2. 또한 한 회사의 특정 서비스만 개발하는 것이 아니라 이런 저런 시스템을 구축하다보니 다양한 언어로, 다양한 환경에서 개발할 수 있는 능력을 갖추게 됩니다.

3. 운영에 초점보다는 시스템 구축 완성에 목표를 두는 경우가 있다보니, 실제 운영 단계에서 발생할 수 있는 관리 포인트를 충분히 고려하지 못하고 고려할 수 있습니다.

SM 개발자

1. SM 개발자들은 이미 개발된 시스템에서 특정 부분들을 개선하거나 트러블 슈팅하는 일을 많이 하다보니 코드 한줄을 수정하더라도 전체적인 영향도를 파악하는데 주력을 하며 개발을 할 때가 많습니다.

2. 개발을 하는 것보다도 관련된 동료들, 업체들과의 커뮤니케이션 능력이 더 중요한 경우가 많습니다. 당장 개발을 진행하기 보다는 어떻게 해서 이런 기능이 존재하게 되었고, 어떤 이유로 이런 에러가 발생하고 있는지를 파악하는 것이 중요합니다.

3. 전체 시스템을 처음부터 끝까지 개발해본 경험이 적기 때문에 간단한 서비스도 혼자 힘으로 만들어하는 것을 힘들어 할 수 있습니다.

간략히 제가 SI, SM 업무를 하면서 느꼈던 점들을 정리해봤습니다. "SI 개발자가 더 낫다", "SM 개발자가 더 낫다" 그런 뜻은 전혀 없습니다. 각자 주어진 상황에 맞게 일하는 개발자들이기 때문입니다. 저는 가능하다면 둘 다 경험해보는 것이 더 실력있는 개발자로 성장하는데 큰 도움이 된다고 생각합니다.

참고자료

[1] https://www.jobkorea.co.kr/goodjob/tip/view?News_No=18848

[javascript] 배열을 잘라서 새로운 배열 객체로 만들어주는 slice() 메서드

bskyvision.com — Mon, 5 Aug 2024 07:55:12 +0900

오늘은 자바스크립트의 slice() 메서드에 대해 알아보도록 하겠습니다. slice() 메서드는 배열 객체를 잘라서 새로운 배열 객체를 만들 때 사용할 수 있습니다. 간단한 예시를 통해 사용법에 대해 알아보도록 하겠습니다.

slice() 메서드 사용법

arr.slice([begin[, end]])

const fruits = ['apple', 'banana', 'strawberry', 'peer', 'watermelon'];

console.log(fruits.slice(3)); // Array ["peer", "watermelon"]

console.log(fruits.slice(1, 3)); // Array ["banana", "strawberry"]

console.log(fruits.slice(2, -1)); // Array ["strawberry", "peer"]

slice() 메서드를 사용할 때 기억해야 할 점은 원본 배열의 begin 부터 end 까지에 대한 얕은 복사본을 새로운 배열 객체로 반환하기 때문에 원본 배열을 훼손하지 않는다는 점입니다.

참고자료

[1] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

[javascript] 크롬 브라우저 디버깅 단축키 정리

bskyvision.com — Sun, 4 Aug 2024 23:23:16 +0900

오늘은 크롬 브라우저에서 자바스크립트 코드를 디버깅할 때 사용할 수 있는 단축키에 대해 정리해보도록 하겠습니다. 먼저 F12로 개발자 도구를 연 후에 sources 탭에 가서 디버깅하고 싶은 부분에 중단점을 설정합니다. 그 다음에 이제 아래 버튼들을 통해서 디버깅을 진행할 수 있습니다.

스크립트 디버깅 단축키 정리

F8 - Resume script execution

스크립트 실행을 재개한다. 추가 중단점이 있다면 중단점까지, 없다면 스크립트를 쭉 실행한다.

F9 - Step

다음 코드를 실행한다.

F10 - Step over next function call

다음 함수 호출까지 넘어간다.

F11 - Step into next funciton call

다음 함수 안으로 들어간다.

F12 - Step out of current function

현재 함수 밖으로 나온다.

참고자료

[1] https://ko.javascript.info/debugging-chrome

[javascript] 배열의 요소들을 합쳐서 문자열로 만들어주는 join() 메서드

bskyvision.com — Tue, 23 Jul 2024 15:13:15 +0900

자바스크립트에서 배열의 요소들을 합쳐서 문자열로 만들고 싶다면, join() 메서드를 활용할 수 있습니다.

const fruits = ['banana', 'apple', 'strawberry'];
const fruitsStr = fruits.join();
console.log(fruitsStr);

join() 메서드에 아무런 인수도 넣어주지 않으면 보시다시피 요소들을 이어줄 때 콤마(,)를 넣은 상태로 이어줍니다.

만약 요소들 사이에 세미콜론을 넣어주고 싶다면 join(";")와 같이 코드를 작성하시면 됩니다.

const fruits = ['banana', 'apple', 'strawberry'];
const fruitsStr = fruits.join(";");
console.log(fruitsStr);

[javascript] 배열에 요소 추가하는 메서드, push()

bskyvision.com — Mon, 22 Jul 2024 14:05:30 +0900

자바스크립트에서 배열에 요소를 추가할 때 사용할 수 있는 메서드는 push() 입니다.

const fruits = ['banana', 'apple'];
fruits.push('strawberry');
console.log(fruits);

배열의 가장 맨 끝에 strawberry가 추가된 것을 확인하실 수 있습니다.

또한 참고로 push() 메서드는 배열의 끝에 하나 이상의 요소를 추가할 수도 있으며, 배열의 새로운 길이를 반환해줍니다.

const fruits = ['banana', 'apple'];
const cnt = fruits.push('strawberry', 'peer');
console.log("배열의 길이: ", cnt);
console.log(fruits);

자바스크립트의 push() 메서드는 파이썬에서는 append() 메서드와 비슷한 역할을 하는 것 같군요.

참고자료

[1] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

[MySQL] 서버 타임존 변경하기

bskyvision.com — Sun, 21 Jul 2024 15:14:11 +0900

오늘은 MySQL 서버 타임존 변경하는 방법에 대해 알아보겠습니다.

MySQL 서버 타임존을 변경하고자 한다면 /etc/mysql/mysql.conf.d에 있는 mysqld.conf 파일의 맨 마지막 부분에 이 한 줄을 추가해주면 됩니다.

default-time-zone="+09:00"

그 다음에 다시 MySQL 서버를 재기동해주면 변경된 서버 타임존이 적용됩니다.

service mysql restart

끝.

참고자료

[1] https://bskyvision.com/entry/MariaDB-MariaDB-%EC%84%9C%EB%B2%84-%ED%83%80%EC%9E%84%EC%A1%B4-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

[2] https://study-ce.tistory.com/59

[MySQL] MariaDB에서 MySQL로 변경한 후 sql_mode=only_full_group_by 에러가 발생한 경우 조치 방법

bskyvision.com — Sat, 20 Jul 2024 14:04:14 +0900

최근에 MariaDB에서 MySQL로 마이그레이션해야 할 일이 있었다. 마이그레이션한 후에 애플리케이션이 잘 작동하는 것 같았는데, 특정 기능을 수행해보니 다음과 같은 에러가 발생했다.

MySQLdb.OperationalError: (1055, "Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 's.written_name' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by")

MariaDB와 MySQL 간 group by를 처리하는 로직에 있어서 차이가 있어서 발생하는 이슈인 듯했다. 구글링을 해보니 mysqld.cnf의 끝에 한 줄만 추가해주면 된다고 해서 해봤더니 해당 문제가 해결되었다. 참고로 나의 경우에 mysqld.cnf의 경로는 /etc/mysql/mysql.conf.d/mysqld.cnf 이다.

sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION

코드 또는 쿼리를 수정하지 않고 해결되어서 다행이었다.

참고자료

[1] https://velog.io/@posasac/Etc.sqlmodeonlyfullgroupby-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0MacmySQL

[Linux] Ubuntu 24.04 LTS에 MySQL 서버 설치하는 방법

bskyvision.com — Fri, 19 Jul 2024 23:44:42 +0900

Ubuntu 24.04 LTS에 MySQL 서버를 설치하려면 다음 명령을 실행하시면 됩니다.

sudo apt install mysql-server

잘 설치가 되었다면, 아래 명령어를 실행했을 때 mysql 버전 정보가 잘 출력될 것입니다.

mysql --version

끝.

참고자료

[1] https://hyunmin1906.tistory.com/265

[Linux] 서버 시간 한국 표준시로 변경하기

bskyvision.com — Thu, 18 Jul 2024 23:24:32 +0900

리눅스 서버의 시간은 별도로 설정하지 않으면 보통 한국 시간으로 설정되어 있지 않습니다. 한국인을 대상으로 서비스를 하는 서버라면 한국 시간으로 설정해주는 것이 대체로 편리합니다. 아래 명령어를 통해 서버 시간을 한국 표준시로 설정해줄 수 있습니다.

sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

이제 다시 date 명령어를 실행해보십시오. 아마도 이제 저와 같이 KST가 붙은 한국시간이 보여질 것입니다.

끝.

참고자료

[1] https://bskyvision.com/entry/linux-ln-%EB%AA%85%EB%A0%B9%EC%96%B4%EB%A1%9C-%EB%A7%81%ED%81%AC-%ED%8C%8C%EC%9D%BC-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0%EC%8B%AC%EB%B3%BC%EB%A6%AD-%EB%A7%81%ED%81%AC-%ED%95%98%EB%93%9C-%EB%A7%81%ED%81%AC-%EC%95%84%EC%9D%B4%EB%85%B8%EB%93%9C

[python] flask_mysqldb 설치 중 에러 해결 방법

bskyvision.com — Wed, 17 Jul 2024 22:36:34 +0900

우분투 서버에 flask_mysqldb 모듈을 설치하기 위해 pip install flask_mysqldb를 터미널에 입력했을 때 다음과 같은 에러가 나는 경우가 있습니다. 참고로 flask_mysqldb[1]는 flask에서 mysql에 연결을 할 수 있게 도와주는 라이브러리입니다.

flask_mysqldb 설치 에러 해결 방법 (1차 시기)

이 경우에는 먼저 다음 명령을 터미널에 준 다음에 다시 시도해보십시오.

sudo apt-get install libmysqlclient-dev

pip install flask_mysqldb

아마 이제 flask_mysqldb가 정상적으로 설치가 되실 것입니다.

flask_mysqldb 설치 에러 해결 방법 (2차 시기)

만약 위와 같이 했는데도 flask_mysqldb 설치에 실패하셨다면, 이번에는 아래 명령을 실행해보세요. 그 다음에 다시 flask_mysqldb를 설치해보세요.

sudo apt install python3-dev default-libmysqlclient-dev build-essential pkg-config

pip install flask_mysqldb

2024-07-16 기준으로 이렇게 하니 저는 잘 설치되었습니다.

참고자료

[1] https://flask-mysqldb.readthedocs.io/en/latest/

[2] https://medium.com/@hangyulson1004/steps-to-integrate-mysql-with-flask-on-a-ubuntu-server-covers-subprocess-exited-with-error-a9a731f683b9

[vscode] ssh 접속시 "원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다" 에러 나는 경우

bskyvision.com — Wed, 17 Jul 2024 22:06:48 +0900

vscode에서 ec2 서버 등에 ssh 접속을 시도할 때 다음과 같은 에러가 발생하는 경우가 있습니다.

"원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다"

만약 EC2에서 Elastic IP( EIP)를 만들어놓고 어떤 서버에 그 EIP를 할당하여 사용하다가 다른 EC2에 그 EIP를 할당하였다면 이 에러가 발생합니다.

이런 경우에는 ~/.ssh/known_hosts에서 해당 서버에 대한 예전 기록을 삭제해줘야 합니다. 현재 접속을 시도하는 서버의 IP에 해당하는 행들을 모두 삭제한 후 다시 SSH 접속을 시도하면 더 이상 위 에러가 발생하지 않습니다.

끝.

참고자료

[1] https://developer-itspjc.tistory.com/38

[javascript] split() 메서드로 문자열을 지정한 구분자로 분리하여 배열 만들기

bskyvision.com — Mon, 15 Jul 2024 19:38:04 +0900

오늘은 split() 메서드로 문자열을 지정한 구분자로 분리하여 배열을 만드는 방법에 대해 살펴보도록 하겠습니다.

예를 들어, 다음과 같은 문자열이 있다고 가정해보겠습니다.

홍대입구->신촌->이대->아현->충정로->시청

저는 여기서 역들의 이름만 담은 배열을 만드려고 합니다. split 메서드를 활용하면 아주 쉽게 이 일을 할 수 있습니다.

const txt = "홍대입구->신촌->이대->아현->충정로->시청";
const stations = txt.split("->");
console.log(stations);

[javascript] 정규식(RegExp)으로 문자열내 반복되는 특정 단어 시작 인덱스 배열 생성하는 방법

bskyvision.com — Sun, 14 Jul 2024 14:25:22 +0900

오늘은 javascript에서 정규식(RegExp)를 활용하여 문자열내 반복되는 특정 단어의 시작 인덱스들의 배열을 생성하는 방법에 대해서 알아보겠습니다.

예를 들어, "나는 대한민국에서 태어난 대한민국 국민이다"라는 문자열이 있다고 가정해보겠습니다. 이 문자열에는 "대한민국"이 두 번 등장하는데 그 단어들의 시작 인덱스를 추출하는 방법에 대해 알아보겠습니다.

const txt = "나는 대한민국에서 태어난 대한민국 국민이다."
const regex = new RegExp("대한민국", "g");
const matches = [...txt.matchAll(regex)];
console.log(matches);
const indices = matches.map(match => match.index)
console.log(indices); // [3, 14]

결과적으로 대한민국들의 시작 인덱스인 3, 14가 잘 추출된 것을 확인하실 수 있습니다.

[javascript] 헷갈리기 쉬운 substring(), substr() 메서드 사용법 비교

bskyvision.com — Sat, 13 Jul 2024 10:06:32 +0900

오늘은 자바스크립트에서 문자열을 자를 때 사용하는 메서드인 substring()과 substr()에 대해서 살펴보도록 하겠습니다. 이름이 비슷해서 헷갈리기 쉬운 메서드들입니다.

substring(), substr() 메서드 사용법 비교

1. substring(start, end): 시작 인덱스와 끝 인덱스 사용. start와 end 사이의 문자열을 반환. end는 포함하지 않음.

2. substr(start, length): 시작 인덱스와 길이 사용. start 인덱스부터 length 만큼의 문자열을 반환.

바로 예시로 살펴보겠습니다.

const txt = "안녕하세요.";
console.log(txt.substring(1, 4));
console.log(txt.substr(1, 4));

결과를 살펴보면 substring(1, 4)를 사용한 경우 1, 2, 3 인덱스 결과인 "녕하세"가 잘렸고, substr(1, 4)를 사용한 경우에는 인덱스 1부터 4개 글자인 "녕하세요"가 잘렸습니다.

[css] 여러 개의 css 파일을 링크했을 때 우선순위

bskyvision.com — Thu, 11 Jul 2024 05:21:53 +0900

오늘은 여러 개의 css 파일을 링크했을 때 우선순위에 대해 알아보도록 하겠습니다.

여러 개의 css 파일을 링크했을 때 우선순위

일단 테스트를 위해서 3개의 다음과 같은 간단한 css 파일을 만들었습니다. 각각 동일한 클래스에 대해서 background-color의 스타일을 다르게 지정해주고 있습니다. 어떤 것이 적용되는지 함께 확인해보시죠.

style1.css

.bg-color {
    background-color: yellow;
    height: 100px;
    width: 300px;
    padding: 20px;
}

style2.css

.bg-color {
    background-color: blue;
    color: white;
}

style3.css

.bg-color {
    background-color: red;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/style1.css">
    <link rel="stylesheet" href="./css/style2.css">
    <link rel="stylesheet" href="./css/style3.css">
    
</head>
<body>
    <div class="bg-color">
        안녕하세요. 반갑습니다.
    </div>
</body>
</html>

보시는 것처럼 가장 아래 링크된 style3.css의 빨간 배경색이 적용되었습니다. 그리고 style2.css, style1.css의 background-color 적용에는 취소선이 있는 것을 우측 개발자 도구에서 확인할 수 있습니다. 가장 마지막에 정의된 스타일이 반영되는 것입니다.

[css] @font-face로 폰트를 등록할 때 굵기별로 지정하는 방법

bskyvision.com — Thu, 4 Jul 2024 00:01:18 +0900

@font-face를 사용하여 폰트를 등록할 때, 굵기별로 폰트를 지정할 수 있습니다. 예를 들어, 다음과 같이 여러 굵기로 등록할 수 있습니다.

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Bold.woff2') format('woff2');
  font-weight: 700;
}

이 경우 font-wieght: 400과 font-weight: 700에 대해 각각의 폰트 파일이 지정되어 있습니다.

만약 폰트를 등록할 때 지정하지 않은 font-weight 값을 사용할 경우, 브라우저는 가장 가까운 굵기의 폰트를 적용합니다. 예를 들어, 위와 같이 font-weight: 400과 font-weight: 700이 등록된 상태에서 font-weight: 500을 사용하려고 한다면, 브라우저는 font-weight: 400 폰트를 사용합니다. 이는 font-weight: 500이 400에 더 가깝기 때문입니다.

일반적인 규칙은 다음과 같습니다.

1) 사용된 font-weight 값과 가장 가까운 값을 찾습니다.

2) 만약 같은 거리에 두 개 이상의 값이 있다면, 낮은 값이 선택됩니다.

따라서, font-weight를 지정하지 않은 경우에도 사용자가 지정한 굵기와 가장 근접한 굵기의 폰트가 적용되므로 원하지 않은 폰트 굵기가 적용될 수 있습니다. 이를 방지하려면 필요한 모든 굵기를 등록하거나, 부족한 굵기에 대해서는 가까운 값을 지정해주는 것이 좋습니다.

[css] font-family 속성에 여러 폰트 등록하여 사용하는 경우 (+언어별로 폰트 설정하는 방법)

bskyvision.com — Tue, 2 Jul 2024 23:23:56 +0900

오늘은 css 속성 중 하나인 font-family 사용법에 대해 정리해보도록 하겠습니다.

css 속성 font-family 사용법

1) font-family 속성을 사용해서 웹 페이지 내 요소들의 폰트를 지정해줄 수 있습니다.

body {
    font-family: "맑은고딕";
}

2) 위와 같이 하나의 폰트를 선언할 수도 있지만, font-family에 여러 개의 폰트를 선언해줄 수도 있습니다. 브라우저에서 첫 번째 폰트를 사용할 수 없다면, 두 번째, 세 번째 등 사용 가능한 것을 사용하라는 의미입니다.

body {
    font-family: "맑은고딕", "Times New Roman", serif;
}

그런데 여기서 "맑은고딕", "Times New Roman"은 특정 폰트를 지칭하지만 serif는 삐침 있는 명조계열 글꼴 모음을 의미합니다. serif, sans-serif, cursive, monospace 등을 generic-family라고 부르는데, 시스템 폰트 중에서 사용자가 의도한 스타일과 유사한 서체를 알아서 선택해서 사용하라고 할 때 사용합니다.

serif: 삐침 있는 명조계열 글꼴 모음

sans-serif: 삐침 없는 고딕계열 글꼴 모음

cursive: 손 필기체 같은 느낌의 글꼴 모음

monospace: 글자 폭과 간격이 일정한 글꼴 모음

font-family 속성을 사용할 때는 이와 같이 마지막에는 generic-family를 넣어주는 것이 안전합니다.

3) 만약 브라우저에서 기본적으로 제공하지 않는 폰트를 사용하고 싶다면 @font-face 규칙을 사용하여 커스텀 폰트를 정의하고 로드할 수 있습니다.

@font-face {
    font-family: 'Mingyung';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_08@1.0/Mingyung.woff') format('woff');
}

body {
    font-family: "Mingyung";
}

민경 폰트의 위치를 src에 정의하고, format()으로 폰트 파일의 형식을 지정합니다. 여기서는 WOFF (Web Open Font Format) 형식을 사용하고 있습니다. 해당 폰트 명을 Mingyung이라고 명명한 후 이후에 사용할 때도 font-family: "Mingyung"으로 사용하면 됩니다.

4) 만약 @font-face로 정의한 폰트를 특정 언어에 만 사용하고 싶다면 unicode-range 속성으로 컨트롤할 수 있습니다. Mingyung 폰트는 한글에만 적용하고 싶다면 아래와 같이 unicode-range 속성에 한글의 유니코드 범위를 넣어주면 됩니다.

@font-face {
    font-family: 'Mingyung';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_08@1.0/Mingyung.woff') format('woff');
    unicode-range: U+AC00-D7A3; /* 한글 */
}

body {
    font-family: "Mingyung", "Times New Roman", sans-serif;
}

그러면 결과적으로 body 내 한글은 Mingyung 폰트로 그 외 텍스트는 Times New Roman이 적용될 것이고 그것이 지원되지 않는 언어라면 sans-serif가 적용될 것입니다. 이런 방식으로 한글은 어떤 폰트, 영어는 어떤 폰트, 일본어는 어떤 폰트, 숫자는 어떤 폰트를 사용하라고 지정해주는 것이 가능합니다.

참고자료

[1] https://jigeumblog.tistory.com/39.

[2] https://github.com/necolas/normalize.css/issues/665.

[3] https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family

[4] https://velog.io/@zaixu/220707

[Oracle] 인덱스 조회 쿼리

bskyvision.com — Mon, 1 Jul 2024 21:56:28 +0900

Oracle에서 인덱스를 조회하는 쿼리는 다음과 같습니다.

SELECT
    a.table_name,
    a.index_name,
    a.column_name
FROM all_ind_columns a
WHERE a.table_name = '테이블명'
ORDER BY a.index_name, a.column_position;

쿼리를 날리기 전에 인덱스를 조회하여 인덱스를 활용하는 쿼리를 작성하는 습관을 들여야 합니다. 그렇지 않으면 쿼리 하나 실행하는데 매우 긴 시간이 걸릴 뿐 아니라 성능 이슈를 야기할 수도 있습니다.

[bootstrap] 콘텐츠 간의 gap을 다루는 gx-, gy-, g-* 클래스

bskyvision.com — Sun, 23 Jun 2024 23:45:42 +0900

부트스트랩에서 gx-*, gy-*, g-* 클래스는 콘텐츠 간의 gap을 정의할 때 사용하는 클래스입니다.

gx-*는 수평 방향의 갭, gy-*는 수직 방향의 갭, g-*는 수평, 수직 방향의 갭을 정의할 때 사용합니다.

gx-1부터 gx-5까지 사용가능한데 5로 갈수록 콘텐츠 사이의 갭이 더 커집니다.

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

<div class="container overflow-hidden text-center">
  <div class="row gx-1 gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

참고자료

[1] https://getbootstrap.com/docs/5.3/layout/gutters/

[java] 배열 선언 및 초기화하는 방법

bskyvision.com — Sat, 22 Jun 2024 16:18:27 +0900

자바에서 int형 자료를 5개 담을 수 있는 배열을 선언하는 방법은 다음과 같습니다.

int[] arr = new int[5];

만약 배열 선언과 동시에 초기화를 하고 싶다면 다음과 같이 코드를 작성하면 됩니다.

int[] arr = {1, 2, 3, 4, 5};

끝.

[java] char 자료형 데이터 대소문자 판별, 대소문자 변환 방법

bskyvision.com — Fri, 21 Jun 2024 14:49:06 +0900

오늘은 자바에서 char 자료형 데이터가 대소문자인지 판별하고 대소문자 변환하는 방법에 대해 알아보겠습니다.

대소문자 판별하는 방법

Character 클래스의 isUpperCase() 메서드를 활용하면 대소문자를 확인할 수 있습니다. 대문자면 true를, 소문자면 false를 반환합니다.

package character;

public class IsUpperCaseEx1 {
    public static void main(String[] args) {
        char test1 = 'a';
        char test2 = 'A';

        System.out.println(Character.isUpperCase(test1));
        System.out.println(Character.isUpperCase(test2));
    }
}

대소문자를 잘 판별한 것을 확인할 수 있습니다.

대소문자 변환하는 방법

대소문자를 변환할 때는 Character 클래스의 toUpperCase(), toLowerCase() 메서드를 활용할 수 있습니다.

toUpperCase(): 대문자로 변환

toLowerCase(): 소문자로 변환

package character;

public class toUpperCaseEx1 {
    public static void main(String[] args) {
        char test1 = 'b';
        char test2 = 'B';

        System.out.println(Character.toUpperCase(test1));
        System.out.println(Character.toLowerCase(test2));

    }
}

소문자는 대문자로, 대문자는 소문자로 잘 변환되었죠?

끝.

[java] ArrayList를 배열로 변환하는 방법

bskyvision.com — Sat, 15 Jun 2024 15:13:27 +0900

오늘은 Java에서 ArrayList를 배열로 변환하는 방법에 대해 살펴보겠습니다.

먼저 1, 2, 3 요소를 갖고 있는 간단한 ArrayList를 만든 후 int[] 배열로 변환하겠습니다.

import java.util.ArrayList;

public class ArrayListEx3 {
    public static void main(String[] args) {
        ArrayList<Integer> arrList = new ArrayList<>();

        arrList.add(1);
        arrList.add(2);
        arrList.add(3);

        int[] answer = arrList.stream().mapToInt(i -> i).toArray();
        
        for (int i: answer) {
            System.out.println(i);
        }
    }
}

위 코드를 실행해보면 잘 변환된 것을 확인할 수 있습니다.

끝.

참고자료

[1] https://www.geeksforgeeks.org/arraylist-array-conversion-java-toarray-methods/

[java] 배열 정렬하기, java.util.Arrays 클래스 활용

bskyvision.com — Fri, 14 Jun 2024 18:11:40 +0900

java에서 배열을 정렬할 때는 java.util.Arrays 클래스의 sort() 메서드를 활용할 수 있습니다.

import java.util.Arrays;

public class ArraysEx1 {
    public static void main(String[] args) {
        int[] array = {1, 5, -3, 4, -9};
        Arrays.sort(array);

        for(int i: array){
            System.out.println(i);
        }
    }
}

결과를 보시면 보시다시피 오름차순 정렬이 잘 된 것을 확인하실 수 있습니다.

끝.

[java] 거듭제곱 구하는 방법, Math.pow()

bskyvision.com — Thu, 13 Jun 2024 22:51:16 +0900

java에서 거듭제곱을 구하려면 수학 관련해서 자주 사용하는 클래스인 Math의 pow() 메서드를 사용하면 됩니다.

Math.pow(2, 5) = 32.0

참고로 pow() 메서드의 리턴 타입은 double입니다.

끝.

[thymeleaf] 이미지 태그 소스 정의하는 방법

bskyvision.com — Wed, 12 Jun 2024 10:21:39 +0900

오늘은 thymeleaf에서 이미지 태그에 소스를 정의하는 방법에 대해 알아보겠습니다.

이미지 파일은 기본적으로 src/main/resources/static 하위에 있어야 합니다. 만약 src/main/resources/static/img 폴더 내에 sample.jpg라는 이미지 파일을 넣어두었다면, 소스를 다음과 같이 정의하면 됩니다.

<img th:src="@{/img/sample.jpg}" alt="..." />

끝.

[java] 구글 이메일 전송 코드에서 535-5.7.8 Username and Password not accepted 에러 대처 방법

bskyvision.com — Tue, 11 Jun 2024 00:03:18 +0900

구글 이메일을 전송하는 코드를 작성하다 보면, 비밀번호를 세팅하는 부분이 있는데 여기에 그냥 이메일 계정의 비밀번호를 넣으면 다음과 같은 에러가 나옵니다.

535-5.7.8 Username and Password not accepted

이런 경우에는 이메일 계정의 비밀번호 대신 앱 비밀번호를 넣어줘야 합니다.

앱 비밀번호를 생성하는 방법은 다음과 같습니다.

1. 해당 구글 계정에 로그인합니다.

2. 계정 관리 화면 > 보안에 들어갑니다.

3. 2단계 인증에 들어갑니다.

4. 앱 비밀번호에 들어가서 앱 비밀번호를 생성합니다.

이렇게 생성한 앱 비밀번호를 비밀번호 세팅하는 코드에 넣어주면 더 이상 위와 같은 에러가 발생하지 않을 것입니다.

끝.

[gitlab] gitlab-ci로 ec2에 jar 배포를 위해 SSH 키 생성하고 세팅하는 방법

bskyvision.com — Mon, 10 Jun 2024 14:24:56 +0900

오늘은 gitlab-ci로 ec2에 jar를 배포하기 위해 필요한 절차인 SSH 키를 생성하고 gitlab과 ec2에 세팅하는 방법에 대해 알아보겠습니다.

1. SSH 키 생성

ssh 키를 생성하기 위해서는 다음과 같은 명령어를 ~/.ssh 디렉터리 안에서 실행하면 됩니다.

ssh-keygen -t rsa -b 4096 -C "여러분의이메일주소"

이 명령을 실행하고 나면 ~/.ssh 안에 두 개의 파일이 생성되었을 것입니다.

id_rsa

id_rsa.pub

2. SSH private 키 git lab 등록

이 중 id_rsa를 내용을 복사하여 깃랩의 환경변수에 등록합니다. id_rsa의 내용을 cat id_rsa, vi id_rsa 등의 방식으로 읽어보면 -----BEGIN OPENSSH PRIVATE KEY-----로 부터 시작하여 -----END OPENSSH PRIVATE KEY-----로 끝나는 암호같은 내용이 있을 텐데, 해당 내용을 포함하여 전체 복사합니다.

레포지토리에서 Settings > CI/CD > Variables를 들어가시면 Add variable 버튼이 있습니다. 여기에 SSH_PRIVATE_KEY 변수를 만들어서 위에서 복사한 OPENSSH PRIVATE KEY를 담아주면 됩니다.

3. SSH public 키 EC2 등록

이번에는 id_rsa.pub의 내용을 전체 복사합니다. 그 다음에 ec2에 접속하여 ~/.ssh/authorized_keys 맨 아래 줄에 복사한 내용을 붙여줍니다. 다음과 같은 명령을 수행하시면 됩니다.

echo "여러분이복사한id_rsa.pub내용" >> ~/.ssh/authorized_keys

이것으로 gitlab 서버가 ec2 서버에 ssh 접속할 수 있는 준비가 되었습니다.

끝.

[thymeleaf] css 링크거는 방법

bskyvision.com — Sat, 8 Jun 2024 11:41:33 +0900

오늘은 thymeleaf에서 css 링크 거는 방법에 대해 알아보겠습니다.

thymeleaf에서 CSS, Javascript 등의 기본 디렉토리는 src/main/resources/static입니다. 따라서, 그 안에 css, js 등 폴더를 생성하고 파일을 넣어주면 됩니다.

만약 src/main/resources/static/css 안에 common.css가 있는 상황이라면, 다음과 같이 링크를 걸 수 있습니다.

<head>
	...
	<link rel="stylesheet" th:href="@{/css/common.css}" />
	...
</head>

참고로 html 태그 중 닫는 태그가 없는 경우에는 < /> 형태로 작성하여 태그가 끝났음을 분명히 해주는 것이 좋습니다.

끝.

참고자료

[1] https://www.baeldung.com/spring-thymeleaf-css-js

[2] https://mywebproject.tistory.com/66

[MacOS] 맥북, 맥미니 화면 잠금 단축키

bskyvision.com — Tue, 28 May 2024 18:55:20 +0900

윈도우 PC의 경우는 "윈도우키 + L" 로 화면 잠금이 실행됩니다.

반면 맥os는 조금 다른 단축키로 화면 잠금이 이뤄집니다.

맥북, 맥미니 화면 잠금 단축키: Control + Command + Q

끝!

참고자료

[1] https://seyunlog.tistory.com/entry/%EB%A7%A5-%ED%99%94%EB%A9%B4%EC%9E%A0%EA%B8%88Lock-Screen-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%B3%80%EA%B2%BD

[Oracle] 테이블 및 컬럼 코멘트 조회하기

bskyvision.com — Mon, 11 Mar 2024 23:03:56 +0900

DB에 테이블을 만들고 컬럼을 만들 때 코멘트를 달아주면 좀 더 쉽게 다른 작업자들이 해당 테이블과 컬럼이 담고 있는 데이터를 이해할 수 있습니다.

오늘은 Oracle에서 테이블의 코멘트 및 컬럼의 코멘트를 조회하는 방법에 대해 살펴보도록 하겠습니다.

테이블 코멘트 조회

전체 테이블 코멘트 조회

SELECT * FROM all_tab_comments;

특정 테이블 코멘트 조회

SELECT
*
FROM ALL_TAB_COMMENTS
WHERE TABLE_NAME = '테이블명'

현재 접속한 계정의 전체 테이블 코멘트 조회

SELECT * FROM user_tab_comments;

컬럼 코멘트 조회

전체 컬럼 코멘트 조회

SELECT * FROM all_col_comments;

현재 접속한 계정의 전체 컬럼 코멘트 조회

SELECT * FROM user_col_comments;

[python] configparser .ini 파일 KeyError 해결 방법

bskyvision.com — Tue, 5 Mar 2024 19:05:36 +0900

python 프로그램에서 configparser를 통해서 .ini 파일에 접근하고자 할 때 KeyError가 난다면 basedir이 잘못 설정되어 있을 수 있습니다. 예를 들어 shellscript를 통해서 해당 파이썬 프로그램을 실행했거나 그러면 basedir이 다를 것입니다. 따라서 다음과 같은 코드를 넣어줘야 현재 프로젝트로 basedir이 설정되어서 문제없이 해당 ini 파일을 읽을 수 있을 것입니다.

import os


basedir = os.path.dirname(os.path.abspath(__file__))
print(basedir)
os.chdir(basedir) // basedir 변경

config = configparser.ConfigParser()
config.read('./config.ini')

개발자를 위한 티스토리 무료 반응형 스킨, 리눅스킨 LinuXkin v4.4.0

bskyvision.com — Tue, 20 Feb 2024 22:27:45 +0900

Hello LinuXkin

안녕하세요. bskyvision.com입니다. 제가 만든 "개발자를 위한 티스토리 반응형 스킨, 리눅스킨"을 기술블로그를 만들어가기 원하시는 분들께 소개해드립니다. 저도 요즘 많이 체감하는 바지만, 개발자에게 기술블로그는 필수 포트폴리오가 되어버렸습니다. 개인적으로 이직 할 때 큰 도움이 되었습니다.

리눅스 운영체제

코딩을 취미로든, 전공으로든, 직업으로든 하다보면 언젠가는 리눅스 운영체제를 접하게 됩니다. 서버라는 용어 많이 들어보셨죠? 우리가 앱을 사용하든, 어떠한 웹 사이트를 사용하든 그 뒤에는 우리에게 데이터를 제공해주는 서버라는 것이 있습니다. 그러한 서버들은 사시사철, 24시간 내내 켜져 있어야 합니다. 우리가 새벽 4시에도 카톡을 사용할 수 있는 이유는 서버가 켜져있기 때문입니다. 리눅스는 서버용 컴퓨터로 사용하기에 적합하게 설계가 되어 있기 때문에, 어떠한 서비스를 만들어내는 개발자들 입장에서는 사용하지 않을 수가 없는 운영체제라고 생각하시면 됩니다. 리눅스는 윈도우에 비해 분명 처음에는 사용하기 어렵지만, CLI 환경에서 명령어로 업무를 수행하기 때문에 훨씬 남들이 보기에 멋있어 보인다는 아주 큰 장점이 있습니다. ㅋㅋ

리눅스 + 스킨 = 리눅스킨

저는 리눅스만의 심플하고 전문적인 느낌을 살린 티스토리 스킨을 만들어봤습니다. 저는 이 스킨에게 리눅스킨(LinuXkin)이라는 이름을 붙여주었습니다.

리눅스와 티스토리 스킨의 콜라보레이션,

Linux x skin = LinuXkin

저는 리눅스킨을 디자인할 때, 클라우드 통합개발환경인 구름 IDE의 UI를 참고했습니다. 전체적으로 구성이 매우 심플하고, 요소요소에 포인트로 들어간 색상들이 예쁘더라고요. 구름 IDE의 UI를 예쁘게 만들어주신 디자이너 분께 감사의 마음을 표합니다.

구름 IDE의 UI입니다. 예쁘죠?

리눅스킨 개발 방식

처음에는 주먹구구식으로 리눅스킨을 개발했습니다. 그런데 점점 리눅스킨을 사용하시는 분들이 많아져서 조금의 책임감을 갖게 되었습니다. 스킨의 품질 보장을 위해 다음과 같은 산출물들을 관리해가며 개발하고 있습니다.

1. 스킨 깃허브 소스코드

2. 개발표준정의서

3. 업무구분, 업무코드 설계서

4. UIUX 기획서(피그마)

5. 통합테스트 시나리오

6. 체인지로그

7. 운영 이행시나리오

8. bskyvision.com 리눅스킨 소개글 (지금 여러분이 보고 계시는 이 글)

9. 이용자 제작 스킨 페이지 리눅소개글

많은 문서들을 계속해서 버전에 맞춰 갱신하고, 테스트 케이스를 하나씩 실행하려면 시간이 많이 들긴 하지만 좋은 품질의 스킨을 제공하기 위해 이러한 과정을 거치고 있습니다.

리눅스킨 이모저모

리눅스킨의 이모저모를 살펴보시고 마음에 드시면 한 번 설치해보세요. PC, 태블릿, 스마트폰 등 다양한 기기에서 어떻게 보여지는지 확인해보세요.

1. 전체

다크모드와 화이트모드의 전환은 우측 상단에 있는 전구 모양 아이콘을 클릭했을 때 이뤄집니다.

2. 글 목록

3. 댓글/방명록

댓글, 방명록 리스트의 디자인이 투박해보일 수 있으나, 일부러 리눅스 감성을 살리기 위한 것으로 봐주시면 감사하겠습니다. 댓글, 방명록 입력 모달창 귀엽지 않나요?

4. 태그 목록

태그 목록은 마치 복잡한 암호문을 보는 것과 같이 보여집니다.

5. 블로그 소개 사이드바

깃허브의 소개 화면의 디자인을 본땄습니다. 또한 기술 블로그라는 마크를 이모지를 활용해서 넣어줬습니다.

6. 검색창

블로그 내 검색 기능을 페이지 하단에 만들어놓았습니다. 리눅스 터미널에서 명령을 입력하는 느낌이 들도록 디자인했습니다.

7. 카테고리

폰트어썸에서 제공하는 폴더 느낌의 아이콘들을 활용하여 카테고리를 디자인했습니다.

리눅스킨 설치 방법

1. 먼저 제 깃헙에서 리눅스킨 압축 파일을 다운로드 받으세요.

깃헙은 개발자들이 자신이 개발한 코드를 저장하고 공유하기 위한 플랫폼입니다.

github.com/kyohoonsim/linuxkin

GitHub - kyohoonsim/linuxkin: 반응형 티스토리 스킨, 리눅스킨

반응형 티스토리 스킨, 리눅스킨. Contribute to kyohoonsim/linuxkin development by creating an account on GitHub.

github.com

코드 버튼을 클릭하신 후에 Download ZIP 버튼을 클릭하시면 됩니다. 깃/깃헙을 사용할 줄 아시는 분들은 git clone 또는 fork 등의 방식으로 코드를 가져가셔도 좋습니다.

다운로드 받으실 때 우측 상단에 있는 "별" 한 번 눌러주세요. 여러분의 클릭이 제게 큰 기쁨과 위로를 줍니다. 로그인을 해야해서 깃헙 회원이 아닌 분들은 다소 번거로우시겠지만 부탁드립니다. ㅎㅎ (깃헙 안 써보신 분들은 이번 기회에 한 번 써보세요. 코드 공유, 버전 관리, 백업 등에 있어서 아주 좋은 도구입니다.) 2024-02-12 기준으로 75개의 별이 쌓였네요. 별을 눌러주신 모든 분들께 감사드립니다. 원래 별 50개가 목표였는데, 여러분 덕분에 달성하게 되었네요. 목표치를 수정하여 현재는 100개의 별을 받는 것이 제 목표입니다. 100개의 별을 받는 그날까지 열심히 발전시켜 나가겠습니다!

압축 파일을 다운로드 받으셨다면 압축을 풀어주세요.

2. 그 다음에 티스토리 관리자 페이지에 들어가셔서 좌측 메뉴 중에 [꾸미기] - [스킨 변경]에 들어가주세요.

3. [스킨등록 +]을 클릭해주세요.

4. 다운로드 받은 파일들을 업로드해주세요.

README.md 파일은 업로드하실 필요 없습니다. 아래 그림처럼 되었다면, [저장] 버튼을 클릭하시면 됩니다. 업로드된 파일 목록에 js 파일이 꼭 포함되어 있어야 합니다. 그렇지 않으면, 다크모드 <-> 라이트모드 전환 등 각종 버튼이 제대로 작동하지 않습니다.

5. "리눅스킨 v버전"이라고 스킨명에 기입하신 후 [확인]을 클릭합니다.

ex) 리눅스킨 v4.3.2, LinuXkin v4.3.2

6. 스킨 목록에서 [스킨 보관함]을 클릭합니다.

7. "리눅스킨 v버전"을 선택한 후에 [적용]을 클릭하면, 스킨 설치가 완료됩니다.

8. 스킨 홈 설정, 기본 설정을 다음과 같이 해주시는 것을 권장드립니다.

홈 화면 글 수: 10개

목록 구성 요소: 목록만

글 목록 글수: 10개

목록 구성 요소: 목록만

리눅스킨 사용시 주의사항

1. 마음껏 수정해서 쓰세요.

리눅스킨은 설치 후 각자의 필요에 따라 마음껏 수정해서 쓰셔도 됩니다.

2. 배포는 리눅스킨 제작자의 깃헙에서만 합니다.

대단한 스킨은 아니지만, 꽤 많은 정성이 들어간 스킨입니다. 리눅스킨을 마치 자신이 직접 만든 것처럼 배포하지 마세요.

3. 카피라이트에서 "Designed by bskyvision"은 수정하시면 안됩니다.

스킨 하단부에 보시면 "Designed by bskyvision"과 같은 문구를 보실 수 있는데, 이것은 이 스킨을 제가 만들었다는 것을 나타내기 위함이니 이 부분은 절대 수정하지 말아주세요. 이것을 통해서 무료 스킨을 제공하는 제 블로그에 조금이나마 유입이 늘기 바라는 것이니 부디 제 바람을 좌절시키지 말아주세요.

4. 리눅스킨을 설치하신 분들은 댓글로 설치했다고 알려주세요.

다른 분들의 블로그에는 리눅스킨이 어떻게 적용되었는지 궁금하기도 하고, 또 살펴보면서 개선할 점은 없는가 파악하기 위함입니다.

리눅스킨은 계속해서 발전 중!

리눅스킨은 계속해서 업그레이드 되어 가고 있습니다. 아마도 제가 티스토리 블로그를 운영하는 동안은 계속해서 업데이트시켜갈 것 같습니다. 제가 다른 스킨으로 갈아타지 않는 이상 말이죠. 여러분이 많이 사용해주실 수록 제가 더 애정을 갖고 업데이트시켜 갈 것 같습니다. 많이 사용해주세요^^ 그리고 사용하시면서 개선되었으면 하는 점이 있다면, 제게 댓글로 알려주세요. 개선사항을 깃헙의 이슈 페이지에 남겨주셔도 좋습니다. github.com/kyohoonsim/linuxkin/issues

체인지로그

v4.4.0

- 개발표준정의서 신규 작성
- 업무구분, 업무코드 설계서 신규 작성
- 운영 이행시나리오 신규 작성
- 통합테스트 시나리오 신규 작성
- UIUX 기획서 피그마 신규 작성
- 개발표준정의서에 따라 전체 코드 수정
- 버그 수정
    1. 라이트모드에서 댓글 작성 후 제출했을 때 댓글의 색상이 다크모드의 색상으로 노출되던 버그 수정
- 개선
    1. 전구 아이콘을 라이트모드/다크모드에 따라 변화하게 하기 위해서 기존 html() 메서드 대신 attr() 메서드로 속성 컨트롤
    2. js_Load() 등 불필요한 코드 삭제
    3. 포스트 내 링크가 생성하는 카드 배경색 흰색으로 고정
    4. 포스트 내 블로그 소개 카드 안보이게 설정

마무리 인사

퀄리티 있는 글들이 심플하면서도 예쁜 스킨에 담겨진다면, 훨씬 더 많은 사람들이 찾는 블로그가 될 것입니다. 리눅스킨이 충분히 심플하고, 충분히 예쁜지는 모르겠지만, 현재 제 눈에는 만족스럽습니다. 그러나 아마도 얼마 후 저는 예쁘지 않은 부분을 찾아낼 것이고, 또 수정할 것입니다.

저 말고도 일반적으로 많은 분들이 좋아하실 만한 스킨이 되도록 계속해서 업그레이드시켜 가겠습니다. 리눅스킨을 설치해주신, 또 설치해주실 모든 분들께 진심으로 감사의 말씀을 드립니다.

[javascript] 문서 객체 모델(dom)을 조작하여 css 적용하기

bskyvision.com — Tue, 13 Feb 2024 22:25:53 +0900

자바스크립트에서 문서 객체 모델(dom, Document Object Model)을 조작하여 CSS를 적용하는 예시를 하나 보여드리겠습니다. 아이디가 test인 div 요소의 배경색을 노란색으로 해주는 코드입니다.

<div id="test">
    안녕하세요
</div>
<script>
    const testDiv = document.getElementById("test");
    testDiv.style.backgroundColor = 'yellow';
</script>

document 객체의 getElementById() 메서드로 test를 아이디로 갖는 요소를 선택합니다. 그 다음에 객체.style.backgroundColor의 값을 "yellow"로 설정함으로 해당 요소의 배경색을 노란색으로 설정합니다.

[Oracle] 테이블 생성 쿼리 확인, show create table 안 됨

bskyvision.com — Tue, 13 Feb 2024 18:50:10 +0900

MySQL, MariaDB에서는 테이블 생성 쿼리를 다음과 같은 쿼리로 확인할 수 있었습니다.

SHOW CREATE TABLE tbl_name;

하지만 oracle에서는 위 쿼리가 먹히지 않습니다. 대신 다음과 같은 쿼리로 테이블 DDL SQL문을 확인할 수 있습니다.

Oracle 테이블 생성 쿼리 확인

SELECT DBMS_METADATA.GET_DDL('TABLE', '테이블명') FROM DUAL;

만약 현재 접속한 사용자 계정 외 다른 계정에 의해 생성된 테이블이라면, 계정명을 추가로 옵션에 넣어줘야 합니다.

SELECT DBMS_METADATA.GET_DDL('TABLE', '테이블명', '계정명') FROM DUAL;

- [MySQL/MariaDB] 테이블 생성 쿼리 확인

[javascript] 간단한 조건문 처리는 삼항 조건 연산자로 대체 가능

bskyvision.com — Thu, 1 Feb 2024 22:16:48 +0900

삼항 조건 연산자를 활용하면 여러 줄로 쓰여지는 if, else 조건문을 대신할 수 있습니다.

삼항 조건 연산자는 다음과 같이 사용합니다.

조건식 ? (true일 때 실행 코드) : (false일 때 실행 코드)

간단한 예시 코드를 들어보겠습니다.

const a = 5;
const b = 7;

const result = a > b ? "a가 b보다 큼" : "a가 b보다 크지 않음";
console.log(result); // a가 b보다 크지 않음

a가 b보다 크지 않기 때문에 콜론(:) 뒤에 있는 코드가 실행되어 result 변수에 대입되었습니다.

[vscode] html 문서를 브라우저 열어주는 open in browser 익스텐션

bskyvision.com — Thu, 1 Feb 2024 19:36:50 +0900

vscode를 쓰는 또 하나의 이유는 다양한 익스텐션들을 제공해준다는 점일 것입니다.

오늘은 html 문서를 바로 브라우저에서 열고 싶을 때 유용하게 사용할 수 있는 open in browser 익스텐션에 대해 소개해드리도록 하겠습니다.

open in browser 사용법

우선 마켓플레이스에서 open in browser를 검색한 후 TechER이 만든 것을 선택하여 설치합니다.

딱 두 가지 단축키만 외우시면 됩니다.

Alt + B: 기본 브라우저에서 해당 HTML 문서 열기
Shift + Alt + B: 브라우저 선택한 후 HTML 문서 열기

[java] 파이썬의 list와 가장 비슷한 역할을 하는 ArrayList 클래스

bskyvision.com — Thu, 1 Feb 2024 00:10:22 +0900

자바에서 파이썬의 list와 가장 비슷한 역할을 하는 것은 바로 ArrayList 클래스이다. 아래 예제 코드를 통해서 간단히 사용법을 살펴보도록 하자.

ArrayList<Integer> arrayList = new ArrayList<>();

arrayList.add(10);
arrayList.add(20);
arrayList.add(30);
arrayList.add(40);
arrayList.add(50);
System.out.println(arrayList); // [10, 20, 30, 40, 50]

arrayList.remove(1);
System.out.println(arrayList); // [10, 30, 40, 50]

Integer idx = arrayList.indexOf(50);
System.out.println(idx); // 3

Integer len = arrayList.size();
System.out.println(len); // 4

ArrayList의 여러 메서드 중에서 가장 많이 쓰일 만한 것들은 예제 코드에 소개된 add(), remove(), indexOf(), size() 등이다.

add(): 요소 추가
remove(): 요소 삭제
indexOf(): 해당 요소의 인덱스 반환
size(): 해당 리스트의 사이즈 반환

참고자료

[1] https://stackoverflow.com/questions/48772017/java-equivalent-of-python-list

[java] 키, 값으로 구성된 엔트리를 저장할 수 있는 HashMap 클래스

bskyvision.com — Wed, 31 Jan 2024 22:45:26 +0900

필자는 파이썬으로 개발자의 세계에 들어섰기 때문에 다른 언어를 배울 때 파이썬이 기준점이 되는 경우가 많다.

파이썬의 딕셔너리와 거의 같은 역할을 하는 클래스가 바로 자바의 HashMap 클래스이다.

HashMap 클래스

HashMap 클래스는 Map 인터페이스의 구현체이다. Map은 키와 값으로 구성된 데이터를 저장할 수 있는 자료구조이다. 값은 중복 저장될 수 있지만 키는 중복될 수 없다. HashMap은 해싱을 사용하기 때문에 데이터를 검색하는데 있어서 뛰어난 성능을 보인다.

예제를 통해 어떻게 HashMap 객체를 생성하고 사용하는지 살펴보도록 하자.

HashMap<String, String> hashMap = new HashMap<String, String>();

hashMap.put("사과", "apple");
hashMap.put("바나나", "banana");
hashMap.put("체리", "cherry");

System.out.println(hashMap.get("사과")); // apple
System.out.println(hashMap.get("바나나")); // banana

hashMap.remove("체리");
System.out.println(hashMap); // {사과=apple, 바나나=banana}

hashMap.clear();
System.out.println(hashMap); // {}

위 예제 코드에서 알 수 있듯이, get() 메서드로 키에 해당하는 값을 얻고, put() 메서드로 키-값 쌍을 추가한다. 그리고 remove() 메서드로 로 하나의 엔트리를 삭제하고, clear() 메서드로 모든 엔트리를 삭제한다.

그리고 이렇게 여러 개의 데이터를 담을 수 있는 자료 구조라면 반복문에서 어떻게 활용하는지도 알아두는 것이 좋다. entrySet() 메서드를 사용하면 반복문에서 쉽게 하나씩 엔트리를 꺼내쓸 수 있다.

HashMap<String, String> hashMap = new HashMap<String, String>();

hashMap.put("사과", "apple");
hashMap.put("바나나", "banana");
hashMap.put("체리", "cherry");

for (Map.Entry<String, String> entry : hashMap.entrySet()) {
    System.out.println(entry.getKey() + ": " + entry.getValue());
}

참고자료

[1] https://coding-factory.tistory.com/556

[2] https://paciencia.tistory.com/119

[FastAPI] http 요청의 header에서 데이터 얻는 방법

bskyvision.com — Tue, 30 Jan 2024 20:16:50 +0900

jwt 토큰 등은 Authorization 요청 헤더에 담아서 서버에 제공되곤 합니다. 오늘은 FastAPI에서 헤더에 어떤 데이터가 담겨서 요청될 때 FastAPI에서 그 값을 얻는 방법에 대해 살펴보도록 하겠습니다. 예시 코드는 다음과 같습니다. fastapi의 Request 객체를 활용하면 쉽게 요청의 헤더에 담겨있는 데이터를 얻을 수 있습니다.

from fastapi import FastAPI, Request


@app.get("/ping")
async def ping_route(request: Request):
    my_header = request.headers.get('header-name')

만약 Authorization 요청 헤더에 담겨서 온 데이터를 추출하고자 한다면 header-name에 Authorization을 넣어주면 됩니다.

참고자료

[1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization

[2] https://stackoverflow.com/questions/68231936/how-can-i-get-headers-or-a-specific-header-from-my-backend-api

[java] String 문자열의 일부 자르기, substring() 메서드

bskyvision.com — Wed, 17 Jan 2024 22:43:47 +0900

자바에서 String 타입 문자열의 일부를 추출하고 싶을 때 사용할 수 있는 메서드에는 substring()이 있습니다.

substring() 메서드 사용법

사용법은 다음과 같습니다.

(String객체).substring(시작인덱스)
(String객체).substring(시작인덱스, 끝인덱스)

실제 사용 예제를 살펴보겠습니다. 일부러 이해를 돕기위해 각 문자열 위치에 해당하는 인덱스들로 구성된 문자열을 만들었습니다.

String str = "01234567";
System.out.println(str.substring(4)); // 4567
System.out.println(str.substring(1, 3)); // 12

주의할 것은 끝인덱스에 3을 넣어주면 그것보다 작은 인덱스 2까지가 잘린다는 점입니다.

윈도우 PC에서 모든 창들 최소화하여 바탕화면 보이게 하는 단축키

bskyvision.com — Tue, 16 Jan 2024 23:43:11 +0900

윈도우 PC에서 작업을 하다보면 여러 프로그램 창이 떠 있게 됩니다. 이때 바탕화면으로 가려면 하나씩 창들을 내려줘야 하는데, 그것이 꽤 귀찮습니다. 여기 그 작업을 아주 간단하게 해주는 단축키가 있습니다.

윈도우키 + D

위 단축키를 사용하면 바로 바탕화면을 보여줍니다.

다시 한번 더 누르면 창들을 원상 복구시켜줍니다.

[vscode] 구문 하이라이트 없이 텍스트만 복사하는 방법

bskyvision.com — Sat, 13 Jan 2024 13:11:21 +0900

vscode에서 코드 또는 텍스트를 복사해서 다른 곳에 붙여넣으면 구문 하이라이트도 함께 반영되곤 합니다. 만약 스타일 없이 텍스트만 딱 복사하고 싶다면 설정에서 Copy With Syntax Highlighting 옵션을 끄면 됩니다.

맥북에서 설정 화면에서 cmd + , 로 진입할 수 있습니다. 윈도우 PC에서는 ctrl + , 입니다.

검색창에 copy with syntax highlighting를 쳐보세요. 체크박스의 체크를 해제하시면 됩니다.

이제는 더이상 스타일이 함께 복사되지 않고 텍스트만 복사됩니다.

- [vscode] 설정(Settings) 페이지 단축키, ctrl + 콤마

참고자료

[1] https://vine-nam.github.io/2022-08/vscode-copy-text-without-formatting

[회사 용어] ERP(Enterprise Resource Planning) 의미

bskyvision.com — Fri, 5 Jan 2024 23:30:35 +0900

이직 할 때마다 느끼는 것이지만 제가 잘 모르는 용어가 새삼 참 많다는 점입니다. 오늘 소개해드릴 ERP도 제게 그러한 용어 중 하나입니다.

ERP는 전사적 자원 관리(Enterprise Resource Planning)의 약자로 "기업의 모든 업무를 통합 관리할 수 있는 시스템"을 의미합니다.

ERP는 회사의 인사, 재무, 생산, 판매, 운영 등 전반적인 업무 프로세스를 하나의 시스템 안에 구축해 각각의 정보와 자원을 유기적으로 공유하고 이를 통해 빠른 의사결정과 업무 진행이 가능하도록 돕습니다[2]. 그룹웨어와는 다른 개념입니다. 그룹웨어는 일종의 커뮤니케이션 도구이고, ERP는 사무를 볼 때 도움을 주는 현황표 같은 것으로 생각할 수 있습니다[3].

ERP 프로그램 중에 가장 유명한 것은 독일의 SAP입니다. SAP는 회사 이름이기도 한데, 독일의 시가총액 1위 기업입니다. 그 외에도 Oracle, 마이크로소프츠, 더존비즈온, 영림원, 가비아 등의 회사가 ERP를 제공한다고 합니다[2].

참고자료

[1] https://www.ecount.com/kr/ecount/trial/what-is-erp

[2] https://library.gabia.com/contents/9225/.

[3] https://namu.wiki/w/SAP(%EA%B8%B0%EC%97%85)

윈도우 PC에서 화면 캡쳐 단축키는?

bskyvision.com — Fri, 5 Jan 2024 23:26:49 +0900

길게 설명하지 않겠습니다.

윈도우에서 화면 캡쳐 단축키는

윈도우키 + shift + s

입니다.

혹시 이 단축키로 안되시면 빨리 다른 글 보러 가세요. 그럼 이만.

bskyvision.com

오랫동안 운영했던 티스토리 블로그 안녕. 이제 직접 만든 블로그 시작!

[javascript] 템플릿 리터럴로 문자열 내에 변수 쉽게 대입하기

참고자료

[vscode] prettier - format on save 적용 안 될 때 대처 방법

PDF에 적용된 폰트 확인하는 방법 (Adobe Acrobat Reader)

PDF에 적용된 폰트 확인하는 방법

[javascript] ?? 연산자 Nullish Coalescing이란

참고자료

[javascript] ?. 옵셔널 체이닝(optional chaining)이란?

참고자료

SI 개발자 vs SM 개발자

SI 개발자

SM 개발자

참고자료

[javascript] 배열을 잘라서 새로운 배열 객체로 만들어주는 slice() 메서드

slice() 메서드 사용법

참고자료

[javascript] 크롬 브라우저 디버깅 단축키 정리

스크립트 디버깅 단축키 정리

F8 - Resume script execution

F9 - Step

F10 - Step over next function call

F11 - Step into next funciton call

F12 - Step out of current function

참고자료

[javascript] 배열의 요소들을 합쳐서 문자열로 만들어주는 join() 메서드

[javascript] 배열에 요소 추가하는 메서드, push()

참고자료

[MySQL] 서버 타임존 변경하기

참고자료

[MySQL] MariaDB에서 MySQL로 변경한 후 sql_mode=only_full_group_by 에러가 발생한 경우 조치 방법

참고자료

[Linux] Ubuntu 24.04 LTS에 MySQL 서버 설치하는 방법

참고자료

[Linux] 서버 시간 한국 표준시로 변경하기

참고자료

[python] flask_mysqldb 설치 중 에러 해결 방법

flask_mysqldb 설치 에러 해결 방법 (1차 시기)

flask_mysqldb 설치 에러 해결 방법 (2차 시기)

참고자료

[vscode] ssh 접속시 "원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다" 에러 나는 경우

참고자료

[javascript] split() 메서드로 문자열을 지정한 구분자로 분리하여 배열 만들기

[javascript] 정규식(RegExp)으로 문자열내 반복되는 특정 단어 시작 인덱스 배열 생성하는 방법

[javascript] 헷갈리기 쉬운 substring(), substr() 메서드 사용법 비교

substring(), substr() 메서드 사용법 비교

[css] 여러 개의 css 파일을 링크했을 때 우선순위

여러 개의 css 파일을 링크했을 때 우선순위

[css] @font-face로 폰트를 등록할 때 굵기별로 지정하는 방법

[css] font-family 속성에 여러 폰트 등록하여 사용하는 경우 (+언어별로 폰트 설정하는 방법)

css 속성 font-family 사용법

참고자료

[Oracle] 인덱스 조회 쿼리

[bootstrap] 콘텐츠 간의 gap을 다루는 gx-*, gy-*, g-* 클래스

참고자료

[java] 배열 선언 및 초기화하는 방법

[java] char 자료형 데이터 대소문자 판별, 대소문자 변환 방법

대소문자 판별하는 방법

대소문자 변환하는 방법

[java] ArrayList를 배열로 변환하는 방법

참고자료

[java] 배열 정렬하기, java.util.Arrays 클래스 활용

[java] 거듭제곱 구하는 방법, Math.pow()

[thymeleaf] 이미지 태그 소스 정의하는 방법

[java] 구글 이메일 전송 코드에서 535-5.7.8 Username and Password not accepted 에러 대처 방법

[gitlab] gitlab-ci로 ec2에 jar 배포를 위해 SSH 키 생성하고 세팅하는 방법

1. SSH 키 생성

2. SSH private 키 git lab 등록

3. SSH public 키 EC2 등록

[thymeleaf] css 링크거는 방법

참고자료

[MacOS] 맥북, 맥미니 화면 잠금 단축키

참고자료

[Oracle] 테이블 및 컬럼 코멘트 조회하기

테이블 코멘트 조회

컬럼 코멘트 조회

[python] configparser .ini 파일 KeyError 해결 방법

개발자를 위한 티스토리 무료 반응형 스킨, 리눅스킨 LinuXkin v4.4.0

Hello LinuXkin

[bootstrap] 콘텐츠 간의 gap을 다루는 gx-, gy-, g-* 클래스