코딩 일기장
태그 목록
- 전체보기(158)
- React(6)
- CSS(6)
- 프로그래머스(5)
- 객체지향(4)
- programmers(4)
- 객체(4)
- Props(3)
- status(3)
- git(3)
- styled component(3)
- useRef(3)
- new Date(3)
- http(3)
- stopPropagation(2)
- json(2)
- CSR(2)
- SSR(2)
- 로그인유지(2)
- 최대공약수(2)
- preventDefault(2)
- Event(2)
- localstorage(2)
- Prettier(2)
- cors(2)
- State(2)
- Math.round(2)
- 정규표현식(2)
- setTimeout(2)
- Token(2)
- useEffect(2)
- usedispatch(2)
- axios(2)
- linux(2)
- Math.sqrt()(2)
- JOIN(2)
- html(2)
- JavaScript(2)
- client(2)
- useselector(2)
- redux(2)
- set(2)
- react ts redux(1)
- js typescript(1)
- object(1)
- 배열(1)
- component(1)
- etag(1)
- sudo(1)
- res(1)
- proto(1)
- promise(1)
- sql(1)
- express 공식문서(1)
- express session(1)
- tab(1)
- 깊은복사(1)
- Cashe(1)
- HTTP Headers(1)
- 자료구조(1)
- API(1)
- link(1)
- schema(1)
- visual studio(1)
- push(1)
- prepend()(1)
- 순열(1)
- 기본값(1)
- useHistory(1)
- SQL 키워드(1)
- JSON.stringify(1)
- stateCode(1)
- document.querySelector(1)
- catch(1)
- 소수 구하기(1)
- bind(1)
- cookies(1)
- Linux 명령어(1)
- If-None-Match(1)
- stack(1)
- queue(1)
- 애자일(1)
- three.js(1)
- REST(1)
- 쿠키(1)
- align items(1)
- justify content(1)
- mac(1)
- 이미지(1)
- purecomponent(1)
- git remote(1)
- React.lazy(1)
- fillRect(1)
- new Array()(1)
- oAuth(1)
- three Fiber(1)
- 유효성검사(1)
- nodemon(1)
- project(1)
- url(1)
- getBoundingClientRect(1)
- If-Modified-Since(1)
- chmod(1)
- jwt.verify(1)
- head(1)
- 면접(1)
- MVC(1)
- 소수점(1)
- Stable Diffusion(1)
- Dispatch(1)
- text(1)
- 소수 둘째 자리(1)
- 소수구하기(1)
- 명예의전당(1)
- 중복순열(1)
- react-draggable(1)
- CSS 변수 지정(1)
- css 상속(1)
- dotenv(1)
- 리랜더링(1)
- await(1)
- matrix(1)
- stylecomponent(1)
- storybook(1)
- useState(1)
- ajax(1)
- useRef 변화 감지(1)
- 조합(1)
- react-typescript-redux(1)
- 기사단원의 무기(1)
- 환경변수(1)
- Side Effect(1)
- margin:auto(1)
- img(1)
- alt(1)
- react redux(1)
- ×(1)
- 참조값(1)
- Spread(1)
- async(1)
- notifyOnNetworkStatusChange: true(1)
- ref(1)
- Math.ceil(1)
- class(1)
- includes()(1)
- store(1)
- Flex(1)
- export(1)
- &&(1)
- apollo cache(1)
- useParams(1)
- 고차함수(1)
- rel(1)
- graphql(1)
- html 전역속성(1)
- 위치(1)
- 푸드파이트대회(1)
- ESLint(1)
- tcp(1)
- salt(1)
- css 선택자(1)
- 밀림(1)
- unshift(1)
- pointer-events(1)
- Object.create(1)
- query(1)
- su(1)
- 에라토스테네스의 체(1)
- action(1)
- Hashing(1)
- 비트연산자(1)
- classList(1)
- 2022(1)
- UDP(1)
- cli(1)
- switch(1)
- https(1)
- JWT(1)
- protocol(1)
- 새로고침(1)
- scrollIntoViews()(1)
- mongodb(1)
- concat(1)
- 비밀번호 수정(1)
- 편차(1)
- docker(1)
- Last-Modified(1)
- require(1)
- Map 역순(1)
- 캐시(1)
- filter(1)
- href(1)
- fillStyle(1)
- default(1)
- jwt.sign(1)
- z-index(1)
- foreach(1)
- 비동기함수(1)
- CSS data(1)
- interface(1)
- Math.floor(1)
- window.requestAnimationFrame(1)
- 빌드(1)
- options(1)
- 객체 배열 중복 제거(1)
- event.target(1)
- 콘텐츠 협상(1)
- 재귀함수(1)
- padEnd()(1)
- 데이터베이스(1)
- StructuredClone(1)
- 10진법(1)
- Sort(1)
- variables 분기(1)
- rsi(1)
- 비트맵(1)
- setInterval(1)
- 가비지 컬렉션(1)
- DOM(1)
- body(1)
- mysql(1)
- 화살표함수(1)
- 길찾기(1)
- object.entries(1)
- useCallback(1)
- data-*(1)
- shift(1)
- 리렌더링(1)
- 벡터(1)
- 카카오맵(1)
- border(1)
- focus(1)
- http/네트워크(1)
- splice(1)
- 모달(1)
- content negotiation(1)
- Pop(1)
- Date.now(1)
- block(1)
- resizeObserver.observe(1)
- inline(1)
- onchange(1)
- transition(1)
- split()(1)
- 최소공배수(1)
- HTTP와 HTTPS 차이점(1)
- 단축키(1)
- 토큰(1)
- appendChild(1)
- params(1)
- provider(1)
- form(1)
- label(1)
- super(1)
- Fetch(1)
- react typescript(1)
- Flat(1)
- AI 이미지(1)
- draggable(1)
- pick or not(1)
- 리액트 초기화(1)
- IntersectionObserver(1)
- 인증/보안(1)
- render(1)
- 상속(1)
- toString(1)
- window.scrollY(1)
- lazy(1)
- 날씨 API(1)
- JSX(1)
- express(1)
- slice(1)
- ssg(1)
- next js(1)
- 변수(1)
- react cookie(1)
- 중복 제거(1)
- req(1)
- useNavigate(1)
- svg(1)
- 랜더링(1)
- object.keys(1)
- Map(1)
- border-box(1)
- Math.random(1)
- 분산(1)
- postman(1)
- mutation(1)
- Threshold(1)
- MongoDB CRUD(1)
- CreateElement(1)
- else(1)
- outsideClickOff(1)
- object.values(1)
- 진법(1)
- 표준편차(1)
- ISR(1)
- 운영체제(1)
- closure(1)
- utf(1)
- padStart()(1)
- modal(1)
- 3D(1)
- rcc(1)
- Suspense(1)
- resizeObserver.unobserve(1)
- Payload(1)
- 브랜치(1)
- session(1)
- 컴퓨터 공학 기초(1)
- 과일 장수(1)
- 문자열 뒤집기(1)
- 터미널(1)
- hover(1)
- scope(1)
- call(1)
- 스레드(1)
- sop(1)
- 비관계형 데이터베이스(1)
- canvas(1)
- 브라우저 초기화(1)
- Document.getElementById()(1)
- tag(1)
- 생략(1)
- 자정(1)
- 유클리드호제법(1)
전체보기 (158)React(6)CSS(6)프로그래머스(5)객체지향(4)programmers(4)객체(4)Props(3)status(3)git(3)styled component(3)useRef(3)new Date(3)http(3)stopPropagation(2)json(2)CSR(2)SSR(2)로그인유지(2)최대공약수(2)preventDefault(2)Event(2)localstorage(2)Prettier(2)cors(2)State(2)Math.round(2)정규표현식(2)setTimeout(2)Token(2)useEffect(2)usedispatch(2)axios(2)linux(2)Math.sqrt()(2)JOIN(2)html(2)JavaScript(2)client(2)useselector(2)redux(2)set(2)react ts redux(1)js typescript(1)object(1)배열(1)component(1)etag(1)sudo(1)res(1)proto(1)promise(1)sql(1)express 공식문서(1)express session(1)tab(1)깊은복사(1)Cashe(1)HTTP Headers(1)자료구조(1)API(1)link(1)schema(1)visual studio(1)push(1)prepend()(1)순열(1)기본값(1)useHistory(1)SQL 키워드(1)JSON.stringify(1)stateCode(1)document.querySelector(1)catch(1)소수 구하기(1)bind(1)cookies(1)Linux 명령어(1)If-None-Match(1)stack(1)queue(1)애자일(1)three.js(1)REST(1)쿠키(1)align items(1)justify content(1)mac(1)이미지(1)purecomponent(1)git remote(1)React.lazy(1)fillRect(1)new Array()(1)oAuth(1)three Fiber(1)유효성검사(1)nodemon(1)project(1)url(1)getBoundingClientRect(1)If-Modified-Since(1)chmod(1)jwt.verify(1)head(1)면접(1)MVC(1)소수점(1)Stable Diffusion(1)Dispatch(1)text(1)소수 둘째 자리(1)소수구하기(1)명예의전당(1)중복순열(1)react-draggable(1)CSS 변수 지정(1)css 상속(1)dotenv(1)리랜더링(1)await(1)matrix(1)stylecomponent(1)storybook(1)useState(1)ajax(1)useRef 변화 감지(1)조합(1)react-typescript-redux(1)기사단원의 무기(1)환경변수(1)Side Effect(1)margin:auto(1)img(1)alt(1)react redux(1)×(1)참조값(1)Spread(1)async(1)notifyOnNetworkStatusChange: true(1)ref(1)Math.ceil(1)class(1)includes()(1)store(1)Flex(1)export(1)&&(1)apollo cache(1)useParams(1)고차함수(1)rel(1)graphql(1)html 전역속성(1)위치(1)푸드파이트대회(1)ESLint(1)tcp(1)salt(1)css 선택자(1)밀림(1)unshift(1)pointer-events(1)Object.create(1)query(1)su(1)에라토스테네스의 체(1)action(1)Hashing(1)비트연산자(1)classList(1)2022(1)UDP(1)cli(1)switch(1)https(1)JWT(1)protocol(1)새로고침(1)scrollIntoViews()(1)mongodb(1)concat(1)비밀번호 수정(1)편차(1)docker(1)Last-Modified(1)require(1)Map 역순(1)캐시(1)filter(1)href(1)fillStyle(1)default(1)jwt.sign(1)z-index(1)foreach(1)비동기함수(1)CSS data(1)interface(1)Math.floor(1)window.requestAnimationFrame(1)빌드(1)options(1)객체 배열 중복 제거(1)event.target(1)콘텐츠 협상(1)재귀함수(1)padEnd()(1)데이터베이스(1)StructuredClone(1)10진법(1)Sort(1)variables 분기(1)rsi(1)비트맵(1)setInterval(1)가비지 컬렉션(1)DOM(1)body(1)mysql(1)화살표함수(1)길찾기(1)object.entries(1)useCallback(1)data-*(1)shift(1)리렌더링(1)벡터(1)카카오맵(1)border(1)focus(1)http/네트워크(1)splice(1)모달(1)content negotiation(1)Pop(1)Date.now(1)block(1)resizeObserver.observe(1)inline(1)onchange(1)transition(1)split()(1)최소공배수(1)HTTP와 HTTPS 차이점(1)단축키(1)토큰(1)appendChild(1)params(1)provider(1)form(1)label(1)super(1)Fetch(1)react typescript(1)Flat(1)AI 이미지(1)draggable(1)pick or not(1)리액트 초기화(1)IntersectionObserver(1)인증/보안(1)render(1)상속(1)toString(1)window.scrollY(1)lazy(1)날씨 API(1)JSX(1)express(1)slice(1)ssg(1)next js(1)변수(1)react cookie(1)중복 제거(1)req(1)useNavigate(1)svg(1)랜더링(1)object.keys(1)Map(1)border-box(1)Math.random(1)분산(1)postman(1)mutation(1)Threshold(1)MongoDB CRUD(1)CreateElement(1)else(1)outsideClickOff(1)object.values(1)진법(1)표준편차(1)ISR(1)운영체제(1)closure(1)utf(1)padStart()(1)modal(1)3D(1)rcc(1)Suspense(1)resizeObserver.unobserve(1)Payload(1)브랜치(1)session(1)컴퓨터 공학 기초(1)과일 장수(1)문자열 뒤집기(1)터미널(1)hover(1)scope(1)call(1)스레드(1)sop(1)비관계형 데이터베이스(1)canvas(1)브라우저 초기화(1)Document.getElementById()(1)tag(1)생략(1)자정(1)유클리드호제법(1)
버튼 클릭 후 모달 바깥 쪽은 클릭하여 모달 꺼지게 하기
모달 띄우는 버튼을 클릭 후 그 모달 주위를 클릭하였을 시 모달이 꺼지게 함 일단 state에 object 형식의 dummyData를 mapping하여 showMenu를 넣어줌 버튼 클릭 시 index가 일치하는 것은 반대 showMenu를 넣어줌으로써 해당 index 정보를 가지고 index가 켜지도록 일단 설정. useRef를 이용하여 해당 모달을 추적 모달이 켜져있고 모달이 현제 내가 클릭한 마우스 범위를 포함하지 않는다면 listItems를 전부 다시 false로 변경하여 모달을 끔.
2023년 5월 4일
·
0개의 댓글·
0