본문 바로가기
반응형

전체 글

 (96)
구글 애널리틱스 등록 방법! 오늘은 구글 애널리틱스를 티스토리와 연동하는 방법에 대해 소개해보려고 합니다! 티스토리 블로그 같은 경우에는 통계가 너무 단순하고 블로그 마다 방문자 수를 확인하기 위해선 각각의 블로그를 들어가서 확인해야 되는 번거로움이 있었습니다. 그래서 블로그에 들어오는 사용자의 성별, 연령대, 국적, 재방문율, 머무르는 시간, 인기글, 인기 키워드 등을 분석해주는 사이트 분석 툴입니다!구글 애널리틱스 시작 ✨1. 시작하기아래 링크를 통해 구글 애널리틱스로 이동 후 측정 시작 버튼을 눌러주세요!https://analytics.google.com/analytics/  2. 계정 생성계정 이름: 블로그 주소 / 이름계정 데이터 공유 설정 : 모두 체크완료가 됐다면 다음 버튼을 눌러주세요!   3. 계정 생성속성 이름 :..
구글 서치콘솔 등록 방법! 구글 서치 콘솔 등록 방법에 대해서 소개해보려고 합니다. 티스토리 블로그가 처음인 저로서는 구글 애널리틱스(Google Analytics)나 구글 서치콘솔(Google Search Console)에 등록 방법에 대해서 잘 모르기 때문에 블로그로 정리하면서 알아가보려고 합니다. 블로그 글이 하나라도 있다면 구글 검색결과에 노출될 수 있다고 하니 당장 해주는 게 좋겠죠~!! 등록하러 가볼까요~!구글 서치 콘솔 플러그인1. 계정 연결하기티스토리 플러그인 중 구글 서치콘솔을 클릭하여 계정 연결을 해줍니다. 2. 계정 엑세스평소 사용하시는 구글 계정 연결을 연결하고 모든 체크박스 체크 후 계속 버튼을 눌러줍니다. 구글 서치 콘솔 등록 방법 1. 티스토리 주소 확인구글 서치 콘솔에 접속하시면 보이는 것과 같이 계정..
[TIL] 24.07.18 Swiper 슬라이드 Swiper ✨ 1. Swiper 란?Swiper는 하드웨어 가속 전환과 놀라운 네이티드 동작을 갖춘 무료 오픈 소스 슬라이더입니다. 사용 이유 ✨ 1. 간단한 사용법HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있어서 사용하게 되었습니다! 2. 다양한 슬라이드 유형Swiper는 일반적인 이미지 슬라이드뿐만 아니라 텍스트, 비디오, 오디오 등 다양한 유형의 슬라이드를 지원합니다! 3. 반응형 디자인반응형을 지원하기 때문에 데스크탑, 태블릿, 모바일 기기에서 사용자 경험을 제공할 수 있습니다!  사용 방법 📖1. NPM에서 설치NPM에서 Swiper를 설치할 수 있습니다.$ npm install swiper 기본적으로 Swiper는 추가 모듈 없이 핵심 버전만 내보..
[TIL] 24.07.17 쓰로틀링(성능 측정) Throttling 이란? 📖짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법입니다.   1. 쓰로틀링 (throttling)일정 주 동안 이벤트 핸들러를 한 번만 실행하도록 제어하는 것 일정한 간격으로 한 번만 실행하는 기법이기 때문에 이벤트 처리를 제어하고, 성능 향상을 할 수 있습니다.예를 들면 스크롤 이벤트가 발생할 때 이벤트가 너무 많이 발생하면 성능 저하 문제가 생길 수 있기 때문에 이때 쓰로틀링을 적용하면 일정 주기 동안 이벤트를 제어하기 때문에 성능을 개선할 수 있습니다. 그래서 팀 소개 프로젝트에 쓰로틀링을 적용해보려고 합니다. 사용 방법실제로 작성한 코드 입니다.const throttleCallback = () => { const scro..
[TIL] 24.07.16 코딩 컨벤션이란? 오늘 공부한 것 📖 1. 코딩 컨벤션코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(하나의 작성 표준)입니다.   대표적인 네이밍 컨벤션 소개 스네이크 케이스 (snake_case)더보기- 모든 철자를 소문자로 쓰고 단어 사이에 언더스코어(_)를 표기하는 방식입니다.ex) user_id,  create_at 등등 카멜 케이스 (camelCase)더보기- 맨 앞 단어의 첫 철자를 소문자로 시작하되, 그 다음 이어지는 단어의 첫 철자를 대문자로 표기하기 방식입니다.- 자바, 자바스크립트, 타입스크립트 등에서 많이 쓰이며, 변수 메서드 함수 이름 등에 많이 사용 됩니다!ex) userId, createAt 등등  케밥 케이스 (kebab-case)더보기- 모든 철자를 소문자..
[TIL] 24.07.15 오늘 배운 것 📖1. 팀 소개 페이지 디자인1. 팀 소개 페이지 제작 과제 (7/19일까지) - 주제 선택 (심플한 게 최고!!) - 추가하고 싶은 기능 선택 (이미지 슬라이드, 댓글, 이모지 등등) - 역할 분담 - 와이어프레임 작성2. 맡은 역할 - 이미지 슬라이드 - 와이어프레임 제작 (Figma) 어려웠던 점 ❓1. 역할 분담지금까진 혼자서만 개발을 하다보니까 팀 단위로 프로젝트를 진행할 때 역할을 나누는 데 있어서 고민이 정말 많았다.한 페이지를 만드는 데 있어서 어디서부터 어디까지 나눠야 할 지도 고민이 정말 많이 됐다.그래서 서로 가장 잘 할 수 있는 부분들을 먼저 확인 후 역할을 조금씩 나누고 있는 중이다.아직 정확히 다 나누진 못했다,,,ㅜㅜㅜㅜ2. 와이어프레임 디자인피그마를 이용해 와..
[TIL] 24.07.09 백준 10844번 js 내가 푼 문제 📖 내가 작성한 코드 💻let input = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" : __dirname+"/input.txt") .toString() .trim()let number = +inputlet mod = 1000000000const memo = Array.from({length: 10}, () => 1 )memo[0] = 0for(let i=1; i (a + c) % mod, 0)); 어려웠던 점 ❓1. 점화식 이후 코드 작성까지 연결이 잘 안 된 것memo[n] = memo[n-1]+1, memo[n-1]-1 처음에 세운 점화식이다!! 그러나,, 이후 코딩까지 생각해내지는 못했다..
[TIL] 24.07.08 내가 푼 문제 📖내가 작성한 코드 💻let [buy, ...input] = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" : __dirname+"/input.txt") .toString() .trim() .split('\n')const N = +buyconst cardPacks = input[0].split(' ').map(Number)const memo = Array.from({length: N + 1}, () => 0)for(let i=1; i 어려웠던 점 ❓1. 최댓값 비교하기for(let i=1; i 최댓값 비교하는 부분이 생각해 내기가 정말로 어려웠다. 1시간을 넘게 고민해 봤지만 해결방법이 떠오르질 않..

티스토리툴바