본문 바로가기

전체 글370

[Nuxt.js & Vue.js] 스크롤 위치 유지하는 방법

개요 무한 스크롤 구현 후, 사용자가 목록을 쭉 내리다가 특정 목록 아이템에 상세 보기 페이지로 진입 후, '뒤로가기'를 했을 때, 사용자가 보던 스크롤 위치를 그대로 보여주기 위한 기능이 필요했다. 스크롤 위치를 보존하는 방법을 소개한다. 컴포넌트 구조 components +- List.vue 👈 destroyed 훅에서 store에 스크롤 위치(scrollY) 저장 +- ListItem.vue pages +- index.vue 👈 저장된 스크롤 위치로 mounted 훅에서 이동 pages/index.vue index.vue가 렌더링된 후에 스크롤 위치 이동 export default { name: 'something', mounted() { setTimeout(() => { window.scrollT.. 2022. 6. 1.

[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.