프런트앤드는 백엔드로 API를 호출하고 전달받은 response를 가공해 화면에 그려주는 일을 하다보니 대량의 데이터를 가공해야할 일이 많아 배열 메소드를 활용할 때가 많습니다. 또, 네트워크 통신보다 화면이 그려지는 시간이 빠른 SPA 프로그래밍 특성상 페이지가 그려진 이후에 데이터를 전달받을 수 있습니다. 그렇게 된다면 이를 감지해 화면에 다시 리렌더링을 해주어야하는데요. 배열은 참조값인 특성상, 식별자가 주소값과 바인딩되어 있어 주소값이 가리키는 데이터가 바뀌어도 이를 감지할 수 없습니다. 이 때문에 배열 가공시에 새로운 배열이 리턴되는지 기존의 배열에서 변경이 일어나는 것인지 체크를 하며 설계를 해야하는데요. 이번에는 새로운 배열을 리턴하는 메서도와 아닌 메소드를 구분지어 보겠습니다. 아래는 MD..

회사 업무중에 객체로 이루어진 두 개의 배열에서 email이 다른 객체만 추출하여 새로운 배열로 만들어야하는 로직이 필요했습니다. const arr1 = [ { name: 'Alice', email: 'alice@example.com' }, { name: 'Bob', email: 'bob@example.com' }, { name: 'Charlie', email: 'charlie@example.com' } ]; const arr2 = [ { name: 'Alice', email: 'alice@example.com' }, { name: 'Bob', email: 'bobby@example.com' }, { name: 'Charlie', email: 'charlie@example.com' } ]; const r..

import axios from 'axios'; let isRefreshing = false; let pendingQueue = []; const processQueue = (error, token = null) => { pendingQueue.forEach(prom => { if (error) { prom.reject(error) } else { prom.resolve(token) } }) pendingQueue = [] } const axiosJwt = axios.create({ baseURL: process.env.NODE_ENV === 'development' ? process.env.APP_AXIOS_URL : config.BASE_URL; }) axiosJwt.interceptors.reque..

const API_END_POINT = API_END_POINT export const request = async (url, option = {}) => { try { const fullUrl = `${API_END_POINT}${url}` const response = await fetch(fullUrl, option) if (respone.ok) { const json = await response.json() return json } throw new Error('API 통신 실패') } catch (e) { alert(e.message); } } 참고: https://prgms.tistory.com/113

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