어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

const encoded = new URLSearchParams(window.location.search).get("data");const { state, result, message, logo } = JSON.parse(Base64.decode(decodeURIComponent(encoded))); ** const encoded = new URLSearchParams(window.location.search).get("data");👩‍💻 window.location.search => 현재 URL의 ? 뒤에 붙은 쿼리스트링 전체ex) https://example.com/callback?data=test여기서의 값은 ?data=test 가 됨 👩‍💻 .get("data")=> 가져온 값에서 dat..

[FE] MST란?🔖 MST = MobX State Tree👉 React 앱에서 “전역 상태(공용 데이터)”를 관리하기 위한 도구 앱 전체에서 쓰는 데이터를규칙(타입) 있게안전하게예측 가능하게 관리 🔖 사용 이유useState는 컴포넌트에dazzle-bini.tistory.com const Company = types .model({ logoBase64: types.maybe(types.string), ✔️maybe가 무엇인가 }) .actions(self => ({ setLogoBase64(value) { self.logoBase64 = value; }})); ❓✔️maybe가 무엇인가 👩‍💻 logoBase64: types.maybe(types.string),..

🔖 MST = MobX State Tree👉 React 앱에서 “전역 상태(공용 데이터)”를 관리하기 위한 도구 앱 전체에서 쓰는 데이터를규칙(타입) 있게안전하게예측 가능하게 관리 🔖 사용 이유useState는 컴포넌트에서만 사용하는 것이 좋고 페이지 전체(전역) 내에서 사용하려면 MST를 사용(다른 것도 있으나 MST를 많이 쓴다고 함 => 현재 프로젝트에서도 MST 사용하고 있음) ex) 회사 로고, 로그인 정보, 사용자 정보여러 페이지에서 공통 사용새로고침 전까지 유지되어야 함누가 언제 바꿨는지 추적해야 하는 데이터👉 이런 건 useState로 관리하기가 힘들기 때문에. 🔖 특징 1. 타입이 있다=> 버그를 막아줌logoBase64: types.string 2. 마음대로 수정 불가 (Act..

🤔 처음에는 로그인 페이지만 분리해서 이렇게 적음useEffect(() => { const isLogin = location.pathname === '/login'; if(isLogin){ document.body.classList.add('login_page'); }}, [location.pathname]); 🤔 근데 점점 분기처리할 게 생겨서 일단 저 방식으로 추가하고 리팩토링을 어떻게 해야할지 생각해 봄useEffect(() => { const isLogin = location.pathname === '/login'; const isPasswordFind = location.pathname === '/PasswdReset'; const ..

const handleTouchStart = (e) => { const touch = e.touches[0]; e.target.startX = touch.clientX; e.target.startY = touch.clientY;};const handleTouchEnd = (e, callback) => { const touch = e.changedTouches[0]; const dx = Math.abs(touch.clientX - e.target.startX); const dy = Math.abs(touch.clientY - e.target.startY); // 터치 이동이 거의 없으면 클릭 처리 if (dx handleTouchEnd(e, 드래그가 아닐 시 실행할 함수내용)} > ..

기반: SortableJS (vanilla JS)사용 대상: React역할: 드래그 & 드롭 정렬 기능을 React 방식으로 제공npm install react-sortablejs sortablejs 🔖 기본 작동 코드 (테스트 완료)import { useState, useEffect } from 'react';import { ReactSortable } from 'react-sortablejs';export default function TestSortable() { const [list, setList] = useState([ { id: '1', name: '항목 1' }, { id: '2', name: '항목 2' }, { id: '3', name: '항목 3' }, { ..