분류 전체보기 102

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

윈도우 11 rufus를 사용하여 GPT방식으로 설치하기.

컴퓨터 업그레이드를 하면서 발생한 오류 기록 1. 2.5인치 SSD를 제거하고 M.2 SSD로 업그레이드 2. M.2 SSD에 윈도우를 설치했으나 BIOS에서 Boot Option에 M.2 SSD가 잡히지 않음. 3. 검색해보니 윈도우11을 MBR방식으로 설치하여 발생한 문제. 해결법 1. 윈도우11의 ISO파일을 다운받는다. 아래 사이트에 접속. https://www.microsoft.com/ko-kr/software-download/windows11 Windows 11 다운로드 요청의 유효성을 검사하는 중입니다. 이 작업은 몇 분 정도 걸릴 수 있습니다. 페이지를 새로 고치거나 뒤로 이동하지 마세요. 그러면 요청이 취소됩니다. www.microsoft.com 11디스크 이미지를 다운로드받는다. 2.r..

기타/PC 2023.10.08

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

PC 업그레이드 관련 메모

케이스 [be quiet] PURE BASE 500 WINDOW 서린 (BLACK) 72,000원 CPU [AMD] 라이젠 7 버미어 5700X 255,500원 CPU 쿨러 [3RSYS] Socoool RC1800 ARGB (블랙) 67,000원 SSD [SK하이닉스] GOLD P31 NVMe SSD 1TB 98,000원 RAM [삼성전자] 삼성 DDR4 8GB PC4-25600 (3200) 45,400원 HDD [Western Digital] BLUE HDD 4TB 128,000원 케이스 쿨러 [be quiet] SHADOW WINGS 2 서린 PWM [140mm] x 1 + [120mm] x 3 87,750원 VGA 지지대 [3RSYS] ICEAGE G5 그래픽카드 지지대 11,400원 총합 765,..

기타/PC 2023.10.05

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

Vue.js 템플릿 문법 - watch

watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. 사용법 {{num}} increase watch와 computed의 차이점? computed는 간단한 연산 위주, watch는 특정 메소드나 무거운연산, 혹은 비동기통신과같은 기능에 사용하는것이 좋다. 참고:https://vuejs.org/guide/essentials/computed.html#ad Computed Properties | Vue.js VueConf Toronto - Join the premier Vue.js conference | 9-10 Nov 2023 - Toronto, CanadaRegister Now Use code VUEJS to get 15% off vuejs.org 예제 {{ num }..

정리/Vue.js 2023.09.22

Vue.js 템플릿 문법

Vue.js의 템플릿 문법이란 Vue.js로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터바인딩 데이터 바인딩은 Vue.js 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) {{}}. //Vue.js 3버전 Vue.createApp({ data() { return { message: 'Hello Vue.js' } } }) div 태그에 콧수염 괄호를 이용해 뷰 인스턴스의 message 속성을 연결했다. 코드를 실행하면 화면에 Hello Vue.js라는 코드가 출력됨. *Computed* '계산된'이라는 뜻으로 데이터바인딩시 데이터를 가공하고자 할 때 사용하는 속성이다. {{n..

정리/Vue.js 2023.09.22