FE/Vanilla (11) 썸네일형 리스트형 grid-template 이 뭔가 이상할 때 display: grid 및 grid-template-column/rows 를 쓴다는 것은 분명 반응형을 고려했을 것이다. 당연히 px 을 넣지는 않았겠지? 그리고 gap 혹은 grid-gap 속성을 추가했을 것이다 % 를 넣었다면 이 % 는 부모의 영역을 기준으로 하기 때문에 %로 하게 되면 gap 영역은 무시된다. 따라서 꼭 fr 을 쓸 수 있도록 하자. 참고로 fr 은 그 뭔 영어 용어 기억이 안나는데 1fr 2fr 3fr 뭐 이런식으로 있으면 첫번째 영역에 1 / (1 + 2 + 3) 두번째 영역에 2 / (1 + 2 + 3) 세번째 영역에 3 / (1 + 2 + 3) 이렇게 분배해주는 fraction 이다 . fr 이친구는 똘똘하게 gap 까지 고려를 해준다 신기하지 ? map, forEach 에서 async/await 사용하기 충격,공포,실화) map, forEach 등 순회처리 메소드에서는 async await 을 사용하지 못합니다. ㅠㅠ const asdf = someArray.map(async () => {return await someFunction()}); 이거 못 씀! const asdf = someArray.map(() => {return someFunction()}); const qwer = await Promise.allSettled(asdf); 이렇게 써야함 ㅠㅠㅠ ㅠ 자바스크립트에서 네이티브 웹뷰가 닫혔을 때 감지 프로덕트에서 다음과 같은 이슈가 있었다. --- Webview Stack --- B Webview A Webview ----------------------- A, B Webview 는 별개의 영역 (크롬으로 치면 다른 탭) 이므로, 최상단 B Webview 에서 행동한 결과에 대해 A Webview 가 인지할 수 없었다. 전에는 이런 상황에서 WebSocket 으로 시도를 하거나, 네이티브 개발자분들께 화이트리스트를 추가하는 방식을 말씀을 드렸었다. (네이티브에서는 웹뷰가 닫히는 것에 대해 감지가 가능) 이번 경우는 B Webview 에서의 행동은 POST 였고, 좋은 API 를 알게되어 적용하게 되었다. window.addEventListener('visibilitychange', () => { wi.. 배열을 const 로 선언했을 때, 왜 push와 pop이 가능할까 (state 배열) 갑자기 궁금해짐 조만간 알아보도록 하자 대체 언제 옴? 알아보러 왔다. 우선 const 가 무엇인지에 대해 알아보자 const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 간단한 답변은 push 와 pop 행위가 재할당/재선언이 아니기 때문이다. (not re-assigning or re-declaring) [ https://stackoverflow.com/questions/23436437/why-can-i-change-a-constant-object-in-javascript ] const a = []; a.push('hihi');// works const b = []; b = ['hihi'];// error const b = ['hihi'];// .. webstorm 전체검색이 되지 않는 현상 왼쪽에 보이다시피 파일 디렉토리 배경색이 노랗게 되고 전체검색 기능, esLint, highLighting 이 고장나는 이슈가 있었다 나도 고장났다 개빡치낟 .idea 파일 삭제 webStorm 재설치 로컬 삭제 후 remote 재설치 원인은 .idea 내의 파일을 푸시한 것 . . 아무튼 해결방법은 어이없었다 전에 thymeleaf 를 사용하던 프로젝트가 있었어서 intelij 로 실행했다가 웹스톰을 다시 켜니까 원래대로 돌아왔다 ? styled-components keyframes import styled, { keyframes } from 'styled-components'; const indeterminateAnimation = keyframes` from { transform: translateX(0) scaleX(0.5); } to { transform: translateX(400%) scaleX(0.5); } `; const Progressor = styled.div` position: absolute; top: 0; height: 4px; width: 30%; background-color: yellow animation: ${indeterminateAnimation} 1s infinite linear; transform-origin: 0 50%; `; withconfi.. addEventListener scroll 에서 변화량 확인하기 스크롤을 조금만 내렸을 때 특정 위치로 스크롤 되는 코드를 구현해야 해서 다음과 같이 만들었다. window.addEventlistener('scroll', () => { if (window.scrollY > 100 && window.scrollY { ... useEffect(() => { smo.. swiper 에서 뭐 아무튼 width 나 margin이 애매할때 slidesPerView = 'auto' 이전 1 2 다음
