반응형

Front-end 개발 50

[React] React 에서 lottie 사용하기 (함수형)

1. 라이브러리 설치하기 npm을 이용하여 react-lottie 라이브러리를 설치합니다. npm을 이용하여 @lottiefiles/react-lottie-player 라이브러리를 설치합니다. npm install --save react-lottie //예제1 npm install --save @lottiefiles/react-lottie-player //예제2 yarn add @lottiefiles/react-lottie-player //예제2 설치후 @lottiefiles/react-lottie-player를 import 시켜줍니다. import Lottie from 'react-lottie'; //예제1 import { Player } from '@lottiefiles/react-lottie-pla..

Front End/React 2022.10.13

[React] export default 와 export 차이점

1.export default 선언된 모듈에 하나의 변수,클래스,함수만 export할수 있다.(한개) import할때는 원하는 이름으로 가능하다. /* Main.js */ export default Main; /* App.js */ import Main from "./main.js" 2.export(=named export) 선언된 모듈에 변수,클래스,함수 export할수 있다.(여러개) import할때는 원하는 이름으로 불가능하다. import 시 {}안에 export 된 이름과 동일하게 해야 한다. /* Main.js */ export let Run1 = () =>{ console.log(1); } function Run2(){ console.log(2); } export Run2, /* App.js..

Front End/React 2022.10.07

[React] 리액트에 구글애널리틱스(GA) 적용하기

1.구글 애널리틱스 계정(ID) 발급 받기 발급 시 'Google 애널리틱스 4 속성과 유니버설 애널리틱스 속성 둘 다 만들기'로 선택하기 관리 → 속성설정 → 추적ID → UA-XXXXXXXX-X 확인하기 2.useEffect() Hooks을 사용하여 GA설정 하기 https://www.npmjs.com/package/react-ga $ npm install react-ga --save //react-ga Module 설치하기 import React, { useEffect } from "react"; import ReactGA from "react-ga"; export default function Example() { const ga_setting = () => { const pathName = wi..

Front End/React 2022.09.28

[CSS] console.log Style&Img (콘솔창 스타일&이미지 적용하기)

1. console.log TEXT 노출, CSS 적용 하기 개발 작업시 가장 많이 사용하지만 console 을 이용하여 콘솔창 꾸미기가 가능합니다. 미리 스타일을 지정하고 포매팅 합니다. const font_style=` font-family:verdana; color:#FF6D00; font-size:20px; background:black; background-color:#9C27B0; line-height:1.3; padding:0; border-radius:0; `; console.log('%chttps://ttowa.tistory.com/', font_style );​​ console.log 관호 안에 텍스트와 스타일을 지정 합니다. console.log('%cttowa.tistory.com'..

Front End/CSS 2022.01.24

[CSS] 모바일 폰트 크기 조절(text-size-adjust)

1. text-size-adjust 란? Viewport가 변경되면 폰트 사이즈가 변경됩니다. (아이폰의 경우 Viewport가 변경되면 자동으로 폰트를 조절) 반응형 웹사이트 제작시 폰트가 원치 않게(크거나 작음) 보이는 경우가 있습니다. 이를 방지하기 위한 방법으로 폰트를 고정 합니다. (text-size-adjust : none) 비표준 속성이므로 벤더 프리픽스를 사용 해야 합니다. Value Description auto 화면 폭에 맞게 크기가 자동으로 조절됩니다.(device별로 크기가 다를수 있어서 비추천) none(기본값) 화면 크기에 따라 자동조절 하지 않는다. percentage (%) 퍼센트(%)로 크기를 조절합니다. (모든 device에서 동일한 텍스트 크기 부여 가능) inherit..

Front End/CSS 2022.01.18

[JS] 이미지 비교 슬라이드(Image Comparison Slider)

1. 사용 방법 비교 할 이미지 2장을 HTML 내 추가 하여 줍니다. ​ 비교 슬라이드 영역은 웹, 모바일(반응형)에서 사용 가능합니다. 참고 사이트 : before-after.js GitHub - jotform/before-after.js: An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ - GitHub - jotform/before-after.js: An Image Comparision Slider: See an examp..

[CSS] 페이지 내 특정 영역만 print(프린트) 하기

1. CSS(미디어쿼리) 사용하여 브라우저 내 특정 영역만 출력(PDF) 하기 미디어 쿼리 print(프린트) 선언하기 @media print { //프린트 출력시 비노출 영역 추가하기 #header, #sec_2{display:none} }​ background(백 그라운드)사용 시 해당 속성을 보여 주게 합니다. @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } ※지원 가능 브라우저를 체크하세요. (IE, Firefox에서는 인쇄창에서 배경포함 인쇄를 선택 해야 보여집니다.) https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-a..

Front End/CSS 2021.12.27

[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(); // 영수 /..

반응형