본문 바로가기

분류 전체보기

 (204)
[Vue.js] #8 css에서 vue 제공 변수 사용하기 computed 안에서 지정한 color 값을 css에서 받아와서 표현하기 그냥 조건에 따라 color 값을 바꾸고 싶을 때 v-bind를 사용한다 [예시코드] {{ name }} {{ birth }} {{ compareBirth }} {{ compareBirth }} [실행결과]
[Vue.js] #7 computed, methods 차이점 1. computed : 뷰에서 제공 - 캐시가 가능함 - 호출시 이전에 계산했던 것을 사용 - console.log 찍힌 횟수를 확인해보자 - 호출시 compareBirth 형태로 호출 {{ name }} {{ birth }} {{ compareBirth }} {{ compareBirth }} [실행결과 (computed)] 2. methods : 뷰에서 제공 - 캐시가 안됨 - 호출시 매번 연산 - console.log 찍힌 횟수를 확인해보자 - 호출시 compareBirth() 형태로 호출 {{ name }} {{ birth }} {{ compareBirth() }} {{ compareBirth() }} [실행결과(methods)]
HTTP 헤더 총정리 헤더란? HTTP 통신의 일부 [공통 헤더] 요청 과 응답에 모두 사용되는 헤더, Content 시리즈는 엔티티 헤더라고 불린다. (예시 사진에 안나와 있는 헤더도 있음) Date : HTTP 메시지가 만들어진 시각, 자동으로 생성됨 Connection : HTTP/2 -> 없음, HTTP/1.1 -> keep-alive Cache-Control : 캐시 관련 헤더***********(매우 중요 - 웹성능을 최대로 높이기위해, 원하는 시점에 캐싱을 하고, 지우고가 중요, 불필요한 통신을 하지 않도록), 아래 옵션들 속성해서 사용 가능 no-store : 아무것도 캐싱하지 않음, 저장하지 않음 no-cache : 모든 캐시를 쓰기 전에 서버에 이 캐시 써도 돼? 물어봐라 라는 뜻 = max-age:0으로 ..
[Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기 1. 프로젝트 내에 components/Card.vue 파일 생성 # components/Card.vue {{ name }} {{ description }} 2. 프로젝트 내에 components/CardList.vue 파일 생성 # components/CardList.vue 3. 최상위 컴포넌트 App.vue 수정 # App.vue 4. 원하는 이미지 파일 넣기(loki.png, thor.png) /public 폴더 밑에 이미지 파일 추가 5. 최종 파일트리 6. dev 서버 돌리기 npm run dev [실행 결과]
[Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기 https://vitejs-kr.github.io/guide/ 시작하기 | Vite 시작하기 들어가기 전에 Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 vitejs-kr.github.io vite로 시작하기 (Vue 에서 권장) $ npm create vite npx: 6개의 패키지를 3.697초만에 설치했습니다. √ Project name: ... Vue-Study √ Package name: ... vue-study √ Select a framework: » vue √ Select a variant: » vue Scaffolding project in C:..
보안 script-injection / csrf-token & Form 장고/ 등 라이브러리나 프레임워크 장점 csrf 공격 사용자의 의도와는 다르게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 만드는것 ex) 블로그에 광고성 글이 자동으로 올라가짐 이 공격은 사용자의 계정(권한)을 도용하여 마음대로 행위를 하는 것 csrf 공격 방법 사용자가 페이스북에 로그인한 상태로 웹서핑을 하다가, 해커가 만든 웹사이트에 접속했다. 근데 그 웹사이트에는 브라우저의 쿠키정보나 로컬스토리지 정보를 읽어오는 스크립트가 있었던 것! 해커는 이 인증정보들을 사용하여 사용자의 권한을 도용할 수 있다. csrf 방어방법 csrf 공격은 데이터 변경이 가능한 post, patch, delete 메소드에만 적용을 해두면 된다. 1) Referrer 검증 : 백엔드에서 헤더의 Referrer를 확인..
[Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기 1. v-for 로 map이나 forEach 역할을 할 수 있다. 2. Card 컴포넌트 구현 const Card = { props: { name: String, hobby: String, }, template: ` {{ name }} {{ hobby }} `, }; 3. 부모App에서 Card 컴포넌트 사용 const App = { data() { return { people: [ { id: 1, name: 'Wendy', hobby: '자전거', }, { id: 2, name: '박유진', hobby: '노래', }, { id: 3, name: '한수빈', hobby: '독서', }, ], }; }, components: { Card, }, methods: { addPerson() { this.peo..
[Vue.js] #3 컴포넌트 생명주기 / v-if 속성 사용 1. 컴포넌트들의 생명 주기별로 콘솔을 찍어본다. -> hook 으로 각각 콘솔 찍어보기 가능 const Display = { props: { emoji: String, }, beforeCreate() { console.log('beforeCreate'); }, created() { console.log('created'); }, beforeMount() { console.log('beforeMount'); }, mounted() { console.log('mounted'); }, beforeUpdate() { console.log('beforeUpdate'); }, updated() { console.log('updated'); }, beforeUnmount() { console.log('beforeU..
[Vue.js] #2 부모 - 자식 관계 컴포넌트 구현 부모 - 자식 관계의 컴포넌트 구현 1. 자식 요소를 태그로 사용 가능 v-bind -> : 으로 축약표현 왜? bind를 하면 Vue에서 정의한 데이터를 찾음 -> count 라는 데이터(Parent에서 정의) 를 찾아서 Child에게 props로 넘김 2. 자식 요소 생성 (순서 중요 : 자식먼저 작성) 전체 예시 코드 실행 결과
[Vue.js] #1 시작하기 빈 폴더에 index.html 새파일 추가 필수 핵심 1. vue 라이브러리 cdn 2. 정의한 app 마운트 위치 잡기 Vue.createApp(Counter).mount('#counter'); 전체예시 코드 #index.html Counter : DoubleCounter : {{ count * 2 }} up down 실행결과

티스토리툴바