본문 바로가기

기술스택

 (12)
[HTML/CSS] 여러 input 상태 🧠 정리상태설명 요약:hover마우스 올라갔을 때:focus포커스 받은 입력 (커서가 진입한 상태, 입력이 가능한 상태):active누르는 순간:visited방문한 링크:enabled / :disabled사용 가능/불가:checked체크됨 (radio, checkbox의 경우 사용) 토글 !== 라디오토글은 checkbox를 css로 변환하여 사용
[Git] git add -A vs git add (디렉토리 구조 변환 중) git add -A .현재 디렉토리 기준 전체 변경 사항을 정확하게 반영해서 스테이지에 올리는 명령. 삭제된 파일까지 함께 처리되기 때문에 커밋 상태를 깔끔하게 동기화할 수 있는 게 장점.🔍 비교: git add -A . vs git add .명령어설명삭제 파일 포함 여부git add .변경/추가된 파일만 스테이징❌ 삭제 파일 반영 안 됨git add -A .변경/추가/삭제된 모든 파일을 스테이징✅ 삭제 파일 반영됨 ✅ 깔끔한 커밋 상태 유지란?디렉토리 구조 리팩토링(FSD 구조 정리, 폴더 이동 등)을 할 경우,파일이 삭제 + 새로 생성되는 것처럼 처리되기 때문에, 삭제된 파일도 스테이지에 올려야 진짜 구조 변경이 정확하게 커밋됩니다.예시:# 변경 전src/components/Header.js# 변경..
[Git] 작업 도중, 실수로 이전 커밋 관련한 작업물을 올리지 못했을 때 git add git commit --amend git show --only-name: 이전 커밋의 파일명 확인 가능. 실수로 이미 push를 해버렸다면?.git add git commit --amend git push --force-with-lease origin force없이 push 하려고 한다면?🔍 오류 핵심 요약non-fast-forward 오류는 로컬의 커밋 해시가 원격의 HEAD와 달라졌는데,--force 없이 push 하려고 해서 Git이 거부한 것 amend를 하면 커밋 메시지가 변경되지 않아도 해시는 변경되기에, PR에 올라간 마지막 commit(HEAD)와 로컬의 amend한 커밋은 다름.➡️ 그래서 amend는 이전 커밋을 새 커밋으로 "덮어쓴 것처럼 보이지만 실제로는 완전..
[FE] CSS 컨벤션 .selector { /* 박스 모델 */ display: flex; position: relative; top: 0; margin: 10px; padding: 15px; /* 크기 */ width: 100%; height: auto; /* 테두리 및 배경 */ border: 1px solid #ccc; border-radius: 5px; background-color: #f5f5f5; /* 텍스트 및 글꼴 */ font-size: 16px; color: #333; text-align: center; /* 기타 */ cursor: pointer; transition: all 0.3s ease;}
[Git] git branch -d 브랜치 캐싱 Git은 기본적으로 원격 브랜치가 삭제되었더라도 그 정보를 즉시 로컬에서 업데이트하지 않으며, 캐싱된 정보를 계속 사용합니다. 따라서 원격에서 이미 삭제된 브랜치라도, 로컬에서는 해당 브랜치가 남아있는 것처럼 행동하고 checkout 시에 자동으로 추적 브랜치를 생성하게 됩니다.그래서 삭제한 로컬 브랜치도 tab사용하면 자동완성이 될 때가 있다는거...??: 비슷한 이유, Git의 캐시나 리플렉트된 원격 참조가 남아있기 때문입니다. => 결론: 요약하자면, 원격 브랜치가 삭제되었지만 로컬에서 해당 정보를 업데이트하지 않았기 때문에 checkout 시에 원격 캐시 정보를 기반으로 추적 브랜치가 자동 생성된 것입니다 이를 방지하기 위해서는 git fetch -p로 원격과 로컬의 정보를 동기화하는 것이 좋다...
[Git] git 브랜치 흐름 관리 Q. main에서 분기된 feature/login에서 작업하고 있는데 다른 동료가 main에 작업물을 merge했어. 이때, feature/login을 원격 레포지토리에 올리려면 어떻게 해야 해? git checkout maingit pull origin mainmain 브랜치 업데이트 git checkout feature/logingit mergin mainfeature/login 브랜치 업데이트if) 충돌 발생하면 해결하고 병합 마무리하기!!! 이후에 feature/login 작업 내용 원격 레포지토리에 push.
[FE] 디스플레이 해상도 해상도: HD, FHD, QHD총 픽셀 수가 곧 화소 수이며, 화소 수가 높을수록 선명하다. 고해상도란?: 동일면적에 얼마나 많은 픽셀이 포함되느냐 (PPI) 해상도가 높아지면 글자나 이미지 크기가 작아지는 현상이 발생한다.Why?: 동일한 디스플레이 크기에서 픽셀이 많아진다는 것은, 픽셀 하나의 크기가 작아진다는 뜻.더 작은 크기의 그림을 그릴 수 있어진다는 장점이 있다. 글자나 이미지 크기가 작아지는 현상을 다시 늘리는 것을 배율로 해결한다.But, 완벽하지 않은 해결 방식임. Window에서는 번지는 현상 발생함.https://codevang.tistory.com/173 (디테일한 설정) 윈도우 해상도와 배율 조정 (글자/화면 크기 키우기)해상도를 높이면 화면의 글자와 그림 등의 크기가 작아집니다...
[해양물류] React, JavaScript의 이해 React 애플리케이션을 JSX로 구현한 후, 애플리케이션이 브라우저에 나타나는 과정. 중요 키워드: 트랜스파일,Babel, 번들링,Webpack,로더, 빌드  1. 애플리케이션 작성 및 트랜스파일(Transfile)도구: Babel (자바스크립트 컴파일러)JSX는 브라우저가 이해할 수 없다. 따라서 Babel을 사용하여 순수한 JavaScript로 변환한다.이 때, 최신 자바스크립트 문법도 구형 브라우저에서 동작할 수 있도록 변환된다. 2. 모듈 번들링 (묶음)도구: Webpack (자바스크립트 모듈 번들러) 여러 모듈들을 하나로 묶는 과정을 번들링이라 한다.여러 개의 자바스크립트 모듈과 기타 자산(CSS, 이미지, 폰트 등)을 하나 또는 여러 개의 번들 파일로 묶는다. 다양한 파일 유형(CSS, 이미..

티스토리툴바