일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- JS console
- 제네릭
- 폰트적용하기
- TSDoc
- React Native
- 2022
- const 단언문
- 리액트
- utilty type
- javascript
- 타입스크립트
- 티스토리꾸미기
- 개발콘텐츠
- 타입좁히기
- CSS
- typescript
- 누구나 자료구조와 알고리즘
- 반복줄이기
- 레이아웃쪼개기
- Chart.js
- returnType
- vue.js
- 커스텀
- react
- 성능최적화
- click and drag
- reactjs
- 공통컴포넌트
- NonNullable
- React.js
- Today
- Total
목록Development (382)
몽땅뚝딱 개발자
flex는 가로로 정렬하는 기준을 정하는 속성이라면 grid는 가로와 세로의 규칙을 모두 정할 수 있다. 위의 구성에서 상단의 2줄은 3x2로 구성되어있으며 엘리먼트가 총 6개이다. CSS는 다음과 같다. .box-wrap { display: grid; /* 컬럼의 개수와 너비를 지정한다. 나는 3개로 설정했다. */ /* 1fr 1fr 1fr 등으로 지정 할 수도 있다. */ grid-template-columns: 200px 200px 200px; /* 줄의 개수와 너비를 지정한다. 나는 2개로 설정했다. */ grid-template-rows: 200px 200px; } 그리고 하단의 2줄은 4칸을 차지하는 엘리먼트 1개와 각각 1칸씩 차지하는 엘리먼트 2개로 엘리먼트가 총 3개이다. 이 경우 CS..
◽ queryCommandSupported() 해당 브라우저에서 command 지원여부를 알 수 있는 API이다. but,, 더 이상 사용되지 않는다. (Deprecated) isSupported = document.queryCommandSupported(command); ◽ 예제 if (document.queryCommandSupported("cut")) { console.log("지원함"); } else { console.log("지원안함"); } 출처 Document.queryCommandSupported() - Web APIs | MDN The Document.queryCommandSupported() method reports whether or not the specified editor co..
◽ 설치하기 npm i vue-debounce ◽ debounce란? 연이어 함수가 호출될 때 가장 마지막이나 가장 처음의 1회만 이벤트가 발생하도록 하는 기술이다. 예를 들어, 검색어를 입력할 때 하나의 모음/자음을 입력할 때 마다 API를 호출하는 것은 비효율적이고 과도한 비용을 들게 한다. 따라서 사용자가 타이핑을 마쳤다고 생각하는 지점에서 호출해야한다. 기존에 발생한 이벤트(=사용자가 검색어를 입력할 때 발생한 이벤트)를 하나로 묶은 상태에서 가장 마지막으로 호출된 시점에서 API를 호출하면 되는 것이다. ◽ 예제 📄 main.js import vueDebounce from "vue-debounce"; Vue.use(vueDebounce); 📄 test.vue - HTML 영역 📄 test.vue..
엘리먼트들을 정렬하는 방식은 float, flex, grid 등이 있다. 내가 배웠던 방식은 float으로 맞추던 방식(only one,,)이었는데 벌써 '옛것'이 되어버렸다고 한다. 실제로 flex를 사용해보니 float을 사용하는 것보다 코드의 양도 적고 한번에 해결할 수 있다는 느낌이다. 훨씬 간단한 flex를 알아보자... ◽ Flex의 속성들 각 박스들은 이고 박스를 둘러싼 엘리먼트는 으로 구성했다. 박스를 둘러싼 엘리먼트인 box-wrap에 display: flex;를 주면 아래와 같이 개발자도구에서 바로 flex와 관련된 속성들을 확인할 수 있기때문에 더욱 쉽게 적용할 수 있다. 1) justify-content - center - flex-start - flex-end - space-bet..
◽ Nprogress란? 로딩표시를 위한 라이브러리이다. ◽ 설치하기 1) npm $ npm install vue-nprogress 2) CDN 방식 nprogress - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Simple slim progress bars - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each mon..
◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. - to: 이동할 URL 정보가 담긴 라우터 객체 - from: 현재 URL 정보가 담긴 라우터 객체 - next: to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수 const router = new VueRouter(); // beforeEach()를 호출하고나면 모든 라우팅이 대기상태가 된다. // URL로 라우팅하기위해서는 next()를 호출해야한다. router.beforeEach(function( to, from, next ) { // 'isPassed'는 내가 정의한 속성값으로 로그인을 한 경..
◽ .sync prop에 대해 양방향 바인딩이 필요한 경우가 있다. "undate:myPropNm" 같은 패턴이 권장되어 아래와 같이 작성하면 양방향 바인딩을 할 수 있다. 그리고 위와 같은 패턴을 .sync 수식어를 통해 표현하여 줄일 수 있다. 출처 https://kr.vuejs.org/v2/guide/components-custom-events.html#sync-%EC%88%98%EC%8B%9D%EC%96%B4 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
◽ window.scrollTo(xpos, ypos) 특정 위치로 스크롤을 이동시키는 메서드이다. window는 생략이 가능하다. x-좌표: 문서의 왼쪽 상단부터 시작하는 픽셀단위의 가로축 y-좌표: 문서의 왼쪽 상단부터 시작하는 픽셀단위의 세로축 window.scrollTo( 0, 1000 ); ◽ window.scrollTo(xpos, ypos)의 속성 - scroll-behavior: 스크롤 효과 지정, auto가 기본값이며 instant, smooth가 있다. - top: 세로 위치 - lef: 가로 위치 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도..
◽ window.pageYOffset scrollY의 다른 이름이다. 스크롤이 수직으로 얼마나 스크롤 됐는지 픽셀단위로 반환한다. 스크롤에 따라 상단 메뉴를 다르게 보이게 하는 상황 등에서 쓰인다. 최신 버전에서는 pageYOffset를 사용한다. scrollY는 작동하지 않을 수도 있다. yOffset = window.pageYOffset; 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
◽ getBoundingClientRect() 이 method가 return하는 width, height 속성값은 padding과 border-width를 포함한 것이다. 즉, 엘리먼트 자체의 width + padding + border-width를 다 더한값이다. ◽ getBoundingClientRect()의 속성 - x: x 좌표 값 - y: y 좌표 값 - width - height - top - right - bottom - left // 이렇게 사용할 수 있다. getBoundingClientRect().top 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect