| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- Git clone
- window 정책변경
- legacy-peer
- 글자들여쓰기
- 그누보드반응형
- 의존성문제
- googleicon
- npm install
- MediaQuery
- 단어단위로떨어지기
- slickslider
- node설치
- react npm install
- node 오류
- 플러그인
- 동적객체
- owlcarousel
- git lab clone
- 웹아이콘
- vscode git clone
- 정적객체
- XEIcon
- fontawesome
- npm start
- maxwidth
- minwidth
- 아이콘사용법
- 이미지반응형
- npm install 문제
- package.json
- Today
- Total
목록분류 전체보기 (196)
어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ
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' }, { ..