어떤 폰트를 사용하느냐에 따라 사이트의 분위가가 많이 다르기 때문에 자신의 사이트에 맞는 폰트를 잘 선택할 필요가 있습니다. 웹폰트를 기반으로 했으며 폰트 잘 모르겠으면 대형 사이트에서 사용하는것 사용하면 그만이긴 합니다.하지만 난 좀 다르게 서비스를 하고 싶고 이용자들에게 다르게 보이고 싶다 하면 폰트의 변경은 좋은 방법중 하나 입니다. 폰트 변경시 좋은점 - 디자인 향상: 브랜드 아이덴티티 강화, 감성적/고급스러운 분위기 연출 - 가독성 개선: 사용 목적에 맞는 폰트로 읽기 편하게 개선 가능 - 특징 부여: 차별화된 느낌 제공 (ex. 뉴스, 쇼핑몰, 블로그 각기 다른 톤)&…
난 복잡한 부트스트랩이나 테일윈드 같은것 사용하기 싫고 순수 html 로만 페이지를 만들고 싶다.보통 백오피스 페이지가 그렇습니다.(시간이 들어가니 그렇지요. 집에서 양복 입지 않는것과 같은 이치~)하지만 반응형은 필요하고 보여지는 것은 좀 괜찮아야 한다면 pico css를 추천합니다.폰트사이즈만 약간 줄여서 사용하면 그만.아래는 폰트사이즈 때문에 테스트 해본것입니다.결론 부터 말하면1rem은 16pxpico css 기본은 21px 입니다. 부트스트랩5도 이정도 될듯.그렇다면 내가 보기엔 왜? 폰트사이즈가 무지막지 하게 크냐!나 같은 시력이 좋은 사람을 위한것이 아니라 항상 그렇듯이 기준은 나쁜쪽에 둬야 하기 때문에 그…
기본적으로 제공이 안되고 있어서 확인 후 테스트 해본 것입니다.간단하며 어떤 방식으로 사용 할것 인지는 본인 판단으로 하면 되며 rem 방식이 제일 무난 하게겠지요. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="color-scheme" con…
외부파일을 읽어서 사용하는 경우에 오류가 있을 때 처리하는 방법에 대한것입니다.이런 문제 발생 할 걱정이 되면 자신의 서버에 모두 저장하고 사용하면 됩니다.일반적인 경우는 모두 자사의 서버에 두고 사용하기 때문에 이런것을 신경쓸 필요는 없지만 그래도 이런 방법도 있는것을 알고 있으면 좋겠지요~아래는 먼저 읽힌것이 실패할 경우 처리 하는 방법의 예 입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> &nb…
파일 첨부할때 사용합니다.기본이 모든 파일로 되어 있는데 특정 워드파일만 받고 싶다든지 아니면jpg 이미지만 받고 싶을때 선택을 그것만 가능하게 하는 방법에 대한 것입니다. accept 속성에 MIME 값을 넣어주면 됩니다. <!-- 모든것을 보여줄 때는 아래처럼 하면 된다: 순서대로 오디오,동영상,이미지 --> <input type="file" accept="audio/*"> <input type="file" accept="video/*"> <input type="file" accept="image/*">&nbs…
부트스트랩에서는 대부분 영문의 약자를 생각하면 되면 되는데 문제는 왼쪽, 오른쪽이 아니라 시작, 끝 인것이 있다는 것이다.마진: m패딩: p * 위, 아래top: tbottom: b * 왼쪽 오른쪽 보다는 시작과 끝으로 생각하면 된다.left: sright: e * 포함이다.즉 위아래는 top, bottom이 되고 x는 left, right가 되는것이다.위아래: y ( left / right )양옆: x (top / bottom)위와 별도로 부트스트램 템플릿의 경우 임으로 스타일 주면서 pc에서 rem으로 높은 값을 주면 모바일에서 깨지는(너무 켜저버리는) 문제가 있으니 건드리지 않…
원하는 것은 이런것입니다.메시지를 보여주고 닫기 버튼만 있어서 닫을 수 있게 하는것이 없네요. 많이 사용할텐데 좀 만들지? 버전이 5.2까지 올라오면서 왜? 그랬을까 하는 생각이 먼저 듭니다.** 부트스트랩 모달 닫기버튼만 보이도록 하기 **<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale…
부트스트랩 연습하는데 한쪽으로 쏠립니다.다운데로 버튼을 보내고 싶은데요 생각처럼 되지 않아 찾아 보아 정리 한것입니다.다른것들도 방법은 비슷합니다. 가운데 정렬하고 싶을대 말입니다. 테이블 같은것도 비슷한 원리 입니다. 부트스트랩 버튼을 가운데(중앙) 정렬하기 <div class="row"> <div class="col text-center"> <!-- <button class="btn btn-primary" type="submit"> 저장하기 </button> --> <button cl…
빌더는 처음 사용하는 개발자에게는 상당히 유용 합니다.다운로드를 클릭해야 소스를 볼 수 있습니다.부트 스트랩 빌더https://www.layoutit.com/build 부트스트랩 레이아웃http://shoelace.io/만들어진 레레이아웃 위것 예제https://webruden.tistory.com/76화면 크기별 레이아웃https://blogpack.tistory.com/823
DivTable.com 이란곳에서 가져온것입니다.이 사이트 방문하면 마우스로 끌어서 쉽게 만들 수 있는 방법을 보여 줍니다.테이블은 표이기 때문에 이것으로 레이아웃을 만들지 말라는것입니다. 표 인줄 착각할 수 있기 때문에 그래서 레이아웃 짤때는 아무의미가 없는 div 사용해야 된다는 것입니다.표 형식으로 된것은 당연히 table 사용해야 되는데 이때 div 쓰면 이 또한 바보 입니다.부트스트랩 테이블https://mdbootstrap.com/docs/standard/tools/builders/table/ https://divtable.com/generator//* DivTable.com */.divTa…
보통 찾으면 테이블 안에 있는 것을 어떻게 정렬 하는것에 대해서 나왔는데요.아래 부분은 그것이 아니라 테이블 자체를 왼쪽, 오른쪽 지정 하는것입니다. 부트스트랩은 기본적으로 가운데로 지정 되는것 같습니다.https://stackoverflow.com/questions/38160951/how-do-i-horizontally-center-a-table-in-bootstrap justify-content-startjustify-content-centerjustify-content-end<div class="row justify-content-center"> <div class=…
테블릿까지 고려하면 좋지만 바쁜 관계로 모바일에서만 보이지 않게 하는 기능 입니다.테이블의 TD에서 특정한것은 모바일에서는 빼주는 역활의 부트스트랩니다.<!DOCTYPE html><html lang="ko"><head> <title>부트스트랩 테이블 특정 요소 모바일에서 제외시키기(보이지 않게)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styl…
사람의 기억은 알고 있는것과 꺼내는것과는 좀 다른것 같습니다.오래전부터 알고 있던것인데 갑자기 생각나서 확인하게 되었는데 수정할곳이 있군요.HTML 제대로 작성했는지 확인하는 사이트 입니다.아래 사이트에서 체크해서 내가 잘못 생각했거나 실수한 부분을 찾을 수 있습니다.브라우저에서 오류를 잘 보여주면 좋을텐데 일반적으론 보여주지 않기 때문에 자신도 잘 모릅니다.* HTML 문법체크 사이트 (유효성 검사) HTML 체크 주소체크 준비 - Nu Html 체커 (w3.org)
웹봇으로 수집한것을 바탕으로 통계를 낸것입니다. 제가 잘 안쓰는것도 있네요.그런데 정말 이곳에 있는것만 익혀도 큰 무리는 없습니다. 그리고 이곳에 있는것만 익혀도 국내에선 안쓰는것들이 있어서 다른분들보다 많이 아실거란것 확신합니다.<html>, <head>, <body>, <title>, <meta>, <div>, <a>, <script>, <link>, <img>, <span>, <p>, <li>, <ul>, <style>, <br>, &l…
마크업 언어라고 하는데요. 웹페이지를 구현할때 기능적인 역활을 하는것입니다.HTML이 먼저이고 그 다음 CSS 입니다.즉, 건물로 말하면 골격이 있어야 거기에 대리석 타일을 붙이든 장식을 할 수 있습니다.HTML은 다음과 같은 기능을 가집니다.. table - 표형태로 데이터를 보여줍니다.. a - 다른 페이지와 연결을 시켜 줍니다.. form - 데이터를 받아서 서버쪽에 보내줍니다.. <h1 ~ - 제목에 대한 설정. <img - 이미지를 보여줍니다.. <meta - 현재 웹페이지에대한 정보를 나열 합니다.......기본적으로 위와 같은 형태로 되어 있습니다.여는 태그가 있으면 닫는 태그가 있습니다.하…
반출되는 정보기기의 일시와 반출자 정보를 상세히 기록하며 장비명칭 및 모델번호를 명확히 기재하여 반입 여부를 관리하기 위한 목적으로 작성하는 양식으로 반출일시, 반출자성명, 장비명칭, 모델번호, 반입일시, 반입확인으로 이루어져 있습니다. 반출입대장 주요항목 반출일시: 장비가 밖으로 나가는 구체적인 날짜와 시간을 기록하며 반출 시점의 정확한 상태를 확인하도록 합니다. 반출자성명: 장비를 가지고 나가는 사람의 이름을 명확히 기재하여 책임 소재를 분명하게 관리하도록 합니다. 장비명칭: 반출되는 기기의 명확한 이름을 작성하여 어떤 물품인지 한눈에 알 수 있게 기록합니다. 모델번호: 기기의 고유한 상세 모델 …
전산 환경 내 보안 위협 요인을 미리 확인하고 점검기준에 따른 준수 상태를 면밀히 파악하여 보안 수준을 향상시키도록 돕는 문서양식으로 점검항목명, 점검기준내용, 점검결과, 네트워크접근제어, 양호로 이루어져 있습니다. 정보보안 분석 주요항목 네트워크 접근 제어: 불필요한 통로를 차단하여 외부 침입을 방지하고 보안 설정을 일치시킵니다. 계정 관리 정책: 비밀번호 복잡도를 설정하여 보안 수준을 높이고 특수문자 사용을 강제합니다. 로그 기록 보관: 시스템 접속 내역을 일정 기간 이상 저장하여 보안 사고 발생시 확인이 가능하도록 관리합니다. 백신 소프트웨어: 실시간 감시 기능을 활성화하여 최신 엔진 상태를 유…
기본 관리 현황과 상세 내역을 일관성 있게 기록하여 기한별 자산 변화를 파악하고 관리 효율을 높이도록 돕는 정보화기자재 대장 문서양식으로 관리번호, 품목명, 모델명, 사용자, 도입일자, 장비정보, 시리얼번호로 작성 되었습니다. 정보화기자재 주요항목 관리번호: 각 기기에 부여된 고유 식별 번호를 기록하여 관리하며 누락 없이 작성해야 합니다. 품목명 및 모델명: 기기의 종류와 구체적인 제품 명칭을 정확하게 적어주며 규격 정보가 포함되어야 합니다. 비고: 특이 사항이나 별도로 기록할 내용이 있는 경우에만 간략하게 기입하여 관리합니다. 사용자 현황: 현재 해당 장비를 사용하고 있는 사람의 이름을 적어주며 사…
매일 수행하는 전산 관련 업무 내역을 명확하게 기록하며 작업 과정에서 발생하는 모든 변동 사항을 빠짐없이 남겨 관리하는 용도로 사용되는 전산 작업 일지 서식으로 작업일자, 작업자명, 작업구분, 작업장소, 작업항목, 특이사항으로 작성 되었습니다. 전산 작업 주요항목 작업일자: 업무를 수행한 날짜를 정확하게 기입하며 일 단위로 기록을 남겨야 합니다. 작업자명: 업무를 직접 수행한 담당자의 성명을 누락 없이 기재하여 관리합니다. 작업구분: 분류 기준에 따라 유형을 나누며 정기 점검이나 긴급 복구로 구분합니다. 작업장소: 업무가 진행된 물리적 위치나 네트워크 공간을 구체적으로 명시합니다. 작업항목: 처리 중…
보유 중인 전산 장비의 상세 현황과 관리 내역을 한눈에 파악하도록 돕는 자료로 자산의 취득부터 현재 상태까지 상세히 기록하여 관리하는 전산재산대장 서식으로 자산구분, 자산명, 관리정보, 취득일자, 모델명, 관리번호로 되어 있습니다. 전산재산 주요항목 자산 구분: 전산 장비의 성격에 따라 분류하여 관리하며 전체적인 자산 규모를 파악하는데 핵심적인 역할을 수행합니다. 자산 명칭: 각 장비의 이름을 정확하게 기재하여 분류하며 관리 대상을 명확히 특정하는 용도로 사용합니다. 관리 번호: 각 장비에 부여된 고유 식별 번호를 입력하며 중복되지 않도록 관리하는 것이 매우 중요합니다. 모델 명칭: 장비의 세부 제품…
개인정보를 처리하는 정보기술 설비 명칭과 해당 정보를 다루는 인원의 신상 내역 및 권한 범위를 상세히 기록하여 관리하기 위한 용도로 활용하는 문서서식으로 시스템명, 취급자 정보, 접근 권한, 취급 목적, 성명, 부서로 구성되어 있습니다. 관리대장 주요항목 시스템 명칭: 개인정보를 처리하는 전산 설비의 이름을 명확하게 기재하여 관리 대상임을 밝히는 항목입니다. 취급자 성명: 정보를 다루는 사람의 이름을 정확하게 입력하여 책임 소재를 분명히 합니다. 소속 부서: 정보 취급자가 현재 근무하고 있는 부서 명칭을 상세히 기록하여 구분합니다. 권한 단계: 업무 범위에 따라 부여된 권한의 수준을 구분하여 관리하는…
전산 자원의 운영체제 정보와 네트워크 주소를 포함한 장비 상세 설정 내용을 명확히 기록하여 관리하며 전체적인 전산 설비 현황을 파악하고 유지보수 업무를 원활하게 수행하도록 돕는 서식으로 구분, 장비정보, 상세설정사항, 운영체제, IP주소로 이루어져 있습니다. 작성시 고려사항 정보 정확성: 네트워크 주소나 운영체제 버전 정보가 실제 설정값과 일치하는지 반드시 확인하며 오기입을 방지합니다. 변경 이력 관리: 설정값이 변경될 경우 즉시 내용을 수정하며 과거 기록을 보존하여 변동 과정을 파악합니다. 용어 통일: 사용하는 용어가 혼동을 주지 않도록 표준화된 명칭을 사용하며 일관성 있는 기록 형식을 유지합니다.…
통신 패널의 각 부위별 상태를 면밀하게 살펴보고 이상 유무를 파악하여 장비의 안정적인 운영을 돕는 점검 기록지로서 평상시 관리 상태를 확인하는 용도로 활용되는 서식으로 점검항목명, 상태양호, 점검결과, 조치사항, 케이블결선상태로 이루어져 있습니다. 통신패널 점검 주요항목 케이블 결선 상태: 선로가 정해진 위치에 올바르게 연결되어 있는지 확인하며 엉킴이나 느슨함이 없는지 면밀히 살핍니다. 전원 공급 장치 전압: 장비에 전달되는 전기 에너지가 규격 범위 내에서 일정하게 유지되고 있는지 측정합니다. 접지선 연결 상태: 전기적 사고 방지를 위한 접지선이 단단히 고정되어 있는지 점검하며 누전 가능성을 확인합니…
보유 중인 전산 장비의 이동 내역을 명확히 기록하며 기기별 상세 정보를 관리하여 자산 현황을 파악하도록 돕는 문서양식으로 기기명칭, 모델명, 수량, 수령자, 수령일자로 구성 되어 있습니다. 정보화기기 주요항목 기기명칭: 사용하는 장비의 이름을 정확하게 기입하여 어떤 종류의 물품인지 명확히 구분할 수 있도록 작성하며 관리를 용이하게 합니다. 모델명: 제품의 고유 식별 번호나 상세 모델 이름을 기재하여 동일 장비 간 구분을 명확하게 하며 관리에 활용합니다. 수량: 현재 보유하거나 이동하는 장비의 개수를 숫자로 정확히 기록하여 수량을 파악하며 관리에 활용합니다. 수령자: 물품을 전달받는 사람의 성명을 기입…
시설의 상태를 확인하고 기능 유지 여부를 면밀히 살피며 관리 부서에서 정기적으로 운영 현황을 점검하여 안정적인 통신 환경을 구축하도록 돕는 기록지이자 관리용 문서양식으로 점검대상명, 점검일자, 점검자성명, 점검구분, 관리부서, 점검항목명으로 구성 되어 있습니다. 정보통신시설 점검 주요항목 점검대상명: 확인이 필요한 시설의 명칭을 정확히 기재하여 점검 범위를 명확하게 지정합니다. 점검일자: 시설을 확인한 날짜를 연도와 월 그리고 일 단위까지 상세하게 기록하며 관리합니다. 점검자성명: 점검을 수행한 담당자의 이름을 기입하여 책임 소재를 명확히 밝히고 기록물로 남깁니다. 점검구분: 정기 점검 또는 긴급 점…
정보기기 고장 발생부터 조치 완료까지의 전 과정을 기록 관리하며 기기의 상태 변화를 한눈에 파악하도록 돕는 유용한 문서양식으로 수리일자, 기기명칭, 관리번호, 고장내용, 수리처, 상세내용, 조치사항으로 작성 되었습니다. 정보기기 수리 주요항목 수리일자: 기기가 고장되어 수리를 진행한 날짜를 기록하며 정확한 시점을 명시하여 관리합니다. 기기명칭: 수리가 필요한 정보기기의 구체적인 명칭을 작성하며 모델명을 포함합니다. 관리번호: 기기마다 부여된 고유 식별 번호를 적으며 개별 기기를 구분합니다. 고장내용: 어떤 부분이 어떻게 고장이 났는지 현상을 구체적으로 기술합니다. 수리처: 수리를 담당한 업체나 부서를…
운영 중인 정보기술 설비에서 발생하는 각종 결함 사항을 기록하고 조치 결과를 정리하며 향후 재발 방지를 위한 근거 자료로 활용하는 양식으로 발생일시, 시스템명, 오류유형, 오류상세내용, 조치내용및결과로 이루어져 있습니다. 오류관리 주요항목 발생일시: 결함이 나타난 시점을 기록하며 정확한 시간 정보를 포함하여 작성합니다 시스템명: 장애가 발생한 정보기술 설비 명칭을 기재하며 관리 대상 장비를 특정합니다 오류유형: 결함의 성격을 구분하며 하드웨어 혹은 소프트웨어 중 선택하여 분류합니다 오류상세내용: 나타난 현상을 구체적으로 기술하며 발생 상황을 명확하게 서술합니다 조치내용: 문제를 해결하기 위해 수행한 …
장비 고장 발생시 신속하게 대응하고 조치 결과를 기록하여 관리하는 유지보수 요청 대장이며 장비의 상태를 상시 확인하고 점검 기록을 남겨 관리 효율성을 높이도록 돕는 문서서식으로 요청일자, 요청자명, 대상장비, 고장내용, 조치사항으로 구성 되어 있습니다. 유지보수 요청 주요항목 요청일자: 서비스 장애나 장비 결함이 발생하여 수리를 의뢰한 날짜를 정확하게 기재하며 관리 기준일로 활용합니다. 요청자명: 수리를 의뢰한 담당자의 성명을 명확히 기록하여 추후 보수 결과 공유나 확인 과정에서 필요한 연락처로 사용합니다. 대상장비: 고장이 발생한 구체적인 기기 명칭과 모델명을 상세히 작성하여 점검 대상을 확정하도록…
사무용 전산 기계 및 정보 통신 장비의 기본 내역과 관리 상태를 명확히 기록하며 상시 점검을 수행하도록 돕는 양식입니다. 이 양식은 기자재명, 모델명, 관리번호, 도입일자, 사용자, 자산상태, 설치장소, 점검일자로 이루어져 있습니다. 정보화기자재 주요항목 기자재명: 관리 대상이 되는 전산 장비의 명칭을 정확하게 기입하여 구분하며 식별력을 높입니다. 모델명: 장비의 제조사에서 부여한 세부 명칭을 기재하여 동일 제품과 혼동이 없도록 관리합니다. 관리번호: 각 기기마다 고유하게 부여된 식별 번호를 사용하여 중복 없이 분류를 완료합니다. 도입일자: 장비를 처음 도입하거나 구입한 날짜를 기록하여 교체 주기를 …
보안 유지를 위해 암호화 도구의 식별 정보와 운용 내역을 상세히 기록하며 관리 책임자와 생성일 및 만료 예정일을 명확하게 기재하여 암호화 도구의 생애 주기를 한눈에 파악할 수 있도록 돕는 문서양식으로 키 식별명, 키 유형, 사용 용도, 관리 책임자, 생성 일자, 작업 구분으로 되어 있습니다. 암호키 주요항목 식별 명칭: 암호화 도구의 고유한 이름을 부여하여 각 키를 개별적으로 구분할 수 있도록 명확하게 기록합니다. 유형 분류: 암호화 방식이나 알고리즘 종류에 따라 적절한 유형을 선택하여 입력하는 항목입니다. 사용 용도: 어떤 데이터의 암호화에 활용되는지 그 목적을 구체적인 내용으로 상세히 기재합니다.…
다양한 온라인 서비스 접속을 위해 사용하는 계정 정보와 비밀번호를 한곳에 모아 안전하게 관리하며 필요시 신속하게 확인하기 위한 목적으로 활용하는 기록 문서서식으로 서비스명, 아이디, 비밀번호, 연결메일으로 구성 되어 있습니다. 계정 및 비밀번호 주요항목 서비스 명칭: 이용 중인 온라인 서비스의 공식 명칭을 정확하게 기입하며 각 서비스별로 구분하여 관리하도록 합니다. 사용자 식별 정보: 각 서비스에 접속할 때 사용하는 고유한 계정 아이디를 빠짐없이 기록하여 관리하도록 합니다. 암호 정보: 보안을 위해 설정한 비밀번호를 기록하며 정기적으로 변경된 내용을 반영하여 최신 상태로 유지하도록 합니다. 연결 전자…
발생한 시스템 오류 및 대응 과정을 기록하며 장애 발생 현황과 조치 결과를 한눈에 파악하도록 돕는 관리용 문서양식으로 장애일시, 장애시스템, 장애현상, 발생원인, 조치내용으로 이루어져 있습니다. 장애관리 주요항목 장애 발생 일시: 장애가 나타난 날짜와 시간을 정확하게 기재하여 기록하며 장애 대상 시스템: 문제가 발생한 전산 설비 명칭과 구체적인 장비를 적으며 장애 발생 현상: 화면 멈춤이나 접속 불가와 같은 구체적인 증상을 상세히 기술하며 장애 발생 원인: 하드웨어 결함이나 소프트웨어 오류 등 근본적인 이유를 명시하며 장애 조치 내용: 오류 해결을 위해 수행한 작업 단계와 결과물을 빠짐없이 적으며 비…
개인용 컴퓨터의 외부 이동 내역을 상세히 기록하며 사용자와 기기 정보 및 반출입 시점과 사유를 명확히 남겨 자산 변동 상황을 관리하도록 돕는 문서서식으로 사용자성명, 부서명, 연락처, 반출사유, 기기종류, 모델명, 구분으로 작성 되었습니다. PC 반출입 주요항목 사용자 정보: 성명과 부서명 그리고 연락처를 기재하여 담당자를 명시하며 관리 대상임을 나타냅니다. 반출 사유: 기기를 외부로 가지고 나가는 구체적인 이유를 상세하게 적어 기록으로 남겨 관리합니다. 기기 종류: 컴퓨터의 형태나 유형을 분류하여 기록하며 어떤 장비가 이동하는지 명확히 파악합니다. 모델 명칭: 기기의 구체적인 제품명을 정확하게 입력…
프로그램 운용 중 발견된 오류 사항을 기록하고 수정 과정과 최종 상태를 명확히 관리하여 품질 향상을 도모하도록 돕는 문서양식으로 결함명칭, 발생일시, 결함위치, 중요도, 상세내용, 조치방법, 조치일자로 구성되어 있습니다. 작성시 고려사항 내용 구체화: 결함의 현상을 모호하게 적지 말고 누구나 이해할 수 있도록 상세히 기술합니다. 날짜 일관성: 발생일과 조치일이 실제 작업 시점과 일치하도록 오차 없이 기록해야 합니다. 상태 관리: 조치 진행 중인 사항과 완료된 사항을 명확히 구분하여 상태를 표시합니다. 용어 통일: 결함 위치나 기능 명칭은 개발 중 사용한 표준 용어를 사용하여 혼선을 방지합니다. 누락 …
웹 주소의 기본 정보와 갱신 현황을 기록하며 관리하여 서비스 중단 위험을 방지하고 효율적으로 운영하도록 돕는 서식으로 도메인명, 등록기관, 관리자정보, 성명, 연락처, 만료예정일, 갱신상태로 구성 되어 있습니다. 도메인 관리 주요항목 도메인 명칭: 웹 주소의 고유 이름을 정확하게 기재하며 서비스 식별을 위해 상세히 기록합니다. 등록 기관 정보: 주소를 등록한 대행업체 명칭을 기재하며 관리 계정 정보를 포함하여 작성합니다. 관리자 성명: 주소 관리를 담당하는 사람의 이름을 적으며 책임 소재를 명확하게 나타냅니다. 연락처 정보: 담당자의 전화번호와 이메일을 기록하며 긴급 상황 발생시 연락이 가능하도록 합…
정기적인 운영 환경 확인과 소프트웨어 상태 관리를 목적으로 작성하는 자료로 점검 대상의 세부 명세와 기준값 대비 상태를 상세하게 기록하여 안정적인 운영을 돕는 양식으로 점검구분, 점검대상명, 점검항목, 상태, 세부내용, 기준값으로 구성되어 있습니다. 작성시 고려사항 점검구분: 점검 목적에 부합하는 분류를 선택하여 오기입이 없도록 주의합니다 대상명칭: 소프트웨어 명칭은 설치된 실제 이름과 일치하게 정확히 기재해야 합니다 항목명: 검사 내용이 무엇인지 누구나 알 수 있도록 구체적으로 명시합니다 상태기록: 정상 여부를 판정할 때 주관적인 판단을 배제하고 객관적으로 적습니다 세부기재: 이상 발견 시에는 발생…
사용자가 정보 자산을 외부로 가지고 나갈 때 작성하는 기록지로 반출 대상 물품과 신청자 정보 및 반납 예정일을 명확하게 기재하여 자산 유실을 방지하도록 돕는 서식으로 반출자성명, 연락처, 반출목적, 반출일자, 반납예정일, 장비명으로 구성되어 있습니다. 정보화장비 반출 주요항목 반출자 성명: 물건을 가져가는 사람의 이름을 정확하게 기재하며 본인 확인을 위한 용도로 사용합니다. 연락처 정보: 외부에서 발생할 수 있는 긴급 상황에 대비하여 사용자의 전화번호를 기록합니다. 반출 목적: 물품을 외부로 가지고 나가는 구체적인 사유를 명시하여 승인 근거를 마련합니다. 반출 일자: 장비가 현장을 벗어나는 날짜를 정…
보유 중인 전산 기기들의 명칭과 세부 규격 및 도입 시점부터 현재 사용 위치까지 상세히 기록하며 관리자 정보와 점검 내역을 통합하여 보관함으로써 장비의 생애 주기를 관리하는데 용이하도록 제작된 양식으로 장비명, 모델명, 관리번호, 도입일자, 사용위치, 관리자성명, 점검내용으로 이루어져 있습니다. 장비관리 주요항목 장비명칭: 관리 대상인 전산 기기의 이름을 정확하게 기록하며 분류를 명확히 합니다. 모델명세: 기기의 구체적인 형태와 세부 규격을 나타내는 명칭을 누락 없이 기입하며 관리합니다. 관리번호: 개별 장비를 구분하기 위한 고유 식별 번호를 부여하여 체계적으로 관리합니다. 도입일자: 기기를 처음 들…
네트워크 자원 활용 현황을 파악하며 사용자 정보와 주소 정보 및 장비 위치를 기록하여 관리하는 용도로 사용되는 효율적인 네트워크 자원 현황 파악용 문서양식으로 사용자 정보, IP 주소 정보, 장비 및 위치, IP 주소, 서브넷 마스크, 게이트웨이로 이루어져 있습니다. IP 관리 대장 주요항목 사용자 정보: 해당 주소를 할당받아 사용하는 인원이나 담당 부서 정보를 상세히 기재하여 관리 편의성을 높이는 항목입니다 서브넷 마스크: 네트워크의 크기와 범위를 결정하며 논리적 구분을 위해 반드시 필요한 설정값을 의미하는 항목입니다 게이트웨이: 외부 네트워크와 연결되는 통로 역할을 하는 지점의 주소를 명확하게 기…
소프트웨어의 이동 경로와 사용 현황을 정확하게 기록하며 관리 인원의 식별 정보와 상세한 제품 명칭 및 사용 목적 등을 빠짐없이 기재하여 자산의 흐름을 면밀하게 파악할 수 있도록 돕는 양식으로 사용자명, 반출일자, 반입일자, 소프트웨어 명칭, 버전 및 라이선스 정보로 구성 되어 있습니다. 소프트웨어 반출입 주요항목 사용자 성명: 프로그램을 이용하는 담당자의 이름을 정확하게 기재하며 신원을 확인하는 용도로 사용합니다. 반출 일시: 외부로 나가는 시점을 날짜와 시간 단위까지 상세히 기록하며 이동 시점의 정확성을 확보합니다. 반입 일시: 외부 사용을 마치고 다시 돌아오는 날짜를 기록하여 기간을 확인합니다. …
네트워크 자원 할당 현황과 장비 연결 정보를 명확히 파악하여 관리하며 각 접속 주소별 할당 상태를 상시 확인하고 효율적인 자원 운용을 지원하는 문서서식으로 구분, IP 주소, 네트워크 정보, 장비 정보, 사용자 정보, 서브넷 마스크로 작성 되었습니다. 작성시 고려사항 중복 방지 확인: 동일한 주소가 중복되지 않게 검토하며 충돌 현상을 사전에 방지함 최신성 유지 관리: 변경 사항 발생시 즉시 수정하며 정보의 정확도를 상시 유지함 네트워크 정보 확인: 통신 규격이 맞는지 검토하며 설정 오류를 방지함 장비 정보 대조: 실제 장치 명칭과 일치하는지 확인하며 기록의 신뢰도를 높임 사용자 권한 확인: 접근 가능…
전산 데이터의 외부 이동 내역을 상세히 기록하여 정보 유출 방지 및 보안 상태를 점검하도록 돕는 자료로 모든 이동 경로와 매체 정보를 명확히 기록하여 관리하는 서식으로 반출입 구분, 일시, 자료 정보, 대상자, 목적, 매체 종류, 자료명으로 이루어져 있습니다. 전산자료 주요항목 반출입 구분: 자료가 내부에서 외부로 나가는 상황인지 혹은 외부에서 내부로 들어오는 상황인지를 명확히 구분하여 기재합니다. 반출입 일시: 자료가 이동을 시작하거나 완료한 구체적인 날짜와 시간을 기록하여 이동 시점을 정확하게 파악할 수 있게 합니다. 자료 정보: 반출되는 데이터의 성격과 구체적인 내용을 상세하게 기록하여 어떤 정…
사용 중인 전산 장비의 외부 이동 내역을 명확하게 관리하며 기기 명칭과 모델명 그리고 상세한 반출입 일시와 목적지를 기록하여 분실 방지 및 보안 관리를 수행하도록 돕는 서식으로 기기명칭, 모델명, 관리번호, 사용자, 반출사유, 반출일시로 이루어져 있습니다. 반출입 정보 주요항목 기기명칭: 외부로 반출하거나 내부로 반입하는 전산 장비의 고유한 이름과 종류를 정확하게 기재하며 명확히 구분합니다. 모델명: 장비의 제조사에서 부여한 상세 모델 번호를 기재하여 동일 제품 간 혼동이 없도록 구체적으로 명시합니다. 관리번호: 자산 관리 규정에 따라 부여된 고유 식별 번호를 작성하여 개별 기기를 명확하게 확인하도록…
보유 중인 암호화 장치들의 세부 정보를 기록 관리하며 각 기기의 명칭과 모델명 그리고 고유 번호를 명확히 정의하여 장비의 현황을 상시 파악하도록 돕는 문서양식으로 장비구분, 장비명칭, 관리정보, 모델명, 관리번호로 되어 있습니다. 암호장비 주요항목 장비구분: 기기 종류에 따라 분류하며 보안 등급이나 용도에 맞춰 적절한 범주로 나누어 기재합니다. 장비명칭: 장치의 공식 이름을 정확하게 적으며 식별이 용이하도록 표준화된 명칭을 사용해야 합니다. 모델명: 제조사에서 부여한 제품 고유의 규격을 기재하여 장비의 세부 사양을 파악하도록 합니다. 관리번호: 각 기기에 부여된 고유 식별 번호를 작성하여 개별 장비를…
사용자별 시스템 접근 권한을 주기적으로 확인하며 현재 부여된 등급과 상태를 정확히 파악하여 보안 사고를 미연에 방지하고 권한 오남용 여부를 관리하는 용도로 활용되는 양식으로 점검일자, 점검대상, 점검자, 사용자명, 시스템명, 권한등급, 권한상태로 되어 있습니다. 접근권한 점검대장 주요항목 점검 일자: 권한을 확인한 날짜를 기록하여 정기적 검토가 수행되었음을 증명하는 항목입니다. 점검 대상: 권한 검토가 필요한 사용자 범위와 시스템 범위를 명확히 지정하여 관리하는 항목입니다. 점검자 정보: 점검을 수행한 담당자의 성명과 직책을 기록하여 책임 소재를 분명히 합니다. 사용자 명칭: 권한을 보유하고 있는 개…
정렬에 관한 부분 많이 사용할 부분에 테스트 한것입니다.부트스트랩5 용량 크다고 뭐라 하시는분도 있던데 제가 보기엔 일반 사이트 이정도면 큰것 절대 아닙니다.다른것 많이 사용하지 않고 부트스트랩5 위줄 잘 사용하면 충분이 예쁘고 반응형인 사이트 만드는데 충분 합니다.위 페이지의 결과에 대한 부트스트랩5 코드는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" c…
화면의 정 중앙에 알림 모달을 띄우는 방법입니다.이부분은 아래 modal-dialog-centered 부분이 추가 되면 자동처리가 되면 화면 위쪽에 보여주고 싶으면 이 클래스명만 제외 시키면 됩니다.<div class="modal-dialog modal-dialog-centered"> 아래는 테스트 해볼 수 있는 소스 입니다.그리고 중요 부분만 있지만 이건 BODY 안에 넣어 두기만 하면 되는것이라서 확인이 무척 간단 합니다.mt-5 부분이 최상위 div에 있는데 상단 부분을 좀 떨어 트리는 부분인데 중앙 정렬에선 필요한 부분은 아닙니다. 중앙 정렬이 아닐때 상단에 너무 붙으면 이부…
부트스트랩이 반응형 이기 때문에 자동으로 처리가 되는 부분이 있습니다.여기선 이부분에서 나와야 되는 순서 문제로 조정한 부분에 대한 것으로 아래 이미지를 보시면 쉽게 이해가는 부분입니다. 아래는 부트스트랩5 테스트 한 소스 입니다.중요한 부분만 올립니다. 이정도면 사실상 다 올린것과 다름이 없는 부분입니다.<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PA…
뚱뚱하게 나온다고 자르면 더 보기가 좋지 않다. 입이나 코가 잘리는 경우 그렇다. 뚱뚱하게 나오면 보기가 좋지 않고 그래서 비율에 맞게 처리해 주는 방법이 제일 좋은데 아래 방법을 사용 하면 된다. 알아보기 쉽게 인라인으로 작성함. 이미지 주변에 옅은 테두리를 추가하고 이미지가 짤리지 않도록 조정하기 위해서 먼저 이미지를 감싸는 div 태그에 테두리(border)를 추가하고 이미지의 object-fit 속성을 contain으로 변경하여 이미지가 전체적으로 보이도록 조정할 수 있습니다. 이미지의 가로 세로 비율을 유지하면서 너비는 100%로 설정하여 부모 요소의 너비에 맞추고 높이는 원하는 값으…
글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다. 여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 '...' (ellipsis)로 표시하도록 설정할 수 있습니다.아래의 코드 예시는 이러한 속성들을 사용하여 긴 텍스트가 넘칠 경우 '...'으로 표시하는 방법을 보여줍니다…
반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bootstrap.build/apphttps://www.layoutit.com/https://bootsnipp.com/builder
현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyValue('font-size') -글꼴 크기의 문자열 값을 얻으려면 예 : (16px)match(/\d+/)[0]) - 숫자 부분 만 얻으려면 예 : (16) - 문자열Nu…
일반적으로 제목이 길면 2줄로 나오게 됩니다. 너무 긴 경우 더 나올수도 있겠지요.그런 경우 백엔드에서 잘라서 보여주기도 하곤 합니다.이런 경우 css 처리 방법에선 hidden을 주면 됩니다.부트스트랩에선 overflow-hidden 클래스만 추가해주면 기본적인 길이에서 넘치게 되면 보이지 않게 처리를 합니다.높이게 대한것과 길이에 대한 부분은 필요하면 style 속성을 추가해서 해주면 됩니다.a 태그도 필요하면 style 줘서 높이와 길이 지정하여 사용하면 원하는 형태로(길어서 넘치는 경우) 한줄로 보이고 초과된 부분은 화면에서 보이질 않게 됩니다.
다음에 찾을때 필요할듯 하여 올림.!!반응형을 처리 하는 방식에 대한 이름(명칭) 입니다. 화면의 크기와 더불어 요즘은 해상도가 커지면서 글자 크기에대 한 부분도 같이 신경써야 합니다. squish, scroll, collapse rows, collapse columns 방식의 반응형 모델 입니다.
버튼을 클릭하면 아작스를 통해서 서버로 보낸다음 버튼의 색을 변경하고 명칭도 변경하여 목록으로 이동 할 수 있게 하는 기능을 만들다 보니 이런것이 필요하게 되었습니다.처음의 버튼은 '글 삭제하기'였습니다.그리고 클릭하여 정상적으로 삭제가 되면 메시지를 하나 보여주고 '정상적으로 삭제 되었습니다.' 그리곤 아래의 jquery 명령으로 버튼를 변경해 줍니다. - 버튼의 명칭을 변경합니다. - onclick 특성을 줘서 클릭하면 주소를 이동합니다. - 부트스트랩의 클래스를 변경하여 버튼의 색이 바뀌게 합니다. $('#del_btn').html(' 목록으로 이동하…
공백을 제거 하는 방법 입니다.이렇게 되면 줄바꿈 문자도 같이 버리는 작업이 들어가기 때문에 한줄로 나옵니다. 이에 대한 프로그램은 vscode에서 Beautify 확장 프로그램을 사용하면 들여쓰기와 줄바꿈을 해줍니다. 이런 역활은 웹사이트에도 있으니 "온라인 Beautify" 같은 키워드로 검색하면 쉽게 찾을 수 있습니다.CentOS에서 아래 명령으로 설치 하고 명령을 내리면 min 파일을 만들 수 있습니다.yum -y install yuicompressoryuicompressor s.css -o s.min.css웹서버를 직접 관리 할 수 있다면 서버 설정으로 자동으로 gzip 으로 압축하여 전송하는…
제목에 있듯이 여기서 SCSS 설정에 대한것은 VSCODE 프로그램을 사용한다는 것을 기반으로 합니다.1) 먼저 아래 확장 프로그램을 설치 합니다. Live Sass Compiler v3.0.0 Sass Lint (deprecated) 2) 아래는 setting.json 에서 SCSS 부분에 해당 하는 부분만 발췌한 것입니다. "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats":[ &n…
시작 하기전에 기본적은 CSS에서의 block과 inline에 대해서 알아둘 필요가 있습니다.div는 기본적으로 설정을 하지 않으면 block 입니다. 설정을 하지 않으면 기본적으로 한라인을 다 차지 한다는 의미 입니다.span은 기본적으로 inline 특성을 가지고 있습니다. 컨텐츠의 크기 만큼만 차지를 합니다.물론 위 요소에 대한 특성을 변경이 가능 합니다. 아래 포지션에 대해 테스트 하기 전에 이런 특성을 알고 있는것이 중요 합니다.보통 확인을 할때는 style의 값을 "border: 1px solid black" 이런 형태로 박스를 쳐서 확인 합니다.▶ 포지션의 특성은 아래 4가지가 있다.static, relat…
소개 하고자 하는것은 업데이트가 좀 되었지만 현재 작동을 잘 하고 있는 서포트 프로그램 입니다.VSCODE는 리눅스 같습니다.오픈된 확장프로그램 좋은것이 많지만 안되는것도 많고. 버전관련 문제도 있고 나에게 맞는것을 찾는데 시간을 써야 합니다.제가 요즘 하고 있는 CSS 서포트 프로그램 입니다. * HTML CSS 지원* Visual Studio Code에 대한 HTML ID 및 클래스 속성 자동완성. - HTML ID 및 클래스 속성 완성. - 연결 및 포함된 스타일 시트를 지원합니다. - 템플릿 상속을 지원합니다. - 추가 스타일 시트를 지원합니다. - …
CSS는 페이지를 꾸며주는 역활을 합니다. HTML은 어떠한 기능이라면 말이죠. 예를 들면다른 페이지를 연결 할때는 a태그, 표형태로 표현을 하고자할때는 table 그리고 문단은 p태그 등으로 표현하는 기능적인 것입니다.그렇다면 CSS의 역활은?. 와꾸(틀)를 잡아 줍니다.. 색을 입혀 줍니다. 마우스 올라갔을때 나갔을때의 색을 변경해 줍니다.. 글자색을 변경해줍니다.. 화면크기에 따라서 넓게 혹은 좁게 모바일버전등 처리를 해줍니다.. 화면에 보이는것들과 관련이 있다고 보시면 됩니다.. 폰트를 설정 합니다.......이 페이지에선 기본적인 선택자(셀렉터)에 대해서 하나 배우고 갑니다. CSS에서 말하는…
요즘 API 방식으로 만드는것이 유행? 인듯 싶어 인원이 적은 규모에선 저건 아닌데 싶어 내 생각이 틀린것인가 확인차 인공두뇌와 상의를 좀 해봤는데 자신이 맞다고 생각하는쪽으로 진행을 하는것이 맞다고 봅니다.질문의 예를 하나 들자면 추상화 시키고 상속도 있는 상태에서 오류가 있는데 원인을 찾기 위해서 부모 찾아 헤메는 사람이 있던데 이게 맞는거냐?내가 봤을땐 안해도 되는것을 왜? 해서 시간을 버리는지. 복잡한것이 단순한것보다 문제가능성이 높은가 낮은가확장성의 경우 프로그램을 쓰는 이유가 확장성인데...URL 보면 가끔 이런 형태로 보이는 경우가 있지요. 왜? /V1/, /V2/ 이렇게 버전별로 만들어 졌을까요?…
K(킬로)면 1000이 맞는데 뭔소리냐 하는 분들이 있으실텐데. 컴퓨터의 기본은 2진수를 사용하고 그렇기 때문에 모든 것들이 2의 승수로 갑니다.그래서 메모리도 4G짜리 사면 실제는 4096으로 나오고 어플리케이션 레벨에서도 이렇게 사용 되게 됩니다.시험볼때도 많이 나왔던 문제중 하나 인데. 이것이 바뀌어서 이제 1KB 하면 1024가 아니라는 겁니다.그럼 기존의 방식으로 하려면 1KiB 이렇게 표기를 해야 1024Byte가 됩니다.전 이게 잘못 된줄 알았어요.물어 보니 저장장치, 네트워크쪽에선 예전 부터 SI 방식을 사용했다고 합니다.혼동 되는것이 저장장치도 어플리케이션 레벨에선 2의 승수로 계산해서 사용하는…
AL3에서는 패키지가 제공되지 아니하기 때문에 PHP 7.4 버전이 필요하다면 php-fpm을 소스를 받아 컴파일 하는 방법을 사용해야 됩니다.5시간은 걸린것 같은데 아래 사용하시면 시간을 대폭 줄일 수 있으니 필요하신분 참고하시면 되고 문제가 있었던 부분은 openssl 입니다. PHP 7.4에서 사용해야 되는 openSSL 버전과 현재 서버에 설치되어 있는 OpenSSL 버전이 차이가 있어서 컴파일 과정에서 오류가 발생 하는데 이 문제인지 확인 하는 방법은 끝에 적어 놓은것 처럼 openssl만 빼고 컴파일해보세요. 잘 된다면 정확히 openssl 버전의 문제 입니다. ## 소스 컴파일에 필요한 패…
PHP 설치 되어 있지 아니하여 윈도우PC에 최신버전으로 설치버전은 설치 할 때마다 다르기 때문에 본인이 사용하려는버전을 선택 하면 됩니다. > 현대적인? 방법으로 설치함. 예전에 압축해 놓은것 풀고 path 설정하고 했던 그런 방법을 쓰지 않고 간단하게 설치가 되었다. winget install PHP.PHP.8.5 > 아래 명령으로 설치된 위치를 찾음 where php > php.ini-production…
OP캐쉬 사용하면 괜찮아 보다는 저 같은 경우는 사용하지 않아도 괜찮아를 더 좋아 합니다.▷ 솔리드 캐시(SOLID CACHE)란?솔리드 캐시는 간단히 말해 "비싼 RAM(REDIS) 대신 저렴하고 넉넉한 디스크(DB)에 캐시를 저장하는 전략"으로 원래 루비 온 레일즈(RUBY ON RAILS) 커뮤니티에서 제안된 방식이지만 본질은 어떤 언어에서든 적용 가능한 실용적인 캐싱 철학임.▷ 핵심 철학: "ssd는 생각보다 훨씬 빠르다"과거에는 디스크가 너무 느려서 무조건 데이터를 ram(REDIS MEMCACHED)에 올려야 했지만 지금은 nvme ssd 같은 초고속 저장 장치가 보편화되었습니다. 굳이 복잡하게 별도의 메모리…
MyISAM은 SELECT가 빠르고 InnoDB는 느리다그런 경우도 있고 아닌 경우도 있기 때문에 어떤 용도로 사용하느냐에 따라서 다를 수 있습니다.그리고 처음 데이터 넣은 다음 select만 90% 이상이고 테이블 사용이 업데이트나 인서트는 적은 경우인지 불특정 다수에게 서비스 하기 때문에 불특정한 row를 가져와서 보여줘야 하는것인지에 다를 수 있는 것입니다. 가장 큰 차이: 데이터와 인덱스 구조→ MyISAM - 데이터 파일(.MYD) 과 인덱스 파일(.MYI) 이 분리됨 - 인덱스 → 데이터 파일을 다시 읽는 구조 - 동작흐름: PK 인덱스 탐색 (.MYI) -> 데이터 위치…
데이터베이스를 사용하다 보면 이미 존재하는 데이터인지 확인한 후 INSERT 또는 UPDATE를 해야 하는 상황을 자주 만나게 됩니다.이때 매우 유용한 문법이 바로 INSERT ... ON DUPLICATE KEY UPDATE입니다.즉, 쿼리 한번으로 해결 된다는 의미 인데 아무곳에서나 사용 가능한것은 아니고 키 중복이 발생하는 부분에서만 사용 하는 것입니다.그렇기 때문에 unique의 특성을 모르시는 분은 사용 하면 안되겠지요. 장점- 쿼리 수 감소: SELECT → INSERT/UPDATE 두 번 쿼리 날릴 필요 없음- 동시성 문제 감소: SELECT 후 INSERT 방식보다 Race Condition 발…
작은 몸체에 열이 많아서 외부 온도와 팬 속도를 모니터링 해서 맥미니 오래 사용하려고 모니터링 하기 위해서 하나 구입한 온습도계 입니다.우선 가을이 되면 괜찮은데 여름이 문제네요. 9,10월 ~ 4월까지는 확실히 괜찮지만 그외 시간은 열 관리에 특별히 더 신경을 써야 합니다.IDC 같은곳에 두는 경우는 산뜻한 환경이라서 이런 모니터링 하면서 시간을 버릴 필요는 없습니다.샤오미 미지아 블루투스 온습도계 2 = LYWSD03MMC라면 맥미니에서 직접 읽을 수 있습니다. 공식 사양상 Bluetooth 4.2 BLE 제품중요한 점은 macOS의 Bluetooth 설정에서 일반 기기처럼 페어링할 필요가 없다는 것입니다.…
유닉스는 크게 AT&T 계열과 BSD 계열이 있고 BSD쪽이 성능이 더 좋은것으로 그래서 freeBSD 예전에 많이들 사용하고 그랬지만 그래도 리눅스보단 훨씬 덜사용 그런데 왜? 리눅스가 더 커졌을까?> 승부를 가른 건 성능 자체보다 라이선스, 타이밍, 드라이버, 배포판, 기업 지원, 클라우드 생태계macOS는 생각보다 Linux보다 FreeBSD/BSD 쪽과 혈통상 더 가깝고 명령은 리눅스 쓰던 사람은 그대로 사용 가능한것이 상당히 많다. 둘 다 Unix/POSIX 문화권에 있기 때문.난 지금까지 리눅스는 AT&T 기반으로 BSD가 섞인거라고 알고 있었는데 아니라고 하네요…
웹루트 밖에 중요한 파일을 두면 안전하지만 관리측면에선 불편한 측이 있습니다. 웹서버 설정도 그렇고 하지만 초기 한번 설정 잘 하면 평생 잘 사용하는 방법 이기도 합니다.요즘 .env 파일 github에 올려서 이것만 찾는 봇이 있을 정도 라고 하지요.반드시 이 방식을 사용할 필요는 없는데 ... 작게 할일을 크게 하기도 하고. 정작 커졌을때는 그에 맞게 되어 있지 않고.오래된 방식인데 요즘 이렇게 안 하시는 분들 많은듯 싶습니다.웹서버를 통해서는 웹루트 밖에는 접근 자체가 안되는 방식이지만 백엔드 프로그램에선 접근해서 사용이 가능합니다.웹서버와 PHP 같은 백엔드 프로그램을 동일시 보시는분들이 있던데 전혀 다른 것입니…
CLI 프로그램 여러개를 테스트 하면서 공통으로 쓰이는 파일은 하나면 좋겠다는 생각이 들었습니다.이것 저것 수정하는데 몇 번은 괜찮은데 빠르제 지쳐가는 내 모습이 느껴 지면서 방법을 찾아 보았는데 대략 다음과 같습니다.- 최근 버전의 윈도우도 심볼릭 링크를 지원하기에 심볼릭 링크를 사용합니다.- 원격지와 공유가 가능하면 공유 디렉토리 지정해서 파일을 동시 사용- 에이전트에서 PHP의 include 처럼 포함시키는 명령이 있으면 그것 사용 ▷ 윈도우CMD에서의 구문 순서는 mklink [링크 경로] [원본 경로]mklink "C:\Path\To\GEMENI.md" "C:\Path\To\AGENTS.md"* 파워셀…
오늘 정말 간단한 프로그램인데.json 결과를 입력만 시키면 되는 그런 프로그램 입니다.그런데 DB 테이블 만들어 달라고 했더니 정규화 시키고 쪼개서 해서 여러개 만들고프로그램은 복잡 복잡 복잡하게 만들어서 제가 간단하게 지침서 만들어서 다시 작성 했습니다. 의자가 필요하면 간단하게 의자만 만들면 되지 복잡할 필요가 없습니다.▷ 바이브코딩이란2025년 초 안드레이 카파시가 만든 말로 코드를 직접 읽고 이해하는 대신 — 자연어로 원하는 걸 설명하고 → AI가 짜주면 → 돌려보고 → 에러 나면 그대로 붙여넣고 → 될 때까지 반복하는 방식인데 핵심 태도는 "코드가 존재한다는 사실 자체를 잊는다"는 것으로 프…
자세한 내용은 아래 영상 보시면 잘 나와 있습니다.모두의창업, 유출 사고? 무슨 일인가. 문제있는 개발 패턴들 결론은 간단한데 백엔드에 불편해도 반드시 필요한것만 요청하고 보내주면 된다.아래에서 보통이란것은 대체로 그랬다는 것입니다.그리고 사람은 예전에 사용하던 방식하면 구닥다리 라고 생각하는 잘못된 편견을 가지고 있을까요 없을까요?▷ 예전 개발 방식은- 보통 백엔드에서 모든 것을 만들어 보내주는 방식▷ 요즘은 - 다 그런것은 아니지만- 리엑트 같은 프론트엔드 개발자가 별도 있어서 서버에서 중요데이터만 받아서 보여주는 방식- 여기서 문제가 생긴것인데 프론트엔드와 백엔드 개발자간 데이터 필요한것만 보내지 않고 다…
RealVNC는 원클릭 접속할 수 있도록 편리하게 되어 있는데 UltraVNC 는 뷰어 클릭해서 등록된 서버 선택해야 하는 불편함이 있습니다.이 부분을 아래와 같은 방법으로 일부 해소가 가능 합니다.1) C:\Users\로그인계정\AppData\Roaming\UltraVNC 파일을 복사 바탕화면에 두고 사용원하는 접속 서버 .vnc 파일을 바탕화면으로 복사 해서 원클릭 하여 사용하면 됩니다.중요한 부분이 있는데 .vnc 파일을 열어서 8bit=1 부분으로 되어 있으면 0으로 바꿔주세요.화면에 표현하지 못하는 경우도 있고 그렇기 때문에 .vnc 파일 클릭하는 경우만 파란색으로 나오고 이상하다면 …
코드자동완성 테스트한 vscode용 확장 프로그램 continue 다운로드 사용자가 엄청나게 많은데 ... 결론 부터 말하면 실패입니다. 아래 설정이 약간 잘못 되었을수 있겠지만.채팅은 잘 되는데 코드 자동완성이 잘 안됩니다.하지만 테스트 하고 싶은분 그리고 제가 나중에 다시 테스트 해볼 경우 필요할 수 있어 올리는 글입니다. 위 이미지에서 Main Config 라고 마우스 올리면 그 옆에 톱니가 나오는데 그걸 클릭해야 합니다.잘못 만들어져서 화면이 겹치는 문제가 있습니다.제 설정은 위 이미지에 대한것은 아래와 같습니다.name: lmstudioversion: 1.0.0schema: v1models:&…
내가 준 먹이를 소화해서 다른 사용자에게 주면 곤란한 문제가 생길것 같아 직접 이용해 보기로 했습니다.결론 부터 말하면 잘하는 인공두뇌에 먹이 주면서 사용하는것이 낳으니 테스트 해보고 싶으신 분들을 위해서 남기는 글 입니다.사용한 확장 프로그램 twinny - AI Code Completion and Chat Identifier: rjmacarthy.twinny 위처럼 설정하고 자신에 맞게 모델이나 IP주소 같은것만 변경해주면 됩니다.전 UI가 좋은 LM스튜디오 사용.이걸 빠르게 사용하려면 애플 실리콘 M5 Max 노트북 16인치 추천합니다.램은 최소 64G 가능하…
무슨일인지 업그레이드 실패까지 생겼는데.... 왠지 모르지만 안되는게 참 많습니다.이런 경우 다시 설치하면 되긴 합니다.아마도 추측은 초기 설치 할 때 전체 사용자 선택을 해서 설치 했는데 업그레이드는 현재 유저 기준으로 해서 그런것이 아닌가 싶습니다. old 라고 된것 삭제 삭제하고new_ 이렇게된것 new_ 삭제하고 다시 실행하고 vscode에서 Help > Check for Updates 해주고 다시 시작하면 됩니다.이때 작업표시줄에 고정한게 있으면 그것 클릭하지 말고(삭제하고) 새로 설치된 아이콘 클릭해서 실행 하면됩니다.
vscode 사용하면 안되는것이 참 많지요.잘 되던것도 안되고 무료가 이런게 문제인데... 유료로 갈아 타려 했는데 매달 비용발생 때문에 ...어떤 것은 그것을 또 배워야 되서 할일도 못하는데 공부해야 되고 ...우선 그때 그때 수정해서 사용합니다.▷ 파일이 열리지 않는 원인은?natizyskunk SFTP 확장(1.16.3)에 내장된 구버전 ssh2 라이브러리가 Node.js의 util 모듈에서 isDate 함수를 가져다 쓰는데최신 VS Code 1.123.0이 이전에 제공되던 'isDate' 함수를 제거하면서 잘 작동하던 프로그램에 문제가 발생그래서 SFTP 연결(목록 조회)은 되지만 실제로 파일을 열거나 다운로드할…
기본적인 특징은 아래와 같으며 사용 가능한지 어떤지 테스트 하면서 정리(테스트) 한것을 다음에 필요 할 수 있어 기록해 둡니다.이 파일 디비는 동시 처리하는데 문제가 있어 동시 처리 사용하고 싶으면 MySQL 같은 것 사용해야 됩니다.이게 MySQL과 명령이 비슷한것인가요? ANSI SQL 이라서 그런가요? 후자 인데요.SQL 문법은 ANSI SQL 나머지 CLI 도구 명령들은 각 DBMS에 따라 다른 경우라고 보면 됨. - 파일 하나가 곧 데이터베이스 (.db, .sqlite). 그렇기 때문에 DBMS서버 필요 없는 경우 유용함.- 서버 없이 동작하는 경량 임베디드 RDBMS- Android, iO…
하네스 엔지니어링 결론부터 말하면 개발 기획자는 별도로 할것 없이 기존에 하던데로 그냥 하면 됩니다.이것, 저것, 문제가많네~ 이런식으로 특정하지 않는 형태로 이쁘게 만들어줘 하는 방식이 문제가 있는것으로 이렇게 언급하는 방식은 현재 사람도 의도 파악을 정확히 모르기 때문에 원하는 결과가 나오지 않습니다.문제가 많아 - 어떤 문제가 많은지 구첵적으로 알려 줘야 해결 가능.이렇게 해석해도 큰 무리가 없는것으로 어떤 문제가 있는지 명확하게 알려줘야 개선이 되고 같은 문제가 생기지 않습니다. 예를 들면.1) 상태값 기록을 위해서 테이블에 시간과 현재 상태 기록해서 체크하는것을 만들어 달라고 했더니 만들긴 잘 만들었습…
이건 백엔드는 데이터베이스등 서버개발이 유용한 측면들이 많죠.테스트 서버에서 작업하고 git으로 올리는 방법도 있고 git은 백업용도로만 사용하고 다중서버에 직접 올리는 방법도 있습니다.로컬의 편리한 UI + 서버의 강력한 자원 및 환경이 두 가지 토끼를 모두 잡을 수 있는 기능으로 저사양 노트북을 사용하더라도 강력한 클라우드 서버에 연결만 되어 있다면 그 서버의 성능을 내 것처럼 활용할 수 있게 됩니다.사용해 보시면 이런 좋은것을 이제 알았다니 할것입니다. 1. 로컬 환경과의 완벽한 분리 (Clean Local Machine)가장 큰 장점은 내 컴퓨터에 아무것도 설치할 필요가 없다는 것입니다.- 의존성 관리:…
제목을 반대로 적어 보았습니다. 결국은 어떤 방식을 사용 했을 때 더 효율적이냐 많이 변화 시켰는데 실제 변화된 것이 있느냐.- 웹사트의 예를 들면 화면단에서 변한것이 아무것도 없이 내부적으로만 변경됨- 내부적으로 변경이 많이 되었다는데 시간 차이는 별 다른게 없음- 머지 한다고 충돌 난다고 더 오래 걸리면? 소규모 팀에서 Git을 쓰지 않으면 시대에 뒤처진다고요? 상황에 따라 Git은 오히려 불필요한 복잡성을 더할 수 있으며 아래 경우라면 Git 없이도 충분합니다.5명도 안되는 소규모 팀인 경우 매일 얼굴 보고 대화하는 사이라면 브랜치 전략이나 PR 리뷰 프로세스는 그냥 회의 한 번이면 해결됩니다팀원…
먼저 실용성 문제에서 작은것이 필요하면 14인치 사면 됩니다.반드시 큰 화면이 필요하면 16인치 아니면 더 큰 것을 사면 되겠지만.여기선 이런 문제가 아니라 성능과 사용성 면에서 어떤것을 선택하는 것이 바람직한가 입니다.노트북은 이동성의 특성상 가능하면 얇게 만들려하고 있습니다.그렇기 때문에 가장 취약 부분이 발생하는 열의 처리 문제가 있는데 크면 클 수록 열처리하는데 있어 물리적으로 유리한 측면이 있습니다.그렇기 때문에 큰 화면 보다 발생하는 열 측면에서 배터리와 속도 모두 효율적인것은 크기 입니다. 발생하는 열을 처리 하는 방법은 냉각팬을 열심히 돌려서 식히는 방법과 다른 방법은 속도를 떨어트려 열 발생이 …
텔레그램에서 봇파더를 이용해서 봇을 만들고 나서 이 봇에게 API로 메시지를 보내려면 chat_id가 필요한데 이걸 쉽게 알 수 있도록 하나 만들었습니다. cht id 란?텔레그램 봇 API로 메시지를 보내려면 대상의 chat_id(숫자)가 필요합니다.봇 토큰만으로는 메시지를 보낼 수 없고, 누구에게 보낼지를 지정하는 chat_id가 반드시 있어야 합니다.---요즘은 개발자가 아니어도 필요 할 수 있고 LLM에게 물어보면 쉽게 알려주기도 하지만 이것이 필요 할 수 있을것 같아 만들어 봤습니다.봇파더(BotFather)에서 /mybots 하면 봇의 목록을 볼 수 있고 클릭하면 어렵지 않게 이해가 가는 것들이 있고…
LLM은 한단어로 요약하면 두뇌 입니다. 이 인공 두뇌를 사용하기 위해 인터넷을 연결해 대형모델을 사용하느냐 아니면 인터넷 안되도 되는 환경에서 개인 컴퓨터에 뇌를 두고 사용하느냐 입니다.인공뉴런으로 만들어진 인공신경망을 학습시킨 인공 뇌 입니다.사람의 뇌는 뉴런이 있고 뉴런과 뉴런 사이에는 시냅스로 연결되어 학습에 따라 문턱치 값이 생기는데 이 값에 따라서 어떤것이 맞고 틀리고 뭐 그런것입니다.LLM이란?LLM(Large Language Model)은 말 그대로 대규모 언어 모델로 수천억 개에 달하는 파라미터를 기반으로 방대한 양의 텍스트 데이터를 학습해서 만들어진 인공지능 모델로 OpenAI의 GPT-4나 …
스파게티코드가 생긴다고 말하시는 분도 있고 그런데 전 관계 없다고 봅니다.예를 들면 아파트 같은 빌딩 이런것은 안되지만 개인이 살 수 있는 2층집 정도는 문제 없다고 봅니다.코드를 내가 볼것도 아닌데 스파게티건 뭐건 무슨 관계가 있나요 원하는것 잘 되기만 하면 되고 빠르게 수정 되어 개선만 되면 되는 것이지.보안도 크지 않은 소스에선 잘 봐달라고 하면 되고 문제 될것은 없습니다.사실 하루 100명도 안들어는 사이트에 DBMS 설치하고 그렇기 보다 SQLite3 같은것 설치 해서 사용하는곳도 있는데이게 맞는 방식이죠. 오버스펙!!git 이것도 좋은점을 많이 나열하지만 작은 단위에선 오버스펙이죠항상 어떤기준에 의해서 원하는…
내 맘대로 많이 써도 추가 비용이 없는 LLM 모델 입니다.성능 좋게 사용하고 싶으면서 저렴하게 H/W 구매 하는 방법은 애플 M4 pro 64G를 사면 연구용으로 괜찮은 편에 들어갑니다.인텔쪽 GPU 구매 하는것 보다 RAM 속도 때문에 좋고 소비전력도 적고 여러가지 면에서 좋은데 왜? 64G를 선택해야 하느냐는 자신의 상황에 따라 다르겠지만 이건 확장이 안되기 때문에 살때 높은것을 사야 합니다.좀더 바르게 사용하고 싶으면: ASUS 어센션 GX10 구매 하면 됩니다. 전체 설치 순서▷ IPEX-LLM Ollama Portable Zip 다운로드https://github.com/ipex-llm/ip…
결론부터 말하면 큰 기대는 하지 않는것이 좋습니다.왜냐하면 우문현답을 원하지만 우문우답이 될 수 밖에 없는것이 의도를 100% 알 수 없기 때문에 그렇습니다.지시사항에 대한 명세서를 잘 적어야 좋은 결과가 나오는데 비전공자는 용어와 그에 대한 이해가 부족하기 때문에 그렇습니다. 전 비전공자인데 이런 저런것 공부해서 다 아는데요... 그럼 전공자 인것이지 비전공자가 아니지요.물론 간단한 회사소개 페이지 같은것은 물론 휼륭하게 가능하지만 조금만 복잡한게 들어가면 연동이 안되기 때문에 그렇고 Ai도 사람과 같은 형태라서 그렇습니다.그래서 한번 해보시고 재미가 있다면 본인이 하고자 하는 분야에 대한 공부를 해 나가면 …
GML 코딩버전을 활용해서 OpenCode 테스크탑 MS윈도우용 라이센스 입력해 사용하는 방법에 대한 것입니다.텍스트 버전은 어려워 하는 분들이 있는데 GUI가 사람에게는 더 친숙 하기 때문에 사용하기 편한것은 사실 입니다.1) 라이센스 입력 하는 방법 설정을 통해서 아래 캡처된 이미지 순서대로 입력 하면 큰 문제 없이 가능 합니다.2) 내가 작업할 폴더에 대해서는 아래 이미지에서 "+" 버튼을 클릭해서 선택하면 되고 우선 이렇게 해서 사용해 보고 추가적인 기능은 하나씩 익혀 나가면 됩니다. 이걸 사용 하는 이유는 우리가 웹브라우저에서 chat 모드로 사용하는 경우 로컬에 파일을 저장하고 …
프로그래머의 본질은 변하지 않는다예전부터 나는 3년 정도 경력을 쌓은 프로그래머라면 프로그래밍이 적성에 맞는지 충분히 판단할 수 있다고 생각해왔기 때문에 면접을 볼 때도 알고리즘 테스트보다는 실제 업무 경험과 문제 해결 능력을 중심으로 평가했다.많은 사람들이 AI의 등장으로 코딩의 종말을 이야기하지만 이는 정확한 표현이 아니며 정확히 말하자면 프로그래머가 사라지는 것이 아니라 프로그래머의 코딩 방식이 바뀌는 것이다.핵심은 이해에 있다해시 알고리즘을 예로 들어보면 비트코인의 블록체인에서 해시는 각 블록을 체인처럼 연결하는 핵심 메커니즘이지만 프로그래머가 해시 알고리즘의 내부 구조를 완벽하게 이해해야만 블록체인을 다룰 수 …
어떤것에는 과장이 있을 수 있다는것 ...우선 말들이 많아 사용해 봤는데 설정을 좀 더 하고 스킬도 만들어야 하고 더 해야 하는데 많은 부분을 하지 않아서 제대로 된 맛을 못봤을 수 있지만 좀 더 기다려 주는것이 낳을것 같아 심심할때 잘 있는지 물어만 보고 있는중입니다.ClawdBot —> MoltBot —> OpenClaw 이름이 앞으로는 변경되지 않았으면 합니다. * 하드웨어 준비- 맥미니 이야기가 많은데 애플 마케팅 팀이 붙었나??? 어떤 컴퓨터든 관계가 없습니다. 전기세 걱정이면 노트북이 최고 입니다. - 본래 맥미니도 서버용으로 24시간 돌리는 용도로 나온것 아니잖아요* 비전공자뭔지…
에디터가 딱 제 맘에 드는게 없네요. 잘 되던것이 어느날 안되기도 하고 이것 원인 찾는다고 이것 저것 해보다가 전체 삭제하고 다시 설치하고 재부팅하고 ....왜? 그러지????참고로 vscode의 경우는 문제가 있어 재설치 해야 되는 경우 완전삭제를 하고 설치 해야 됩니다. 찾아보면 완전삭제 하는 방법 설명하신분 있습니다.즉, 디렉토리 찾아 들어가서 완전하게 모두 삭제 해야 합니다.새로나온것은 보통 좋다는 것만 말하지 실제 써보면 그럼 그렇지 하는게 있지요현재 사용하던 에디터가 다른 프로그램과 연동이 안되서 변경하려 안티그래비티 설치 했는데 이 아이는 vscode 확장 프로그램 설치가 안되네요.이런 경우 폴더를 그냥복사…
결론 부터 말하면 공부 여전히 열심히 해야 하고 공부의 방법과 방향이 달라지는 것입니다.즉, 사람(에이전트)를 부릴 수 있는 방법에 대한 공부를 해야하고 어떻게 하면 잘 이용 할 수 있는 방법에 대해서 나만의 노하우 같은 것이 필요 하겠습니다.요즘 "AI가 다 알려주는데 굳이 공부할 필요가 있나요?"라는 질문을 자주 듣는다. 언뜻 보면 맞는 말 같다. 코드도 짜주고 설명도 해주는데 뭐.오래전에 있었던 일인데 이런 경우가 있었다.유닉스 시스템의 /etc/passwd 파일에서 사용자 ID를 65536으로 설정했다가 시스템이 그걸 0으로 인식해버린 거다. 이게 바로 오버플러우 문제라는 것이며 이것에 대한 원…
대표적인 프론트엔드 리엑트 관련된 모든 것들에 대한 것인데요.어떤것을 사용할때는 그것이 왜? 만들어 졌고 사용하지 않으면 어떤 문제가 있을 수 있고 사용했을때의 장점을 알고 있는 것이 좋습니다.요즘 보면 안해도 될것들을 하는것들이 보입니다.물론 내가 취업을 하는데 필요하고 이직을 하는데 있어 필요하면 위와 관계 없이 하는것에 대해 뭐라 할 수 없습니다.경험을 쌓기 위해서 일부러 업무를 이런것 하는것은 좀 ....보통의 일반 사이트에선 SPA가 필요가 없어요.차라리 없는게 더 좋습니다. 초기 로딩속도 느릴 수 밖에 없는 방식이기 때문에 그렇습니다.뒤로가기 문제가 왜? 있을까요. SPA 이니까 그렇잖아요.▷ SPA 장점- …
PHP, javaScript, C, BASIC 이런 언어를 배우는 것이 프로그램을 배운다고 착각 하는 사람들이 있는데 그런 것이 아닙니다. 이런 것은 프로그램 한것을 표현하기 위한 도구에 불과 합니다. 그럼 전혀 별개냐 그렇지는 않고 국어 잘하는 사람은 영어도 잘하고 그렇잖아요. 그리고 보통은 운동도 잘합니다. 프로그램 잘 하는 사람이 구조적으로 코딩도 잘 합니다.쉽게 말하면 프로그램 언어는C언어, PHP, 코볼 같은 프로그래밍 언어는 연필, 크레용, 붓 같은 것-> 도구일 뿐 (연필, 크레용, 붓처럼)그렇다면 프로그래밍은?문제찾기, 해결 방법 생각하기, 우선순위 정하기(계획세우기) = 생각하는 힘, 문제 해결 능…
DRY(Don't Repeat Yourself) 원칙은 중요한 프로그래밍 원칙이지만 맹목적으로 적용하면 오히려 코드를 복잡하게 만들 수 있습니다.오늘 프로그램 작성하다 보니 중복되는것이 보여 제거할 방법이 있냐고 물어보니 "반복되는 패턴을 함수로 추출하여 코드를 간결하게 만들 수 있습니다." 결과를 봤는데 중복을 줄인것이 틀린것이 아닌데 더 복잡하네~ // 이메일 검증 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors[] = '유효하지 않은 이메일 주소입니다.';…
작고 전력을 적게 쓰는 AI 전용 컴퓨터NVIDIA DGX Spark는 책상 위에 올려놓을 수 있을 만큼 작은 크기지만 엄청나게 강력한 AI 전용 컴퓨터입니다.▷ 속도는?1 petaFLOP = 초당 1000조 번의 계산을 할 수 있습니다128GB 메모리 = 일반 노트북의 8~16배 수준▷ 할 수 있는 것은?최신 AI 모델(ChatGPT 같은 대화형 AI)을 개인이 직접 돌릴 수 있고 특히 DeepSeek Meta(페이스북) Google 등이 만든 최신 AI 모델들도 사용 가능합니다.▷ 장점은?설치 간편 - AI 프로그램들이 이미 깔려 있어서 바로 사용 가능로컬 실행 - 인터넷 없이도 내 컴퓨터에서 AI를 직접…
▷ 오픈코드 설치후 재접속curl -fsSL https://opencode.ai/install | bash설치를 했는데 아래처럼 깔끔하게 나오는것이 아니라 화면이 깨져서 나온다면 터미널에서 처리를 모두 해주고 있지 못해서 생기는 문제로 다른 터미널을 사용해 보면 됩니다. https://github.com/Eugeny/tabby예전엔 이런것 찾으려면 힘들었는데 요즘엔 쉽게 알아 낼 수 있습니다. 그럼에도 불구하고 삽질의 숫자는 여전히 유효하고 앞으로도 그럴 것으로 생각 됩니다.▷ Tabby의 단점도 있는데 다음과 같습니다.- 일렉트론 기반으로 무겁다.- 버그가 있다 하지만 사용 못할 정도는 아니다.
설치된 확장 프로그램: SFTP Natizyskunk▷ sftp 서버 설정sftp가 ssh 서버에서 설정이 되어 있지 아니하면 아래와 같이 설정 후 재싲가 해야 한다. vim /etc/ssh/ssh_config Subsystem sftp /usr/lib/openssh/sftp-server systemctl restart sshd▷ 잘 설정 했는데 안된다면 .bashrc 수정 (중요)vi ~/.bashrc# SFTP / non-interactive session 보호case $- in *i*) ;; *) return;;esac▷ 윈도…
swappiness는 커널이 RAM의 데이터를 스왑 공간으로 얼마나 공격적으로 옮길지 결정하는 값입니다. (0~100 사이)- 60 (기본값): 어느 정도 메모리가 차면 스왑을 사용하기 시작합니다.- 10 (권장): 물리 메모리가 거의 가득 찼을 때만 스왑을 사용합니다.- 0: 물리 메모리가 완전히 바닥나기 전까지 스왑을 절대 사용하지 않습니다. ▷ Swappiness 값 수정 (메모리 우선 사용) /etc/sysctl.conf 파일 맨 아래에 vm.swappiness=10을 추가하고 저장 sudo sysctl -p를 입력해 즉시 반영▷ 스왑 메모리 완전히 끄기완전히 끄기만 하면…
개발자라면 한 번쯤 이런 생각을 해봤을 것이다. "MySQL 잘 쓰고 있는데 굳이 바꿔야 하나?" 충분히 이해 하는데 익숙한 도구를 버리는 것은 언제나 두렵기 마련이죠. 경험이 많은 분들은 알겠지만 무슨일이 벌어질지 모르니까 하지만 데이터베이스 세계의 흐름은 이미 방향을 틀었고 그 중심에는 PostgreSQL이 있습니다. 숫자가 말해주는 현실PostgreSQL은 DB-Engines 선정 "올해의 DBMS" 상을 2017년부터 2024년까지 총 다섯 차례나 수상했고 지난 7년 중 5년을 PostgreSQL이 가져간 셈이다. 나머지 2년은 Snowflake가 받았을 뿐 MySQL은 단 한 번도 이름을 올리지 못했다…
왜? 소스 설치를 하는가 하면 패키지 관리자 설치는 버전이 낮아서 그렇지요.tmux는 터미널 멀티플렉서(Terminal Multiplexer)로 하나의 터미널 창 안에서 여러 세션을 동시에 관리할 수 있게 해주는 도구를 말함. ▷ 주요 기능- 화면 분할(수평/수직)- 세션 유지(SSH 연결이 끊어져도 작업이 유지됨)- 여러 윈도우와 패널 간 전환- 세션 공유(다른 사용자와 같은 세션 접속) ▷ 필요한 경우 예전 전송방식 설치curl -sL https://github.com/trzsz/trzsz-go/releases/download/v1.2.0/trzsz_1.2.0_linux_x86_64.tar.gz -…
인터넷에는 공인IP만 다닐 수 있는데 사설IP나 예약된 다른 IP 대역이 들어올 수는 없습니다.공인IP가 아니기 때문에 중간에 라우팅이 안되기 때문에 그렇지요. 하지만 문제는 정상적인 사용자도 있을 수 있기 때문 프록시 서버를 통해서 들어오는 경우인데 이런 경우는 프록시서버의 IP를 막을 수는 없습니다.막는 통로는 방화벽, 웹서버, 프로그램 등을 통해서 막는 방법이 있겠지만 여기서 배포방식이 아닌 오래전에 대형 업체에서 많이 사용하는 방법으로 갱신시키는 형태로 적용을 시킨다면 모니터링과 대응이 빠른 프로그램을 이용하는것도 괜찮습니다. function blockBogonIp(): void&…
이 uptime 수치가 시스템의 CPU 코어 수(또는 쓰레드 수)보다 낮으면 시스템이 여유롭다는 의미며 높으면 CPU 자원 부족 등으로 인해 작업들이 대기하고 있어 시스템에 과부하가 걸렸을 가능성이 높습니다.▷ Load AverageCPU가 처리해야 할 작업의 대기열 길이입니다. - 1.0 = CPU 1개가 100% 사용 중 - 4.0 = CPU 4개가 필요한 작업량 (또는 1개 CPU가 4배 과부하) - 일반적으로 CPU 코어 수 이하면 정상 자동처리 할때 대략 이렇게 프로그램 작성 해서 처리 하면 되며 요즘 LLM에 물어 보면 더 잘 알려 주기도 합니다.중요한것은 주기적으로 시스템 부하를 체크 해서 내가 생…
검색엔진이 필요해서 제미니에게 아래와 같이 질문을 했다.> 리눅스에서 무료로 사용하면 좋은것 또는 AWS에서 쉽게 사용할만한 검색엔진을 추천 받고 싶어예상대로 엘라스틱 서치와 아파치 솔라 추천해 주는데 이걸 언제 메뉴얼 보고 테스트 하나 싶어 예전에 사용했던 스핑크스가 생각이 나서 이번에 설치하고 테스트 해봤습니다.---직접 설치해서 사용하는 검색엔진에서 사용할만한 프로그램중 하나인 러시아산 스핑크스 검색엔진 입니다.웬만한 중소 사이트에서 사용하는데 무리가 없을정도 이고 검색 결과는 본래 수동으로 손을 봐야 하는것도 많기 때문에 사용 검색엔진이라고 본인의 입맞에 딱 맞을 수도 있지만 아닌경우도 있습니다.상…
탐색기를 통한 복사 방법도 있지만 현황을 보는데 있어서는 cmd가 훤씬 좋습니다.그렇기 때문에 또는 가끔식 프로그램으로 복사 명령을 내려야 할때도 있지요 그럴때도 탐색기 사용하실 건가요?리눅스에서 비동기 방식으로 rsync가 많이 쓰이고 윈도우에서는 비슷한것이 robocopy 입니다. 복사하는 방식은 아래와 같으며 여기서 중요한 부부은 끝에 \를 붙여야 한다면 2개를 붙여야 한다는 것입니다.1개만 붙이면 의미가 없어지기 때문에 오류가 발생 합니다사용예)robocopy "C:\test\\" "D:\backup\doc\\" /E /Z /MT:16 /R:3 /W:5 /NProbocopy /? 명령을 입력하면 상당히 …
LLM은 학습 할 때 이후에 데이터에 대해서는 모르지요.외부 자원을 이용하는데 api를 이용 했는데 각 사이트마다 모두 다른 형태의 api 사용은 어려우니 통합된 방식이 필요 했는데 그것이 바로 MCP 입니다.LangChain도 외부 데이터를 가져오는 것이기 때문에 필요에 따라 적합한 것을 사용하면 되고 뭐든 직접 만드는 것이 빠릅니다.테스트로 디비 쿼리 같은 것 어떻게 하나 해봤는데..역시 잘 아는 것은 사람이 하는 것이 낮겠어요 그냥 하면 되는것이 아니라 몇가지 설치를 해줘야 합니다.pip install mcppip install asynciopip install fastmcp asyncmy aiomysql…
리눅스에서 잘 안되면 윈도우에서 설치하면 되고 여긴 버전에 대한 문제가 없습니다.무료로 하루 1천건까지 사용할 수 있다는 다른말로는 하루 1천건 까지 제미니에게 먹이를 주고 토해 내는것을 받아 먹을 수 있는 제미니CLI 버전 설치에 대한 것입니다.# 아래는 nodejs를 centos7에서 시도했으니 안된 경우 입니다.centos7에서 16버전까지는 잘 설치가 되는데 그 다음 부터는 라이브러리가 필요조건이 안된다고 하여 안됩니다.도커방식도 안되고 하여 전 포기하고 centos10stream 설치 했습니다.# nodejs는 설치가 안되어 있으면 설치 해야 한다. node -vv12.15.0 버전으로 나왔는데 설치가…
초보자용으로 작성한것은 아니며 이전에 설치한 경험이 있는데 다시 새로운 버전 설치 하려니 바뀐 부분이 있어서 정리한 것입니다.예전 net install로 간단하게 최소 설치 하신 분이라면 boot를 받으시면 됩니다.현재는 centos9stream를 설치 하실거면 Rocky Linux 를 사용하면 되지요.MySQL이 오라클로 넘어가면서 MariaDB가 생긴것 처럼 쉽게 록키 리눅스는 이런 개념으로 보시면 됩니다. 아래 빨간 박스에서 선택 부분은 건드리지 않아도 되고설치 옵션만 빠르게 하고 싶고 전체 OS가 차지하는 양을 적게 하고 싶으면 최소 설치를 하면 됩니다.단 이렇게 하면 나중에 추가적으로 패키지 …
전 보통 cron을 이용한 스케줄러를 사용하는데 지금까지 초단위로 지정해서 실행할 일이 없어 분단위로 실행을 했는데 이번에 초단위로 지정해서 실행해야할건이 발생하여 테스트후 정리한 문서 입니다.systemctl의 타이머를 사용하는데 파일은 2개가 필요합니다. 1) service 파일 [Unit] Description=My Job Service [Service] Type=oneshot User=your_username Group=your_groupname ExecStart=/path/to/your/script.sh St…
MySQL에서 갈라진 MariaDB 입니다. 정확히 말하면 갈라졌다기 보다 이어진것이라 할 수 있기도 합니다.AWS 오로라나 이거나 그 시점이 5.6 버전 부터 이던가요?점점 새로운 기능이 별도로 개발되면서 같이 않은 부분은 서로 협력해서 ANSI SQL 처럼 가지 아니하는한 호환이 안되는 부분은 어쩔 수 없는듯 합니다.MySQL 8 버전부터의 json 사용과는 방법이 다릅니다.혹시 마리아디비 인데 왜? mysql> 이렇게 나오는지 궁금해 하시는분이 있을텐데 MySQL에서 포크되었거나 호환되는 클라이언트를 그대로 사용할 수 있는 스핑크스 같은 경우 이렇게 나옵니다. 이렇게 사용이 가능하고 제것 버…
기본으로 보여주는 가상호스트 설정에 대한 것입니다.- IP주소를 입력 했을때- 서버IP 지정은 제대로 되었으나 가상호스트 설정이 안된경우위와 같은 경우 자신이 운영하는 사이트의 가장 기본이 되는 사이트를 보여주는 방법도 있지만 그렇지 않고 저처럼 404 처리해서 인지 할 수 있도록 하는 방법도 있습니다.아파치 웹서버의 디폴트는 가상호스트는 설정 하지 않아도 최상위에 있는것이 적용이 됩니다. 하지만 저처럼 명시적으로 설정 하는 방법도 있습니다.<VirtualHost *:80> DocumentRoot /wsite/default/public_html Serve…
VIRTUAL 키 사용 안되는줄 알았는데 테스트 해보니 키저장이 됩니다. 단 값은 저장이 안되네요그리고 자동으로 계산된 결과를 사용하기 때문에 지정된 값은 저장이 되질 않습니다. CREATE TABLE 파뿌리.판매_기록 ( id INT AUTO_INCREMENT, 상품코드 VARCHAR(7) NOT NULL, 상품명 VARCHAR(32) NOT NULL, 가격 INT NOT NULL comment '할인 되…
certbot 무료 인증서 갱신 했는데 웹사이트에 적용이 안되네요!!그동안 내가 웹서버 환경을 같이 수동으로 적용 해서 몰랐던것입니다.그래서 ssl 인증서 갱신 되면 자동으로 아파치 웹서버 적용하는 방법이 없을까 찾아 보았는데 있어서 정리한것입니다. certbot renew --no-self-upgrade 명령어로 SSL 인증서를 갱신한 후 인증서가 실제로 갱신된 경우에만 Apache (httpd)의 환경설정을 재적용하려면 Certbot의 renew hook 기능을 사용할 수 있습니다.1. Certbot 갱신 훅 사용Certbot은 인증서가 성공적으로 갱신되었을 때만 실행되는 명령어를 지정할 수 있는 --dep…
결론부터 말하면 잘 되고 사용하기 편하면 그냥 쓰면 되는 것이다.다른것과 문제가 생길 수 있기 때문에 생기는지 정확히 알지도 못하면서 생길까봐 안쓰는것은 고지식한것 아닌가 생각해 볼 필요는 있다고 본다. 물론 문제가 생길 수 있는 문제는 아래 PHP 한글변수 사용시의 문제점에 대부분들어갈 것으로 보인다- 프로그램을 한글 변수,함수 사용하는것에 대한 고찰 > PHP 이런 문제가 아니라면 난 사용하는 것이 오히려 좋다라고 본다.mysql> select 종목코드,일자,현재가,수량_사모펀드 from 키움_10059 WHERE (일자 BETWEEN 20230523 AND 202305224) …
누군가 이 사이트에 불필요한 링크를 걸었습니다.그런데 희안 한것은 작동도 안되는 것을 링크를 걸었다는 것입니다.이 문제로 인해 불필요한 리소스가 들어가는것과 웹봇도 불필요한것을 수집하여 접근 하기 때문에 양쪽에 문제가 있는 것입니다.검색을 통해 원인이 되는 웹사이트를 잡으려 생각 하고 있습니다. 형태는 아래와 같습니다. SQL 인젝션은 아닌데 다른 주소로 넘어가도록 우회 시키려 한것 같은데 이렇게 링크 걸 때 확인도 안하고 링크를 걸었을까?no 파라미터는 프로그램을 보면 숫자가 아니면 작동하지 않도록 되어 있습니다.34.64.82.75 - - [02/Oct/2024:16:35:34 +0900] "GET /con…
고객의 서버 시스템을 복구해야 할 때 사용하는 동의서 입니다. 보안 뿐만이 아니라 급작스러운 일이 있을 수 있기 때문에 백업의 중요성과 예상하지 못한 문제로 인하여 고객에게 사전에 충분히 인지 할 수 있도록 하기 위한 동의서 양식 입니다. 시스템 복구 동의 사항 1. 작업비용 산출 및 청구복구 의뢰 접수 후 담당자는 시스템 상태를 파악하며, 예상 작업시간과 비용을 산출 하여 담당 고객에게 처리해야 할 부분을 확인 합니다.시스템 복구에 대한 비용은 작업 시작 전에 청구 됩니다.※ 주간 기본비용 : 0만원/시간, 야간 기본비용 : 0만원/시간 2. 작업의뢰 전에 시스템의 파일을 …
http 프로토콜은 사실상 사용하지 않기 때문에 들어오는 그대로 https로 301 처리 합니다.그런데!!하지 말아야할 디렉토리가 발견되어 ssl 이동한 다음 404처리를 하기 때문에 처음 부터 404 처리 하는것이 좋은 경우가 있습니다. <VirtualHost *:80> ServerName pabburi.co.kr DocumentRoot "/www_html" RewriteEngine on # Return 404 for any requests to the /data/ directory …
간혹 파일을 찾기는 해야 하는데 언제쯤 이후에 만든것은 확실한데 어디 있는지 모르는 경우가 있을 때 유용 합니다.아래는 php 확장자인 경우 예를 들었습니다.삼바 연결된 곳이라면 PC 문서를 찾는데 무척 좋습니다.find . -type f -name "*.php" -newermt 2024-03-01 ▷ 각 항목에 대한 설명find: 파일 검색 명령어..: 현재 디렉토리를 의미.-type f: 파일만 검색.-name "*.php": .php 확장자를 가진 파일만 검색.-newermt 2024-03-01: 2024년 3월 1일 이후에 수정된 파일 검색.▶ find 명령으로 파일에 특정 문자가 있는 경우만 출력&nb…
ftp는 vsftpd 별도로 사용하고 있는데 오늘 보니 사용하지 않는 21번 포트가 열려 있네요.전 디폴트 포트는 사용하지 않기 때문에 이런게 있으면 안되지요~netstat -antp | grep LISTEN확인하니 xinetd 에서 띄워져 있네요.vim /etc/xinetd.d/vsftpd 파일을 열면 아래와 같은 텍스트를 볼 수 있는데요. service ftp { socket_type = stream &nbs…
MySQL에서 트리거(trigger)는 특정 테이블에 대해 INSERT UPDATE DELETE와 같은 DML(데이터 조작 언어) 작업이 수행될 때 자동으로 실행되는 프로시저입니다. 트리거는 데이터의 무결성을 유지하거나 로깅 감사 등의 목적으로 사용될 수 있습니다. 트리거는 데이터베이스가 특정 조건에 반응하여 자동으로 특정 작업을 수행하도록 할 때 유용합니다.▷ 트리거의 주요 특징- 자동 실행: 트리거는 관련 테이블에 특정 DML 작업이 수행될 때 자동으로 실행됩니다.- 데이터 무결성 보장: 데이터의 무결성을 보장하기 위해 사용될 수 있으며 복잡한 제약 조건을 구현하는 데 유용합니다.- 감사 및 로깅: 데이터 …
왜래키는 잘 쓰면 보약이고 잘못하면 관련된 테이블 모두 확인 하느라 부하가 심해진다.그래서 무조건 쓰지 못하게 하는곳도 있는 실정이다. 사실 우리가 그런부분이 있다.사이트의 부하가 많지 않다면 사용하는것을 권장 하는데 문제가 될일이 별로 없기 때문에 그렇다. 외래키는 두 테이블 간의 관계를 정의하는 데 사용 되는 것으로 보통 부모 테이블과 자식 테이블 간의 관계를 나타내는 데에 사용됩니다.1. 관계 정의 외래키는 부모 테이블의 기본 키(primary key) 또는 유일한 키(unique key)와 연결됩니다. 이 관계를 통해 자식 테이블의 행들이 부모 테이블의 행들을 참조할 수 있습니다.2.…
리눅스에서 OpenSSL을 사용해 생성한 사설 인증서의 유효 기간을 확인하려면 터미널에서 OpenSSL 명령어를 사용 하면 된다.아래 openssl 명령어를 사용해 인증서의 유효 기간을 확인할 수 있다.openssl x509 -in [인증서 파일 경로] -noout -datesopenssl x509 -in mycert.pem -noout -datesopenssl x509 -in rootCA.crt -noout -datesopenssl x509 -in server.crt -noout -dates# 생성 할 때 기간을 주면 유효 기간을 길게 사용 할 수 있다.# -days 36500 = 100년openssl x509 -re…
OpenSSL로 인증서 생성시 -days 36500 = 100년 옵션을 사용해서 유휴기간을 길게 준다. 우선 만료 되는 기간을 길게준 다음 후에 사용할 계획이 없으면 사용하지 않으면 되기 때문이다.지난것을 경고 무시하고 사용하는것 보다는 이편이 더 좋을것이다. 아래는 간단하게 개인 인증서 생성하는 방법이며두번째 csr 생성할때 입력 해야 하는것이 잇는데 아래처럼 입력하면 되며 비밀번호는 넣지 않아도 된다.(비밀번호 넣으면 다음에 진행할때 같이 넣어 줘야 되어 테스트 할때는 넣지 않도록 한다.)-----Country Name (2 letter code) [XX]:KRState or Province Nam…
DKIM, SPF, 및 DMARC는 이메일을 보다 안전하게 하고, 스팸이나 피싱 공격을 방지하기 위해 사용되는 이메일 인증 메커니즘들입니다.공통적으로 네임서버 설정을 해줘야 하는 것들이다.DKIM (DomainKeys Identified Mail)DKIM은 발신자의 도메인이 실제로 해당 이메일을 보냈다는 것을 증명하기 위해 디지털 서명을 사용합니다.이메일 발송자는 이메일의 헤더에 디지털 서명을 추가하고, 이 서명은 발신자의 도메인에 공개적으로 접근 가능한 공개 키로 검증할 수 있습니다.수신 메일 서버는 이 공개 키를 사용하여 디지털 서명을 검증하고, 이를 통해 이메일이 변경되지 않았으며, 해당 도메인에서 실제로 발송되었…
리눅스에서 디스크 사용량이 많은 프로그램을 찾기 위해서는 주로 du (Disk Usage) 명령어를 사용합니다. du 명령어는 디렉토리나 파일이 사용하는 디스크 공간의 양을 확인할 때 사용됩니다. du 명령의 기본적인 사용 방법 전체 사용량은 df 명령을 사용하지만 하위 디렉토리의 사용량을 보려면 du 명령을 사용 합니다. 운영하다 보면 어느곳에서 사용을 많이 하는지 알기 위해 은근히 많이 사용 되는 명령 입니다. 특정 디렉토리의 사용량을 확인 du /path/to/directory를 입력합니다. 모든 디렉토리의 사용량 du -h /path/to/directory를 사용하면 됩니다. …
디스크 I/O 부하를 많이 주는 프로그램 확인 디스크 I/O 부하를 많이 주는 프로그램을 찾으려면 iotop이라는 도구를 사용 하면 되며 이 도구는 각 프로세스의 I/O 사용량을 실시간으로 모니터링하며, 높은 I/O 사용량을 가진 프로세스를 쉽게 찾을 수 있도록 도와준다. io를 보는데는 iostat 도 있고. vmstat 1 명령으로 CPU 부하와 같이 쓰기나 읽기가 어느정도 인지 보는 방법도 있는데 iotop을 사용하면 프로그램 까지 알 수 있어 좋다. 단 기본적으로 설치가 안되어 있기 때문에 설치를 해줘야 한다. Ubuntu 또는 Debian sudo apt-get …
보통 마우스의 휠은 세로 스크롤을 작동시키는데 사용하는데요.이번에 테스트로 만든 페이지의 가로의 양이 상당해서 아래쪽에 가로스크롤을 마우스로 움직이는데 상당히 거슬려서 만들어 보게 된것입니다. ▶ JavaScript에서 wheel 이벤트 감지 - event.deltaY 값(세로 스크롤)을 감지하여 가로 스크롤(scrollLeft)을 이동 - event.preventDefault();로 기본 세로 스크롤 방지 <!DOCTYPE html> <html> <head> &nb…
자바와 자바스크립트는 직접적인 관계는 없습니다. 다만 문법이 C계열인 정도 인데 의미는 없습니다.의미가 없다는 의미는 자바스크립트 할줄 하는 개발자가 자바를 다르지 못하고 반대도 그렇다고 봐야 합니다.* 이런 생각도 가능!! - 스크립트(SCRIPT) 비교적(프로그램에 비해) 간단한 형태를 말함 - JAVA + SCRIPT = 자바로 만들어진 스크립트?그런데 같은 줄 아는 사람이 있는 경우는 왜? 그런가사람이 모르는 것을 접할 때 기본적으로 생각하는 방향에 따라 생각 하는 것일 뿐입니다.즉, 사람들이 Java와 JavaScript를 같은 것으로 오해하는 이유는 주로 인지적 작용과 언어적 연상에서 기…
중복된 처리를 제외하고자 할때 일정 부분 쿠키로 가지고 있다가 비교해서 동일한 것은 처리 하지 않기 위한것입니다.이것을 쿠키를 이용하는 방법이 있고 요즘은 로컬스토리지를 이용하는 방법도 있겠습니다. 특정 게시물의 번호나. 방문자의 로그를 저장하여 처리 하는 경우는 중복 처리 방지를 위한 간단한 방식 입니다.게시물의 경우 중복제외 처리를 하지 않으면 들쑥 날쑥 하지만 최고 30% 넘게 차이나는 경우도 있었습니다. <!DOCTYPE html> <html> <head> <title>Click Eve…
블로그에 있는 datepicker는 안되는것이 많아서 사용할 일이 있어서 완성한것 올립니다.jquery는 버전이 다르면 안될 수 있으니 버전을 맞우는것이 중요하며 아래 순서도 중요합니다.jquery를 이용하기 때문에 jquery-ui가 아래에 있어야 한다는 것입니다. 그리고 jquery-ui 압축 파일을 받으면 아래와 같이 CDN 이용하지 않고 사이트에 올려 놓고 사용할 수 있으며 압축 파일 안에 아래 cdn 링크 걸린 모든 파일과 더불어 필요한 다른 파일들도 같이 모두 들어 있습니다. 같이 사용되는 jquery 도 별도 디렉토리에 있습니다.△ 아래 달력 datepicker(데이트티커)minDate …
Node Express는 Node.js와 Express.js를 결합하여 웹 애플리케이션 개발에 사용되는 프레임워크입니다. 이를 통해 비동기적인 서버 측 코드 작성과 HTTP 요청 및 응답 처리 등 다양한 웹 개발 작업을 보다 쉽게 처리할 수 있습니다. 1) 간단하게 띄울 프로그램을 하나 준비 서버가 잘 작동하는지 확인을 할 수 있는 간단한 프로그램을 준비 하도록 합니다.자신이 하는것이 디비커넥션이 들어가게 되면 이 부분도 간단하게 CRUD 프로그램 하나 준비 하면 됩니다. const express = require('express'); const app …
-g 옵션을 주어 글로벌로 설치한것이 아닌데 현재 디렉토리에 node_modules이 없고 다른곳에 설치 된경우는 아래처럼 초기화하면 package.json 파일이 생성 되고 현재 디렉토리에 node_modules 디렉토리가 생기면서 설치 됩니다. 아래와 같이 초기화 후 설치 하면 됩니다. npm init -y npm install express 그리고 초기화 했는데 안되는 경우는 시스템 로그인할때 홈 디렉토리나 또는 기본적으로 있어야할 스크립트 등이 없는 경우는 아닌지 살펴 보면 됩니다.예를 들면 bash shell의 경우 로그인 하면서 실행 되는 스크립트 들이 있습니다. 파일명…
실제 파일은 있는데 없는다는 메시지가 나올 경우는 PATH 설정 값을 확인해 봐야 합니다.만약 whereis env 했는데 있다면 로그인할 때 실행되는 파일에 PATH 설정을 추가해 주면 됩니다./usr/local/nodejs/bin/npm install yarn/usr/bin/env: node: 그런 파일이나 디렉터리가 없습니다위와 같은 오류가 발생 하는 경우는 경로를 추가해 주면 된다.vim /etc/bashrcexport PATH=$PATH:/usr/local/nodejs/bin이 경우는 nodejs를 압축파일을 받아서 별도의 디렉토리에 압축을 풀고 심복릴 링크 처리한 경우 입니다.
프로그래머가 아니라 일반인이면 PDF 페이지번호 추가해주는 사이트가 있으니 아래를 참고하시면 됩니다.https://tools.pdf24.org/ko/add-page-numbers#s=1687481961009여기선 nodejs와 pdf-lib 설치에 대해선 언급하지 않습니다.아래는 간단한 소스 입니다.PDF파일에 페이지 번호가 없어서 인쇄하는데 있어 페이지수가 적으면 문제가 안되지만 수십페이지만 되어도 읽을때 문제가 될 수 있습니다. 페이지가 바뀐다거나 아니면 인쇄할때 잘못되어 중간부터 인쇄할때 몇페이지 부터 인쇄해야 될지 찾는데 시간이 소요 될 수 있는 문제를 해결하려면 페이지번호가 들어가 있는것이 좋습니다. …
chat GPT API를 통해서 물어본것에 대한 테스트 인데요.잘 되네요.별도의 모듈설치 없이 그냥 실행 되었습니다. 제가 전에 다른것 하면서 설치 되었는지는 확인 안해 봤습니다. // zlib 모듈을 불러온다. const zlib = require('zlib'); const fs = require('fs'); // 압축할 문자열 const str = '압축할 문자열'; // gzip으로 압축한다. zlib.gzip(str, (err, buffer) => { if (!err) { /…
파일저장이나 또는 가져올때등 상대경로로 호출 하는 경우도 있지만때론 전체 경로를 알아야 되는 경우가 있습니다.그럴때 현재 디렉토리 기준으로 처리하면 좋은때 이럴때 사용 합니다. // 현재 디렉토리 const _DIR_ = process.cwd(); php의 __DIR__ 과 같은 역활 입니다.확인 결과 위 예제는 잘 되는 것입니다. 현재 V16 버전에서 문제 없었습니다.* 사용한곳은 아래 입니다. 파일을 저장할때 유용합니다. [nodejs] PDF파일 페이지 번호 없는 경우 페이지 자동으로 넣어주기 > javascript …
현재 nodejs 실행중인 유저를 알아내기 위한 것입니다.같은 프로그램을 쉘에서 실행하기도 하고 웹서버를 통해서 실행하기도 합니다.그런 경우 파일을 쓰게 되면 문제가 발생합니다. import os from "os"; let osUser = os.userInfo().username; if ( osUser == 'root' ) { console.log('루트 유저: ', osUser); } else { console.log('osUser: ', osUser); } 발생되는 …
아작스로 서버에 전송하는 기능까지 테스트 된것입니다.jQuery 버전에 따라서 ajax 전송하는 방식이 약간 다른 부분이 있으니 버전 참고하세요.본인이 현재 사용하는것과 여기 샘플의 버전이 비슷하면 문제가 되지 않을듯 싶습니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia…
백엔드의 PDF-LIB에서 폰트를 지정하지 않으면 오류가 발생 합니다.영문은 문제 되지 않지만 한글의 경우 오류를 만나게 됩니다.그렇기 때문에 커스텀 폰드를 지정해야 하는데 스탠다드폰트가 아닌 별도 폰트를 사용할 때 필요한 부분입니다.Error: WinAnsi cannot encode "한" 이러한 오류를 만나게 된다면 한글을 사용할 수 없는 폰트이기 때문입니다. // https://pdf-lib.js.org/#examples import { PDFDocument, StandardFonts, rgb } from 'pdf-lib' // Cannot import font…
특정 문자로 구분자를 줘서 문자열로 만들어주는 함수인데요PHP의 implode에 해당하는 기능입니다.배열의 경우는 간단하게 join 메소드를 사용하면 되는데요. 객체는 안되기 때문에 만들어진것입니다. let aa = { 'bb1' : 345, 'cc' : 23, 'ee' : 'abc' } let bb = ['name','2',33,5,'age']; /** * 문자열 구분자로 합치기 * * @param string…
파일명에서 파일의 확장자만 필요한 경우 사용합니다.자바스크립트 이긴 하지만 nodejs에서 사용해도 동일합니다.블라우저의 자바스크립트에서 사용하는 함수를 백엔드의 노드에서 사용해도 문제 없습니다. /** * 파일 확장자 * * @param string file * * @return [type] * */ function file_ext( file ) { let fileExt = file.split(".").pop();&…
다른 프로그램 언어와 데이터를 주고 받을때 많이 사용하는 json 문자열과 객체형태로 서로 변환하는 방법에 대한것입니다.여개서 객체는 연관배열로 생각하시면 됩니다.연관배열은 배열의 키 부분이 문자열이 들어갈 수 있는것을 말합니다. // json 문자열로 만들기 let oParm = { 'test' : 123, 'abc' : '345' }; console.log('-- 현재값 ----------------------------------------'); conso…
요소(엘리먼트) 또는 태그를 삭제하는 jQury 메소드에 대한 설명입니다.id값을 이용해서 자기자신을 포함해서 삭제하는 remove와자신은 그대로 둔 상태에서 안쪽(내용) 부분을 전체 삭제하는 empty의 차이점 입니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc…
자바스크립트에서 비율로 처리 해야 할 때 필요한 함수 입니다.픽셀로 전환을 다시 하거나 픽셀을 비율로 처리 하거나 서로 전환이 가능한 기능을 가집니다.픽셀은 고정된것이기 때문에 화면이나 특정 박스안에 있을때 동적으로 처리가 되지 않습니다. 변화된 크기에 따라서 위치나 크기가 같이 변하게 하려면 비율로 처리를 해야 하는데 그때 필요한 부분입니다./** * px to percent change * * @param mixed mode : px2per, per2px * @param mixed divWidth : 대상박스 …
페이지에 하나만 있는 ID를 선택자로 사용하면 좋은데 간혹 그렇지 못한 경우가 있습니다.이럴때는 class가 있을 경우 클래스를 선택자로 하는데 여러개가 한꺼번에 있을 때 AND 조건인 경우와 OR 조건인 경우에 해당 하는 것입니다. <div class="offcanvas-header navbar-shadow px-4 mb-3">위와 같이 여러개가 있을경우아래는 AND 조건이 되고. 그렇기 때문에 아래 모두 일치하는 엘리먼트를 삭제 하게 됩니다.$(".offcanvas-header.navbar-shadow.px-4.mb-3").remove();이번꺼는 OR 조건이 됩니다. 하나라도 일치 하는 것은 모…
원리를 알면 간단합니다.어떤것이든지 알고나면 간단핝데 알기전에는 정말 쉬원것도 모르면 답답한 법입니다.보통 이미지나 div 박스등은 가로 세로의 픽셀을 구할 수 있습니다.그런데 div 박스 안의 텍스트 글자의 전체 길이를 픽셀로 구하고 싶은 경우가 있는데요.이런 경우 사용하는 방법입니다.이는 가운데로 정렬 되어 있어도 크게 다르지 않습니다. 방법은 다음과 같습니다.박스를 두개 사용하는데 안쪽의 박스에는 TEXT 글자가 들어가 있고 span으로 감싸고 밖을 div나 또는 다른것으로 감싸면 됩니다.width = $(this).find('span:first').width();그리고 밖의 박스에서 위치와 가로세로 높이…
상대적으로 설정 되어 있거나 또는 다른 형태로든 관계 없이 박스와 박스의 사이의 간격을 알고 싶으면 각 박스의 값을 구해서 서로 빼 주면 간격을 알 수 있습니다.이미지 크기 또는 대상의 크기jQuery 에서 소수점포함(더 정확히) 알고자 할때는 아래를 사용한다..width() .outerWidth()이미지의 경우 화면에 보이는 렌더링된 크기가 아닌 원본 크기: prop('naturalWidth')소수점 없음: prop('offsetWidth') 바닐라 자바스크립트: domRect = element.getBoundingClientRect();jQuery: $("#"+id)[0].getBoun…
id값이 없을때 안쪽에 있는것 찾는 방법에 해당 하는것입니다.동적으로 생성되거나 할때는 id값을 일일이 주기 힘든 경우가 있습니다. 이럴때는 여러개 있어도 관계가 없는 class 를 이용하는것도 방법입니다. $(document).ready(function() { // div 안쪽에 input box가 있는데 id 값이 없을 때 // > 클래스를 하나 줘서 찾는 방법도 있다. id는 문서에서 유일해야 하지만 class는 여러개 와도 관계 없음. $("#inboxDiv").find("input").each(function() { co…
특정 파일만 받고자 할때 체크하는 방법입니다.확장자로 체크하는데 더 좋은것은 MIME로 체크하면 더 좋습니다.확장자는 얼마든지 변경할 수 있고 더 문제는 아무렇게나 확장자를 변경하는 경우도 있습니다.<script> $("#images").on("change", function(e) { var files = e.target.files; var filesArr = Array.prototype.slice.call(files); filesArr.forEach(function(f) …
HTML의 form에서 인풋박스에서 jQuey를 이용한 데이터를 그대로 다른 인풋박스에 넣어주는 간단한 프로그램 입니다.키보드 입력에 대한것은 keydown 과 keyup이 있는데 입력한 정보를 얻을때는 keyup 입니다.눌린다음 올라올때 비로서 입력한 값을 얻을 수 있습니다. keydown도 감지는 되지만 입력된것을 얻을 수는 없습니다. <input type="text" name="test1" id="test1"><input type="text" name="test2" id="test2"><script> $("#test1").on("keyup", funct…
jQuery를 이용한 태그의 하위요소중에서 첫번째 요소에 대한 스타일 속성을 변경하는 방법에 대한 것입니다.아래는 자바스크립트 변수로 처리 되었지만 테스트 할때는 상수를 넣어 해보시면 됩니다.아래와 같이 사용하면 됩니다. $( "#"+idname ).css( 'touch-action', status);$( "#"+idname + " > div:first-child").css( 'touch-action', status); 참고한곳https://homzzang.com/b/jquery-52
요즘은 배열 보다는 객체로 많이 사용되기도 하는데요.배열을 삭제 하는 방법에 대한것입니다.기본적으로 있는 remove는 완전히 없어지는 것이 아니라 빈방으로 만드는 역활을 합니다.그렇기 때문에 갯수를 체크하면 생각과 다를 수 있습니다. 현재의 브라우저 버전에서도는 사용해서 문제 되지 않습니다. Array.prototype.removeByValue = function (val) { let arrRtn = this.filter(item => item !== val); return arrRtn; } // 0 부터 시작 한다…
jQuery를 이용한 방식이기 때문에 아래에는 명시 되어 있지 않지만 라이브러리 추가 해야 됩니다.확인하는 방법은 브라우저의 소스보기를 통해 가능 합니다. <div class="target" id="target1"> target 1 </div> <div id="source">source</div> <input type="button" value="clone replaceAll target 1" id="btn1" /> <script> $(document).ready(fu…
스크롤 할때 움직이는 메뉴에 대한 것은 원리를 알면 본인의 상황에 맞게 수정이 가능합니다.보통 플로팅 메뉴 또는 플로팅배너 라고 합니다.스크롤 이벤트가 발생이 되면 그 위치 만큼 div박스의 top 위치를 변경시켜주는 방식 입니다.아래는 jQuery를 이용하였습니다.<script>// 화면 크기가 변경 되었 때$(window).resize(function( event ) { $(this).trigger('scroll'); });// 페이지 읽힌 다음 위치 설정$(document).ready(function() { // 기존 css에서 플로팅 배너 위치(top)값을 가져와 저장한다.&nb…
어떤 폰트를 사용하느냐에 따라 사이트의 분위가가 많이 다르기 때문에 자신의 사이트에 맞는 폰트를 잘 선택할 필요가 있습니다. 웹폰트를 기반으로 했으며 폰트 잘 모르겠으면 대형 사이트에서 사용하는것 사용하면 그만이긴 합니다.하지만 난 좀 다르게 서비스를 하고 싶고 이용자들에게 다르게 보이고 싶다 하면 폰트의 변경은 좋은 방법중 하나 입니다. 폰트 변경시 좋은점 - 디자인 향상: 브랜드 아이덴티티 강화, 감성적/고급스러운 분위기 연출 - 가독성 개선: 사용 목적에 맞는 폰트로 읽기 편하게 개선 가능 - 특징 부여: 차별화된 느낌 제공 (ex. 뉴스, 쇼핑몰, 블로그 각기 다른 톤)&…
