부모 엘리먼트로 올라가면서 셀렉터를 만족하는 가장 가까운 요소를 찾기
·
JS소스모듈
const getClosestElement = (element, selector) => { let evaluate = false; // test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다. // 앞에 . 이 있는가? 라고 묻고 있습니다. if (/^\./.test(selector)) { evaluate = element.classList.contains(selector); } else { evaluate = element.tagName === selector.toUpperCase(); } if (evaluate) { return element; } return getClosestElement(element.parentElement, s..
리스트안에서 엘리먼트의 인덱스 번호 찾기
·
JS소스모듈
const findIndexListElement = (element) => { const listItems = element.parentElement.querySelectorAll('li'); //findIndex : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환 const currentIndex = Array.prototype.slice.call(listItems).findIndex(listItem => listItem === element); return currentIndex; } export default findIndexListElement; 출처: https://github.com/paullabkorea/theJungleFinalCodingTestFrontEnd
자신의 모든 자식 엘리먼트 제거하기
·
JS소스모듈
export default (parent) => { while (parent.firstChild) { //parent의 첫번째 자식을 반환합니다. parent.removeChild(parent.firstChild); // removeChild 자식 노드를 제거합니다. } } 출처: https://github.com/paullabkorea/theJungleFinalCodingTestFrontEnd
jwt 토큰 만료체크
·
JS소스모듈
export const authorizationCheck = () => { let isValid = store.getters.getIsSignin // 로그인 연동 이후 체크 예정 if (isValid) { // 로그인 상태인 경우 토큰이 있는지 확인 const jToken = store.getters.getJwt const aToken = store.getters.getAccess_token const rToken = store.getters.getRefresh_token if (jToken && rToken && aToken) { const decodeObj = jToken .split('.')[1] .replace('-', '+') .replace('_', '/') const exp = JSON.p..
바닐라 자바스크립트로 SPA 구현하기
·
카테고리 없음
핵심은 html의 태그에 코드를 넣고 빼는 것입니다. 뒤로가기를 위해 기록을 남깁니다. 구현 vallina-spa-test와 같은 폴더를 생성합니다(이름은 마음대로 선택할 수 있습니다) 아래와 같은 폴더구조를 만듭니다. index.html에 아래의 코드를 입력합니다. script 태그에 type="module"을 꼭 넣어줍니다. index.js에 아래와 같이 코드를 입력합니다. import App from './app.js'; const config = { el: '#root' } new App({ el: '#root' }).setup() app.js 파일을 만들고 아래와 같이 입력합니다. import { About, Home } from './pages/index.js'; import { Router ..
refreshtoken
·
카테고리 없음
let isRefreshing = false; let failedQueue = []; const processQueue = (error, token = null) => { failedQueue.forEach(prom => { if (error) { prom.reject(error) } else { prom.resolve(token) } }) failedQueue = []; } axios.interceptors.response.use(function (response) { return response }, function (error) { const originalRequest = error.config; if (error.response.status === 401 && !originalRequest._r..
[TIL] ESlint + Prettier 설정하기
·
카테고리 없음
보호되어 있는 글입니다.
vue style guide
·
Vue
참고: https://v2.vuejs.org/v2/style-guide/?redirect=true#Rule-Categories 우선순위 높음(에러 예방) 컴포넌트 이름은 두단어 이상으로 정의한다. 예시: todo → todo-item, Todo → TodoItem props를 정의할 때는 최대한 디테일하게 적어준다. v-for과 key는 세트로 써주어야한다. v-if와 v-for을 같이 사용할 수는 없다. 컴포넌트의 style태그에 scoped를 넣어주어야 한다. 외부에서 접근하지 않는 내장 함수일 경우 $를 접두사로 붙여야한다. 우선순위 중간(개선된 코드) 컴포넌트의 파일이름은 ParscalCase를 가장 잘 사용하기는 하지만 대소문자를 구분하지 않는 파일 시스템에서 문제를 일이킬 수 있어 kebab-..