반응형

Front-end 개발 51

[JS] Scope(스코프) 란 ?

Scope(스코프) 란 ? 번역하면 '범위'라는 뜻을 가집니다. 즉, 변수에 접근할 수 있는 범위 입니다. 그치만 단순 범위라고 정의하면 안됩니다. 선언하는 시점에 따라 값이 달라질수 있습니다. 동작 스코프, 레벨 스코프로 나눌수 있습니다. 스코프의 종류 1.동작 -정적(Static) 스코프 Javascript는 정적 스코프 특성을 가집니다. 호출 스택과 관계없이 선언 시점에 스코프를 결정됩니다. ①레시컬(Lexical) 스코프 var name = '영수'; // 전역변수 function friend_1() { var name = '영미'; second(); } function friend_2() { console.log(name); } friend_1(); // 영수 friend_2(); // 영수 /..

[React] 리액트 (React) 란?

1.React(리액트)란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용할 수 있습니다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 합니다. 2.React 특징 단방향 데이터 바인딩(One Wat Data flow) ▷리엑트는 단방향 바인딩을 사용하여 성능저하를 줄이고 더 확실하게 데이터를 추적 할수 있습니다. 가상돔(Virtual Dom) ▷싱글 페이지 어플리케이션(SPA)에서는 리플로우/리페인트거 자주 발생 되는데 가상돔을 사용하여 최소화하여 성능을 최적화 시켰습니다. 컴포넌트(..

Front End/React 2021.11.30

[JS] GSAP으로 Mouse cursor change(마우스 커서 변경하기)

1. GSAP(GreenSock Animation Platform)을 이용하여 브라우저 내 마우스 커서 변경하기 커스텀된 마우스 커서를 노출시키고 기본 커서는 비노출 합니다. 커스텀된 마우스 커서와 기본 커서를 함께 노출 시킵니다. 노출영역, 비노출 영역을 지정 할수 있습니다. 영역별 마우스 커서를 커스텀 할수 있습니다. 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

[JS] Lottie Animations (로티 애니메이션) 사용법

1.Lottie (로티) 란? 에어비앤비에서 개발한 라이브러리 입니다. After Effects(에프터 이펙트)으로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 웹, 앱(Android, iOS React-native)에 적용할수 있습니다. 벡터기반의 애니메이션 입니다.(로티는 svg) 2.Lottie 장점 벡터기반이라 용량이 적고 해상도 저하가 없습니다.(리소스 절감) 사용자의 인터렉션에 따라 제어가 가능합니다.(ex: play,stop) 3.Lottie 단점 After Effects(에프터 이펙트)외 에 쓸만한 작업툴이 없습니다. 제작 과정이 복잡하여 숙련도가 필요합니다. 4.참고 사이트 공식홈페이지(Lottie) - https://airbnb.design/lottie/..

[JS] 웹(Mobile)에서 SMS 문자보내기

1.Android(안드로이드) SMS보내기 location.href = sms:수신자번호?body=보낼메세지; 2.IOS(아이폰) SMS보내기 location.href = sms:수신자번호&body=보낼메세지; 3.Android & IOS 자동 분기 실제 디바이스에서 테스트 해야 정확한 결과 확인 가능 수신자 번호는 옵션.(생략 가능) A Tag에 직접 작성하여 사용 가능 하고 함수로도 사용 가능 줄바꿈 필요시 \n 으로 구분 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

[SEO] 검색 엔진 최적화(SEO)로 상위 랭크 되는 법

1.검색엔진 최적화 기본 가이드 (Google) https://developers.google.com/search/docs/beginner/get-started?hl=ko 검색엔진 최적화 초보자 가이드 | 검색 센터 | Google Developers 검색엔진 최적화(SEO)는 Google 검색에서 사이트의 인지도를 높이는 데 도움이 됩니다. 초보자를 위한 검색엔진 최적화 가이드를 살펴보세요. developers.google.com 2.검색엔진 최적화 기본 가이드 (NAVER) https://searchadvisor.naver.com/guide/seo-basic-intro 검색엔진 최적화의 목적 검색엔진 최적화 작업은 여러분의 사이트 내 콘텐츠 정보를 검색엔진이 잘 이해할 수 있도록 정리하는 작업입니다...

etc/SEO 2021.10.06

[CSS] Sprite(스프라이트) Image로 Mostion 만들기

1. CSS Ketframes로 이미지 모션 만들기 한장씩 제작된 이미지가 아닌 한장으로 만들어진 스프라이트 이미지로 모션 구현(모션용 제작 이미지 필요) img 내 position 변경 2. 소스 및 스프라이트 이미지 (Result 탭 에서 확인가능) 3. 스프라이트 이미지 장,단점 서버에 요청을 한 번만 함 (장점) 하나의 이미지 파일만 관리 (장점) 이미지가 크다면 로딩시 오래 걸림 (단점) 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

Front End/CSS 2021.10.06

[SEO]Google Search Console 등록 (구글서치콘솔)

1.구글 서치콘솔에 접속(회원가입필수) https://search.google.com/search-console/about Google Search Console Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다. search.google.com 2.속성 유형 선택(왼쪽상단) 등록하고 싶은 사이트 URL를 등록합니다 올바르게 등록 되었다면 왼쪽상단 사이트 목록에 등록한 사이트 URL을 확인 할수 있습니다. 3.사이트 소유확인(택1) HTML파일 업로드 방식 (직접 파일을 루트 디렉토리에 업로드방식) HTML 태그 불여 넣기(추천) 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

etc/SEO 2021.07.07
반응형