아이티 이알 - IT BLOG - 19 / 3 페이지

자바스크립트 const와 let의 차이점

const와 let은 자바스크립트에서 변수를 선언하는 데 사용되는 키워드로 const와 let의 몇 가지 중요한 차이점을 알아보겠습니다. 자바스크립트 const let 차이 1. 변수 재할당 가능 여부 let으로 선언된 변수는 재할당이 가능하지만 const로 선언된 변수는 재할당이 불가능합니다. let a = 1; a = 2; // b is now equal to 2 const b = 1; b = 2; // TypeError: Assignment to constant variable. 2. 전역 객체 const로 선언된 변수는 전역 객체(window, global)의 프로퍼티가 될 수 있지만 let으로 선언된 변수는 전역 객체의 프로퍼티가 될 수 없습니다. let a = 1; console.log(window.a); // undefined const b = 2; console.log(window.b); // 2 const와 let 변수는 각각의 상황에 맞게 사용해야 하는데요. 상수 값을 선언하거나 변수의 재할당을 막고 싶다면 const를 사용하고, 재할당이 필요한 변수를 선언 할때는 let을 사용해야 합니다.

2023-03-21

티스토리 크롬 브라우저 관련 4가지 오류

티스토리 크롬 브라우저 오류 티스토리 크롬 브라우저 사용 시 접속 오류, 댓글에 댓글 "확인 버튼" 비화성화, 본문과 스킨편집 에디터에 입력이 안 되는 오류 등 4가지 사항을 경험했습니다. 티스토리 접속 안됨 댓글에 댓글 확인 버튼 활성화 안됨 본문 에디터 입력 안됨 스킨 편집 에디터 입력 안됨 이 문제의 원인이 티스토리에 있는 것인지 아니면 브라우저에 있는 것인지 정확히 알 수는 없지만 해결을 위한 몇 가지 방법을 시도해 보았습니다. 브라우저 쿠키 삭제 브라우저 초기화 다른 브라우저(MS엣지)로 변경 우선 크롬 브라우저 쿠키 삭제나 브라우저 초기화를 하면 일시적으로 해결은 됩니다. 그런데 얼마 못 가서 다시 동일한 문제가 발생되었습니다. 수차례 크롬 브라우저의 쿠키를 삭제하거나 브라우저를 초기화하는 방식으로 해결하다 매번 반복하는 것이 효율적이지 못한 것 같아 브라우저를 MS엣지로 변경했습니다. MS엣지 브라우저를 사용한 지 3년정도 되었는데 아직 까지는 아무런 오류나 문제발생 없이 사용하고 있습니다. 참고로 네이버 웨일 브라우저는 크롬과 동일한 문제가 있었습니다.

2023-03-02

워드프레스 필수 플러그인 4종(무조건 설치)

워드프레스 필수 플러그인 4종으로 보안, 성능 향상, SEO 최적화, 백업등 워드프레스 설치 후 무조건적으로 설치해야 하는 추천 플러그인 4가지를 간단하게 요약해 정리해 보았습니다. 워드프레스 필수 플러그인 4종워드프레스 보안 관련 플러그인Wordfence Security의 주요 기능SEO 최적화 플러그인워드프레스 성능 향상 플러그인W3 Total Cache워드프레스 백업 플러그인 워드프레스 필수 플러그인 4종 아래 4가지 플러그인은 워드프레스 설치 후 필수적으로 설치하는 것을 권해드립니다. 보안 관련 플러그인 SEO 최적화 플러그인 성능 향상(캐시 관련) 플러그인 백업 플러그인 워드프레스 보안 관련 플러그인 워드프레스 오픈 소스로 전 세계에서 가장 많은 사람들이 블로그 또는 웹사이트로 이용하고 있는 만큼 보안 취약점이 존재합니다. 워드프레스는 티스토리와 다르게 사용자가 직접 보안 관리를 해주어야 하는데요. 이를 해결하기 위해서 워드프레스 보안 플러그인으로 Wordfence Security, iThemes Security, Sucuri Security 등이 있습니다. 이 중 'Wordfence Security'가 가장 인기가 많고 많은 사용자를 보유하고 있으며 워드프레스 보안 유지를 위해 다양한 기능을 제공하고 있습니다. Wordfence Security의 주요 기능 Wordfence Security는 방화벽을 통해 웹사이트를 보호하고, 악성 코드나 해킹 시도를 차단하며 웹사이트 내에 존재하는 멀웨어를…

2023-06-13

자바스크립트 스크롤 맨 위로 가기 버튼(부드럽게)

