티스토리

bskyvision.com
검색하기

블로그 홈

bskyvision.com

IT 분야 크리에이터
bskyvision.com/m

일하고, 개발하고, 공부하다가 알게 된 지식들을 정리하고 있습니다. 제 글이 여러분의 구글링 시간을 조금이나마 단축시켜줄 수 있길..

구독자
80
방명록 방문하기
공지 bskyvision.com 소개 및 ⋯ 모두보기

주요 글 목록

  • [javascript] 템플릿 리터럴로 문자열 내에 변수 쉽게 대입하기 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 공감수 0 댓글수 0 2024. 8. 30.
  • [vscode] prettier - format on save 적용 안 될 때 대처 방법 vscode에서 설치해서 사용 가능한 확장 프로그램 중에 prettier라는 코드 포맷터가 있습니다. 파일을 저장할 때 prettier를 통해서 코드를 아름답게 만들어주고 싶을 때 format on save를 적용해주곤 합니다.   그런데 이와 같이 설정해줬는데 format on save가 적용이 안 된다면 설정에서 default formatter가 무엇으로 설정되어 있는지 확인해볼 필요가 있습니다.  이렇게 default formatter에 prettier를 설정해줘야 format on save가 잘 적용될 수 있습니다. 끝. 공감수 0 댓글수 0 2024. 8. 29.
  • PDF에 적용된 폰트 확인하는 방법 (Adobe Acrobat Reader) 오늘은 PDF 문서에 적용되어 있는 폰트 목록을 확인하는 방법에 대해 살펴보도록 하겠습니다. PDF에 적용된 폰트 확인하는 방법우선 Adobe Acrobat Reader로 PDF 파일을 엽니다. Ctrl + D를 누릅니다. 그러면 문서 속성 창이 뜰 텐데, 거기서 글꼴 탭에 들어가면 해당 PDF 문서에서 사용된 폰트 목록을 확인할 수 있습니다.  끝. 공감수 0 댓글수 0 2024. 8. 27.
  • [javascript] ?? 연산자 Nullish Coalescing이란 자바스크립트에서 || 문법은 아마 많이들 사용하고 계실 것입니다. 왼쪽에 있는 값이 거짓 값일 때(0, '', false, null, undefined) 오른쪽 값으로 설정하고자 할 때 많이 사용하는 문법입니다. const age = 35;console.log(age || 40); // 35const age1 = ''console.log(age1 || 40); // 40const age2 = 0;console.log(age2 || 40); // 40const age3 = null;console.log(age3 || 40); // 40const age4 = undefined;console.log(age4 || 40); // 40   그런데 ''와 0을 의도한 경우라면 || 연산자 대신 null과 undef.. 공감수 0 댓글수 0 2024. 8. 17.
  • [javascript] ?. 옵셔널 체이닝(optional chaining)이란? 옵셔널 체이닝(optional chaining)은 ES11 (2020년)에 도입된 문법입니다. 객체의 속성에 접근할 때 해당 속성이 존재하는지 먼저 확인한 후에 접근하는 기능입니다. 만약 해당 속성이 존재하지 않는 경우네는 TypeError 대신에 undefined를 반환합니다. "돌다리도 두들겨보고 건너라" 전법을 시전하는 것이라고 볼 수 있습니다. 해당 객체 내에 특정 속성이 존재할지에 대해 확신을 할 수 없다면 옵셔널 체이닝을 써주는 것이 좋습니다.  const user = { name: "Alice", address: { city: "Seoul", street: "123 Main St" }}console.log(user?.address?.city); // .. 공감수 0 댓글수 0 2024. 8. 14.
  • SI 개발자 vs SM 개발자 IT 프로젝트는 크게 보면 이 두 가지로 분류할 수 있습니다.   SI와 SM. SI는 System Integration의 약어로 "시스템 구축"을 뜻합니다.  반면, SM은 System Management의 약어로 "시스템 운영(유지보수)"를 뜻합니다.  SI를 통해 시스템이 구축되었다면 그 이후에는 SM이 시작되겠죠.  개발자는 이렇게 분류하는게 맞을지는 모르겠지만 SI 개발자와 SM 개발자로 나눌 수도 있을 것 같습니다. 대개 SI 업무를 하는 개발자들은 스타트업, 중소기업에서 근무할 가능성이 높고, SM 업무를 하는 개발자는 대기업에서 근무할 가능성이 높습니다. 물론 많은 예외가 있으니 오해는 말아주세요.  보통 대기업은 SI 업체들에 외주를 줘서 시스템을 구축한 후 자사 개발자들을 통해서 운영(.. 공감수 0 댓글수 0 2024. 8. 13.
  • [javascript] 배열을 잘라서 새로운 배열 객체로 만들어주는 slice() 메서드 오늘은 자바스크립트의 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)); .. 공감수 0 댓글수 1 2024. 8. 5.
  • [javascript] 크롬 브라우저 디버깅 단축키 정리 오늘은 크롬 브라우저에서 자바스크립트 코드를 디버깅할 때 사용할 수 있는 단축키에 대해 정리해보도록 하겠습니다. 먼저 F12로 개발자 도구를 연 후에 sources 탭에 가서 디버깅하고 싶은 부분에 중단점을 설정합니다. 그 다음에 이제 아래 버튼들을 통해서 디버깅을 진행할 수 있습니다.  스크립트 디버깅 단축키 정리F8 - Resume script execution 스크립트 실행을 재개한다. 추가 중단점이 있다면 중단점까지, 없다면 스크립트를 쭉 실행한다.  F9 - Step 다음 코드를 실행한다.  F10 - Step over next function call 다음 함수 호출까지 넘어간다. F11 - Step into next funciton call 다음 함수 안으로 들어간다. F12 - Step o.. 공감수 0 댓글수 0 2024. 8. 4.
  • [javascript] 배열의 요소들을 합쳐서 문자열로 만들어주는 join() 메서드 자바스크립트에서 배열의 요소들을 합쳐서 문자열로 만들고 싶다면, 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); 공감수 1 댓글수 0 2024. 7. 23.
  • [javascript] 배열에 요소 추가하는 메서드, push() 자바스크립트에서 배열에 요소를 추가할 때 사용할 수 있는 메서드는 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() 메서드는.. 공감수 0 댓글수 0 2024. 7. 22.
  • [MySQL] 서버 타임존 변경하기 오늘은 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.tistor.. 공감수 0 댓글수 0 2024. 7. 21.
  • [MySQL] MariaDB에서 MySQL로 변경한 후 sql_mode=only_full_group_by 에러가 발생한 경우 조치 방법 최근에 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를 처리하.. 공감수 0 댓글수 0 2024. 7. 20.
  • [Linux] Ubuntu 24.04 LTS에 MySQL 서버 설치하는 방법 Ubuntu 24.04 LTS에 MySQL 서버를 설치하려면 다음 명령을 실행하시면 됩니다. sudo apt install mysql-server 잘 설치가 되었다면, 아래 명령어를 실행했을 때 mysql 버전 정보가 잘 출력될 것입니다.  mysql --version  끝. 참고자료[1] https://hyunmin1906.tistory.com/265 공감수 0 댓글수 0 2024. 7. 19.
  • [Linux] 서버 시간 한국 표준시로 변경하기 리눅스 서버의 시간은 별도로 설정하지 않으면 보통 한국 시간으로 설정되어 있지 않습니다. 한국인을 대상으로 서비스를 하는 서버라면 한국 시간으로 설정해주는 것이 대체로 편리합니다. 아래 명령어를 통해 서버 시간을 한국 표준시로 설정해줄 수 있습니다.  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.. 공감수 0 댓글수 0 2024. 7. 18.
  • [python] flask_mysqldb 설치 중 에러 해결 방법 우분투 서버에 flask_mysqldb 모듈을 설치하기 위해 pip install flask_mysqldb를 터미널에 입력했을 때 다음과 같은 에러가 나는 경우가 있습니다. 참고로 flask_mysqldb[1]는 flask에서 mysql에 연결을 할 수 있게 도와주는 라이브러리입니다.  flask_mysqldb 설치 에러 해결 방법 (1차 시기)이 경우에는 먼저 다음 명령을 터미널에 준 다음에 다시 시도해보십시오.sudo apt-get install libmysqlclient-devpip install flask_mysqldb 아마 이제 flask_mysqldb가 정상적으로 설치가 되실 것입니다. flask_mysqldb 설치 에러 해결 방법 (2차 시기)만약 위와 같이 했는데도 flask_mysqldb.. 공감수 0 댓글수 0 2024. 7. 17.
  • [vscode] ssh 접속시 "원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다" 에러 나는 경우 vscode에서 ec2 서버 등에 ssh 접속을 시도할 때 다음과 같은 에러가 발생하는 경우가 있습니다. "원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다"  만약 EC2에서 Elastic IP(EIP)를 만들어놓고 어떤 서버에 그 EIP를 할당하여 사용하다가 다른 EC2에 그 EIP를 할당하였다면 이 에러가 발생합니다. 이런 경우에는 ~/.ssh/known_hosts에서 해당 서버에 대한 예전 기록을 삭제해줘야 합니다. 현재 접속을 시도하는 서버의 IP에 해당하는 행들을 모두 삭제한 후 다시 SSH 접속을 시도하면 더 이상 위 에러가 발생하지 않습니다.  끝. 참고자료[1] https://developer-itspjc.tistory.com/38 공감수 0 댓글수 0 2024. 7. 17.
  • [javascript] split() 메서드로 문자열을 지정한 구분자로 분리하여 배열 만들기 오늘은 split() 메서드로 문자열을 지정한 구분자로 분리하여 배열을 만드는 방법에 대해 살펴보도록 하겠습니다. 예를 들어, 다음과 같은 문자열이 있다고 가정해보겠습니다.  홍대입구->신촌->이대->아현->충정로->시청 저는 여기서 역들의 이름만 담은 배열을 만드려고 합니다. split 메서드를 활용하면 아주 쉽게 이 일을 할 수 있습니다. const txt = "홍대입구->신촌->이대->아현->충정로->시청";const stations = txt.split("->");console.log(stations); 공감수 0 댓글수 0 2024. 7. 15.
  • [javascript] 정규식(RegExp)으로 문자열내 반복되는 특정 단어 시작 인덱스 배열 생성하는 방법 오늘은 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.. 공감수 0 댓글수 0 2024. 7. 14.
  • [javascript] 헷갈리기 쉬운 substring(), substr() 메서드 사용법 비교 오늘은 자바스크립트에서 문자열을 자를 때 사용하는 메서드인 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));  결과를 살펴보면 su.. 공감수 0 댓글수 0 2024. 7. 13.
  • [css] 여러 개의 css 파일을 링크했을 때 우선순위 오늘은 여러 개의 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 { backgrou.. 공감수 0 댓글수 0 2024. 7. 11.
  • [css] @font-face로 폰트를 등록할 때 굵기별로 지정하는 방법 @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 값을 사용.. 공감수 0 댓글수 0 2024. 7. 4.
  • [css] font-family 속성에 여러 폰트 등록하여 사용하는 경우 (+언어별로 폰트 설정하는 방법) 오늘은 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"은 특정 폰트를 지칭하지만 se.. 공감수 0 댓글수 0 2024. 7. 2.
  • [Oracle] 인덱스 조회 쿼리 Oracle에서 인덱스를 조회하는 쿼리는 다음과 같습니다. SELECT a.table_name, a.index_name, a.column_nameFROM all_ind_columns aWHERE a.table_name = '테이블명'ORDER BY a.index_name, a.column_position; 쿼리를 날리기 전에 인덱스를 조회하여 인덱스를 활용하는 쿼리를 작성하는 습관을 들여야 합니다. 그렇지 않으면 쿼리 하나 실행하는데 매우 긴 시간이 걸릴 뿐 아니라 성능 이슈를 야기할 수도 있습니다. 공감수 1 댓글수 0 2024. 7. 1.
  • [bootstrap] 콘텐츠 간의 gap을 다루는 gx-*, gy-*, g-* 클래스 부트스트랩에서 gx-*, gy-*, g-* 클래스는 콘텐츠 간의 gap을 정의할 때 사용하는 클래스입니다.  gx-*는 수평 방향의 갭, gy-*는 수직 방향의 갭, g-*는 수평, 수직 방향의 갭을 정의할 때 사용합니다. gx-1부터 gx-5까지 사용가능한데 5로 갈수록 콘텐츠 사이의 갭이 더 커집니다.  Custom column padding Custom column padding    Custom column padding Custom column padding Custom column padding Custom column padding   참고자료.. 공감수 0 댓글수 0 2024. 6. 23.
  • [java] 배열 선언 및 초기화하는 방법 자바에서 int형 자료를 5개 담을 수 있는 배열을 선언하는 방법은 다음과 같습니다. int[] arr = new int[5];  만약 배열 선언과 동시에 초기화를 하고 싶다면 다음과 같이 코드를 작성하면 됩니다. int[] arr = {1, 2, 3, 4, 5}; 끝. 공감수 0 댓글수 0 2024. 6. 22.
  • [java] char 자료형 데이터 대소문자 판별, 대소문자 변환 방법 오늘은 자바에서 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.is.. 공감수 0 댓글수 0 2024. 6. 21.
  • [java] ArrayList를 배열로 변환하는 방법 오늘은 Java에서 ArrayList를 배열로 변환하는 방법에 대해 살펴보겠습니다. 먼저 1, 2, 3 요소를 갖고 있는 간단한 ArrayList를 만든 후 int[] 배열로 변환하겠습니다. import java.util.ArrayList;public class ArrayListEx3 { public static void main(String[] args) { ArrayList arrList = new ArrayList(); arrList.add(1); arrList.add(2); arrList.add(3); int[] answer = arrList.stream().mapToInt(i -> i).toArray(); .. 공감수 0 댓글수 0 2024. 6. 15.
  • [java] 배열 정렬하기, java.util.Arrays 클래스 활용 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); } }} 결과를 보시면 보시다시피 오름차순 정렬이 잘 된 것을 확인하실 수 있습니다.  끝. 공감수 0 댓글수 0 2024. 6. 14.
  • [java] 거듭제곱 구하는 방법, Math.pow() java에서 거듭제곱을 구하려면 수학 관련해서 자주 사용하는 클래스인 Math의 pow() 메서드를 사용하면 됩니다. Math.pow(2, 5) = 32.0 참고로 pow() 메서드의 리턴 타입은 double입니다. 끝. 공감수 0 댓글수 0 2024. 6. 13.
  • [thymeleaf] 이미지 태그 소스 정의하는 방법 오늘은 thymeleaf에서 이미지 태그에 소스를 정의하는 방법에 대해 알아보겠습니다. 이미지 파일은 기본적으로 src/main/resources/static 하위에 있어야 합니다. 만약 src/main/resources/static/img 폴더 내에 sample.jpg라는 이미지 파일을 넣어두었다면, 소스를 다음과 같이 정의하면 됩니다.  끝. 공감수 0 댓글수 0 2024. 6. 12.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.