정리 35

CIDR이란??

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-CIDR-%EC%9D%B4-%EB%AC%B4%EC%96%BC-%EB%A7%90%ED%95%98%EB%8A%94%EA%B1%B0%EC%95%BC-%E2%87%9B-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC-%EA%B3%84%EC%82%B0%EB%B2%95 🌐 CIDR 개념 쉽게 이해해보자 & 계산법 CIDR (Classless Inter-Domain Routing) 네트워크 설계를 하면서 가장 많이 접하게 될 개념이 CIDR(사이더) 이다. CIDR의 full name은 (Classless Inter-Domain Routing) 으로 클래스 없는 도메인간 라우팅 기법이라는 뜻을 inpa.tisto..

정리/네트워크 2024.03.06

AWS 용어 정리

AWS자격증 취득을 위해 공부를 시작한다.. 여유있게 따려고 했지만 3주의 기간밖에 없어 최대한 열심히 해야할것 같다. EC2 Elastic Compute Cloud의 준말로, AWS에서 제공하는 독립된 컴퓨터 서버이다. Windows, Linux, Unix와같은 원하는 운영체제를 설치하여 원하는 컴퓨터 서버를 구축할 수 있다. EC2하나하나를 인스턴스라고 하며 AWS에서는 이 인스터스를 기반으로 다양한 서비스를 제공한다. ELB Elastic Load Balancing의 준말로, EC2인스턴스간의 부하를 조절하기 위한 EC2의 기능이다. 타겟 인스턴스를 설정하면 트래픽을 분산하거나 Auto-Scailing으로 인스턴스를 생성/삭제하는 방식으로 부하를 조절한다. S3 Simple Storage Servi..

정리/AWS 2024.01.05

jQuery에서 tr태그에 background-color가 먹지 않을때

