index.html index.js import App from './app.js' new App({ el: '#App' }).setup() app.js export default class App { constructor(props) { this.props = props this.bindEvents() } setup() { // 클래스 컴포넌트 인스턴스 생성 // 리스트 조회와 같은 비동기 통신 // 원래는 render을 호출하지만 인트로 페이지 표시와 같은 처리가 필요할 때 init 호출 } bindEvents() { // 각 클래스 컴포넌트에서 발생하는 이벤트를 받아서 처리하는 함수(on) // addEventListener 처리 } init() { // 서비스 첫 시작에서 인트로 표시와 같은 동작..

/** * 로컬 스토리지에서 조회합니다. */ loadStorage() { // 키(item-title)를 가지고 호출합니다. const data = localStorage.getItem('item-title'); try { // 호출된 값은 문자열로 되어있기 때문에 JSON.parse를 해줍니다. const playList = JSON.parse(data); } catch (e) { // 스토리지는 모바일에서 용량 문제 등으로 에러가 발생할 수 있기 때문에 // try - catch 처리를 잘해줍니다. console.error(e); } } /** * 로컬 스토리지에 저장합니다. */ saveStorage() { try { // JSON.stringify 를 통해 문자열로 저장해줍니다. localSto..

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

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

export default (parent) => { while (parent.firstChild) { //parent의 첫번째 자식을 반환합니다. parent.removeChild(parent.firstChild); // removeChild 자식 노드를 제거합니다. } } 출처: https://github.com/paullabkorea/theJungleFinalCodingTestFrontEnd

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

핵심은 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 ..

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