티스토리

도담도담

검색하기

블로그 홈

도담도담

zinisang.tistory.com/m

내가 모르겠는 걸 배우고 채워가는 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

tabindex 설정하기 웹접근성 관련해서 페이지의 항목들이 순서에 맞게 읽을 수 있게 되어야 하는 경우가 있다. 우리가 원하는 위치로 이동하기 위해서 tab 키를 사용하고는 한다. 보통은 그냥 맨 위부터 아래로 순서대로 내려가는것으로 알고있기는 한데, tab으로 이동하는 것도 사실 순서를 정해줄 수가 있다. 태그 속성중에 tabindex 라는게 있다. tabindex룰 설정해주면 해당 순서에 맞춰서 tab키가 이동한다. 설정의 기본개념은 "tabindex=0", "tabindex=1" 등과 같은 식으로 설정한다. See the Pen tabindex 설정 by lsj5634 (@zinisang) on CodePen. 공감수 0 댓글수 0 2024. 2. 7.
[우분투] ssh server port 변경하기 sudo service ssh restart //재시작 sudo netstat -app | grep LISTEN | grep sshd // 'LISTEN'이랑 'sshd'를 키워드로 포트확인 1. ssh server 설치 sudo apt-get update // s/w관리하는 서버를 최신으로 업데이트 sudo apt-get install openssh-server // Continue?물어보면 Y 입력 2. ssh 서버 서비스 시작하기 sudo service ssh start 3. 파일열기 sudo gedit /etc/ssh/sshd_config // vi 로 해도 되는데 gedit으로 해서 따로 띄우는게 수정하기 더 편하더라 4. 포트변경/추가 #Port 22 Port 7788 // #으로 지우고 사용.. 공감수 1 댓글수 1 2022. 11. 8.
[우분투] mariaDB 포트확인 sudo mariadb 로 버전확인 MariaDB > SHOW GLOBAL VARIABLES LIKE 'PORT'; 로 포트번호 확인 공감수 0 댓글수 0 2022. 11. 7.
리눅스 우분투(Ubuntu) 설치 10단계로 우분투 설치하기 1. 가상환경 활용을 위한 VM 설치 (Virtual Box) https://www.virtualbox.org/wiki/Downloads Downloads – Oracle VM VirtualBox Download VirtualBox Here you will find links to VirtualBox binaries and its source code. VirtualBox binaries By downloading, you agree to the terms and conditions of the respective license. If you're looking for the latest VirtualBox 6.1 packages, see Virt www.virtualbox.o.. 공감수 0 댓글수 0 2022. 11. 4.
티스토리 블로그 삭제하기 취미용으로 사용하려고 티스토리 계정 하나를 만들어놨다가 안쓸꺼 같아서 지우려고 했더니 생각보다 바로바로 눈에띄지 않아서 그냥 겸사겸사 올려두는내용이다. 티스토리 계정의 관리페이지 좌측 하단에 보면 "블로그" 라고 있다. 이 안에가면 "데이터 관리하기" 라고 있는데 폐쇄할 수 있다고 한다. 내용을 확인하고 폐쇄진행 등록된 메일로 폐쇄동의 확인메일을 보내준다. 그렇게 메일로 가서 확인해주고 진행하면 블로그 깔끔하게 삭제 끝! 공감수 1 댓글수 0 2022. 9. 9.
유튜브 작은창으로 보기 (PIP모드) 가끔 다른일 하면서 유튜브나 넷플릭스 등 영상매체를 틀어놓고 일하고 싶은 경우가 있다. 하지만 듀얼모니터를 활용하는 케이스가 아니고서는 alt+tab 열심히 눌러가면서 보거나 핸드폰으로 틀어놓고 봐야할 수 도 있는데, 이건 귀찮기가 보통이 아니다. 그래서 인터넷을 찾아보니 신기한 모드가 있었다. "PIP 모드" 핸드폰이나 테블릿에서 영상을 보다가 다른 앱을 사용하게 되어도 그 영상이 작은 화면에 남아있게 되는경우들을 심심찮게 볼 수 있는데, 딱 그거와 같은 기능이다. 컴퓨터에서도 작은화면으로 사용이 가능하다. 바로 간단한 사용법 적용해보자. 1. 영상 시청 (유튜브) 2. 상단에 "음악 동영상 등의 항목 제어하기" 를 클릭 3. PIP 모드 시작 클릭 4. 작은창으로 시청 이 PIP 창은 클릭하여 탭으로.. 공감수 1 댓글수 0 2022. 9. 6.
특정 날짜,기간 찾기 (주간, 월간, 연간) 데이터 가공을 하다가 날짜관련해서 정비를 하게 됬었는데, 특정기간을 찾는게 은근 시간을 꽤 소비하는 작업이였다. 그래서 특정 기간을 찾을때 사용했던 기본 로직을 좀 정리해보았다. 1. 지난주, 저번주 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth(); var day = today.getDate(); //-----------기본 날짜 형식 구성----------- var last_week = new Date(year, month, day - 7); var week = moment(last_week).format('YYYYMMDD').toString(); week; //-----------지난주 날짜 설정-.. 공감수 0 댓글수 0 2022. 6. 25.
trim() (빈공간제거) 데이터 가공하다보니 가끔 문자열 앞뒤로 빈공간이 더해져서 오는 경우들이 있다. 이럴때 해당 데이터를 온전히 사용하려면 이왕이면 공백을 제거해서 사용하는 편이 좋다. 그럴때 사용하는 함수 trim() 이다. var str = " test "; var trimStr = str.trim(); // "test" 공감수 0 댓글수 0 2022. 6. 20.
배열 가공 및 배열 합치기 데이터를 가져와서 사용할 때 API를 통해 통짜 데이터를 가져오게 되면 필요한 데이터를 가공해서 사용한다. filter 나 reject 같은 함수들을 사용해서 데이터를 가공하다 보면 조건이 늘어날 수록 은근 헷갈리게 되는 부분들이 생기게 되었다. 그래서 데이터 정리 및 배열 정비하는 요령을 정리해보려고 한다. (물론 각자 편한 방식은 다를것이다!) 1. 조건들을 하나씩 따로 생성해서 확인하기 구분 조건들을 각각 따로 생성해서 그 조건들을 일치시키는 내용을 마지막에 return 하여 데이터를 가공하는 방법이다. var deposit = data.filter((item) => { const condition1 = item.ACCOUNT_NUMBER !== "111111"; const condition2 = .. 공감수 0 댓글수 0 2022. 6. 13.
3항연산자 (if문 대신 빠르게 사용) 코드를 처음 배울때 if( )을 배워서 아주 열심히 사용을 했었다. if.... 또 다시 if.... 사용하는게 문제되는건 아니지만 가능 코드가 뭔가 길어지는거 같아서 맘에 안들때도 있었다. 그래서 찾게된게 "3항연산자" 이다. 기본 형식 기본적인 형식은 다음과 같다. condition ? true : false; //(조건이 있으면) ? (참) : (아니면 거짓); 아래와 같은 예를 들어 표현할 수 있겠다. var a = 10; var b = 20; var c = 0; a < b ? c = 1 : c = 2; // a가 b보다 작으면 c는 1이다, 하지만 해당조건이 맞지 않다면 c는 2이다. or ( || ) , and ( && ) 한줄로 간단하게 표현되는 것이 장점이긴 하지만 간혹 3항연산자로도 다중.. 공감수 0 댓글수 0 2022. 6. 7.
조건에 따라 버튼 나타내기 json으로 데이터를 받아서 html에 데이터를 뿌려줄 때, 조건에 따라 버튼이 나오기도, 안나오기도 하는 조건을 걸고 싶었다. 그래서 아래와 같은 방식으로 조건 테스트를 진행해보았다. 아직 챗봇작업에서는 확인됬었지만 vscode로는 확인이 안되었기에 확인필요..! 본문의 어떠한 내용 ${data_count > 5 ? ` 데이터가 5개 이상이면 나오는 버튼 `:""} ${data_count > 5 ? ` 1-1 1-2 2-1 2-2 `:""} 공감수 0 댓글수 0 2022. 5. 24.
계좌번호 마스킹(masking) 처리하기 계좌번호나 주민번호같은 개인정보는 주로 "****" 등으로 마스킹처리를 하는편이다. 계좌번호를 예시로 들어 14자리거나 12자리 경우에 중간 일부분 마스킹 처리하는 방법을 알아보았다. //계좌번호 마스킹 var accountNum = "12312345612345"; var middleMask = accountNum.substring(3,8); var middleLast = accountNum.substring(8,9); var masking = "*****"; if(accountNum.length == 14){ accountNum = accountNum.substring(0,3) + "-" + accountNum.substring(3,8).replace(middleMask, masking) + middl.. 공감수 0 댓글수 0 2022. 5. 16.
한글에서 다른 용지(A3)로 프린트 하기 설정 한글은 아무래도 자주쓰지 않다보니 용지를 바꿔서 프린트를 해보려고만 하는데도 순간 당황하게 된다. 원하는 내용 작성 후 기본적으로 [ctrl + p] 나 프린트하기를 찾아서 클릭하면 아래와 같은 프린트 설정창이 나온다. 여기서 처음에는 어떻게 설정할지 몰라서 보통 '설정'이나 '고급선택' 같은데서 찾아보는게 보통인데, 나도 찾아보니까 굳이 그렇게 진행할 필요 없단것 깨달았다. 현재 예제의 버전은 한글 2018로 하단에 '프린터 용지' 라고 나와 있기 때문에 여기서 설정하면 됨. 그 외에 다른 버전들에서도 하단에서 설정하는 선택지가 있을테니 하단에서 확인하는걸로! 공감수 0 댓글수 0 2022. 5. 10.
4.프로그래밍 언어 활용 (정처기 공부) 인터넷으로 공부하면서 나중에 훑어보려고 적는 노트 4.프로그래밍 언어 활용 IPv4와 IPv6의 차이 1) IPv4 ㄱ. 32비트 주소 ㄴ. 유니캐스트/멀티캐스트/브로드캐스트 사용 2) IPv6 ㄱ. 128비트 주소 ㄴ. 기존 IPv4의 주소 부족 문제를 해결하기 개발 ㄷ. 인증성/기밀성/무결성 지원 (=보안성 강화) ㄹ. 유니캐스트, 애니캐스트, 멀티캐스트 사용 -IPv6는 주소 자동설정(Auto Configuration) 기능을 통해 손쉽게 이용자의 단말을 네트워크에 접속시킬 수 있다. -IPv4는 호스트 주소를 자동으로 설정하며 유니캐스트(Unicast)를 지원한다. -IPv4는 클래스별로 네트워크와 호스트 주소의 길이가 다르다. 연산자 1) || : OR 연산 - 둘 중 하나라도 참이면 1 2) .. 공감수 0 댓글수 0 2022. 4. 4.
3.데이터베이스 구축 (정처기 공부) 인터넷으로 공부하면서 나중에 훑어보려고 적는 노트 3.데이터베이스 구축 데이터베이스 설계 단계 중 물리적 설계 시 고려 사항 - 어떤 인덱스를 만들 것인지에 대한 고려 - 성능 향상을 위한 개념 스키마의 변경 여부 검토 - 레코드의 크기 - 파일과 구조 저장을 위한 최소한의 공간 - 빈번한 질의와 트랜잭션들의 수행 속도를 높이기 위한 고려사항 - 응답 시간 - 저장 공간의 효율화 - 트랜잭션 처리량 DELETE 명령 테이블의 행을 삭제할 때 사용한다. DELETE문은 테이블내의 튜플들만 삭제, DROP문은 테이블 자체를 삭제 SQL을 사용 용도에 따라 분류할 경우 DML에 해당한다. 기본 사용 형식은 “DELETE FROM 테이블 [WHERE 조건];” 이다. 정규형 - 제1정규형 : 릴레이션에 속한 모.. 공감수 0 댓글수 0 2022. 3. 31.
2.소프트웨어 개발 (정처기 공부) 인터넷으로 공부하면서 나중에 훑어보려고 적는 노트 2.소프트웨어 개발 테스트용어 테스트 스텁 - 제어 모듈이 호출하는 타 모듈의 기능을 단순히 수행하는 도구로, 일시적으로 필요한 조건만을 가지고 있는 테스트용 모듈 테스트 슈트 - 테스트 대상 컴포넌트나 모듈, 시스템에 사용되는 테스트 케이스의 집합 테스트 케이스 - 사용자의 요구사항을 정확히 준수했는지 확인하기 위한 입력 값, 실행조건, 기대결과 등으로 만들어진 테스트 항목의 명세서 프로젝트 관리 -프로젝트 관리는 주어진 기간 내에 최소의 비용으로 사용자를 만족시키는 시스템을 개발하기 위한 전반적인 활동 -프로젝트 관리는 소프트웨어 개발 계획을 세우고 분석, 설계, 구현 등의 작업을 통제하는 것으로 소프트웨어 생명 주기의 전 과정에 걸쳐 진행됨 -소프트.. 공감수 0 댓글수 0 2022. 3. 28.
1.소프트웨어 설계 (정처기 공부) 인터넷으로 공부하면서 나중에 훑어보려고 적는 노트 1.소프트웨어 설계 User Interface 설계 시 오류 메시지나 경고에 관한 지침 1) 직관성(Intuitiveness) : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함. 2) 유효성(Effectiveness) : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작해야 함. 3) 학습성(Learnablilty) : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작해야 함. 4) 유연성(Flexibility) : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작해야 함. 애자일 방법론 특징 1) 프로젝트 요구사항은 '기능' 중심 2) 공정과 도구보다 '개인'과 소통을 중요시 3) '변화'에 유연하고 신속한 대처 4) .. 공감수 0 댓글수 0 2022. 3. 24.
버블정렬 (Bubble Sort_ JavaScript) 버블정렬 방식 앞에서 부터 데이터를 두개씩 비교해서 더 큰게 오른쪽으로 이동한다. 그렇게 처음부터 끝까지 한번 다 돌고나면 오른쪽 끝에는 가장 큰 데이터가 자리잡게 된다. n번째 정렬이 완료되면 뒤에서 n번째 자리가 확정되는 것이다. 장점 정렬이 잘 되어 있을수록 반복이 줄어들기 때문에 빠르게 정렬이 가능하다. 비교적 구현하기가 가장 쉬운 정렬방법이다. 단점 정렬이 안되어 있을수록 반복을 더 여러번 반복해야 하기때문에 오래 걸린다. 자료가 많을수록 정렬을 위한 시간이 오래 걸린다. 버블정렬 (JavaScript) function bubbleSort(array) { for (let i = 0; i < array.length; i++){ let swap; for(let j = 0; j < array.leng.. 공감수 0 댓글수 0 2022. 3. 2.
자바스크립트로 다음달 자동이체일 확인하기 업무보다가 받은 데이터를 기준으로 지속되는 다음달 이체일을 알고싶어서 시작했었다. 그리고 일자에 따라 이번달이 아닌 다음달로 넘겨야하는 경우들도 있다는 것에 중점을 두고 만들어보았다. //다음 자동이체일 확인 var start_date = '20210508' var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var date = now.getDate(); var fixed_date = start_date.substring(6,8); if((parseInt(date)) > (parseInt(fixed_date)) ){ month = (""+(parseInt(month)+1)); }; var next_month = n.. 공감수 0 댓글수 0 2022. 2. 16.
자바스크립트로 나이 계산식 만들기 주민번호로는 만 나이까지 구현 문자열로는 일반 나이까지만 구현 주민번호로 만 나이계산하기 var Resident_num = '9212151885522' var BDY = Resident_num.substring(0,2); var BDM = Resident_num.substring(2,4); var BDD = Resident_num.substring(4,6); var R_num = Resident_num.substring(6); var BDFullYear if(R_num.substring(0,1)=='1' || R_num.substring(0,1)=='2'){ BDFullYear = 1900 + Number(BDY); } else if(R_num.substring(0,1)=='3' || R_num.subs.. 공감수 0 댓글수 0 2022. 2. 14.
드레그앤드롭 (Drag and Drop) 연습 사실 딱히 완성된 상태는 아니고 혼자 공부할 겸 인터넷 참고하면서 작업하던거라 많이 미흡하다. 손봐야 할게 많기는 한데 일단 올려두고 추가사항은 천천히 추가해 나가련다. 기본 틀형식은 bootstrap에서 참고해서 사용했다. (text 박스가 추가는 되는데 삭제는 아직 구현 못한 상태) 기본 틀이 되는 HTML 내용을 입력하고 드레그해서 넣어보세요 + - Todo Doing Done 기능 적용해주는 JS function drag(target, food) {//드래그 시작시 호출 할 함수 food.dataTransfer.setData('Text', target.id); }; function drop(target, food) {//드롭시 호출 할 함수 var id = food.dataTransfer.getD.. 공감수 0 댓글수 0 2022. 2. 10.
환율계산기 만들어보기 업무 보다가 개인적으로 한번 만들어보면 좋겠다 싶어서 시작했었다. 유튜브 같은거 참고하면서 만들었는데 많이 엉성한 상태이긴 하다. 드롭다운(dropdown)형식은 bootstrap에서 참고해서 사용했다. 쌍방향 입력이라던가 같은 국가일때 안나오게 하는 등의 기능이추가적으로 필요할듯 HTML USD USD KRW THB 달러 = KRW USD KRW THB 원 JS /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function fromFunction() { document.getElementById("from-currency-list").classList.toggle("show").. 공감수 0 댓글수 0 2022. 2. 7.
== 와 === 의 차이점 처음엔 이 두개가 크게 다를거 없이 비슷한 것들인 줄 알았었는데, 작업하다가 보니 경우에 따라 == 를 사용하는 경우도 있고 === 를 사용하는 경우도 있는데 그 결과가 다른경우들이 생겨서 차이가 뭔가에 대해 알아보았다. 일단 한줄 요약으로는 ===가 더 세분화 된 내용까지 같게 해야한다고 이해할 수 있을 것 같다. 가장 확인 하기 쉬운 방법으로는 개발자 모드(F12)를 켜서 확인해보는 방법일 듯 하다. 위와 같이 a 는 문자열 형태를 가진 1 이고, b는 숫자 형태를 가진 1로 구분되어있다. 이걸 == 로 비교해 보면 이 a 와 b 를 확인할 때 그 값이 이 둘이 '같다' 라고 나온다. 그런데 이걸 === 로 비교해 보면 이 둘의 값이 '다르다'라고 표현한다. 이를 참고하면 == 와 === 의 차이점이.. 공감수 0 댓글수 0 2022. 1. 25.
한글 원하는 페이지만 추출하기 한글에서 여러 페이지가 있는데 원하는 페이지만 추출해서 따로 사용하고 싶을 경우 (주로 설명과 첨부로 작성하는 페이지 있을 때 필요하더라) 이렇게 여러 페이지가 있는데 원하는 페이지만 추출해서 따로 사용하고 싶으면 [보기] - [작업창] - [쪽 모양 보기] 를 눌러보면 우측에 쪽 모양 보기가 생기는데, 거기서 원하는 페이지를 마우스 우클릭 해서 [쪽 복사하기] 를 한다. 그러고 나서 ctrl + N 으로 새 창을 열어서 그대로 붙여넣기 하면 그 페이지만 그대로 복사되서 온다. 공감수 3 댓글수 0 2022. 1. 5.
한글에서 체크박스☑ 찾기 신청서나 뭐 작성하고 하다보면 맨날 찾게되는 체크박스 표시 ☑ 간만에 한번씩 쓰니까 맨날 까먹어서 이참에 해놓는 정리 일단 한글 상단에 있는 [입력] - [문자표]로 간다. (혹은 ctrl + F10 을 누른다.) 문자표가 나오면 상단에 [유니코드 문자표] - 좌측에 문자영역에서 [여러가지 기호] 를 찾아가면 체크박스 확인이 가능하다 체크박스 뿐만 아니라 다양한 문자표들을 찾을 수 있으니 알아서 잘 활용하기! 공감수 0 댓글수 0 2022. 1. 3.
VS code 단축키 visual studio code 단축키 Ctrl + X 커서 위치 행 삭제(잘라내기) Ctrl + Shift + K 커서 위치 행 삭제 Ctrl + Shift + Enter 커서 위 행 빈줄 생성 Ctrl + Enter 커서 아래 행 빈줄 생성 alt + (↑)화살표 행을 위로 이동 alt + (↓)화살표 행을 아래로 이동 Ctrl + alt + (↑)화살표 커서를 위에 추가(다중선택) Ctrl + alt + (↓)화살표 커서를 아래에 추가(다중선택) Ctrl + / 한줄 주석처리 Ctrl + K → Ctrl + C 블럭 주석 처리 Ctrl + K → Ctrl + U 주석 삭제 Alt + Shift + A 블럭 주석 처리 Ctrl + Shift + [ 커서 영역 접기 Ctrl + Shift + ] 커서.. 공감수 0 댓글수 0 2022. 1. 1.
VS code 에서 HTML 자동 완성 기능 부제: div 여러개 만들기 + div 속성담아 만들기 visual studio code 에서도 템플릿 자동완성 기능이 있다. 많은 사람들이 이미 알 수도 있는 내용이지만 정리겸 적어본다. 1. html 포멧 생성 ! 만 쳐주면 바로 탬플릿이 옆에 보여지는데 바로 enter 나 tab을 눌러주면 기본 html 포멧이 완성된다. 2. 태그생성 + 여러개 생성 원하는 태그를 글자 그대로 적어주고 enter 나 tab을 치면 자동으로 완성된다. -> * 숫자 를 하게되면 그 숫자만큼 태그를 생성해준다. 3. 다중 태그 생성 태그명 > 태그명 > 태그명 등을 사용해서 여러 종류의 태그를 내부로 이어서 생성할 수 있다. 태그명 + 테그명 + 태그명 등을 사용해서 여러 종류의 태그를 한번에 생성해 낼 수 있다. 4.. 공감수 0 댓글수 0 2021. 12. 30.
VS code 에서 Tap키 활용 다른 툴사용하다 왔으면 VS code 에서 tab 쓰는게 잘 안되서 불편했을텐데 (내 얘기) tabout 을 받고나면 그런 불편했던 부분들이 많이 해소된다. 꼭 받아서 쓰시길.. extention 으로 가서 tabout 이라고 치면 밑에처럼 나오는게 있는데, 이걸 설치하면 된다. 이게 설치되고 나면 세미클론( ; ) 따옴표 ( "" ) 괄호 ( () ) 등에서 Tab을 통해 글자가 쭉밀리는게 아닌 그 뒤로 자동으로 찾아가준다. 공감수 0 댓글수 0 2021. 12. 29.
한글 hwp 무료 설치 내가 보고 직접 다운,설치 받아서 사용하고 있는 블로그로 안내 https://jini-rabbit.tistory.com/257 [한글 hwp 2018] 한컴오피스 한글 무료 설치 다운로드 (정품 인증 키 있음) 요즘은 microsoft office 워드나 엑셀 등을 많이 사용하지만, 아직도 한글 hwp를 사용하는 곳들이 있어요 특히나 국가 기관이나 공공기관 등에서 사용하는 경우가 종종 있는데요, 뷰어나 체험판으로 jini-rabbit.tistory.com 공감수 8 댓글수 1 2021. 12. 28.
한글 hwp 글자 간 간격 조절 글자간격 좌우로 늘리기/줄이기 마우스 오른쪽 클릭을 통해 [글자 모양] 을 찾아가거나, 원하는 범위를 선택한 후, Alt + L 로 설정 창 진입가능 글자간격 아래로 늘리기/줄이기 글자간격을 아래로 늘리기 ctrl + shift + W 위이레 글자간격 줄이기 ctrl + shift + Q 공감수 0 댓글수 0 2021. 12. 27.

문의안내

티스토리
로그인
고객센터

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