2022/04 21

네이버 로그인 API 활용하여 로그인 기능 구현하기

#1 네이버 개발자 센터에 접속 네이버 개발자 센터에 접속한 후 로그인을 하고 오픈 API 이용 신청을 합니다. 다음은 네이버 아이디로 로그인 오픈 API 신청 페이지입니다. 하단의 [오픈 API 이용 신청]을 눌러 다음으로 진행합니다. https://developers.naver.com/products/login/api/api.md #2 애플리케이션 등록 (API 이용신청) 자신에게 맞는 형태로 이름과 로그인 제공 정보를 선택. 서비스 환경 설정 등을 진행해 줍니다. 서비스 URL은 자신의 홈페이지 주소를, 로그인 Callback URL은 이후에 생성할 callback페이지를 연결할 주소입니다. 모든 설정을 완료하고 등록을 하면 Client ID와 Client Secret 코드가 등록된 페이지가 나타납..

한 장으로 정리하는 JavaScript

#1 자료형(Data Type) 종류 설명 문자열 (string) 시작과 끝이 작은 따옴표('')나 큰 따옴표("")로 감싸진 값 숫자 (number) 따옴표를 사용하지 않은 숫자 논리형 (boolean) 참(true)과 거짓(false)을 나타냄 배열 (array) 하나의 변수에 여러 개의 값을 저장 객체 (object) 함수와 속성들이 함게 포함된 경우 undefined 데이터의 유형이 지정되지 않은 상태 null 데이터의 값이 유효하지 않은 상태 JavaScript에서의 False ① false, ② ''(빈 문자열), ③ 0, ④ NaN, ⑤ undefined, ⑥ null, ⑦ document.all(이건 거의 사용하지 않으니 몰라도 됨) #2 연산자 종류 설명 산술 연산자 +, -, *, /,..

홈팟 자동연결 푸시알람 끄는 방법

홈팟이 있는 장소에서 애플 기기를 사용하게 되면, 좀 더 가까이 이동하거나 탭 하여 연결하라는 푸시 알람과 함께 진동이 발생합니다. 이게 음악을 듣거나 홈팟을 사용하게 될 경우엔 손쉽게 연동이 되는 부분이라 분명 매우 편리한 기능인데... 위와 같이 책상이나 주 활동공간에 홈팟이 있을 경우 작업을 하다 폰을 들 때마다 팝업창이 떠버리기 때문에, 오히려 매번 매우 불편한 상황이 발생합니다. 이럴 땐 다음과 같은 방법으로 홈팟의 푸시 알람을 끌 수 있습니다. 홈팟 자동 연결 푸시 알람 끄기 1. 홈팟 연결 푸시 알람은 위와 같이 나타납니다. 이 알람을 끄기 위해선 다음 절차를 따릅니다. 2. '설정 > 일반 > AirPlay 및 Handoff'로 이동합니다. 3. HomePod으로 전송을 OFF로 해줍니다.

enterkeyhint - 모바일 환경의 enter 키 텍스트를 변경하기

enterkeyhint는 모바일 가상키보드의 enter키에 표시되는 내용을 사용자에게 더욱 도움이 되는 형태로 지정해 줄 수 있습니다. #1 Enter (엔터) enterkeyhint="enter" 기본적으론 다음 줄로 행을 이동합니다 ios의 영문 키보드에선 return으로 표기됩니다. (*흔히 말하는 엔터가 ios에선 return이라 불립니다) #2 Done (완료) enterkeyhint="done" 일반적으로 더 이상 입력할 것이 없을때 사용. IME(입력기)가 닫힙니다. #3 Go (이동) enterkeyhint="go" 일반적으로 사용자가 입력한 텍스트의 대상으로 사용자를 데려가는 이동 작업에 사용 #4 Next (다음) enterkeyhint="next" 일반적으로 텍스트를 수락할 다음 필드..

한 장으로 정리하는 CSS

#1 스타일 시트 종류 설명 브라우저 기본 스타일 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 외부 스타일 시트 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 #2 CSS 기본 선택자 종류 설명 작성 예시 전체 선택자 문서의 모든 요소에 스타일을 적용 * { margin: 0; } 타입 선택자 특정 태그를 사용한 모든 요소에 스타일 적용 p { font-style: italic; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러 번 적용 마침표(.)를 붙여 사용 .bg { backgroun..

구글 지도 API 사용하기

