본문 바로가기

분류 전체보기369

[Vue.js] v-html을 사용하지 마세요.

개요 특히, 사용자가 작성해서 제공하는 콘텐츠(ex. 커뮤니티 게시물)에는 사용자가 작성한 글을 그대로 보여주는 목적으로 v-html을 사용하면 안 됩니다. 사용자가 html 작업으로, 게시글을 읽는 사용자에게 공격을 할 수 있기 때문이죠..;; 사용자를 믿으면 안 됩니다. 그래서, v-html 대신, v-text를 주로 사용하고 있습니다. 문제점 어떻게 하면, 개행이 들어간 Javascript 스트링 데이터를 화면에 개행이 표시되게 보여줄 수 있을까. 사용자가 작성한 글에 개행이 있다면, 작성자 의도대로 화면에 개행까지 들어간 양식 그대로를 보여줘야 합니다. 보통 사용자가 작성한 글을 그대로 서버에서 받아오면, 다음처럼 되어 있습니다. "\njohn\n\n2022년ㄹㄹ믿ㅈ랴ㅓㅁ지댜러ㅣㅁ;쟈더리;먀젇리;.. 2022. 5. 27.

[vue + 무한 스크롤] 무한 스크롤 구현

사용 기술 Javascript Intersection Observer(iob) iob는 사용자가 감시하고자 하는 페이지의 요소가 브라우저와 교차되는 정도를 관찰하고, 설정 비율 이상의 교차가 일어났을 때 실행되야 하는 콜백함수를 등록할 수 있는 객체이다. 사용법 const iob = new IntersectionObserver((entries) => { if (entries.isIntersecting) { // 실행 로직 } }, { //options }); 무한스크롤을 구현하면서 고려해야할 사항 1. 마운트될 때 한 번 실행해버리는 경우가 있음. 방법1. entries.isIntersecting === true 인 경우에 실행로직을 작성하면 된다. 2. 다시 위로 올라가면, 중복되서 페이지네이션을 요청.. 2022. 5. 20.

[기본 selectbox] 화살표 이미지 변경하기

화살표 이미지 변경하는 방법 html css select { -webkit-appearance: none; /* for chrome */ -moz-appearance: none; /*for firefox*/ appearance: none; background: url(화살표로 사용하고 싶은 이미지 url) no-repeat 95% 50%; } select::-ms-expand { display: none; } // IE 10, 11 네이티브 화살표 숨기기 2022. 5. 19.

[nuxtjs] $auth auth._token_expiration.local

개요 auth와 nuxt/axios를 사용 중입니다. auth에 토큰 올려두고, axios로 요청을 보내는데, 유효기간이 만료되면, 토큰은 남아있고, auth._token_expiration.local에 유효시간이 만료되면, auth._token_expiration.local가 false가 되고, 로컬 스토리지에 토큰은 남아 있는 일이 발생했습니다. auth._token_expiration.local가 false처리가 된 경우, 브라우저에서 일어나는 일은.. - 로그아웃 됨. $auth.loggedIn = false - 로컬스토리지에 토큰이 남아 있음. 문제 여기서, 문제는 로컬스토리지에 토큰이 사라지지 않고 남아 있다는 겁니다. 그래서, axios에서 이 남아 있는 토큰으로 요청을 보내다보니, 아래와 .. 2022. 5. 18.

[nuxtjs + auth] 로그아웃 리다이렉트 페이지 이동 방법

nuxt auth를 사용하다가, 회원 탈퇴를 구현할 일이 있었다. 탈퇴가 되면, 탈퇴 확인 페이지로 넘어가야 한다. 그런데, 계속 '/'로 라우팅되는 것이었다. this.$auth.logout();를 할 때 그랬다. 로그아웃 하면, '/'로 돌아가는 건 좋은데, 회원 탈퇴 페이지에서만큼은 '/탈퇴 완료' 페이지가 보여야 하는 요구사항이었다. 그래서 첫 번째로 알아보았다. -> 스택오버플로우 plugins/auth.js는 nuxt.config.js에서 plugins에 등록하는게 아니라, auth.plugins에 등록해야 한다. nuxt-auth 문서 링크 되었다. 2022. 5. 17.

[nuxtjs + service worker] 구현 방법

nuxt/pwa: https://pwa.nuxtjs.org/ OneSignal Module: https://github.com/nuxt-community/onesignal-module nuxt/pwa 기능 오프라인 캐싱에 대해서 service worker를 등록하게 해준다. manifest.json 파일을 자동으로 생성해 준다. 검색 엔진 최적화에 친근하게 meta data를 추가할 수 있다. 앱 아이콘을 다른 크기로 자동으로 만들어 준다. OneSignal을 사용해서 푸시 알림을 사용 가능 OneSignal Module 웹 사이트와 모바일 애플리케이션을 위한 notification service를 푸시하는데 사용된다. 2022. 5. 16.

[HTML]selectbox placeholder

selectbox는 placeholder 옵션을 지원하지 않는다. selectbox의 options 태그의 속성으로 다음을 제공하고 있다. disabled - 클릭 안 됨 selected - 선택됨으로 값이 노출됨. hidden - 셀렉트 박스 옵션에 노출되지 않음. 선택 Youtube Naver Naver 2022. 5. 14.

[Javascript] 이미지 파일 업로드 구현

결과 참고 개발자를 위한 웹 기술 > Web API > File > 웹 어플리케이션에서 파일 사용하기 개발자를 위한 기술 > Web API > Blob 기능 요구사항 프로필 사진 업로드 기능 이미지 파일을 업로드 후, 업로드한 이미지 미리보기 구현 방법 결정하기 방법1. javascript의 FileReader 객체 FileReader.readAsDataURL() - 엄청 긴, 스트링을 URL로 반환하기 때문에, 속도가 느리다. 방법2. URL.createObjectURL(object) 주어진 객체를 가리키는 URL을 DOMString으로 반환한다. service worker에서 사용 안 됨. 파라미터 object는 File, Blob, MediaSource 객체를 넣을 수 있음 input file up.. 2022. 5. 13.

[Vuejs] 엔터로 서브밋 보내기

2022. 5. 11.

Service worker란? 사용법

참고: 웹 앱에 푸시 알림 추가 service worker Javascript assets이다. web server와 web browser 사이에서 프록시처럼 동작한다. service worker의 목적은 offline access 제공을 위한 신뢰성을 높이기 위함이다. 앱과 유사하게 동작시키게 하기 위해서 점진적으로 웹사이트를 향상시킨다. 사용자 구독 브라우저 알림 동의 받기 app/index.html 에서 호출하는 javascript 파일( script/main.js )에 서비스 워커를 등록하는 스크립트를 작성합니다. script/main.js if ('serviceworker' in navigator && 'PushManager' in window) { console.log('Service Work.. 2022. 5. 6.

티스토리툴바