틈

예전에는 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는 객체로 내보내준다.

new Set() array 에서 중복 제거할 때 사용 사용방법 const arr = [1,2,3,4,5,6,1,2]; const set = new Set(arr); console.log(set); // {1,2,3,4,5,6} console.log([...set]) // [1,2,3,4,5,6] 중복을 해결하고 싶은 arr 변수를 인자를 넣고 출력하면 위와 같이 set 형태가 출력되는데, 이를 전개연산자를 이용해 다시 출력하면, 중복이 제거된 객체를 얻을 수 있다. new Set(객체).add(1) : 객체에 1 추가 new Set(객체).delete(1) : 객체에 1 삭제 new Set(객체).has(1) : 객체에 1이 있는지 없는지 체크 new Set(객체).size() : length 와 동일

가끔 다른 분들이 작업하던 js에서 try catch 구문을 확인하곤 했는데, 사용되는 의미를 몰라 '개발자가 사용하는 구문인가 보다.' 라고 생각하곤 했습니다. js에서는 구문 오류가 나면 바로 오류를 뱉어내고 프로그램이 정지하는데, 대형 프로그램을 작성할 때, 프로그램이 정지하지 않고, 오류를 받는 방법이라고 해서 앞으로 많이 사용할 것 같습니다. try { console.log("프로그램 실행") } catch(e) { console.log("에러 발생") console.log(e.name); console.log(e.message); } finally {} try catch 구문에서 finally 구문은 거의 본적이 없는데 이를 사용하는 이유는 강제실행이 필요할 경우입니다. try 구문 내 ret..