비바라기's

2018년 6월 이후 Facebook API 앱을 개발/사용하려면 반드시 https를 사용해야 합니다. devcert 등을 사용해 ssl을 발급받아 https로 개발할 수도 있지만, http로 개발이 가능한 Facebook Test Version App가 보다 간편합니다. 저는 아래 블로그를 참조하였습니다. https://jsikim1.tistory.com/114 Facebook Login API http 에서 가능하게 하는 방법 (Facebook Test Version App 사용하는 법) Facebook Login API http 에서 가능하게 하는 방법 (Facebook Test Version App 사용하는 법) Facebook API 에서 Login 기능은 https에서만 지원되도록 하고 있습..

// ----- $(document).on을 사용한 방식과 $("#id').on을 사용한 방식은 둘 다 같은 것(#testButton)을 가리키고 있고, 의미도 동일하지만, 실제로 동작시켜보면 alert("yup")은 한 번만 발생합니다.이것은 $(document).on 방식은 document가 파싱된 뒤 id가 testButton인 노드를 찾아 함수를 실행시키지만, $('#id').on과 같은 방식은 document가 파싱되기 전에 id=#testButton인 을 찾고 있으므로 그곳에 도달할 수 없어 함수를 실행시킬 수 없었기 때문입니다. 따라서 다음과 같이 수정하면 $('#id').on 방식을 사용할 수 있습니다. $(document).ready() 아래에 $('#id').on 코드를 넣는 식입니다.

위와 같은 코드를 실행하면 Uncaught ReferenceError: FB is not defined when using FB.getLoginStatus 와 같은 에러가 발생합니다. window.fbAsyncInit 내부의 FB.init이 실행되기 전에 FB를 참조, FB.getLoginStatus를 실행하고 있기 때문입니다(호이스팅). 해결 방법은 두 가지가 있습니다. 하나는 window.fbAsyncInit 내부, FB.init 아래에 FB.getLoginStatus 코드를 추가하는 것입니다. 하지만 이 방법은 다소 직관적이지 않습니다. 두번째 방법은 아래와 같이 임의의 함수(fbload)를 window.fbAsyncInit 외부에 정의하는 대신, $(document).trigger("새로 정의한 ..

목차 1. 호이스팅(hoisting)이란 2. 호이스팅이 필요한 이유? 3. let 과 const를 구분하여 사용하기 호이스팅(hoisting)이란 전역 스코프와 지역 스코프 만약 어떤 변수가 함수 내부에 정의되었거나, 중괄호 밖에 정의되었다면 이 변수를 전역 스코프에 정의되었다고 말합니다. 반대로 중괄호 내부에 정의된 변수가 있다면 이 변수는 지역 스코프라고 합니다. 만약 어떤 지역 스코프에서 선언된 변수가 있다면, 이 변수는 전역 스코프나 다른 함수(즉 다른 지역 스코프)에서 참조할 수 없습니다. var a = 1; function test() { var b = 2; console.log(a); /* 1이 출력됩니다. */ console.log(b); /* 2가 출력됩니다. */ } console.l..

목차 1. 구글 폰트 적용하기 2. 부트스트랩 시작 템플릿 및 적용하기 구글 폰트 적용하기 1. 구글 웹폰트 페이지에 들어갑니다. https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 폰트를 선택합니다. 3. 스크롤을 아래로 내리면, 원하는 굵기(Bold)의 폰트를 선택할 수 있습니다. 원하는 굵기의 폰트 옆, 붉은 테두리가 쳐진 네모 부분을 클릭합니다. 4. 붉은 테두리가 쳐진 네모 부분을 HTML 파일의 최신 버전인 부트스트랩 5.0을 사용하기 위해서는 jQuery와 Popper를 반드시 불러..

생활코딩의 HTML 사전과 CSS 사전입니다. https://opentutorials.org/course/1058 HTML 사전 - 생활코딩 본 코스는 HTML의 사용법을 찾아 볼 수 있는 사전 입니다. 본 코스는 리체님의 HTML 5 Tag Dictionary 모듈을 사용하고 있습니다. 좋은 사전을 만들어주신 리체님 감사합니다. ^^ opentutorials.org https://opentutorials.org/course/718/3798 박스모델 - 생활코딩 박스 모델은 컨텐츠의 넓이, 컨텐츠의 높이, 패딩, 테두리, 마진으로 이루어져 있다. 아래 이미지는 컨텐츠 영역과 마진, 테두리, 패딩이 어떻게 연관되어 있는지 보여준다. box를 이루고 있는 opentutorials.org

* 이 글은 생활코딩, TCP School, 스파르타코딩클럽의 웹개발 종합반 강의를 기반으로 개인 공부를 덧붙인 글입니다. * 글에 오류가 있다면 부디 댓글을 달아주세요. 감사합니다 :) 목차 1. html 디폴트 양식 나눠 보기 2.메타 태그란? 3.CSS란? 4.선택자(Selector)를 구분해서 써야하는 이유 이것은 개발환경 중 하나인 파이참(Pycharm)을 사용해 HTML 파일을 생성하면 보여주는 디폴트 코드입니다. 기본적으로 HTML 파일은 head와 body로 나뉘어져 있습니다(head와 body는 한 html 코드에서 딱 하나씩만 존재할 수 있습니다). head란 태그 사이에 위치한 코드를 가리킵니다. head에서 처리하는 정보는 웹 페이지에서 직접적으로 보이지는 않지만, 웹 페이지가 만..

* 이 글은 생활코딩, TCP School, 스파르타코딩클럽의 웹개발 종합반 강의를 기반으로 개인 공부를 덧붙인 글입니다. * 글에 오류가 있다면 부디 댓글을 달아주세요. 감사합니다 :) 여기 책이 한 권 있습니다. 그리고 몇가지를 더 가정하겠습니다. 1. 저는 초보 출판업자이자, 저작자입니다. 2. 책의 제목은 "맛난 카페 고르기 101" 이라고 하겠습니다(저는 커피를 좋아하니까요 ^^). 3. 저는 A4용지 100장 분량의 정보를 생각나는 대로 모두 적었습니다. 4. 마지막으로, 저는 이 책을 출판하여 제가 아는 정보를 널리 알리고 싶습니다! 제가 이 책을 출판하려면 어떻게 하면 좋을까요? 우선 생각나는 대로 적은 정보를, 일정한 순서에 따라 정리할 필요가 있겠지요. 그래서 저는 우선 목차를 만들고..