Korea Blind Alley-어쩔수

Posts

Showing posts with the label Programming

웹사이트를 만들고 나서 디플로이(deploy)부터 광고 붙이기까지 나만의 일 처리 순서

March 09, 2021

최근 웹사이트를 몇 개 만들었는데 웹사이트를 만들고 나서 디플로이(deploy)부터 SEO 최적화까지의 과정을 거치면서 헷갈리거나 놓치는 순간들이 있었다. 그래서 블로그에 이 과정을 정리해두고 업무 순서도처럼 참고하려고 한다. 1. 검색 엔진 최적화 (SEO 최적화)에 필요할 태그들 미리 추가하기 html 파일을 작성할 때 주로 <!DOCTYPE html> 양식으로 작성을 한다. 이 때 자동으로 생성되는 메타 태그들도 있지만, 네이버 SEO 최적화를 진행하기에는 부족하다. 그래서 웹사이트 개발을 완료하면 아래의 다섯 개 태그를 추가한다. 페이지 설명과 Open Graph 관련 태그들이다. 선호 URL을 정하는 태그도 있다. < meta name = "description" content = "사이트 설명" > < meta name = "keywords" content = "검색 키워드들, 쉼표로 구분" > < meta property = "og:title" content = "오픈그래프 제목" /> < meta property = "og:description" content = "오픈그래프 설명" /> < link rel = "canonical" href = "https://선호URL/" > 2. 위의 태그들이 추가되면 deploy한다. 요새는 조코딩JoCoding 유튜브 채널을 통해 알게 된 netlify에 사이트들을 업로드하고 있다. 무료지만 100GB까지 사이트들을 업로드할 수 있어 매우 유용하고 편리하다. 다만, 무료 버전을 사용할 시 사이트 Url이 "https://자신이 정한 주소.netlify.app/"이 되고 .com 도메인을 쓰려면 유료 결제를

[자바스크립트] 입력 창 안의 텍스트 클립보드 복사 기능 구현하기

March 08, 2021

