프론트/javascript 3

클로저 패턴이란 무엇인가

들어가며 의도치 않게 너무 어그로 끄는 제목이 되었는데, 별 생각 없이 정한 제목입니다... 이 글은 그저 끄적이는 글이기 때문에 엄청난 의식의 흐름일 수 있습니다 갑자기 뿅 하고 끝날 수도 있으니, 이 점 양해 부탁드립니다 ㅎ;; 배경 최근 react 를 공부하면서, 클로저 패턴을 자주 쓰게 되었음 (예를 들어, click과 같은 이벤트 핸들러 함수에 특정 값을 넘기면서 이벤트도 함께 넘기고 싶을 때 이 패턴을 활용하곤 하더라) 예시 export default function App() { const togglePopover = (index) => (e) => { e.preventDefault(); e.stopPropagation(); setOpen(openedIndex === index ? null ..

IDE 켜지면 저절로 node 버전 셋팅되도록 하기

개요 IDE 를 킬 때마다 매번 node 버전을 셋팅하는 것이 킹받았다 사전 작업 프로젝트의 node version 을 .nvmrc 로 추가해 놓는다 // .nvmrc 12.16.3 이것은 각 개발자가 로컬에 갖고 있는 것이 아닌, 프로젝트 디렉토리에 넣고, git 에 올리는 편이 나을 것 같다 (모든 개발자의 노드 버전을 맞추기 위해) zsh 설정 터미널에 vi ~/.zshrc 입력하여 zshrc 파일을 엶 최하단에 아래 내용을 넣고 > esc > :wq 하여 저장 autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path"..

SSR 에서 상태 오염을 방지하자

개요 최근 개발 시 상태 오염이 발생한 것이 잦았다 따라서 겪었던 이슈와 함께 어떻게 해결했었는지 정리해 보고자 한다 발단 상태 오염으로 인하여 토큰이 잘못 들어간 이슈가 발생 백엔드에서는 해당 토큰으로 인증을 시키기 때문에, 사용자가 교체되어 데이터가 인입된 증상이 발생하게 됨 원인 프론트의 서버에서 상태를 싱글톤 상태로 만들어서, 하나의 전역 상태를 공유하게 됨 싱글톤 상태가 되었던 이유 js 에서는 모듈이 싱글톤 형태로 이루어짐 (import, require 등) export 해 준 객체를 그저 참조를 해서 사용하고 있었음 vuex 에서 module 을 등록할 때 참조한 모듈의 주소만 넣어 등록하기 때문에, 매 요청마다 모듈의 state 를 만드는 것이 아닌 참조만 하고 있었음 해결 방안 modul..