1. *ngIf="false" 와 "display:none"처리의 차이점? display:none 처리 요소가 DOM 트리에 없는 것처럼 렌더링된다. 하지만 개발자도구로 확인하면 여전히 해당 요소가 존재한다. 이는 DOM 트리에서 해당 요소가 완전히 제거되지 않고 숨김 처리만 되었음을 알 수 있다. ngIf="false" 처리 DOM트리에서 해당 요소를 완전히 제거한다. 페이지의 빠른 렌더링으로 더 나은 성능을 제공할 수 있으며, 메모리를 확보할 수 있다. why? Angular에서는 ngIf 지시문이 요소를 숨김처리 하지 않고 제거하는가? 해당 요소/컴포넌트가 숨겨져 있어도 컴포넌트는 DOM에 연결되어 있고 계속해서 이벤트가 돌고 있다. Angular는 데이터의 변경사항을 계속해서 확인하기 때문에, 요..
1. 하나의 문서 객체 선택 찾는 값이 없다면 null 반환 document.querySelector(CSS 선택자) 가장 첫 번째 요소만 선택 가능 / IE9 이상 지원 document.getElementById(id명) id명으로 하나의 요소만 선택(id값 대소문자 구별) 2. 여러 문서 객체 선택 문서 내에 같은 이름의 요소가 존재한다면, 그 개수만큼 배열 형태로 반환 실제 배열이 아닌 유사 배열 객체!!! 찾는 값이 없다면 빈 배열 반환 document.querySelectorAll(CSS 선택자) None-Live NodeList 반환 탐색 범위 내에서 선택자의 마지막 요소만 검증(https://developer.mozilla.org/ko/docs/Web/API/Document/querySele..
#1 브랜치A에 지난 브랜치B의 코드를 반영하게 하고 싶을 때 [가정] 브랜치A : feature/190701_git_test 브랜치B : develop 상황 : 브랜치B에서 만든 브랜치A에서 작업 후 origin에 반영한 상태이다. 그리고 브랜치B에서 급히 수정을 해서 origin에 반영을 하였는데 브랜치A에도 이 수정 내역이 반영되었으면 한다. [해결과정] 1. git rebase 브랜치B 충돌난 파일 src/test1.html을 상황에 맞게 수정해준다. > feature/190701_git_test commit 2. git add src/test1.html, git rebase --continue rebase는 merge와 다르게 충돌 부분을 수정한 후에는 commit이 아니라 rebase명령에 -..
마크업하면서 무의식적으로 사용하기만 했던 벤더 프리픽스(vendor prefix)의 개념에 대해 정리하고자 한다. CSS3 표준으로 확정되기 이전이나 브라우저별로 다르게 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 한다. 각 브라우저에서 판별이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있도록 도와주는게 바로 벤더 프리픽스이다. -ms-transform:... // Internet Explorer -moz-transform:... // FireFox -webkit-transform:... // Chrome & Safari & Android -o-transform:... // Opera transform:... // 표준 코드 맨 아래에 위치 transform 속성은 위에 처럼 벤더..
원문: https://css-tricks.com/an-introduction-to-web-components/ 프론트엔드 개발은 정말 빠른 속도로 진행되고 있습니다. 이는 한때 상당히 단순했던 기술 스택의 상태를 한탄하는 수많은 기사, 튜토리얼 및 트위터에 의해 명백하게 보여지고 있습니다. 이 아티클에서는, 웹 컴포넌트가 복잡한 프레임워크나 빌드 단계 없이 고품질 사용자 환경을 제공하고 무용화의 위험에 노출되지 않는 우수한 도구인 이유에 대해 설명할 것입니다. 5부로 된 시리즈의 후속 아티클에서는 각 사양에 대해 자세히 살펴보겠습니다. 이 시리즈는 HTML, CSS 및 JavaScript의 기본적인 이해를 전제로 합니다. 이 영역들 중 하나에 약하다고 느껴진다면 걱정하지 마세요. Custom Elemen..
WAI-ARIAWeb Accessibility Initiative - Accessible Rich Internet Applications의 약자로, WAI는 W3C에서 웹 접근성을 담당하는 조직이며 ARIA는 리치 인터넷 어플리케이션을 위한 W3C의 접근성 명세이다. 필요성 리치 인터넷 어플리케이션(RIA)는 웹 어플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 어플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다. 이러한 리치 인터넷 어플리케이션이 많아지면서 HTML을 사용하여 동적인 웹 어플리케이션의 접근성을 보장하지 못하는 경우가 생겨나게 되었다. 이 때문에 스크린리더를 사용하는 시각장애인들이 이러한 환경에서 웹 컨텐츠를 이용하는..
모웹 마크업에 Lottie 애니메이션 라이브러리를 사용하게 되면서 알게된 점들을 정리해보았다.개요After Effects 애니메이션을 실시간을 렌더링 하는 iOS, android, react-native, web 라이브러리이며, Bodymovin 이라는 오픈소스를 이용한 After Effects 확장 기능을 사용해서 json 형식으로 추출한 애니메이션 데이터를 사용하여 웹상에서 애니메이션을 렌더링한다. Lottie 메인사이트: https://airbnb.design/lottie소개: https://airbnb.design/introducing-lottie가이드: http://airbnb.io/lottie/web/getting-started.htmlGitHub: https://github.com/airbn..
[문제] https://www.acmicpc.net/problem/2468 [처음 생각] 보고 먼저 min 높이와 max 높이를 구해서 min부터 max까지 높이 따져서 매번의 안전 지역을 세서 max값을 갱신해주면 되겠다고 생각은 했는데, 이게 왠지 시간초과 날거같아서 답지 찾아봤는데... [풀이] 내가 생각한 방식이 정답이었다. 시간이 모자라서 지금 다른 방식이 당연히 맞을 것 같아서 답지 찾아본건데...원래는 visited 배열을 int형으로 선언해서 매번의 tmpAns를 구하려고 했는데 그렇게 하면 visited 배열에서 max값을 또 찾는 과정을 넣어야 하니까 그냥 boolean 배열로 선언하고, 따로 tmpAns 변수를 ++ 하는 방식으로 했다. [Code] https://github.com/..
[문제] https://www.acmicpc.net/problem/14499 [처음 생각] 주사위를 동.서.남.북으로 굴릴때 일반적으로 방향만 바꾸면 된다는걸 생각하지 못했다. 애초에 주사위 배치도가 주어진걸 보고 주사위 자료구조를 짜서 방향만 바꿔서 굴리면 된다는걸 알았어야 했는데....ㅜ [풀이] 1. 기본 주사위 배치표 dice 배열을 만든다. 2. 명령을 입력받으면서 그 명령의 방향으로 칸을 이동한 좌표를 구한다. 3. 굴려진 주사위 배치표 ndice 배열을 새로 만들고, 주사위를 굴려서 ndice 배열을 구한다. - 만약 동쪽이라면, 2자리와 5자리는 그대로고 나머지 배치만 반대로 된다. 4. 그리고 맵의 숫자가 0인지 아닌지를 따져서 문제의 조건대로 처리한다. 5. 주사위를 dice 배열로 갱..
- Total
- Today
- Yesterday
- 조합 알고리즘
- ACM Craft
- 위상정렬
- 7576
- 1157
- spring
- 1085
- acmicpc
- 약수
- 단어 공부
- acmpicpc
- 10809
- combination
- 1037
- 이진 탐색
- 7569
- 알고리즘
- 2048 game
- 이진 검색
- mybatis
- parametric search
- BOJ
- lottie
- Java
- 알파벳 찾기
- 12100
- 째로탈출2
- 파라메트릭
- 자료구조
- 13460
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |