WEB.DEV(33)
-
자바스크립트 화살표 함수(Arrow function)
화살표 함수(Arrow function)는 자바스크립트 ES6 버전에 도입된 기능중의 하나로 일반 함수에 비해 깔끔하고 짧은 방식으로 생성할 수 있는 기능입니다. (param1, param2, param3) => {statements(s)} 일반 함수 function hello() { console.log(‘Hello world’); } 화살표 함수 const hello = () => {console.log(‘Hello world’);} 매개변수가 있을 경우 괄호 안에 전달할수 있습니다. 화살표 함수의 경우 한줄로 작성되어 있을 경우 return 과 {}(중괄호)를 생략할수 있습니다. const sum = (a, b) => a + b; 매개변수가 한개일 경우에는 ()(괄호)를 생략할수 있습니다. cons..
2022.06.27 -
자바스크립트 배열 사용
안녕하세요. 이번 포스팅에서는 자바스크립트 배열 사용에 대해서 알아 보겠습니다. 아래에 있는 메소드 외에 또다른 메소드에 대해서 아시는 분이 있으시다면 댓글을 달아주시면 감사하겠습니다. 1. 배열에서 중복된 값 제거 const arr = [1, 2, 3, 2, 4, 1, 5]; // filter를 이용한 방법 const filterArr = arr.filter((item, idx) => { return arr.indexOf(item) === idx; }); console.log(filterArr); // 1,2, 3, 4, 5 // Set을 이용한 방법 const filterArr = […new Set(arr)]; console.log(filterArr); // 1, 2, 3, 4, 5 2. 소수를 정수..
2022.06.26 -
NextJS에서 gtag를 이용한 GA 이벤트 등록하기
안녕하세요. 이전 포스팅에서는 react-ga를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 gtag를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아보겠습니다. 먼저 _app.jsx에 next/head를 추가하고 gtag 스크립트를 추가해주겠습니다. // _app.jsx import Head from 'next/head' function MyApp({Component, pageProps, err}) { return } export default MyApp 그리고 페이지가 이동 할때 마다 PageView 이벤트를 발생하게 하기 위해서 router.events를 추가해서 PageView 이벤트를 추가해주도록 하겠습니다. ... function MyApp({Compon..
2022.04.26 -
NextJS에서 react-ga를 이용해서 이벤트 등록하기
안녕하세요. 이번 포스팅에서 NextJS에서 GA 이벤트 등록에 대해서 이야기해보겠습니다. react-ga를 이용해서 GA 이벤트를 등록하는 방법이 있습니다. ga.jsx에 react-ga 초기화를 하고 GA event를 위한 함수를 작업해주겠습니다. ReactGA.initialize의 첫번째 param으로 GA 추적 ID를 넣어주고 두번재 param에 옵션 값을 넣어줍니다. 저는 실서비스가 아닐 경우에 디버깅을 위한 옵션을 추가해주었습니다. // ga.jsx import ReactGA from 'react-ga'; export function init() { ReactGA.initialize(process.env.GA_TRACKING_ID, { debug: process.env.Environment !..
2022.04.25 -
[HTML/JS/CSS] contenteditable을 이용한 에디터 폰트 변경하기
안녕하세요. 이번 포스팅에서는 이전 포스팅에서 폰트 변경에 대해서 여쭤보시는 분이 계셔서 추가로 정보를 드리기 위한 포스팅입니다. [HTML/JS/CSS] contenteditable을 이용한 editor 만들기 안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl dev-bak.tistory.com 먼저 기존의 코드에서 폰트 사이즈와 폰트 글꼴을 선택하기 위한 Select와 폰트를 추가를 해줍니다.(기존 코드는 이전 포스팅을 참고해주세요) 폰트 추가(저는 일단 구글 폰트에 등록된 폰트를 추가했습니다) sel..
2021.11.12 -
[HTML/JS/CSS] contenteditable에 clipboard 내용 텍스트만 입력하기
이전 포스팅에서 contenteditable을 이용해서 에디터를 만들기를 해보았습니다. [HTML/JS/CSS] contenteditable을 이용한 editor 만들기 안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl dev-bak.tistory.com contenteditable로 생성한 에디터에 다른곳에 적혀 있는 텍스트를 복사해서 붙여넣으면 복사한 곳의 스타일이 그대로 복사되서 붙여넣어지는 것을 볼수가 있습니다. 이번 포스팅에서 스타일이 그대로 복사되는걸 원치 않을 경우 텍스트만 삽입되게 하려면 어..
2021.03.24