[21/09/04] 고양이 사진첩

• Component

class Component {
    state;
    constructor(state){
        this.state = state;
    }
    shouldComponentUpdate(nextState){
        return Object.keys(this.state).some(key=>JSON.stringify(this.state[key]) !== JSON.stringify(nextState[key]))
    }
    setState(state){
        if(this.shouldComponentUpdate(state)){
            this.state = state;
            this.render();
        }
        this.state = state;
    }    
}
export default Component

• fetcher

const fetcher = async (API_KEY) => {
    const data = await fetch(API_KEY);
    if(data.ok){
         return await data.json();
    }else{
        throw new Error('데이터를 응답받지 못하였습니다.')
    }
}

// its good
export const getNodes = (id) => id === "0" ? fetcher(`https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev`): fetcher(`https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev/${id}`)
export default fetcher 

export const createCache = () =>{
    const cache = {}
    return {
        getCacheById:(id)=>{            
            return cache[id] ?? cache[id]
        },
        setCacheById:(id,data)=>{
            cache[id] = data;
        }
    }
}

• Modal

class Modal extends Component{
    $app;
    $target;
    constructor({$app,state,onModalClick,onModalEsc}){
        super(state);
        this.$app = $app;
        this.$clickHandler=onModalClick;
        this.$keydownHandler=onModalEsc;
        this.init();
    }

• rendering

   this.$target.innerHTML =  
         `  
            ${this.state.directory.length === 1 ? '' : `<div class="Node" data-type="PREV"><img src="./assets/prev.png"></div>`}
            ${this.state.nodes.map(({type,name,id,filePath}) => `
                <div class="Node" data-type=${type} data-id=${id} data-filePath=${filePath}> 
                    <img src=${IMAGE_SRC_BY_TYPE[type]}></img>
                    <div>${name}</div>
                </div>
            
            `).join('')}
        `