본문 바로가기

웹 개발114

NN 웹사이트 풀스택 개발자. 무엇을 개발하나? 웹에서 프론트 엔드와 백 엔드(서버) 모두를 개발가능한 사람을 말합니다. 혼자서 다 개발하기란 너무나도 힘든 일이지만 혼자서 온전히 하나의 웹사이트나 서비스를 개발할 수 있는 사람을 풀스택개발자라고 합니다. 목차 1. 프론트 엔드 (Front-End) 프론트 엔드는 사용자가 사이트에 들어와서 보여지는 부분 즉, 디자인과 인터페이스 등이 이에 속합니다. 1.1 사용자 인터페이스 (UI) 개발 웹페이지의 인터페이스를 디자인하고 개발하고 사용자 경험(UX)를 개선합니다. 1) HTML - 웹페이지의 구조 2) CSS - 웹페이지의 스타일 3) JavaScript - 웹페이지의 동적 기능을 구현하는 데 필수적인 언어입니다. jQuery : html의 클라이언트사이드 조작을 단순화합니다. jQuery UI : G.. 2024. 4. 26.
NN 구글 샌드박스 기간과 단축 하는 방법 구글 검색엔진에 블로그가 노출되지 않는 구글 샌드박스 기간에 대해 알아보고 어떻게 대처하는 것이 좋을지 알려드리겠습니다. 목차 1. 구글 샌드박스란? 1.1. 샌드박스 기간 구글 샌드박스 기간은 구글 검색엔진에 블로그를 노출 시키기 전에 일정 기간 동안 등록한 사이트를 파악하는 기간을 말합니다. 구글은 공식적으로 인정하고 있지는 않지만 확실히 평가하는 기간은 존재 하는 것 같습니다. 이 기간 동안은 크롤링은 되지만 색인 생성이 되지 않는 등 구글 검색엔진 결과 노출이 거의 없을 수도 있습니다. 많은 사람들이 샌드박스 기간을 3~6개월 정도로 예상을 하고 있고 이 기간은 사이트에서 다루는 주제, 콘텐츠, 키워드 경쟁 등에 따라 달라질 수 있습니다. 2. 샌드박스 기간 단축 방법 구글이 샌드박스 기간을 인정.. 2024. 4. 24.
NN 구글 SEO 최적화 된 블로그 글쓰기 구글 검색에 상위에 노출되기 위해서는 구글 검색엔진이 잘 인식할 수 있는 구조화된 양질의 글이 필요합니다. 구글 검색 결과 상위에 올라갈 수 있는 콘텐츠를 어떻게 작성하는지 알아보겠습니다. 목차 1. SEO 키워드 콘텐츠를 작성하기 전에 가장 우선 시 되어야 할 것은 주요 토픽(주제)과 핵심 키워드(핵심 단어)를 찾는 것입니다. 어떤 글을 어떻게 명확하게 전달하느냐가 핵심입니다. ▶ 메인 키워드 / 서브키워드를 정합니다. ▶ 제목에 키워드가 들어가야하고 첫 문단과 마지막 문단에 들어가면 좋습니다. ▶ 키워드 볼륨량 - 검색자들이 그 키워드를 얼마나 많이 검색하느냐 나타내는 수치입니다. 볼륨량을 확인하고 싶으시면 Keywordtool.io 같은 툴을 이용하시면 됩니다. 제목 ▶ 메인과 서브 키워드를 포함한.. 2024. 4. 15.
NN 구글 서치 콘솔 페이지 색인 문제 원인과 해결방법 색인 생성이란 구글에서 페이지를 찾아 구글의 색인에 배치하는 것을 말합니다. 색인 생성이 되야 구글 검색결과에 노출됩니다. 색인 생성이 되지 않는 이유와 해결방법을 알아보도록 하겠습니다. 목차 1. 발견됨 - 현재 색인이 생성되지 않음 원인 ▶ 서치 콘솔 설명 - 일반적으로 구글이 URL을 크롤링 하려고 했지만 사이트의 과부하 상태가 될 수 있기 때문에 일정을 변경한 경우입니다. ▶ URL 변경 등 ▶ 첨부한 사진의 수가 많거나 용량이 큰 경우 구글이 크롤링을 뒤로 연기한 경우 해결방법 ▶ 이미지 파일 크기와 수를 줄임 ▶ 색인 요청 - 색인 생성 요청을 다시 해 보는 방법도 해보시길 바랍니다. 2. 크롤링됨 - 현재 색인이 생성되지 않음 원인 ▶ 서치 콘솔 설명 - 구글이 이 페이지를 크롤링했으나 색인.. 2024. 4. 12.
NN Javascript | 사용자 정의 객체와 이벤트 객체 자바스크립트에서 이벤트 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공합니다. 이벤트가 발생하면 객체는 동적으로 생성되며, 이벤트 핸들러에게 암묵적으로 인자를 전달하게 됩니다. 목차 1. 객체 객체 구성 요소 ▶ 속성 (Property) — 값을 담고 있는 정보 ▶ 메서드 (Method) — 객체 사용 방법 var kim = { firstName : "John"; lastName : "Doe"; info : function() { alert(firstName + lastName); }; }; ▶ 중괄호로 묶는다. ▶ 키와 값은 : (콜론) 을 사용합니다. 2. 사용자 정의 객체 여러 정보를 하나로 묶어 사용할 때 객체생성 ▶ 리터럴 표기법 : var a= 10; ▶ 생성자 함수 사용하여.. 2024. 4. 10.
NN Javascript | 자바스크립트 객체 (내장, DOM, BOM) 자바스크립트 객체 중 내장객체와 문서객체모델(DOM), 그리고 브라우저 객체 모델(BOM)에 대해 살펴보고 하위 객체들의 사용법을 간단하게 정리해 보겠습니다. 목차 1. 내장객체 생성 var 참조변수 = new Object(); 날짜정보객체 var 참조변수 = new Date(); toLacaleString() : 현재날짜와 시간정보 로컬형식으로 반환 수학객체 Math객체는 따로 new키워드로 인스턴스를 생성하지 않고 사용합니다. Math.random() : 무작위수 생성 배열객체 var 참조변수 = new Array(); 문자열객체 var 참조변수 = new String(); indexOf() : String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환 match().. 2024. 4. 5.
NN Javascript | 자바스크립트 기초 문법 자바스크립트는 HTML의 부족한 점을 채워주고 웹사이트를 동적으로 만들 수 있습니다. 자바스크립트를 공부하기에 앞서 자바스크립트 특징과 문법 등 기초적인 내용을 정리해 봤습니다. 목차 1. 자바스크립트란 ? ECMA ▶ 기술 및 통신업계 국제적 비영리 표준기관 ▶ ECMAScript6 - ES6. ECMA 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 HTML에서 CSS, JavaScript 호출 ▶ HTML — 보통 안에서 CSS 호출, 마지막 자바스크립트 호출 ▶ CSS — ▶ JavaScript — 자바스크립트가 할 수 있는 일 ▶ 웹 사이트를 동적으로 만들 수 있습니다. ▶ 웹 브라우저에서 실행되는 프로그램을 만들 수 있습니다. ▶ 서버를 구성하고 서버용 프로그램을 만들 수 있습니다. 자바.. 2024. 4. 3.
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.

티스토리툴바