자바스크립트 스크롤 맨 위로 가기 버튼, 페이지 중간 또는 하단에서 버튼을 클릭하면 스크롤을 맨 위로 이동시키는 간단한 코드로 window.scrollTo() 메서드를 사용했으며 부드러운 이동을 위해 window.requestAnimationFrame() 메서드를 이용했습니다. 스크롤 맨 위로 가기 버튼 1. html페이지에 아래와 같이 버튼 요소를 추가합니다. <button onclick="backToTop()" id="btn-back-to-top" title="위로 가기">Top</button> 2. CSS파일에 아래 스타일 코드를 입력합니다. #btn-back-to-top { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 9999; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 15px; border-radius: 10px; } #btn-back-to-top:hover { background-color: #333; } 3. 마지막으로 아래 코드를 자바스크립트 파일에 추가해 줍니다. // 스크롤 이벤트 리스너 window.addEventListener('scroll', () => { // 스크롤 위치가 100px 이상일 때 위로 가기 버튼을 보이게 함 if ( document.body.scrollTop > 100 || document.documentElement.scrollTop > 20 ) { document.getElementById('btn-back-to-top').style.display = 'block'; } else { document.getElementById('btn-back-to-top').style.display = 'none'; } }); // 클릭 시 페이지 맨 위로 스크롤 (애니메이션 효과 추가) function backToTop() { const position = document.documentElement.scrollTop || document.body.scrollTop;…

2024-02-03

자바스크립트 나이 계산(만 나이)

자바스크립트 나이 계산 소스로 만 나이를 계산합니다. 만 나이를 계산하는 다양한 방법이 있지만 일반적인 가장 만이 사용되는 코드를 작성해 보았습니다. TIP 참고로 2023년 6월부터 한국도 세는 나이 대신 만 나이를 사용한다고 합니다. 자바스크립트 나이 계산 생년월일을 입력받아 현재 날짜를 기준으로 생일이 지났는지 여부를 판단해 만 나이를 계산하는 자바스크립트 코드 소스입니다. // 생년월일 입력 const birthdate = new Date('2000-01-01'); // 현재 날짜 생성 const now = new Date(); // 생일이 지났는지 체크 let age = now.getFullYear() - birthdate.getFullYear(); if (now.getMonth() < birthdate.getMonth() || (now.getMonth() === birthdate.getMonth() && now.getDate() < birthdate.getDate())) { age--; } console.log(age); 또 다른 방식으로 입력한 생년월일과 현재 날짜 간의 차이를 계산하고 new Date(diffInMs).getTime()을 사용하여 밀리초를 나이로 변환하는 방법입니다. // 생년월일 입력 const birthdate = new Date('2000-01-01'); // 현재 날짜 생성 const now = new Date(); // 차이 계산 (밀리초 단위) const diffInMs = now - birthdate; // 밀리초를 나이로 변환 const ageInMs = new Date(diffInMs).getTime(); // 나이 계산…

2023-02-18

자바스크립트 글자 수 세기(feat. chatGPT)

chatGPT이 작성한 자바스크립트 글자 수 세기 코드입니다. 맛보기로 chatGPT에게 간단한 코드 작성을 요청해 보았는데요 직접 타이핑하는 것보다 빠르게 작성해 주네요. 주석도 달아 주고 하단에는 설명까지 친절하게 알려줍니다. 앞으로 chatGPT에게 코드 작성을 요청하고 수정해서 사용하면 생산성이 높아질 것 같네요. const str = '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세'; const letterCount = str.length; // 글자 수 (공백 포함) const letterhWithoutSpaces = str.replace(/\s+/g, '').length; // 글자 수(공백 제외) const spaceCount = (str.match(/ /g) || []).length; // 공백 수 const wordCount = str.trim().split(/\s+/).length; //단어 수 console.log( `공백포함 글자수: ${letterCount}, 공백제외 글자수: ${letterhWithoutSpaces}, 공백 수 ${spaceCount}, 단어 수: ${wordCount}` ); // 결과 : 공백포함 글자수: 35, 공백제외 글자수: 28, 공백 수 7, 단어 수: 8

2023-02-15

구글 애드센스 계좌 등록 및 추가 방법

구글 애드센스 계좌 등록 및 추가 방법을 설명합니다. 쉽고 간단한지만 비교 확인 차원으로 읽어 주시기 바랍니다. 애드센스 수익금을 지급받으려면 국내에 개설된 계좌(외화계좌 포함)를 애드센스에 등록해야 하는데요. 간단하고 쉬운 절차이지만 불안한 마음에 다른 사람들은 어떻게 했는지 확인하게 됩니다. 구글 애드센스 계좌 등록 방법 간단한 절차이니 이미지만 훑어 보시면 될 것 같습니다. TIP 참고 : 처음 계좌를 등록하는 방법과 새 계좌 추가 방법은 동일합니다. 1. 구글 애드센스 홈으로 접속해 왼쪽 메뉴 중 "결제 정보"를 클릭 후 우측에 보이는 "결제 수단 관리"를 선택해 줍니다. 2. 그리고 "결제 수단 관리"를 선택합니다. 3. "새 은행 송금 세부정보 추가"를 선택합니다. 4. 아래 이미지를 보고 빈칸에 세부 정보를 기입합니다. 입력할 곳은 붉은색으로 표시한 5곳입니다. 첫 번째 수취인 ID는 선택사항으로 입력하지 않습니다. 예금주 영문 이름 영문 은행명 은행 식별 코드(SWIFT) 계좌 번호 계좌 번호 재입력 기본 지급 수단으로 설정 "체크" 저장 버튼 클릭 영문 은행명과 은행 식별 코드(SWIFT)는 각 은행 홈페이지 또는 구글 검색으로 확인합니다. 영문 은행명과 식별…

