분류 전체보기 (37) 썸네일형 리스트형 Kakao Social Login 구현 Kakao REST API https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com REST API란? REST(Representational State Transfer)를 지원하는 API REST란? HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)를 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD(Creat.. forEach와 for...in, for ...of forEach는 callback 함수를 이용해 배열 안의 모든 요소에 접근할 때 사용한다. for...in은 key를 사용해 오브젝트 안의 멤버에 접근할 때 사용한다. key는 멤버의 key에 대한 임시 변수이므로 dot notaion으로 멤버에 접근할 수 없다. dot notaiton은 key 이름으로 직접 object member를 참조하기 때문이다. for ...of는 iterable object(배열)의 원소에 key 없이 직접 접근할 때 사용된다. for...in에서 num은 배열의 index를 나타내므로 sum에 string 덧셈이 발생해 00123을 출력한다. 반면 forEach와 for...in은 배열의 원소에 직접 접근하므로 예상한 답 10이 출력된다. for ...in은 key로 obj.. isNaN과 Number.isNaN NaN끼리는 비교 연산이 불가능하다. isNaN 함수로 매개변수가 NaN인지 확인할 수 있다. Number.isNaN은 매개변수가 NaN값일 때 true를 반환한다. 즉, 매개변수가 string 등 NaN형일 때 작동하지 않고 false를 반환한다. 하지만 isNaN은 숫자로 변환했을 때 NaN이되는 값(NaN형)을 매개변수로 받았을 때도 true를 반환한다. String과 toString toString 함수는 원시 데이터 타입(number, string, boolean, null, undefined 등)에만 사용이 가능하다. 반면 String은 배열, 함수등 객체에 대해서도 사용이 가능하다. Number와 parseInt const a = "123abc" 문자열에서 숫자가 포함되었을 때 parseInt로 숫자만 정수형으로 변환할 수 있다. 숫자가 문자열 가장 앞에 있을 때만 가능하다. Github Social Login 구현 1. OAuth (Open Authentication)란 다른 소셜 서비스로부터 인증(Authentication)을 받아 리소스 접근 권한을 위임(Authorization)받는 것 2. Github OAuth 진행 과정 로그인이 필요한 사이트에서 User를 Github로 보낸다. Github는 token과 함께 User를 돌려보낸다. token을 이용해 Github API로부터 User 정보를 얻을 수 있게 된다. https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps Authorizing OAuth apps - GitHub Docs You can enable other users to authorize y.. grid 기본 1. repeat, fr HTML 삽입 미리보기할 수 없는 소스 grid-template-columns와 grid-template-row를 이용해 grid layout의 행과 열의 모양을 정할 수 있다. fr은 컨테이너 너비를 box가 해당 비율만큼 나누어갖는 것을 의미한다. grid-template-columns가 1fr 3fr 100px 50%일 때 50%가 먼저 적용된 후 100px가 적용되고, 남은 공간을 1fr, 3fr이 나누어 가지는 것을 볼 수 있다. repeat 함수로 반복되는 fr을 나타낼 수 있다. grid-gap으로 box 안쪽 서로의 간격을 정할 수 있다. 2. minmax, auto HTML 삽입 미리보기할 수 없는 소스 minmax로 그리드 아이템의 최소, 최대 크기를 정할 수 .. flex의 align-self, align-item과 align-content의 차이 flex-direction이 row(default)일 때 axis align-self flex로 지정된 컨테이너 안의 box에 부여한다. align-self: flex-end이면 해당 box의 cross axis상 위치는 컨테이너 끝이 된다. align-item cross axis의 한 줄 내에서 box들의 배치를 결정한다. align-content cross axis의 줄 간 배치를 결정한다. 이전 1 2 3 4 5 다음
