[Git] 맥 vscode 터미널에 git 현재 branch 표시하기

vscode 터미널에 git 현재 branch 표시하기vscode 터미널 사용 시 현재 브랜치 명이 표시되지 않아 불편하다.$ touch .bash_profile$ open .bash_profile 터미널에 .bash_profile 파일을 만들어주고 열어준다. parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'}export PS1="\u@\h \W\[\033[32m\]\$(parse_git_branch)\[\033[00m\] $ " 이 코드를 그대로 저장 후$ source .bash_profile 방금 그 파일을 실행시켜준다.    https://velog.io/@kcy8507/Git-%EB%A7%..

2024.07.05

javascript scroll event 제어

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 `overflow-y: hidden` 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 `scroll`, `mousewheel`, `touchmove` 등의 이벤트를 걸어 `e.preventDefulat()`로 이벤트를 막아볼 수 있겠지만, `mousewheel` 이벤트와 같이 스크롤과 관련 된 이벤트는 기본적으로 `passive`로 처리되어 있어 추가 옵션을 설정 할 수 없다. 아래와 같은 오류 발생[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. ..

2024.07.03

프론트엔드 성능 최적화

브라우저 동작 원리브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 프론트엔드의 성능 최적화를 확인하기에 앞서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 한다.https://velog.io/@kmlee95/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95%EB%B6%80%ED%84%B0-React  프론트엔드 성능 최적화프론트 엔드 성능 최적화에는 `웹 페이지 로드 최적화`, `웹 페이지 렌더링 최적화`가 있다. 1. 웹 페이지 로드 최적화(1) 브라우저 상에서 최적화`DOMContentLoaded': html, css 파싱이 끝난 시점`Loaded`: h..

2024.06.28

브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법

브라우저가 css 셀렉터를 해석하는 방법브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다.div p a { } 예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지막으로 이 중에서 또 다시 부모 요소가 div인 것을 찾는다. 이러한 방식은 브라우저가 불필요한 요소를 검사하는 시간을 줄이는 데 도움이 된다. 왜냐하면 가장 일반적인 요소 (여기서는 a 태그)부터 검사를 시작하므로, 좀 더 빠르게 원하는 요소를 찾을 수 있기 때문이다.  css 선택자의 성능 향상 방법선택자의 복잡성 줄이기가능한 한 간단한 선택자를 사용하는 것이 좋..

2024.06.28

history API로 SPA 구현

history API브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.`history.back()`: 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동`history.forward()`: 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동`history.go(n)`: 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지..

2024.06.24

iOS input focus, buffer

한글은 자음, 모음으로 구성된다. iOS에서 input 에 있는 value를 'X' 버튼 등으로 한번에 삭제하고 다시 input에 focus를 주려고 할 때,input에 입력되어 있던 문자가 한글이고, 마지막 문자가 받침이 없는 문자였다면,문자를 재입력 했을 때 남아있던 버퍼가 함께 보여지게 된다.'오늘날씨' 입력 후X 버튼 클릭응로 value 삭제input에 focus가 옮겨지고 '내일날씨'를 입력이런 경우에 input value에는 '내일날씨'가 입력되어 있는게 아니라, 남아있던 buffer로 인해 '씨내일날씨'가 입력되게 된다. 이 문제는, input에 focus를 주기 전, 다른 input을 생성해 그곳에 먼저 focus를 줬다가, 검색 input에 다시 focus를 줘서 buffer를 삭제해줘야..

2024.06.12