구글 로그인 api 연동하기
인증 자격 증명 만들기 사용자 인증 정보 페이지로 이동한다. [자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 를 참고하여 동의 화면 구성, API 키, OAuth 클라이언트 ID를 생성한다. Google Platform 라이브러리 로드 Google 로그인을 연동할 html ...
인증 자격 증명 만들기 사용자 인증 정보 페이지로 이동한다. [자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 를 참고하여 동의 화면 구성, API 키, OAuth 클라이언트 ID를 생성한다. Google Platform 라이브러리 로드 Google 로그인을 연동할 html ...
이벤트 핸들러 attribute 방식 <button onclick="handleClick()">Click me</button> <script> function handleClick() { console.log(this); // window } </script> 위 예제의 handleClic...
의존성 배열을 사용하는 경우 상태값을 이용해 api를 호출할 때 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }, [userId]); 의존성 배열을 잘못 관리하면 생기는 일 의존성 배열에 입력해야 할 값을 입력하지 않으면 오래된 값을 참조하는 문제...
주저리 SSH 키 생성하고 Github에 추가하기 포스트에서 해결하지 못했던 문제를 해결했다. 윈도우에서 git push를 할 때 Authentication failed 에러가 났었는데, git config --global --unset credential.helper 다른 문제를 해결하려고 위 명령어로 git credential을 지워버려서...
webpack entry index.html 에 link된 css 파일이 번들링되지 않아 고생했다. webpack의 entry를 수정하면 원하는 파일을 추가하여 번들링할 수 있다. entry의 프로퍼티 값을 배열로 설정할 수 있다는 걸 몰랐었다. module.exports = { //... entry: { main: ["./pub...
MiniCssExtractPlugin 번들링 할 때 css를 js 파일에 포함시키지 않고 따로 파일을 분리할 때 사용하는 플러그인이다. dist 폴더에 js 파일과 css 파일이 각각 따로 생성된다. linkType, filename 등의 옵션을 설정할 수 있다. Install npm install --save-dev mini-css-extr...
윈도우에서 Authentication failed 에러로 git push가 되지 않아 ssh 키를 발급받아 사용하게 되었다. 자세한 설명은 GitHub 문서 참고. 새로운 SSH 키 생성 터미널에 아래 정보를 입력한다. ssh-keygen -t ed25519 -C "your_email@example.com" 키를 저장할 파일을 입력하라는 메...
Just-in-Time Compilation (JITC) 자바스크립트 엔진은 인터프리터 방식으로 동작한다고 알고 있지만, 초기 버전의 자바스크립트 엔진은 수행되는 모든 자바스크립트 코드를 바로(just-in-time) native code로 컴파일하는 방식이었다. JITC 방식은 javascript source를 bytecode 형식으로 파싱하...
role html 태그 외에도 접근성적으로 의미를 부여해야 할 경우 role을 사용한다. 예) span 태그이지만 link 역할을 하는 경우 <span tabindex="0" role="link" onclick="goToLink(event, 'http://www.w3.org/')" onkeydown="goToLink(event...
:autofill input에서 자동완성 항목 호버나 선택 시의 스타일을 지정한다. input { border: 3px solid grey; border-radius: 3px; } input:-webkit-autofill { border: 3px solid blue; } input:autofill { border: 3px sol...