입력 창 안의 텍스트를 사용자가 클립보드에 복사할 수 있게 하는 기능은 매우 유용합니다. 가장 대표적인 목적을 예로 들자면, 자신의 웹사이트 이용자에게 웹사이트 공유를 부탁하며 링크를 편하게 복사할 수 있도록 해줄 수도 있습니다. 제가 만든 웹사이트의 경우, 사용자가 직접 입력 창을 필요한 문자로 채우고 이를 복사해서 필요한 곳에 사용할 수 있게 하였습니다. 아래 캡쳐 화면을 보시면 이해가 쉬울 것입니다. 나열된 문자 중 필요한 문자를 클릭하면 상단의 입력 창에 모여서 글 복사 버튼을 누르면 알림이 뜨는 방식입니다. 포스팅 내에 입력 창과 이 입력 창 안의 텍스트를 복사할 수 있도록 하는 버튼을 직접 구현해 보겠습니다. 코드는 그 아래에 적어 놓을테니 마음에 드신다면 가져 가서 쓰시면 되겠습니다. 복사 버튼을 활용하는 데에는 대표적으로 두 가지 경우가 있을 것 같습니다. 입력 창이 비어져 있어서 웹 사용자가 직접 입력 창을 채우고 복사해 가는 경우, 그리고 개발자가 미리 입력 창에 원하는 텍스트를 채워 놓고, 사용자는 이 텍스트를 그대로 복사해 가는 경우. 전자의 경우를 먼저 알아 보겠습니다. 글 복사 버튼 입력 창 안에 원하는 텍스트를 직접 입력하고 글 복사 버튼을 클릭해 보세요. 버튼 안의 텍스트도 직접 정할 수 있습니다. 위 기능의 코드는 아래와 같습니다. .html 파일 <input id="something" name="Subject" size="40" type="text" /><br /><br /><button onclick="myFunction()"> .js 파일 function myFunction() { var copyText = document.getElementById("something"); copyText.select(); copyText.setSelectionRan

내가 만든 웹사이트에 카카오 애드핏 넣어보기_매우 간단

March 08, 2021

안녕하세요? 어쩔수입니다. 최근에 웹사이트를 세 개를 만들었고, 2개는 승인이 됐고, 1개는 반려가 됐습니다. 우선, 반려 사유는 한 페이지에 동일 광고 단위로 2개 이상의 광고를 삽입했기 때문입니다. 이 이야기는 글 말미에 자세히 이야기하기로 하고 일단, 카카오 애드핏 광고를 넣는 과정을 알아보겠습니다. 1. 카카오 애드핏에 로그인한 뒤 이용약관에 동의합니다. 그럼 아래 같은 화면이 나오는데, 광고 관리에 커서를 대면 '광고 관리' 탭이 나옵니다. 이 광고 관리를 클릭합니다. 2. 다음에 나오는 화면에서는 '+새 매체'를 클릭합니다. 클릭 후 나오는 화면에서는 매체명과 매체URL을 입력하면 되는데요. 매체명은 자신이 구별할 수 있는 이름을 자유롭게 지어주면 됩니다. 사이트 이름으로 정하는 것이 무난합니다. 매체 URL에는 자신의 웹사이트의 링크를 정확하게 입력해줍니다. 이 글을 작성하는 김에 이 구글 블로그스팟을 카카오 애드핏에 등록해보겠습니다. 광고 단위명에도 간단히 이름을 지어줍니다. 원하는 광고 유형을 선택합니다. 현재 다음과 같은 광고 유형들이 있습니다. 다양한 배너 모양이 있네요. 배너를 선택했으면 '스크립트/SDK 발급'을 클릭합니다. 3. 이제 가장 중요한 과정입니다. 발급 받은 스크립트와 SDK를 원하는 위치에 입력하여 줍니다. 저는 이 문장 바로 아래에 삽입해 보겠습니다. 꼭 광고가 승인되어 여러분이 이 글을 볼 때 쯤이면 광고가 보이는 중이었으면 좋겠습니다. 알고보니 게시글 안에 광고가 삽입이 되면 안 된다고 합니다. 블로거의 레이아웃 섹션에서 html, 자바스크립트 설정을 통해 삽입해야 합니다. 앞서 말씀드린대로 저는 한 페이지에 동일한 광고 단위의 광고가 2개 이상 들어가면 승인이 보류됩니다. 두 개 이상의 광고를 한 페이지에 넣고 싶다면 꼭 다른 광고 단위를 발급 받아야 한다는 것을 유념하시기 바랍니다.

자바 스크립트 입문자가 매우 간단한 영어 가상 키보드를 만든 방법

March 07, 2021

안녕하세요? 어쩔수입니다. 저는 자바 스크립트를 배우기 시작한 지 아직 한 달이 되지 않은 자바 스크립트 입문자입니다. 비록 초보인 제가 만들어서 미흡한 점이 많지만 다른 초보들이 간단한 가상 키보드를 만드는 데에 작은 도움이 될 수 있을 것 같아 만든 방법을 공유하려고 합니다. 저도 방법을 찾느라 많이 찾아보고, 헤맸거든요. 다만, 영어 버추얼 키보드라서 한글 키보드를 만드시려는 분께는 큰 도움이 안 될 것 같습니다. 위의 캡쳐 화면이 제가 만든 가상 온스크린 키보드입니다. 버튼 클릭을 통해 인풋 박스에 입력되면 복사 버튼을 눌러서 클립보드에 복사하는 프로그램입니다. 프랑스어, 스페인어 등 악센트 마크가 있는 알파벳이 포함된 언어를 사용하는 국가에 있는 사람들이 키보드에 악센트 마크가 없을 때 간단히 복사 붙여 넣기 할 수 있도록 만든 사이트입니다. 통화 기호를 모아 놓은 페이지도 있습니다. 웹에서 직접 보고 싶으신 분은 링크를 타고 들어가 주세요. https://accentmark.netlify.app/ 제가 위의 사이트에서 사용한 코드 중 일부를 여기에서 이 페이지에 직접 구현해보겠습니다. 아래의 '감사합니다' 버튼을 눌러보세요. 감사합니다 아래는 제가 쓴 코드입니다. .js 파일 function addText1() { var input = document.getElementById('something'); input.value = input.value + '감사합니다'; } .html 파일 <button id="URGENT" onclick="addText1()" type="button"><h2>감사합니다</h2></button>

남이 볼 것 같은 나, 남이 봐 줬으면 하는 나 - 성향 테스트

March 06, 2021

안녕하세요? 어쩔수입니다. 새로운 성향 테스트를 만들게 되어 소개하려고 합니다. 링크는 글 맨 아래에 첨부하겠습니다. 요새 유행하는 MBTI 등의 심리/성향 테스트는 주로 '내가 생각하는 나의 모습'을 물어보고 답하는 테스트가 많지요. 그래서 저는 궁금해졌습니다. 내가 예상하는 남이 생각하는 나의 모습과 내가 생각하는 나의 모습은 얼마나 일치할까? 중요한 것은 꼭 객관적일 필요 없다는 것입니다. 실제로 남이 나에 대해 어떻게 생각하는 지가 정확히 반영될 필요는 없습니다. '내가 생각하기에 남들은 나를 이렇게 생각할 것 같다' 하는 모습을 골라주시면 됩니다. 여기에 추가로, 남이 봐 줬으면 하는 나의 모습을 답할 수 있습니다. 테스트가 끝나고 나면, 내가 보는 나의 모습, 남이 이렇게 보지 않을까 하는 모습, 남이 이렇게 봐 주었으면 좋겠다 하는 모습을 한눈에 볼 수 있습니다. 조금 복잡하죠? 이 테스트를 진행할 '마시우리'라는 캐릭터가 있는데요. 이 캐릭터에게 추가 설명을 맡기겠습니다. 마시우리 두두둥장 (icons made from flaticon) 안녕들 하신가. 나는 마시우리라네. 상대방의 마음을 꿰뚫는 마법의 책이지. 왜 세 권의 책이 있냐고? 내가 분신술로 두 권의 책을 더 만들어 냈다네. 분신술인데 왜 모습이 다르냐고? 마법이 잘못된 것이 아니냐고? 하하 그렇게 생각할 수 있네. 하지만 위의 모습은 내가 생각하는 나의 모습, 아래 왼쪽의 모습은 남이 생각할 것 같은 나의 모습, 오른쪽 모습은 남이 봐 줬으면 하는 나의 모습이라네. 내 분신들의 이야기도 들어 보게. 왼쪽 아래 (남이 생각할 것 같은 나의 모습): 나는 상대방의 마음을 꿰뚫는 일을 하는 만큼 사람들이 나를 차가운 책이라고 볼 것이라고 생각하네. 그리고 말하는 책이 흔하지 않아서 가끔 나를 신기하게 보는 사람들이 있는데 그럴 때는 사람들이 나를 우리에 갇힌 구경거리로 생각하지 않을까 싶기도 하네. 오른쪽 아래 (남이 봐 줬으면 하는 나의 모

[html] iframe으로 한 화면 안에 여러 html 파일 동시에 보이기

March 06, 2021

최근에 iframe 태그를 이용해서 웹사이트를 하나 만들었습니다. iframe 세 개를 만들고 그 안에 각각 html 파일을 띄웠습니다. 만들어진 결과물은 아래의 캡쳐 화면에서 볼 수 있습니다. 모바일에서 반응성 생각하느라 세로로 만들었는데 이렇게 보니 좀 비좁아 보이네요. 세 iframe을 한 번에 보여드리려고 화면을 축소해서 특히 작아 보이는데 실제로는 이렇게 비좁지는 않습니다. 웹사이트에서 구현된 모습을 직접 보고 싶으신 분은 아래 링크로 접속해 주시면 되겠습니다. https://personaliiitytest.netlify.app/inquestions.html 위의 화면처럼 구현하기 위해 사용한 코드입니다. 너비, 높이 등을 수정할 수 있습니다. src="" 값을 바꾸어 가며 안에 보여줄 화면을 바꿀 수 있습니다. < h1 > How I think of myself </ h1 > < tr > < td width = "50%" >< iframe src = "question.html" style = " width:300px;height:350px; " ></ iframe ></ td > </ tr > < br > < h1 > How others would think of me </ h1 > < tr > < td width = "50%" >< iframe src = "question.html" style = " width:300px;height:350px; " ></ iframe ></ td > </ tr >< br > &l

How to simply know the latitude and longitude with Google Maps

March 06, 2021

Hello. I am BlindAlley 어쩔수. Occasionally, there are cases that we need to know the latitude and longitude. For example, I had to know them for my programming codes. 1. Of course, first you need to go to Google Maps. This is the link of Google Map: https://www.google.com/maps 2. Search the place of which you need the latitude and longitude. I will search 'Wembley Stadium' in England to show an example. 3. There are two ways to find out the latitude and longitude. The first way is to look at the top of the screen; URL. They are written in URL. The second way is to right click the spot you want. As you can see from the screenshot above, you can see the coordinates both in the URL section and the box which is popped by a right click. TMI Latitude is a point in horizontal line parallel to the equator and Longitude is a point in vertical line perpendicular to lines parallel to the equator. Latitude is 0 degree at the equator and Longitude is 0 degree at the Greenwich meridian.

재밌는 성향 테스트 소개 - 나와 비슷한 위인 찾기 (심리/성향 테스트)

March 06, 2021

안녕하세요? 어쩔수입니다. 제가 성향 테스트를 하나 만들어서 소개해 드리려고 합니다 한국어와 영어 두 가지 버전이 있습니다. 마시우리 '나와 비슷한 위인 찾기' 링크: 안녕하세요? 어쩔수입니다. 제가 성향 테스트를 하나 만들어서 소개해 드리려고 합니다. 한국어와 영어 두 가지 버전이 있습니다. 마시우리 '나와 비슷한 위인 찾기' 링크: https://masiurimbti.netlify.app/index.html 테스트 소개 위 캐릭터의 이름은 '마시우리'입니다. 마시우리는 마법의 책으로서 사람들의 마음을 꿰뚫어 봅니다. 이번에 마시우리는 여러분에게 12개의 질문을 통해 당신과 비슷한 위인을 찾아주려고 합니다. 마시우리의 실력이 의심되나요? 마시우리는 최고의 마법 학교인 호그와트에서 기숙사를 배정하는 마법의 모자에게서 배운 수제자입니다. 마법의 모자님은 워낙 유명해서 여러분도 많이 알고 계실 거라고 생각합니다. 영어도 할 줄 아신다면, 영어 버전도 한 번 해 보는 것이 어떨까요? 마시우리는 가끔씩 상대방이 사용하는 언어에 따라 다른 결과를 내주기도 하거든요. 유튜브 영상 소개 설명이 너무 길어서 지루하신가요? 그렇다고요? 우와 솔직하시군요. 좋습니다. 솔직한 분일수록 이 테스트에서 정확한 결과를 얻기가 수월하거든요. 아래 링크는 제가 만든 마시우리 테스트 '나와 비슷한 위인 찾기' 홍보 영상입니다. 글로 된 설명보다 흥미로울 것입니다. https://www.youtube.com/watch?v=n8VCTSP7LU4 이제 더 이상 붙잡지 않겠습니다. 아래에 다시 한 번 '나와 닮은 위인 찾기' 링크를 올려 드리겠습니다. 재밌게 즐겨주세요! https://masiurimbti.netlify.app/index.html 새로운 마시우리 시리즈로 돌아오겠습니다.

Personality test - Finding a role model who has similar personality with me!

March 05, 2021

Hello. I am Blind Alley-어쩔수. I came to introduce a personality test I made. Korean version and English version are available. Here is URL of the website : https://masiurimbti.netlify.app/enmasiuri/indexen.html Introduction of the Test The character above is called 'Masiuri'. He is a magical book who sees through human minds. This time, Masiuri will ask you 12 questions and find you a role model who has a similar personality with you. You don't have to be worried if he is not good enough. He learned from 'the sorting hat' who works in Hogwarts, the best school of witchcraft and wizardry. I guess many of you already have heard of that famous hat. So, you do not have to be worried since Masiuri is as good as the sorting hat. If you can also speak Korean, you may try both Korean and English Versions. Because Masiuri sometimes tells different role models based on the language a person speaks. Video Introduction Did I say too much and make you bored? Yes? Wow. You are v

웹사이트를 네이버 SEO 최적화 실습해 보기

March 05, 2021

안녕하세요? 어쩔수입니다. 웹사이트를 만들고 나면 접근성이 좋아야 많은 사람들이 이용하기 편해지겠죠? 이를 위해 꼭 해야 할 것이 바로 SEO 최적화입니다. 검색 엔진에서 나의 웹사이트를 찾아내기 위한 최적의 조건을 갖추게 해주는 과정입니다. 차례대로 자세하게 알아보겠습니다. 1. 네이버 서치 어드바이저의 '웹 마스터 도구'에 접속합니다. https://searchadvisor.naver.com/console/board 자신의 사이트 URL을 등록합니다. URL이 등록되면 소유 확인 절차가 필요합니다. 아래, HTML 태그를 선택하고 메타 태그를 복사한 뒤 사이트의 홈페이지 HTML에 삽입하고 Deploy 해줍니다. Deploy가 완료된 후 소유 확인 버튼을 클릭하면 소유가 확인되었다는 안내와 함께 다음 페이지로 넘어갑니다. 2. robots.txt 생성하고 폴더에 넣기 (유의사항: robots.txt가 최상단 폴더에 위치하게 할 것) 왼쪽 메뉴 중 '검증'을 클릭하면 robots.txt 항목이 있습니다. 이를 클릭하고 넘어간 페이지에서 아래로 스크롤을 내리면 'robots.txt 간단 생성' 항목이 있습니다. '모든 검색 로봇 수집을 허용합니다.'로 설정한 뒤 다운로드 합니다. 이렇게 다운로드된 robots.txt는 웹사이트 폴더에 넣어줍니다. (꼭 최상단 폴더에! 하위 폴더에 넣으시면 안됩니다.) robots.txt가 들어간 폴더를 다시 한 번 Deploy 합니다. Deploy 후에는 다시 robots.txt를 생성하던 화면으로 돌아옵니다. 다시 스크롤을 올리면 robots.txt 정보 섹션이 있습니다. '수집 요청' 버튼을 클릭합니다. 수집 요청 버튼을 클릭하고 몇 초 뒤에 수집된 정보가 비어 있던 화면 위에 자동으로 작성될 것입니다. 여기까지 되면 robots.txt 검증 작업은 완료되었습니다. 3. 이제 웹 페이지 최적화가 필요합니다. robots.txt와 마찬가지로 '

네이버 지도 API, Web Dynamic Map 사용 방법 - 실습해 보자 (Naver map API)

March 05, 2021

위의 네이버 지도 API - Web Dynamic Map이 삽입된 것이 보이시나요? 네이버에는 프로그래머들이 유용하게 활용할 수 있는 API가 여러 가지 준비되어 있는데요. 저는 네이버 지도, 그 중에서도 Web Dynamic Map을 HTML에 삽입하는 것을 직접 차례대로 자세히 실습해 보겠습니다. 1. 우선 네이버 클라우드 플랫폼에 접속합니다. https://www.ncloud.com/product/applicationService/maps 서비스의 Application Service 중 Maps 에 들어가서 이용 신청하기를 클릭합니다. 이용 신청하기를 클릭하면 로그인 화면이 나올 겁니다. 네이버 아이디가 있더라도 클라우드 플랫폼에는 따로 회원 가입이 필요합니다. 회원 가입 이후에 계정 관리에서 네이버 아이디를 연동해 주면 다음 로그인부터는 네이버 아이디로 간편하게 로그인 할 수 있습니다. 일단은 회원 가입을 진행합니다. 2. 회원 가입이 완료되면 다음 화면으로 넘어가고, 결제 수단을 입력하라는 안내가 나옵니다. 제가 사용할 Web Dynamic Map은 월 1천만 회의 무료 이용 한도가 있어, 사실상 무료나 다름 없습니다. 걱정하지 않고 결제 수단을 등록해 줍니다. 결제 수단까지 등록하고 나면 네이버 클라우드 플랫폼 웹사이트 우측 상단에 Console 버튼이 있습니다. 위의 캡쳐 화면에서도 Console 버튼의 위치를 확인할 수 있습니다. 여기를 클릭합니다. 그러면 아래 캡쳐 화면처럼 콘솔에 들어가게 되는데요. 왼쪽 메뉴들 중 Products & Services를 클릭한 뒤 나오는 상세 메뉴들 중 AI, NAVER API를 클릭합니다. 3. 그 후 나오는 화면에서는 Application 등록을 클릭합니다. Application 이름에는 자신이 서비스를 분간할 수 있는 이름을 정합니다. 웹사이트 이름을 적는 것이 무난합니다. Web 서비스 URL에는 사이트 URL을 정확하게 기입합니다. URL을 추가한 뒤 다음으로 넘어가면 인증 정보를 발