🚩 프로그래밍 프로그래밍이란 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션. 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 코드입니다. 🚩 프로그래밍 언어 명령을 수행하는 주체는 컴퓨터입니다. 그래서 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 합니다. 하지만 기계어로 직접 명령을 전달하는 것은 어려운 일입니다. 그래서 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기(컴파일러 혹은 인터프리터)를 이용하는 것 입니다. 🚩 참고 모던 자바스크립..
분류 전체보기
🚩 기존 애니카드 디자인 기존 애니카드는 width: 100%, height: 152px 고정되어 있어서 부자연스러운 이미지를 가지고 있었습니다. 기존 애니카드 🚩 변경된 애니카드 디자인 위 문제를 해결하기 위해 element의 종횡비를 유지하는 방향으로 디자인이 변경되었습니다. 🚩 종횡비 유지 1: padding-bottom 활용 HTML 이미지 element 이미지를 감싸는 element ... // 생략 CSS .image-container padding-bottom: 70%는 부모 width의 70% 비율을 height로 가집니다. padding-bottom: 100%는 부모 width의 100% 비율을 height로 가지기 때문에 정사각형이 됩니다. .image padding에 밀려있는 이미지를..
🚩 페이지 하단에 도달했는지 확인하는 방법 Intersection Observer API 타겟 요소(element)와 브라우저 viewport의 교차점을 관찰합니다. 타겟 요소가 사용자 화면에 보이는지 안보이는지 판단 화면에 보이면 지정한 콜백 함수 실행 scroll 이벤트와 달리 비동기적으로 실행되며, reflow를 발생시키지 않아 성능 이점이 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 🚩 useIntersectionObserver hook useIntersectionObserver() 구현 export default function useIntersectionObserver({ target, // t..
🚩 로컬 브랜치 이름 변경 현재 위치한 브랜치 이름 변경 git switch working-branch git branch -m new-branch-name 현재 위치한 브랜치가 아닌 다른 브랜치 이름 변경 git branch -m old-branch new-branch 🚩 원격 브랜치 이름 변경 Git에서 원격 브랜치 이름을 변경하는 직접적인 명령어가 없기 때문에, 새로운 브랜치를 만들고 기존 브랜치를 삭제하는 방식을 사용합니다. 첫 번째 방법 이름이 변경된 로컬 브랜치를 원격 저장소에 push 기존 원격 브랜치를 삭제 git push origin new-branch git push origin -d old-branch 두 번째 방법 콜론(:)은 원격 저장소에 있는 브랜치를 삭제하는 명령어 git pu..
🚩 Local Storage 저장된 데이터는 브라우저를 닫아도 계속 유지됩니다. 오리진(domain·port·protocol)이 같은 탭, 창 전체에서 공유 한 창의 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다. 🚩 Session Storage 저장된 데이터는 브라우저를 닫거나 탭을 닫으면 삭제됩니다. 오리진이 같은 브라우저 탭, iframe에서 공유 현재 떠 있는 탭 내에서만 데이터가 유지됩니다. 🚩 API 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다. Storage.setItem() setItem(key, value): 키-값 쌍을 보관합니다. getItem(key): 키에 해당하는 값을 받아옵니다. removeItem(key): 키와 해당 값을 삭제합니다. clear():..
🚩 git stash Git에서 현재 작업 디렉토리의 변경 사항을 임시로 저장하고 나중에 다시 복원할 수 있는 명령어 🚩 명령어 변경 사항 저장하기 git stash git stash save "message": 메시지를 추가할 수 있습니다. git stash -u: 추적되지 않는(untracked)파일과 변경된 파일을 모두 스태시에 저장하는 옵션입니다. feat/253 branch에 다음 변경 사항이 있을 때 git stash 명령을 사용하면, 새로운 파일(untracked)은 스태시에 저장되지 않습니다. git stash -u 명령어를 사용하면 새로운 파일도 함께 스태시에 저장됩니다. 저장된 스태시 목록 확인 git stash list 스태시 복원 git stash pop stash@{n}: 특정 스..
setInterval을 이용하여 타이머를 구현했었는데, 타이머를 등록하고 브라우저의 다른 탭으로 이동하면 시간이 제대로 맞지 않는 문제가 있었습니다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified 그 이유는 브라우저가 백그라운드 탭의 부하를 줄이기 위해 setInterval이 지연 실행되고 있었습니다. ▶ 문제 해결 이전에는 단순히 setInterval을 1초 간격으로 실행해서 타이머가 늦어지는 문제가 발생했습니다. 시작 시점과 현재 시점의 경과된 시간을 Date.now()를 이용하여, 백그라운드 탭에서 활성 탭으로 돌아왔을 때 타이머 시간이 제대로 계산되도록 했습니다. ..
기능 설명 공통 기능 Sub Tab Item을 클릭하면, 해당 하는 Tap Panel 위치로 이동한다. scroll 이벤트 시, 각 Tap Panel 위치에 도달하면 해당 하는 Sub Tab Item이 active 상태가 된다. resize 이벤트 시, Tap Panel의 위치를 재설정한다. 모바일 기능 active 상태인 Sub Tab Item으로 자동 가로 스크롤 ▶ scroll에 따른 active 상태 변경 사용자의 scroll에 따라 Sub Tab의 active 상태가 변경될려면 다음 식이 성립하면 됩니다. 현재 스크롤된 값 > Tap Panel 절대 위치 현재 스크롤된 값을 구하는 방법은 window.scrollY 를 이용하고, 각 Tap Panel의 절대 위치를 구하는 방법은 window.sc..
