XSS이란?위키피디아의 설명에 따르면 다음과 같다.사이트 간 스크립팅, 크로스 사이트 스크립팅(영어: cross-site scripting, XSS)은 웹 애플리케이션에서 많이 나타나는 취약점의하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다 대표적인 XSS 공격은 세 가지가 있다.Reflected XSSStored XSSDOM-based XSS하나씩 알아보도록 하자.1. Reflected XSS Reflected XSS(반사형 XSS)는 공격자가 만든 악성 스크립트가 웹 서버를 통해 반사되어 사용자의 브라우저에서 실행되는 취약점이다. 주로 피해자가 악성 링크를 클릭할 때 발생하며, 즉각적인 영향을 미친다. 시나리오를 통해 알아보자. 검색 페이지 ..

Vue를 쓰면서 함께 Vuetify도 쓰고 있는데 쓰다보니 슬롯을 활용하는 VMenu 컴포넌트를 쓰게 됐는데 동작이 어떻게 되는지 헷갈려서 정리하는 김에 글을 쓴다. 공식 문서로 봤을 때는 React의 children 이랑 비슷한 느낌으로 알았는데 제대로 쓰려고 하니 오래돼서 그런지 헷갈린다.슬롯이란?슬롯(slot)은 Vue에서 제공하는 기능으로 컴포넌트의 재활용성과 유연성을 제공한다. 형태는 정해져 있고 내부 컨텐츠가 달라지는 경우에 유용하게 쓸 수 있다. 공식 문서의 예를 빌리면 다음과 같다. 위처럼 레이아웃이 정해져 있고 내부 컨텐츠가 동적으로 변해야 하는 상황에 슬롯을 사용하기 적합하다. 이런 경우에 슬롯을 적용하면 다음과 같이 사용할 수 있다. ..

Basic Vue using Component Vue에서 기본적으로 한 컴포넌트를 다른 컴포넌트에서 쓰려면 import를 해야 한다. 이런 import 문 없이 template에서 사용한 컴포넌트를 자동 import 해주는 플러그인이 unplugin-vue-components 이다.Using unplugin-vue-components 이렇게 되면 불필요한 import 를 원천적으로 막아주기 때문에 빌드 파일 크기도 줄일 수 있다.자세한 사항은 공식 깃허를 참고하기 바란다.https://github.com/unplugin/unplugin-vue-components GitHub - unplugin/unplugin-vue-components: 📲 On-demand components..

앞선 글과 같은 이유로 해당 플러그인을 알아보도록 한다.https://somuchthings.tistory.com/382 [Vue.js] Unplugin-Vue-Router포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모somuchthings.tistory.comBasic Vue ImportVue에서는 기본적으로 API를 사용할 때 'vue'에서 import 해서 사용한다.import { computed, ref } from 'vue'const count = ref(0)const doubled = computed((..

포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모르는 플러그인들이 이미 적용되어 있었다. 이제 Vue를 배운지 이틀 정도인데 모르는 것들이 적용되어 있어 당황스러웠고 하나씩 찾아보았다. 그 중 첫 번째로 눈에 띈 것이 unplugin-vue-router 였고 공식문서 기반으로 정리해보도록 한다.Basic Vue routingVue에서는 공식적인 라우터 기능을 Vue-Router에서 제공한다. 여러 페이지 컴포넌트들을 만들어놓고 이것들을 라우터에 등록해야 한다. 기본적인 라우터 코드는 다음과 같다.import { cr..

https://school.programmers.co.kr/learn/courses/30/lessons/142085 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 문제 자체는 명료하다. 적의 공격을 순서대로 막되 무적권을 활용하여 최대한 많은 라운드롤 막아내야 한다. 문제를 잘 이해했다면 무적권은 가능한 적이 많을 때 사용하는 것이 효율적이라는 것을 알 수 있다. 그렇다면 그 '가능한 적이 많을 때' 를 어떻게 처리해야 할까? 처음에는 정렬을 이용해서 해결하려고 했다. enemy를 내림차순 정렬하고 k + 1번째부터 시작하는 식으로 접근했다. ..