본문 바로가기

웹 개발116

NN Javascript | 비동기 처리 (콜백, 프로미스, await) 각 함수와 코드가 순차적으로 실행되는 것을 동기(Synchronous)라고 합니다. 처리가 늦어지는 경우 성능에 문제가 될 수 있기 때문에 여러 작업을 동시에 처리하는 비동기(Asynchronous) 방식이 필요합니다. 비동기 방식은 실행 순서를 장담할 수 없기 때문에 비동기 방식에서 순서를 제어하는 방법이 콜백함수, Promise, async/await 입니다. 목차 Web API 자바스크립트의 비동기 실행이 아닌 웹 브라우저 단에서 비동기적 실행을 가능하게 만든 것입니다. Web API는 타이머, 네트워크, 파일입출력, 이벤트 처리 등 브라우저에서 제공하는 API를 말합니다. 종류 - DOM / XMLHttpRequest, setTimeout() 등 콜백함수 소개 ▶ 방식 - 함수의 매개변수 자체에 .. 2024. 4. 1.
NN 구글블로그 | 블로그스팟에 애드핏 광고 삽입 구글블로그 블로거에 광고를 삽입해 보겠습니다. 애드핏에서 사이즈별로 만든 광고를 블로그스팟의 메인, 사이드바, 푸터, 본문 상단/하단 등에 광고를 넣는 방법을 설명해 드립니다. 목차 본문 광고 삽입 포스트 본문 상하단에 애드핏 광고를 넣어보겠습니다. 여러가지 방법이 있습니다. 테마에 따라 적용이 되는 방법이 다르기 때문에 본인 테마에 적용되는 방법으로 선택하시면 됩니다. [테마] 에서 광고 삽입 ▶ 관리자 메뉴 [테마] 를 누르고 맞춤 설정 옆에 드랍다운 화살표를 누릅니다. [HTML 편집] 버튼을 누릅니다. ▶ 광고 위치 - 태그를 Ctrl + F를 누르고 찾습니다. (보통 2~3개 정도 검색됩니다) 이 태그 앞에 넣으면 본문 상단, 뒤에 넣으면 본문 하단에 광고가 붙는다고 합니다. ▶ 광고 크기 - .. 2024. 3. 29.
NN Javascript | jQuery 유용한 플러그인과 라이브러리 소개 사용자 인터페이스 개발을 위한 jQuery UI 플러그인 이외에도 유용한 플러그인과 라이브러리가 많습니다. 이미지 관련, 텍스트 관련, 모달 창 관련, 날짜 / 차트 관련 등 분류해서 정리해 봤습니다. 목차 이미지 / 동영상 슬라이더 ▶ Slick Carousel - 이미지 슬라이더로 반응형이며 터치 기능을 지원하는 플러그인입니다. 캐러셀이란 '회전목마'란 뜻으로 돌아가며 슬라이드가 보여지는 방식입니다. ▶ Owl Carousel - 반응형 이미지 슬라이더와 캐러셀 구현 ▶ jQRangeSlider - 날짜, 시간, 숫자 등 사용자가 범위를 선택할 수 있는 슬라이더 ▶ Swiper.js - 모바일 터치 슬라이더 플러그인으로 이미지 갤러리, 배너 슬라이드쇼 등의 기능 애니메이션 ▶ Animate.css -.. 2024. 3. 25.
NN Javascript | jQuery UI 소개와 사용방법 jQuery UI는 jQuery를 기반으로 다양한 컴포넌트와 위젯을 모아놓은 사용자 인터페이스 개발을 위한 라이브러리입니다. jQuery UI를 사용하면 버튼, 다이얼로그, 탭, 슬라이더, 프로그레스바 등 다양한 UI요소를 손쉽게 구현할 수 있습니다. jQuery UI는 어떤 컴포넌트들이 있는지 살펴볼게요. 목차 jQuery UI 기능 ▶ 위젯, 효과, 상호작용 사용방법 ▶ jQuery추가, jQuery UI 추가 jQuery UI 위젯 ▶ jQuery UI 아코디언 - 클릭한 대상이 확대되고 나머지 메뉴는 축소 시키는 효과입니다. ▶ jQuery UI 폼 ▶ jQuery UI 탭 - 웹 페이지에서 탭 기능을 구현하는 사용되는 플러그인입니다. jQuery UI Demos | jQuery UI jQuery.. 2024. 3. 22.
NN 파일업로드 dropzone.js 으로 손쉽게 구현하기 파일업로드를 이미 구현되어있는 dropzone 자바스크립트 라이브러리를 사용하여 가장 쉽게 구현하는 방법을 정리해 드릴게요. 추가로 웹사이트에 간단하게 적용시키는 것까지 해보겠습니다. 목차  서버 / 로컬서버 WAMP (Window, Apache, MySQL, PHP)파일업로드를 구현하기 위해서는 서버가 있어야합니다. 업로드 후 서버단에서 php로 파일 처리를 해야하기 때문이죠. 로컬서버로 대신하셔도 됩니다.   ▶ bitnami - wamp 환경을 만들어주는 bitnami 는 업데이트가 종료 되었습니다.  Dropzone 라이브러리  CDN링크로 사용하시려면 cdn 주소는 다음과 같습니다. 링크가 포함된 html 소스는 아래에 다시 나오기 때문에 넘어가셔도 됩니다.  ▶ Javascript ▶ CSS .. 2024. 3. 20.
NN 구글애드센스 | 새 사이트 추가하는 방법 구글 애드센스에 새로운 사이트를 추가하는 방법을 정리합니다. 구글 블로그 (Blogger) 를 기준으로 추가하고 ads.txt 설정해 보겠습니다. 목차 애드센스에 사이트 추가 애드센스 ▶ 구글 애드센스로 이동해 좌측메뉴에서 [사이트] 메뉴를 클릭합니다. ▶ 우측메뉴에 [새 사이트] 버튼을 눌러주세요. ▶ 팝업창에서 본인의 구글 블로그 주소를 입력하고 [저장]을 클릭합니다. ▶ [검토 요청] 버튼을 클릭합니다. 구글 블로그에 애드센스 코드 추가 코드 가져오기 ▶ 애드센스 좌측 메뉴 [광고] 를 클릭합니다. ▶ 우측메뉴에서 [코드 가져오기] 를 다시 클릭합니다. ▶ [복사하기] 버튼을 눌러 애드센스 코드를 복사합니다. 아래와 같은 형태의 코드입니다. 본인아이디 부분에 숫자가 들어갑니다. 코드 붙여넣기 ▶ 구.. 2024. 2. 8.
NN 구글블로그 | Blogger(블로그스팟) 애드센스 신청 전 할일 구글 블로그인 블로거(블로그스팟)에서 애드센스를 신청 전 블로그스팟에서 설정해야 할 항목에 대한 글입니다. 블로그스팟에서 설정은 SEO와 관계가 있기 때문에 꼭 확인하시고 설정하시기 바랍니다. 목차 구글 블로그 설정 기본 ▶ 설명 - 블로그에 대한 소개글을 작성합니다. 당연히 올린 글을 기반으로 주제와 맞게 설정하는 것이 좋습니다. ▶ Google 애널리틱스 측정 ID - 블로그를 추가하는 경우 애널리틱스에서 속성만들기로 추가하면 됩니다. 구글 애널리틱스 측정 ID는 "G-xxxx" 형태입니다. ▶ 파비콘 - 100KB 미만의 정사각형 이미지입니다. 개인정보 보호 ▶ 검색엔진에 표시됨 - "검색엔진에서 내 블로그를 찾을 수 있도록 허용" -> 초록색 불이 들어오면 on입니다. HTTPS ▶ HTTPS 리.. 2024. 2. 5.
NN 구글블로그 | 블로거 자동 목차 만들기 구글블로그 블로거(블로그스팟) 글 상단에 h태그를 읽어들여 자동으로 목차를 만드는 법을 설명드리려고 합니다. 목차 Javascript 포스팅 한 글 본문에 h 제목태그 요소를 읽어드리는 자바스크립트 함수 부분입니다. 자바스크립크 삽입 ▶ 블로거 관리자 좌측메뉴 [테마] - [맞춤설정] 옆 화살표 - HTML 편집 ▶ 사이에 아래 코드를 복사해서 붙여넣기 합니다. CSS 목차의 모양을 만드는 CSS 부분입니다. 원하시는대로 수정해서 사용하시면 됩니다. CSS 삽입 ▶ 블로거 관리자 좌측메뉴 [테마] - [맞춤설정] 옆 화살표 - HTML 편집 ▶ Ctrl + F 를 눌러 를 검색합니다. ]]> 태그 바로 위에 아래 코드를 삽입합니다. /* 자동목차 디자인 */ .avsTOC { border: 1px sol.. 2024. 2. 1.
NN 구글블로그 | 검색 엔진 등록 및 사이트맵 제출 구글블로그를 만든 뒤 구글, 네이버, 다음 등의 검색 엔진에 사이트를 등록하는 방법과 사이트맵 및 rss를 제출하는 방법을 정리해 봤어요. 목차 구글 서치 콘솔 사이트 등록 1) 구글 서치 콘솔 (https://search.google.com/) 로 이동합니다. 2) 좌측 메뉴에서 도메인 [+ 속성 추가] 버튼을 클릭합니다. 3) 2차 도메인이나 하위 도메인을 설정하신 분들은 좌측 [도메인]에 블로그스팟 도메인을 입력합니다. 다른 도메인이 없는 경우 우측 [URL 접두어] 에 URL를 입력하시면 됩니다. ▶ 구글 블로그와 구글 서치 콘솔 계정이 같은 경우 소유권 확인이 자동으로 확인됩니다. ▶ 구글 블로그와 구글 서치 콘솔 계정이 다른 경우 소유권 확인 방법 중 HTML태그를 선택 메타태그 복사 버튼을 .. 2024. 1. 29.

티스토리툴바