본문 바로가기

전체 글

 (99)
SEO를 위한 HTML 🤔 SEO란 SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 랭크 개선이라고도 한다. 🔥 SEO에 영향을 주는 HTML 태그들 대표적으로 과 가 있다. 종류 설명 예시 - 안에 들어감. -되도록 간결하게 써야 overflow elipsis되는 경우를 피할 수 있다. (30자 이내) -핵심 키워드가 꼭 들어가되, 반복되지 않도록! - 안에 들어감. -SEO를 위한 meta태그는 name 속성을 가짐 -공유를 위한 meta태그는 property 속성을 가짐 -공유를 위한 property 값에는 "og(open graph)"가 붙음 사진 = 에어비앤비 메타 태그 종류들, (이 외에도 많다) 📌 meta 태그 종류와 주의사항 종류 설명 및 주의사항 og:url 페이..
[React] useRef사용법, 언제 써야 할까? 🤔 useRef는 javaScript에서는 DOM을 선택해야 하는 상황에 getElementById나 querySelector와 같은 DOM Selector 함수를 사용해서 선택했다. 그런데 React에선 실질적으로 대부분 state를 이용해 자동으로 리랜더링 되기 때문에, 직접 DOM요소를 건드릴 일이 많이 없고, 리액트 자체에서도 DOM을 되도록 직접 조작하는 일은 없게하라 그런다. 그럼에도 불구하고, DOM을 직접 선택해야 하는 상황이 있다. 예를 들면 아래와 같은 상황들이다. useRef가 필요한 상황 예시 특정 엘리먼트의 크기 가져오기 스크롤바의 현 위치 가져오기 혹은 설정하기 🌟포커스 설정하기 🌟비디오 제어하기 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리 사용할..
[React] Styled Components 시작하기, styled-reset 추가 하기 🤔 Styled Component 왜 필요할까? CDD기반의 개발을 하기 위해선, CSS를 컴포넌트화 시킬 필요가 있다. (지금 이 문장이 이해가 가지 않는다면, 링크의 글을 먼저 읽는다) 리액트를 사용함으로써 우리는 기본적으로 html과 js 코드를 한방에 jsx로 묶을 수 있다. 그렇지만 css는 리액트 기본 기능으론 컴포넌트로 쪼개서 jsx 파일에 담을 수는 없다. 이것을 가능하게 해주는 Styled Component라는 귀한 분을 모셔와야 한다. 우리는 React와 Styled Component 이 빛과 같은 두분으로 뿔뿔이 흩어져 있던 html + css + js 코드를 js하나로(jsx도 사실 js코드이므로) 묶을 수 있게 된다. 1+1+1 = 1 이 되는 기적!! 🔥 Styled Compon..

티스토리툴바