Dong-Ho Choi yungblud

Github로 로그인하기 feat.Vue and Node.js

1. Github로 로그인하기?

요즘들어 "~로 로그인하기" 가 많아지고 있다. 페이스북이나 구글이 대표적이고, 한국에서는 네이버도 많이 사용하며 개발자 관련 웹에서는 깃허브도 껴있는 경우가 많다. 이런 식의 다른 서비스를 통해 인증하는 방식을, OAuth 인증 방식이라고 하는 모양이다. 내가 회사 업무를 위해 사용하는 몇몇 소프트웨어도 이러한 인증을 지원하는 경우가 많다. 이 글에서는 그러한 인증을 구현하지는게 아니라 그러한 인증을 사용해 보자는 것에 목적을 둔다. 어떤 방식으로 인증하는지를 직접 사용해보고 OAuth방식 인증의 절차를 알아보는 기회도 될것이다.

2. 목표

위와 같이 버튼을 누르면 Github에서 인증을 실행하고 관련 데이터를 받아오는 동작을 구현해 볼 것이다.

설치 할 항목

Node.js : 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데에 사용됩니다.
Yarn : 자바스크립트 패키지를 관리하기 위해서 사용됩니다. Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠릅니다.
Code Editor (VS Code, Atom, ...) : 코드 에디터는 여러분이 좋아하는걸 사용하시면 됩니다. 저는 VS Code 를 사용하여 강의를 진행하겠습니다.

Windows

Node.js

https://nodejs.org/ko/ 에 들어가서 좌측 LTS 버전을 설치하면 됩니다

Yarn

https://yarnpkg.com/en/docs/install#windows-tab 에 들어가서 인스톨러를 사용하여 설치하세요.

Direct copy of pre-encoded file:

$ ffmpeg -i filename.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls filename.m3u8

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

	axios({
	url: 'http://localhost:5000/static/example.pdf',
	method: 'GET',
	responseType: 'blob', // important
	}).then((response) => {
	const url = window.URL.createObjectURL(new Blob([response.data]));
	const link = document.createElement('a');
	link.href = url;
	link.setAttribute('download', 'file.pdf');
	document.body.appendChild(link);

	Install libimobiledevice on Mac OS X
	So you'd like to manage your iOS devices by command line?
	You can use libimobiledevice tools for that.
	Easy on Linux. Let's see how it is on Mac OS X.

	You'll need to:
	1. install Xcode
	2. start Xcode and agree to it's license
	3. install Xcode command line tools (Start Xcode, Go to Preferences -> Downloads tab)
	4. install homebrew by this command (sudo password will be prompted)

	module.exports = {
	webpack: {
	configure: (webpackConfig) => ({
	...webpackConfig,
	module: {
	...webpackConfig.module,
	rules: webpackConfig.module.rules.map((rule) => {
	if (!rule.oneOf) return rule;
	return {
	...rule,