분류 전체보기
-
Vuetify의 기본 스페이싱 단위카테고리 없음 2024. 8. 13. 14:14
vuetify에서 패딩이나 마진같은 것을 쉽게 조절할 수 있는 클래스를 제공하고 있다.일단 뷰티파이의 기본 스페이싱 단위는 4의 배수이다.만약 마진-2 혹은 패딩-3이라고 하면 각각 4*2=8px, 4*3=12px이 마진이나 패딩 처리되는거다.예를 들어 이렇게 입력을 한다고 하면 6*4=24px이 패딩된다.우리가 굳이 css에 padding: 24px; 을 입력할 필요가 없어진다.css적으로 굉장히 깔끔해지니 많이 이용해볼 수 있을 것 같다. 주요 포인트4*npx임css 굳이 추가 안해도 됨
-
reduce 함수에 대해서 알아보자개발/vue.js 2024. 8. 12. 14:11
reduce는 for문과 비슷한 함수다. 대신 for문보다 좋은게 더 가독성이 좋고 어쩌면 더 최적화된 함수라는 것이다. 배열에 있는 모든 값에 대한 연산을 할 때 reduce만한게 없는 것 같다. 예시로 살펴보자. totalTables() { return this.tables.reduce((sum, table) => sum + (table.count || 0), 0);} 위 함수는 전체 테이블의 수를 계산하는 함수이다.다음과 같은 함수를 computed에 넣었다고 해보자여기서 this.tables는 배열이다.그리고 table은 그 배열 안의 요소이다.(sum, table)이 부분은 인자다.=> 이것은 한줄 로직이라는 것을 나타내는 기호이다. 만약에 여러줄 로직이면 { ~~~~ } 이렇게 쓸 것이다....
-
computed 속성이란?개발/vue.js 2024. 8. 12. 13:41
computed 속성은 Vue 컴포넌트의 반응형 시스템의 중요한 부분이다. computed 속성을 이용하면 의존하는 데이터가 변경될 때 다시 계산하여 보여주는 것이 가능하다. 심지어 계산된 결과를 캐싱해준다. 그래서 의존하는 데이터가 변경되지 않는 한, 여러 번 그 페이지에 접속하여도 계산하는 함수를 다시 실행하지 않고 이전에 계산된 결과를 반환한다.. 이게 Vue의 라이프사이클 훅이 아닌 이유는 특정 시점에서 자동으로 실행되는 것이 아니라 의존하는 데이터가 변경될 때만 자동으로 재계산되는 식이기 때문이다.
-
created()란?카테고리 없음 2024. 8. 6. 13:29
이것도 mounted() 처럼 Vue 컴포넌트의 라이프사이클 훅 중 하나이다.이 친구는 DOM에 아직 접근할 수 없지만, 컴포넌트의 데이터와 메서드에 접근할 수 있다. created() 단계에서는 DOM이 완전히 준비되지 않았기 때문에document.getElementById 같은 방식으로 DOM에 접근하는 것은 불가능하다.마치 눈 감고 아무것도 안 보이는 상태에서 무언가 찾으려는 것처럼 말이다.. 왜 쓰는건가?이 단계에서는 컴포넌트의 데이터를 초기화하거나, API를 호출해서 데이터를 가져오는 등의 작업이 가능하다. mounted()와의 차이점은 created()는 컴포넌트가 생성되었을 때 바로 실행되고, mounted()는 컴포넌트가 DOM에 실제로 마운트된 후에 실행된다.그러니까 created()는 ..
-
XSS 공격이란?컴공지식/보안 2024. 8. 1. 14:12
XSS, 'Cross-Site Scripting'은 웹 보안에서 자주 나오는 공격 방식이다. 비유를 들어 설명하자면,친구들이랑 단톡방에서 놀고 있는데 그 방에 이상한 사람이 들어와서 누군가의 이름을 똑같이 따라 하면서 이상한 링크를 보내는 것이다. 그리고 그 방에 있던 다른 누군가는 "어? 이거 얘가 왜 보냈지?" 라고 생각하고 클릭해버리는 것이다. 그리고 그 링크 때문에 개인 정보나 대화 내용이 다 유출돼 버리는거다. 웹사이트로 치자면나같은 허접이 만든 웹사이트에서 다른 사용자가 입력한 내용을 아무런 검증 없이 그대로 보여주는 경우가 있다.누군가 입력란에 악성 스크립트를 넣어두면, 그걸 본 다른 사용자는 그 스크립트가 실행되어서 갑자기 공격 당하게 된다. 예를 들어 누군가 내가 만든 웹사이트의 댓글에 ..