HOME
focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정
focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 focus-within 살펴보기:focus-within은 포커스를 받은 요소 혹은 포커스를 받은 요소(주로 input 태그)를 포함하는 부모 요소를 가리킨다. input 같은 하위 요소가 focus 됐을 때 부모 요소의 스타일을 변경하고 싶을 때 사용하면 유용하다. 아래 예제에서 input 태그를 자식으로 포함하는 .wrapper 클래스 이름의 부모 요소가 있다. Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Choose text color input 태그를 선택해서 활성화되면(포커스를 받으면),..
이벤트 전파(캡처링, 버블링) / 이벤트 위임 / 데이터 속성
이벤트 전파(캡처링, 버블링) / 이벤트 위임 / 데이터 속성
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 실습용 CodePen이벤트 버블링/캡처링, `stopPropagation()`, `preventDefault()`까지 모두 실습할 수 있도록 작성 See the Pen Learn Event Propagation 이벤트 전파 실습 by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 이벤트 전파 | Event Propagation버블링 Bubbling / 캡처링 Capturing위 코드펜 예제에서 하단에 있는 span 태그를 클릭하면 ➊ "span 영역" → ➋ "p 영역" → ➌ "div"..
HTML 시맨틱 태그 Semantic Tag
HTML 시맨틱 태그 Semantic Tag
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 시맨틱 태그란?Semantic(语义)은 **"의미가 있는"**이라는 뜻. 물을 마시는 "컵", 문을 여는 "손잡이"처럼 일상 생활에서 쉽게 볼 수 있는 사물들이 각각 의미를 가지고 있는 것처럼 HTML의 여러 태그들도 각각 의미를 가지고 있다. 시맨틱 태그의 장점SEO : 제목 ``, 부제목 `` 같은 시멘틱 태그를 적절하게 사용하면 검색엔진이 해당 사이트를 더 잘 이해할 수 있기 때문에 검색 최적화에 유리하다. Accessbility(웹접근성) : 시맨틱 태그를 잘 사용하면 스크린 리더(웹페이지를 음성으로 읽어주는)나 키보드만 사용해서 웹사이트를 이용하는 사람들도 큰 문제 없이 사용할 수 있다. Maintain..
알면 유용한 자바스크립트 최신 문법
알면 유용한 자바스크립트 최신 문법
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Numeric Separators숫자를 입력할 때 언더스코어 _를 이용해 숫자를 구분해서 가독성을 높일 수 있다. KRW 화폐처럼 자리수가 많은 숫자를 작성할 때 유용const cost = 100_000_000;console.log(cost); // 100000000 _ 언더바 한개만 사용 가능 ex) 100__000 ❌숫자 마지막엔 사용 불가 ex) 100_; ❌가장 앞 숫자가 0일땐 사용 불가 ex) 0_1; ❌ replaceAllreplaceAll(substr, newSubstr)replaceAll(substr, replacerFunction) 문자열에서 원하는 부분을 "모두" 지정한 문자..
자바스크립트 옵셔널 체이닝
자바스크립트 옵셔널 체이닝
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 옵셔널 체이닝 등장 배경비교적 새로 추가된 자바스크립트 문법으로 프로퍼티가 없는 중첩 객체를 에러없이 접근할 때 사용한다. 유저 정보를 담아두는 user 객체에 아무런 정보가 없는 상태에서 address 속성에 접근하려고 하면 아래처럼 타입 에러가 발생한다.const user = {};console.log(user.address.street);// TypeError: Cannot read property 'street' of undefined React나 Vue의 상태관리 라이브러리를 쓸 때 아직 스토어에 있는 정보를 다 불러오지 않은 시점에서 객체의 속성에 접근할 때도 비슷한 타입에러가 발생한다.// selec..
변경한 상태 임시 저장 후 브랜치 이동 방법 — Git Stash
변경한 상태 임시 저장 후 브랜치 이동 방법 — Git Stash
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 특정 브랜치에서 파일을 수정하고 git checkout 명령어로 잠시 다른 브랜치로 이동하려고 하면 아래 메시지가 나온다.Please commit your changes or stash them before you switch branches. 변경한 내용을 commit하거나 stash 해야만 다른 브랜치로 이동할 수 있다는 메시지다. 아직 완료하지 않은 작업을 commit하기 껄끄러울 때 stash 명령어를 활용할 수 있다. 마무리하지 않은 작업을 stash 스택에 임시 저장한 후 다른 브랜치로 이동할 수 있다. Stash 명령어stash했던 브랜치가 아니어도(다른 브랜치에서도) stash에 저장한 내용을 복..
console.log 콘솔 로그 더 잘 사용하기
console.log 콘솔 로그 더 잘 사용하기
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 console.log는 브라우저에서 제공하는 console API중 하나. console 객체에는 log 외에도 다양한 메소드들이 존재한다.log 레벨 종류정말 필요한 정보가 아니면 log와 info는 제품 배포 단계에선 출력되지 않도록 한다. 배포할 때 log나 info는 출력하지 않도록 하거나 네트워크 요청이 발생하지 않도록 하는 등의 설정을 할 수 있기 때문에 중요도 레벨에 맞는 console 메소드를 사용하는 것이 중요하다. console.logconst dog = { type: "🐶", name: "츄츄", owner: { name: "John" } };console.log("logging", dog..
React 리액트에서 SVG 사용법
React 리액트에서 SVG 사용법
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 💡 SVG는 색상, 크기 등을 동적으로 조절할 수 있는 장점이 있다 방법 1 — src 속성에 svg 경로 입력 ; 💡 파일 경로 지정 참고 내용❶ JSX 엘리먼트 속성의 루트 기준은 `public` 폴더만약 `` 태그의 `src` 속성(JSX 태그 속성)에 `src` 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 `src` 속성에 할당하거나,`src` 속성 안에서 `require()` 사용 ex) ``❷ CSS 파일 루트 폴더 기준은 `src` 폴더❸ 파일 최상단 `import` 구문에선 `src` 폴더만 처리 가능(`public` 폴더에 있는 파일은 불가) ..
자바스크립트 배열 중복 요소 제거 방법들
자바스크립트 배열 중복 요소 제거 방법들
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 방법 1 — Set 이용 ⭐️Set을 이용해 중복 요소를 제거하는 방식의 성능이 가장 좋다 Set은 유니크한 값만 저장할 수 있기 때문에 new Set() 인자에 들어온 배열의 중복 요소는 자동으로 제거된다. Array.from은 ➊유사 배열 객체나 ➋반복 가능한 객체를 얕게 복사해 새로운 배열을 반환한다. 전개문법을 사용해도 결과는 동일.const arr = ["A", "B", "A", "D", "B", "F"];const deDuplicated = [...new Set(arr)];// const deDuplicated = Array.from(new Set(arr))console.log(deDuplicated)..
CSS 팝업 애니메이션 만들기
CSS 팝업 애니메이션 만들기
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 요소 숨김 방식 차이점 렌더 트리리플로우리페인트이벤트 핸들러DOM 트리`display: none`제외발생발생비활성유지`visibility: hidden`유지발생 안함발생비활성유지`opacity: 0`유지발생 안함발생활성유지display: none렌더 트리 : 제외리플로우 : 발생 (렌더트리 상태가 변경됐으므로)리페인트 : 발생 (리플로우 발생시 리페인트도 함께 발생)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)visibility: hidden렌더 트리 : 유지 (화면에선 안보이지만 공간은 차지함)리플로우 : 발..
아이폰 사파리에서 입력창 자동확대 방지
아이폰 사파리에서 입력창 자동확대 방지
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다. 확대 금지 — 모바일용으로 적절하게 디자인된 경우폰트 크기를 16px 이상으로 변경 — 추천폰트 크기를 16px로 변경하고 `transform: scale()`을 이용해 원하는 만큼 줄이는 방법 — 복잡함 방법1 — 확대 금지html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 ..
CSS 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
CSS 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 💡 미립자 팁 : textarea 태그에 readonly 속성을 추가하면 읽기만 가능하고 쓰기는 불가능하다. 로그인하지 않은 유저는 댓글을 쓰지 못하게할 때 유용하다. `` 줄바꿈 적용하기 textarea 태그에 엔터키(개행문자)를 눌러 줄바꿈을 적용해도, 입력한 value를 p 태그 등에 출력해보면 줄바꿈이 하나도 적용되지 않는다. 가장 간단한 해결 방법은 텍스트를 표시할 태그의 스타일에 white-space 속성을 추가하는 것. white-space는 공백 문자를 어떻게 처리할지 결정하는 속성이다. white-space: normal — 기본값 여러 공백 : X (1개로 표시)改行문자 \n 표현 :..