틈

Next.js-Typescript 기반에서 반응형 작업을 하고 있는데, 퍼블리셔로서 가장 어려운 것이window.innerWidth 값을 컴포넌트마다 설정해줘야 하는 것이다.처음에는 한땀한땀 해보고, 태그에 따로 [data-width] 도 넣어봤지만,mount 속도가 느린 화면에서는 무용지물... useEffect로 해당 값들이 받아와지지 않았다.도대체... mount가 끝나는 지점은 어떻게 잡아야 하지!!!!!의문이 생길 때쯤 신박한 방법을 찾았다. https://velog.io/@sasha1107/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B0%98%EC%9D%91%ED%98%95-%ED%99%94%EB%A9%B4-resize-%EC%9D%B4%EB%B2%A4%ED%8A%B8 리액트 ..

warning이라 관계 없긴 하지만,큰 사이트도 아니고…작은 사이즈의 사이트 terminal에 계속 뜨는 warning이신경 쓰여 해결해 보았다.Module Warning (from ./node_modules/sass-loader/dist/cjs.js):Deprecation Warning on line 128, column 2 of file:///C:/Users/Lee/Desktop/%EC%8B%A0%EB%AA%85%ED%99%94/project/pass/src/assets/css/default/mixin.scss:128:2:Sass's behavior for declarations that appear after nestedrules will be changing to match the behavior..

예전에는 Github에서 1개의 레파지토리를 생성해서 홈페이지를 올렸는데,최근에 확인해보니 각 레파지토리마다 홈페이지를 올릴 수 있었다. 1. public 형태의 레파지토리에서 2. settings를 클릭한다.  3. 왼쪽 메뉴에서 Pages를 클릭한다. 4. Branch를 설정한다. 5. Branch 선택에서 일반적인 html화면일 경우, 기본 root를 설정해주면 되지만, vue.js 기반일 경우에는 '/docs'를 설정해준다. 6. Actions 탭에서 deploy가 돌아가고 있다. 7.  deploy가 끝나면 다시 Settings 로 돌아가  pages > visit site를 클릭한다. 8. 연결된 사이트에서 화면이 잘 나오는지 확인한다.   ** github 홈페이지를 올리기 위한 vue.js..

대형 사이트에서 작업할 때, 여러가지 변수가 많은데,그 중에 'DOM 간 간격을 어떻게 처리할 것인가?' 가 최근 이슈가 되어 정리해본다. 지금 작업하는 화면은 마크업 변경을 최소화해야 하는 프로젝트이다.또한 잘못된 코드도 안고 가야 하는 문제가 있어, CSS로 80% 이상 커버해야 한다.이미 12년에 육박하는 2500페이지의 레거시.이전에는 있는 줄도 몰랐던 :has 선택자, [class*=클래스] 같은 속성 선택자를 비롯하여!important가 난무하는 무서운 프로젝트이다. 작은 사이트의 경우 DOM과 DOM이 만날 때여백은 크게 문제가 되지 않는다.그냥 적당히 처리해도 된다. 그런데 10페이지 이상, 100 페이지 이상, 1000페이지 이상의 화면은 어떨까?규칙이 잘 적립되고, 그 규칙에 맞추어 작..

fragment는 dom을 담는 그릇이다.위와 같은 html이 있을 때, ul.list 안쪽에 li를 추가하려면const docFragment = document.createDocumentFragment();const arr = ['a','b','c'];for(let i = 0;i  이렇게 추가하면 a b c위와 같은 dom을 얻을 수 있다.

js에서 class를 줬다 뺐다 할 때 사용하는 문법. classList 1. 클래스 넣어주기 선택자.classList.add('class') 2. 클래스 빼주기 선택자.classList.remove('class') 3. toggle 선택자.classList.toggle('class') 선택자.classList.toggle('class', 조건값) 4. 클래스를 가지고 있는지 확인하기 선택자.classList.contains('class') - true, false 반환 classList : className className은 class를 나열해주는 역할 classList는 객체로 내보내준다.