2023-02-02

구글 블로거 포스팅 제목 태그 h1로 수정하기

구글 블로거 포스팅 제목 태그를 h1로 수정하고 블로그 제목은 메인 홈에서는 h1태그 유지 포스팅이 있는 페이지에서는 div태그로 변경합니다. TIP 아래 설명은 블로거 테마에 따라 다를 수 있으며 해당 내용은 기본 테마 중 "Essential"를 기준으로 작성되었습니다. 블로거에서 제공하는 기본 테마(구형제외)들은 거의 대동소이하니 참고하시길 바랍니다. 구글 블로거 포스팅 제목 태그 포스팅 제목 태그부터 수정해 보도록 하겠습니다. 관리자 페이지로 접속해 메뉴 중 "테마"를 선택합니다. 그리고 "맞춤설정"을 클릭 후 "백업"부터 하고 아래 "HTML편집"을 선택해 줍니다. "HTML편집" 페이지로 이동되면 단축키 "Control + F"키를 누른 후 post-title entry-title를 입력해 찾아줍니다. 대략 줄번호 3866번째 줄에 있으니 참고하세요. 아래 원본 코드를 다음 코드로 수정합니다. <h3 class='post-title entry-title'>  </h3> 수정할 코드 <b:tag expr:name='data:view.isSingleItem ? "h1" : "h3"' class='post-title entry-title'>  </b:tag> 최종적으로 변경된 코드는 아래 이미지와 같습니다. 구글 블로거 블로그 제목 태그 블로그 제목 태그도 수정하도록 하겠습니다. 블로그 제목 태그는 홈(메인) 페이지에서는 h1태그를 그대로 유지하고 포스팅이 있는 페이지에서만 div태그로 변경해 h1태그가 2개가(중복) 되는 것을…

2023-01-10

갤럭시 버즈 맥북 연결 방법(버즈 인식 페어링)

갤럭시 버즈 맥북 연결 방법, 맥북과 삼성 갤럭시 버즈 연결 방법으로 충전기 뚜껑을 닫았다 열여는 방법으로 인식이 되었는데 맥OS 업데이트 후 이 인식이 되지 않아 새로운 방법을 찾았습니다. 갤럭시 버즈 맥북 연결 맥북 시스템 환경 설정을 열고 블루투스를 선택 후 갤럭시 버즈를 양쪽 귀에 끼고 3초간 누르고 있으면 맥북 블루투스 설정 화면에 갤럭시 버즈가 인식된 걸 확인할 수 있습니다. 맥북 시스템 환경설정 갤럭시 버즈 인식 맥북 시스템 환경 설정 열기블루투스 선택버즈를 3초간 누름(양쪽 귀에 낀 상태)버즈 인식 후 연결

2022-10-05

깃허브 계정 만들기 회원 가입하기

깃허브 계정 만들기, 깃허브 계정은 이메일 주소만 있으면 쉽게 가입 후 계정을 만들 수 있습니다. 깃허브 가입 과정을 나열해 보았습니다. 깃허브 계정 만들기 깃허브 홈페이지로 접속 후 상단에 "Sign up" 버튼 선택합니다. 로그인 계정으로 사용할 이메일 입력 후 "Contiuue" 버튼을 클릭 후 비번과 유저명 등을 순서대로 입력합니다. TIP 깃허브 페이지로 블로그를 개설할 예정이라면 사용자 이름(username)이 블로그 주소가 되니 이점을 고려해 사용자 이름을 정하세요! 공지사항 및 업데이트 사항 수신 여부에 "y" 또는 "n"를 입력합니다. 확인을 클릭합니다. 이미지 중 "나선은하를 고르십시오"에서 붉은색으로 표시된 나선은하를 선택해 줍니다. 이 질문은 항상 동일한 것 같습니다. 완료가 되면 하단 "Create account" 버튼을 클릭합니다. 몇 가지 설문에 대해 답변 후 계속 진행합니다. 특별한 의미는 없으니 대충 해도 됩니다. 저는 개인적으로 사용할 거라 무료 버전을 선택했습니다. 마지막으로 이메일로 이동해 확인 코드를 확인 후 입력해 줍니다. 깃허브 가입이 끝났으니 프로필 설정을 하거나 새로운 저장소 또는 깃허브 페이지를 이용한 블로그를 만들 수 있습니다.

2022-09-19