본문 바로가기

노드JS(Node.js) 윈도우 설치(Install)방법 서버 설치에 앞서 개인 PC에서 테스트 해볼 수 있도록 윈도우 버전을 먼저 설치합니다. 1. node.js 설치를 위해서 https://nodejs.org/en/ 사이트로 접속을 합니다. 2. 위 2019.02.08일기준 10.15.1 LTS 버전을 다운로드 받습니다. 기본으로 계속 Next 클릭하시면 됩니다. 3. 설치완료되면 [윈도우키 + R] , cmd 입력 후 엔터 4. CMD 도스 창에서 node -v 입력하고 엔터 v10.15.1 처럼 나오면 제대로 설치완료 5. 간단한 프로그램 실습 1. "node" 입력 후 엔터 ">" 가 자동으로 나오면 여기에 2. "console.log('hello node');" 입력 후 엔터 hello node 출력3. ".exit" 입력 후 엔터 종료 위와 같이 ..
웹사이트 벤치마킹(해외 웹디자인어워드, 해외 유명사이트) 각종 해외 어워드 AWWWARDS https://www.awwwards.com해외 웹디자인 어워드. 최고의 웹사이트 CSSDA https://www.cssdesignawards.com해외 웹디자인 어워드 thebestdesignshttps://www.thebestdesigns.com미니멀리즘, 세계 유명 디자이너 정보 공유 CSS Winner https://www.csswinner.com해외 웹디자인 어워드, 퍼블리셔를 위한 사이트 매일 두개의 사이트 중 투표 Design Licks https://www.designlicks.com해외 웹디자인 어워드 straightline bookmark http://bm.straightline.jp일본 웹디자인 어워드 디자인 사이트 핀터레스트 Pinteresthttp..
캐노니컬(Canonical) 대표/표준 URL 주소 정의 : 웹페이지 내 삽입된 링크에 대해 「이 링크는 연관된 웹페이지가 아니므로 크롤링* 시 참고하지 마세요」라고 검색엔진에게 알려주는 것입니다. No Follow 이해하기 No follow속성은 웹페이지 단위로 사용되기도 하고, 웹페이지 내 링크에 대한 크롤링*을 하지 말라는 역할로 사용됩니다. 웹페이지 단위로 사용될 경우 해당 웹페이지를 검색엔진에 노출하지 말라고 지시하는 역할로 사용됩니다. 웹페이지 내 링크에 대해 속성을 사용해야 하는 이유는 링크를 통해 연결된 웹페이지의 분석 결과와 웹페이지 분석 결과가 합산되어 검색엔진 사이트 노출 순위에 영향을 미치기 때문입니다. 웹페이지 내 링크에 대해 No follow 속성을 사용하는 경우는 다음과 같습니다. 1. 신뢰 할 수 없는 웹페이지로 연결: 게시판..
오픈그래프(Open Graph) meta og 태그(tag)와 트위터 카드(Twitter Cards) 정의 : 웹페이지를 SNS로 공유 할 때 보이는 미리보기를 설정합니다. Open Graph태그 이해하기 SNS미리보기 화면은 평소에 친구나 지인에게 공유를 하면서 보셨으리라고 생각되는데요! 웹페이지의 공유 버튼 혹은 URL을 복사하여 SNS로 콘텐츠를 공유합니다. 이때, 해당 콘텐츠의 요약내용이 “SNS에 게시되는데 최적화된 데이터”를 가지고 갈 수 있도록 설정하는 것입니다. 공유 할 때 미리보기가 이상하다면 클릭하지 않을 확률이 높겠죠? 최적화 된 데이터로 표시될 수 있도록 태그를 설정해야합니다. 태그사용법 Naver 블로그, 카카오톡 미리보기 설정 ->콘텐츠 제목 ->웹페이지 URL ->웹페이지 타입(blog, website 등) ->표시되는 이미지 ->웹사이트 이름(URL과 다름) ->웹페이지 설명..
검색엔진 최적화 링크빌딩(백링크) 문답#1 링크 빌딩이란? 링크빌딩은 외부에서 신규 링크(백 링크)를 가져 오는 것을 말합니다. 백링크의 수는 구글순위와 높은 관련도를 보입니다. 더 자세한 링크빌딩(백링크)의 정의가 궁금하시면 여기(검색엔진 최적화 / ③ 링크빌딩)를 클릭해주세요. 링크빌딩(백링크)에 관한 몇 가지 문답을 해보도록 하겠습니다. 1. Off Page SEO 중 백링크의 중요도는 On Page SEO와 비교할 때 어떤가? 백링크는 On Page SEO(온페이지 검색엔진최적화)의 Html 요소인 메타태그(Meta Tag), 메타디스크립션(Meta Description) 등 보다 구글 페이지랭크에 훨씬 높은 점수를 획득할 수 있습니다. SEO분류가 궁금하시면 여기 (검색엔진 최적화 / 분류)를 클릭하세요. 2. 웹사이트 백링크는 링크가 ..
검색엔진최적화(SEO) 소셜미디어 지원 및 최적화 정의 : 웹페이지가 소셜미디어와 연결되었는지를 카운팅합니다. (소셜미디어 최적화 부분은 별도 오픈그라프&트위터 미리보기 섹션에서 포스팅 합니다.) Social Media Check 이해하기 SNS는 Social Networking Service의 약자로, 사용자 간의 자유로운 정보 공유, 인맥 확대 등 사회적 관계를 생성하고 강화시켜주는 온라인 플랫폼입니다. 가장 유명한 SNS는 ‘페이스북, 트위터, 인스타그램, 구글 플러스, 네이버 블로그’ 가 있습니다. 최근에 SNS의 중요성이 점점 높아지면서 페이지에 필수적으로 적용 해야하는 요소가 되었습니다. 주변을 둘러보면 SNS를 사용하지 않는 사람의 비율이 더 적다는 사실! 아시죠? 웹페이지가 SNS로 연결됨으로써 “사용자의 방문”을 높일 수 있으며, “웹사..
검색엔진 최적화(SEO) 제목태그(Heading tags) h1~h6 정의 : 검색엔진 최적화(SEO) Heading Tags는 검색엔진과 사용자 모두에게 페이지 내의 콘텐츠 구성을 제대로 전달하는데 사용하는 콘텐츠의 제목입니다. Head Tag 이해하기 HTML구조에서 제목, 소제목 및 단락을 기술하는 개념이며, H1~H6 태그로 구성됩니다. Head Tag를 적절하게 사용하여 “사이트의 주제”를 알기 쉽게 작성해서 검색 엔진과 사용자가 정보를 제대로 알 수 있도록 해주어야 합니다. 어떠한 알고리즘 변화가 온다고 할지라도 웹문서를 잡아주는 “가장 기본적인 골격”이기 때문에 SEO 최적화에 중요한 요소입니다. 이때! 페이지의 구조를 크기순으로 배치하는것이 중요하며, H1 -> H6 태그의 순으로 크기와 중요도가 낮아집니다. 반드시 H1~H6 태그를 전부 사용할 필요는 없지..
SEO 페이지 속도 최적화 - CSS, JAVASCRIPT, FLASH 개체 수 정의 : 웹페이지의 디자인(스타일), 동적인 부분 등을 만드는 파일수를 체크합니다.CSS, JAVASCRIPT, FLASH 파일 수 이해하기 페이지를 구성하는 CSS, JAVASCRIPT, FLASH 파일이 많을 경우 서버에 많은 파일들을 요청해야 하므로 “웹페이지 로딩 속도가 느려집니다.” 웹페이지 로딩속도가 느려지면 사용자가 이탈율이 높아지게 됩니다.내 웹사이트를 찾아준 방문자를 나가게 해선 안되겠죠?그러므로 CSS, JAVASCRIPT, FLASH 파일의 수를 “20개 미만”으로 유지하는 것을 권장합니다.요즘은 FLASH는 사용되지 않고 개발 시 외부 CDN에서 부트스트랩이나 JQuery등 라이브러리를 가져오는 부분이 일반적이어서 점차 개수가 높아지고 있는 추세입니다. SEO Friend의 등급체크..