Google Maps API를 사용하기 전 알아두면 좋은 사전 정보 • Kakao 지도와는 달리 Google Maps를 사용하면 대한민국 외의 지역을 표시할 수 있습니다. • Google은 매달 200달러의 크레딧을 무료로 제공하며, 200달러를 초과할 경우 등록한 신용카드로 이용료가 청구됩니다. • 단, 처음 가입한 신용카드 정보의 경우 자동 가입 방지를 막기 위해서일 뿐, 유료 계정으로 직접 업그레이드하지 않았다면 이용료가 청구되지 않습니다. #1 구글 계정 만들기 기존에 사용하는 구글 계정이 있다면 그대로 사용하면 되고, 없다면 구글 계정 페이지로 이동하여 구글 계정을 생성해 줍니다. https://accounts.google.com/ #2 Google Maps Platform에서 API 키를 받기..

한 장으로 정리하는 HTML

#1 텍스트 관련 태그 종류 설명 제목. ~까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아짐 텍스트 단락. 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄 바꿈 줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿈 내용 인용. 다른 내용보다 들여 쓰고 단락으로 표시 중요한 텍스트를 굵게 표시. 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 굵게 표시 중요한 텍스트를 기울게 표시(문장), 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 기울게 표시(마음속의 생각이나 용어) 내용을 편집할 때 추가한 내용을 표사 내용을 편집할 때 삭제한 내용을 표시 위 첨자 아래 첨자 #2 목록 관련 태그 종류 설명 순서 있는 목록의 시작과 끝 순서 없는 목록의 시작과 끝 순서 있는 목록이나 순서 없는 ..

카카오 로그인 API 활용하여 로그인 기능 구현하기

#1 카카오 개발자 사이트에 접속 카카오 개발자 사이트에 접속한 후, 로그인을 합니다. (회원가입이 안되어있다면 가입해야 합니다) https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com #2 내 애플리케이션으로 이동 페이지 상단에 있는 내 애플리케이션을 선택한 후, 사용할 애플리케이션을 선택합니다. 미리 만들어놓은 게 없다면 애플리케이션 추가하기를 통해 새롭게 생성합니다. (앱 이름과 사업자명을 적당히 입력해 줍니다) #3 플랫폼 설정 좌측의 플랫폼을 눌러 플랫폼 탭으로 이동합니다. 1) Web 사이..

웹 페이지의 목적별 분류

웹페이지의 목적을 어떻게 설정하였는지에 따라 다음과 같은 형식으로 나눌 수 있습니다. 제작자의 성향과 특성에 맞게 세분화하여 막연하게 '웹 사이트를 만든다'라고 하기보단 '웹 사이트를 만들고 있으며 특히 쇼핑몰을 잘 만듭니다' 같은 식으로 전문성을 어필하는 것도 좋습니다. #1 기업(corporate) 사이트 기업에 대한 정보를 게시하고 전달 "우리 회사를 알리고 싶다" #2 브랜딩 사이트 기업 및 상품의 이미지를 향상시키는 목적 "우리의 회사(브랜드)와 상품의 이미지를 향상하고 싶다" #3 서비스 사이트 서비스나 상품을 알리기 위한 사이트 "우리의 서비스(상품)를 알리고 싶다" #4 랜딩 페이지 구입 등의 액션을 노린 원페이지 형식의 완결형 사이트 "빠르게 고객을 집중시키고 싶다." #5 캠페인 사이트..

카카오(Kakao) 지도 API 사용하기

#1 준비하기 1) 카카오 개발자 사이트(https://developers.kakao.com) 접속 2) 개발자 등록 및 로그인을 한 후, 3) 메뉴 아이콘을 누르고 Maps API를 선택합니다. 4) Web을 선택한 후, 시작하기를 선택하면 Web API 가이드 페이지로 이동합니다. 5) 왼쪽 아래에 있는 키 발급을 선택한 후, 애플리케이션 추가하기 버튼을 눌러 정보를 작성합니다. 6) 애플리케이션을 선택 후 왼쪽의 플랫폼 탭으로 이동. 아래쪽에 위치한 Web 사이트 도메인을 등록합니다. (*여기에서 등록한 사이트에서만 API가 작동합니다) 이후 요약정보 탭 또는 앱 키 탭에서 확인할 수 있는 [JavaScript 키]를 지도 API의 appkey로 사용합니다. #2 웹페이지에 적용하기 한글로 작성되어..

반응형