기본 개념과 명령어 초기화 깃을 올바로 사용하려면 깃이 파일의 변경 내용을 추적하는 방식을 이해하는 것이 무척 중요하다. 그렇지 않고 백업 용도로만 깃을 사용하면 장님이 코끼리 만지는 것처럼 딱 그만큼만 알게 되기 때문이다. 깃은 폴더의 어떤 파일이라도 모두 트래킹 할 수 있다. 원하는 폴더로 이동해 깃 초기화 커맨드부터 시작한다. $ git in...

기본 설명 Custom Elements는 사용자 HTML Element를 만들게 해준다. 그리고 이는 DOM의 모든 기능을 다 사용할 수 있다. 기본적으로 두 가지 타입으로 생성한다. 표준 HTML 요소를 상속하지 않은 Elements. 요소는 상속하지 않지만 HTML Element는 상속 한다. 표준 HTML 요소를 상속한 Element...

svg 미리 보기 활성화 하는 방법 파일을 직접 열지 않아도 미리 볼 수 있기 때문에, 작업 속도가 빨라집니다. 특히 여러 SVG 파일을 다루는 경우 시간 절약 효과가 더욱 뛰어납니다. 확장 프로그램 설치 하기 svg-explorer-extension SVG SEE 프로그래 설치 사이트로 이동해서 컴퓨터 사양에 맞는 버전을 다운로드 합니다. ...

1. 톰캣 설치 아파치 톰캣 사이트에 접속합니다. https://tomcat.apache.org/ https://velog.io/@wijoonwu 페이지 왼쪽의 Download 카테고리에서 다운로드 할 톰캣 버전을 클릭합니다. 내게 맞는 톰캣 버전을 찾는 방법 참고: https://itworldyo.tistory.com/88 ...

들어가며 디자인을 할 때 여러 해상도를 대응해야 하는 것은 필수적이다. 특히나 요즘에는 너무나도 다양한 기기들이 나오다 보니 하나의 서비스를 만들 때 모바일 앱이 아닌 이상 데스크탑, 태블릿, 모바일 그리고 이 디바이스에서도 다양한 해상도를 대응해야 한다. (갤럭시 플립, 폴더···) 그래서 디자인 시스템 Foundation 영역에 들어갈 브레이크...

vscode 터미널에 git 현재 branch 표시하기 vscode 터미널 사용 시 현재 브랜치 명이 표시되지 않아 불편하다. $ touch .bash_profile $ open .bash_profile 터미널에 .bash_profile 파일을 만들어주고 열어준다. parse_git_branch() { git branch 2> /de...

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 scroll, mousewheel, touchmove 등의 이벤트를 걸어 e.preventDefulat()로 이벤트를 막아볼 수 있겠지만, mousewhe...

브라우저 동작 원리 브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 프론트엔드의 성능 최적화를 확인하기에 앞서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 한다. 브라우저의 동작과정부터 React까지 프론트엔드 성능 최적화 프론트 엔드 성능 최...

브라우저가 css 셀렉터를 해석하는 방법 브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다. div p a { } 예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지...

history API 브라우저는 페이지 로딩 시 세션 히스토리를 갖는다. 세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다. 사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지...