jQuery를 사용하는 환경에서, 특정 tr태그를 클릭했을때, 클릭한 tr태그에 background-color를 주고, 나머지 tr태그에는 background-color를 흰색으로 주는 기능을 개발 하려고 한다. 하지만 아래와 같은 소스에서,, tr태그에서 background-color가 먹지 않는 현상이 발생한다. $("tr[data-oid]").css("font-weight", "normal"); $('tr[data-oid=' + indexOID + ']').css('font-weight', 'bold'); $("tr[data-oid]").css("background-color", "#ffffff"); $('tr[data-oid=' + indexOID + ']').css('background-colo..

정리/Javascript 2023.11.23

Vue.js에서 AES256 암호화 사용하기

데이터를 안전하게 관리하는 방법중 첫번째로 생각나는건 암호화다. ●암호화 관련 참고 : http://www.jidum.com/jidums/view.do?jidumId=614 지식덤프 I. 데이터 안전한 교환과 저장을 위한 보안 알고리즘, 암호화의 개요 가. 암호화(Cryptography)의 정의 메시지의 내용이 불명확하도록 평문(Plain text)재구성하여 암호화된 문장 (Cipher text)으로 만드는 www.jidum.com AES, SHA, RSA 등 다양한 방법이 있지만, AES256방식 암호화를 Vue.js에서 사용해보려한다. 1. npm install crypto-js명령어를 사용해 라이브러리르 설치한다. npm install crypto-js 2. Vue 컴포넌트의 script단에서 Cr..

정리/Vue.js 2023.10.27

Vue.js [Mixed spaces and tabs]에러 수정

아래 에러는 들여쓰기에 공백과 tab키를 동시에 사용하면 나는 에러 이다. 해결법 : package.json 파일의 eslintConfig 항목을 아래와 같이 수정한다 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": { "no-mixed-spaces-and-tabs": 0, "no-unused-vars": "off" } }, 위와같이 수정하고 npm run build 혹은 npm run serve를 실행하여 확인.

정리/Vue.js 2023.10.25

Vue.js npm run serve시에 [Failed to resolve loader: sass-loader]에러 수정

Vue 프로젝트를 run하기위해 명령어를 날렸지만 아래와 같은 에러가 난다. 찾아보니 싱글파일 컴포넌트의 style태그안에 있는 lang ="scss" 속성때문에 발생한 에러다. 참고 : https://yamoo9.gitbook.io/webpack/webpack/webpack-loaders/sass-loader Sass 로더 - Webpack 러닝 가이드 앞서 웹 브라우저에서 결과를 확인했듯이 Sass를 사용해 스타일 모듈을 관리해도 번들링 되면 코드의 출처를 알 수 없어 스타일 디버깅이 어렵습니다. 이러한 문제를 해결하려면 소스 파일의 맵 yamoo9.gitbook.io 아래 두 명령어를 통해 필요한 라이브러리를 설치한다. npm i sass-loader npm i node-sass 설치완료. 재기동 ..

정리/Vue.js 2023.10.19

Vue.js todo어플리케이션 favicon/font 설정하기

아래 사이트에 접속한다. https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 원하는 이미지를 넣고, Create Favicon 버튼을 클릭하여 다운로드 한다. 아래 태그를 index.html의 head태그 안에 삽입한다. 아래 페이지로 이동한다. https://fontawesome.com/v4/get-started/ Get Started with Font..

정리/Vue.js 2023.10.18

java 8버전에서의 html인코딩방법

보안취약점 점검을 하다보면 가끔 XSS관련 결함이 잡히고는 한다. XSS참고 : https://easymedia.net/Culture/EasyStory/?no=170&mode=view&IDX=1165&p=1 이지미디어 내일의 경험을 만드는 이지미디어입니다. www.easymedia.net 그러기 위해 사용자가 입력한 값을 html인코딩을 통해 문자 그대로가 아닌 치환해 줄 필요가 있는데, 아래 코드를 사용하면 된다. StringEscapeUtils.escape(str).replace("%", "%"); 정말 많이쓰는 기능이니 core쪽에 따로 뺴놓는것이 편하다. ※참고 URL 인코딩은 다음과 같이 하면 된다. try{ URLEncoder.encode(url, "UTF-8"); }catch(Unsuppor..

정리/Java 2023.10.06

Vue.js 싱글 파일 컴포넌트 사용법

싱글파일 컴포넌트란 쉽게 말해서, Root하위에 있는 컴포넌트를 파일로 따로 구분해서 사용하는 것을 말한다. App.Vue파일을 생성해보자. 싱글파일 컴포넌트의 기본 구조는 이런식으로 나뉘어져 있는데, 소스상으로 보면 아래와 같다. 이와같은 템플릿을 사용하기 위해선 VSC 에디터 상에서 'vbase'라고 입력 후에 Enter키를 입력하면 된다. 버전마다 scf, vueinit등 다른것으로 알고있다. 나는 Vue.js 3버전을 사용해 개발중. 예시코드 {{ msg }} 컴포넌트 생성 컴포넌트는 ./src/components폴더에 모아둔다. AppHeader.vue파일 생성 컴포넌트를 생성할시에는 HTML에서 제공하는 기본태그와 혼동되지않게 두 단어를 조합해서 명명한다. 예제1 App.vue {{ msg }..

정리/Vue.js 2023.09.26

Vue Cli란?

Command Line Interface의 준말로, 명령어를 통한 특정 액션을 수행하는 도구를 의미함. 곧 명령어 보조도구 https://cli.vuejs.org/ Vue CLI cli.vuejs.org VUe Cli첫 화면. Get Started를 선택하여 이동한다. npm -install을 이용하여 설치하기 전에, 각각의 명령어를 통해 node.js의 버전과 npm의 버전을 확인한다. 설치명령어를 입력한다. npm install -g @vue/cli 설치중... 완료! 사용법 아래명령어 입력 vue create vue-cli Vue 3선택 설치중.. 성공! vue-cli디렉토리로 이동후에 npm run serve를 통해 서버 실행. 서버가 올라왔다. 성공!

정리/Vue.js 2023.09.25