본문 바로가기

FrontEnd94

[jQuery] 반응형 슬라이드 배너 만들기 슬라이드 배너를 구현하던 중 반응형 UI를 적용하기 위해 여러가지 방법을 시도했지만, 창의 크기 변화에 즉각적으로 반응하도록 구현하는 것이 쉽지 않았다. 해결을 위해 서치를 하던 중 좋은 방법을 찾았는데, 바로 css animation keyframe을 이용하는 방법이다. @keyframes을 이용해 진행율 별 animation을 다르게 지정한다. 전체를 10초 동안 진행하되 무한반복 옵션에서(10s infinite) 배너로 추가할 이미지가 4개인 경우, 이미지를 2초동안 보여주며, 다음 이미지로 넘어가는 시간은 0.5초로 잡을 수 있다. 이 경우, 0%~20% margin-left:0 [이미지 1을 2초간 보여준다.] 20%~25% margin-left:-100% [이미지 1에서 2로 넘어간다(0.5초.. 2021. 10. 8.
검색 엔진 최적화(Search Engine Optimization) SEO(Search Engine Optimization) 검색 엔진 최적화, 웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 랭크 개선이라고도 한다. 검색 엔진은 웹을 크롤링(en-US)하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성한다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인이다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹 사이트가 검색 결과의 보다 높은 곳에 노출돼(전자상거래와 공고라면) 수익으로 연결될 수도 있다. 검색 엔진은 일부 SEO 가이드라인을 제공하긴 하지만 대형 검색 엔진의 경우 결과 랭킹은 영업 비밀로 취급한다. 따라서 SEO는 검색 엔진의 공식 가이드라인에 더해 경험적인 지식, 논문과 특허 등에.. 2021. 9. 30.
[JavaScript] 함수의 스코프와 클로저 스코프(Scope, 유효범위) 스코프란? 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)을 찾아내기 위한 규칙이다. 자바 스크립트는 이 규칙대로 식별자를 찾는다. 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있다. 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다. 만약 스코프가 없다면 어떻게 될까? 스코프가 없다면 같은 식별자 이름은 충돌.. 2021. 9. 28.
[React.js] Error : React Hook "useState" is called in a function "customPage" which is neither a React function or a custom React Hook function React Hook을 사용한다면, 함수형 컴포넌트가 반드시 대문자로 시작해야 한다. 해당 에러는 함수형 컴포넌트를 customPage과 같이 소문자로 시작하는 이름으로 지정해서 생기는 에러이다. Hook은 JavaScript 함수이지만 사용할 때 두 가지 규칙을 따라야 한다. 최상위 수준에서만 Hook 호출 루프, 조건 또는 중첩 함수 내에서 Hook를 호출하지 않는다. 대신, 조기 반환 전에 항상 React 함수의 최상위 수준에서 Hooks를 사용하라. 이 규칙을 따르면 구성 요소가 렌더링될 때마다 후크가 동일한 순서로 호출된다. 이것이 React가 다중 호출 useState과 useEffect 호출 사이의 Hook 상태를 올바르게 보존할 수 있게 해준다. React Functions에서만 Hook 호.. 2021. 9. 27.
CDN(Content Delivery Network)이란? CDN이란? Content Delivery/Distribution Network의 약자로 지리적으로 분산된 여러 개의 서버이다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높인다. 전 세계 데이터센터는 캐싱이라는 파일 복사본을 임시로 저장하는 프로세스를 사용함으로써 사용자는 가까운 서버를 통해 웹 활성화 디바이스 또는 브라우저에서 인터넷 콘텐츠에 빠르게 접속이 가능하다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱함으로써 콘텐츠가 로딩될 때따지 기다릴 필요없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등과 같은 작업을 할 수 있다. 가까운 곳에 있는 ATM을 이용하면 은행에서 긴 줄을 서서 기.. 2021. 9. 23.
HTTP vs HTTPS 서론 많은 웹사이트에서 HTTP를 사용하지만, 2014년에 Google은 사이트를 HTTPS로 전환할 것을 권장했다. 그 전까지는 전자 상거래 페이지가 있는 사이트만 HTTPS를 사용하곤 했다. 전환에 대한 인센티브로 Google은 HTTPS 사이트에 약간의 순위 상승을 제공할 것이라고 발표했다. 사실상 HTTP 사이트보다 HTTPS로 전환한 사이트가 경쟁에서 우위를 차지하게 된다. 이제 HTTPS로 전환하는 것이 왜 그렇게 중요한지 궁금할 것이다. 번거로움을 무릅쓰고 HTTPS로 전환하는데 그만큼의 가치가 있을까? HTTP와 HTTPS의 차이점은 무엇일까? HTTP, HTTPS의 기본 개념 HTTP란? HTTP(HyperText Transfer Protocol)는 하이퍼텍스트 전송 프로토콜을 의미한다... 2021. 9. 21.
반응형

티스토리툴바