Frontend (48) 썸네일형 리스트형 html a href 하이퍼링크 색깔 없애기 a:link : 클릭하지 않은 링크 a:visited : 한번 클릭했던 혹은 다녀갔던 링크 a:hover : 링크를 클릭하려고 마우스를 가져갔을 때 decoration : 밑줄 none : 없는 상태 underline : 있는 상태 a:active : 링크부분에서 마우스를 누르고 있는 동안의 상태 CORS(Cross-Origin Resource Sharing) CORS(Cross-Origin Resource Sharing)는 한 도메인에서 로드되어 다른 도메인에 있는 리소스와 상호작용하는 클라이언트 웹애플리케이션에 대한 방법을 정의합니다. 웹 캐쉬 출처: https://hahahoho5915.tistory.com/32 [넌 잘하고 있어] 웹 캐쉬란 client가 요청하는 html, image, js, css등에 대해 첫 요청 시에 파일을 내려받아 특정 위치에 복사본을 저장(USING SPACE)하고, 이후 동일한 URL의 Resource요청은 다시 내려 받지 않고 내부에 저장한 파일을 사용하여 더 빠르게 서비스(SAVE TIME)하기 위한 것입니다. 서버를 통해 내려 받는 양이 적어지니 응답 시간이 감소하고 네트워크 트레픽이 감소되니 server와 client 모두가 win-win할 수 있는 최고의 tradeoff 인 셈입니다. 웹 캐쉬의 종류 웹 캐쉬의 종류는 어디에 적용하느냐에 따라 다음과 같이 나뉠 수 있으며 이중 중점적으로 볼 내용은 Bro.. 쿠키(Cookie)와 세션(Session) 출처: https://hahahoho5915.tistory.com/32 [넌 잘하고 있어] 쿠키와 세션의 차이점은 크게 상태 정보의 저장 위치이다. 쿠키는 '클라이언트(=로컬PC)'에 저장하고, 세션은 '서버' 에 저장한다. 세션은 서버에 저장되고, 서버자원을 사용하기 때문에 사용자가 많을 경우 소모되는 자원이 상당하다. 이러한 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 병행 사용하여, 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다 쿠키(Cookie) HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 .. Vuetify 설치 $ npm install --save -dev vuetify $ npm audit fix -npm install을 할 때 package의 취약점을 검사한다. 그리고 npm audit fix으로 취약점이 발견된 package를 자동으로 update해준다. https://lovemewithoutall.github.io/it/npm-audit-fix/ $ vue add vuetify - 예쁘게 꾸며주는 기능 뷰티파이에서 사용하는 기능 Promise 비동기처리 Vue.use(cookies) function init () { const savedToken = cookies.get('accessToken') if (savedToken) { return store.dispatch('loginByToken', savedToken) } else { return Promise.resolve() } } 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’ 자바스크립트에서 비동기 처리가 필요한 이유를 생각해보면, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문. 요청이 많아졌을 때 1개보내고 실행하고 기다리고.. dispatch / commit dispatch는 무조건 action으로 간다. commit은 내부에 있는 것으로 간다. 비동기처리. 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’ 자바스크립트에서 비동기 처리가 필요한 이유를 생각해보면, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문. 요청이 많아졌을 때 1개보내고 실행하고 기다리고의 연속. 오래걸림. Global Component 글로벌 컴포넌트 글로벌컴포넌트를 재활용하는 방법. 주의할 점: props 변수 명을 카멜 기법(aBow)으로 정의하면 html 태그에서 사용할 때는 케밥 기법(-)으로 선언해야 한다. initial'C'ount를 initial'-c'ounter로 표기한다. // 글로벌컴포넌트를 등록하는 작업 Vue.component(GlobalComponent.name, GlobalComponent) export default { components: { // 로컬컴포넌트를 등록하는 작업. 글로벌은 전역으로 쓸 수 있고 로컬은 여기서만 쓸 수 있다. 'local-component': LocalComponent }, v-model v-model을 통해 vue객체에 있는 정보와 html태그를 연결시킬 수 있다. Vue란? vue를 통해 개발할 때 장점: 싱글페이지. 페이지 전환 없이 개발 가능 띄어쓰기 콤마 등을 완전 철저히 해야함. -주석 뒤에 두칸 띄면 에러. -태그 닫을 때 두줄 띄면 에러. 이전 1 2 3 4 5 다음