Develop Dairy 52

Vanilla JS, 바닐라 자바스크립트 로 시작하는 이유

http://vanilla-js.com/ Vanilla JS는 Library나 Framework를 쓰지않는 JavaScript를 뜻함. 그리하여 Vanilla JS를 잘하게 되고 이 언어에 대해 더 숙련되면 이해한다면, 리액트와 같은 다른 언어로 넘어갈 때도 아무 문제가 없을 거라고 한다. 그리하여 업무를 하면서 마주하는 거의 모든 Library를 이해할 수 있게 될 것이고, 웹에서 기초가 되는 언어를 배우는 것과 같기 때문

페이스북인증하기위한 app ID와 app시크릿코드보기

https://developers.facebook.com/ Facebook for Developers Facebook 사용자와 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. Facebook의 글로벌 개발자 교육 및 연결 프로그램에 대해 알아보세요. developers.facebook.com 에서 app을 새로만들자 설정화면에서 누르자 그런다음 http는 보안규격상 안된다는 이유로 메시지가뜨는데 이러한메시지 npm i -g ngrok 이후 pakage.json에서 "ngrok": "ngrok http 4000" 작성 이후 npm run ngrok 으로실행하여 로 http->htpps인 url을얻어봅니다.

Github 인증을만들기위해 Github application 을 생성해보자

깃허브 애플리케이션 생성 작동원리: 사용자 정보 깃헙 페이지로 보냄 특별한URL로 => 깃헙(Application)에게 너의 정보를 줘도 되? ask => 사용자:OK 받으면=> 사용자를 다시 나의 application으로 돌려보내는데 사용자의 깃허브 정보도 같이 줌 Client ID와 Client Secret 가 보이며 절대로 공유를하지않습니다. http://www.passportjs.org/packages/passport-github 에서보면 아래에 해당되게 쓸수있다 passport-github GitHub authentication strategy for Passport. www.passportjs.org

Develop Dairy 2019.04.03

인증기능 사용하기 PassportJS 모듈

인증의 매커니즘은 브라우저 상에 쿠키(Cookies)를 설정해주면 그 쿠키를 통해 사용자 ID (아이디) 등을 알 수 있고 Passport가 브라우저에서 자동으로 쿠키를 가져와서 (인증이 완료된) User object를 controller에 넘겨주는것 대부분의 서비스에서 인증받을수 있다. 페이스북, 깃헙, 구글, 스팀, 카카오, 인스타그램 등등 거의모든것. 아래와같이 사용하다. 인증받을수있는 서비스들 목록 사이트에들어가보면 Start typing으로들어가보자 쿠키는 웹브라우저에서 f12를 누른뒤 아래와 같이 확인가능하다. 쿠키에는 모든 request에 대해서, back-end로 전송될 정보들이 담겨있다 서버가 로그인이나 가입 홈으로 가기등등 요청할때 브라우저가 자동적으로 쿠키들을 서버로 전송해준다. 여기..

webpack 세팅 on Visual Studio Code

webpack은 module bundler 이다 즉우리가 많은 파일들을 가져와서 webpack으로 주면 webpack은 완전히 호환되는 static 파일들로 변환해서 주는 것 ex) ES6와 바닐라 자바스크립트를 쓰고있고 또 Sass, 최신JS 것들을 webpack을 통하면일반적인 CSS와 오래된 자바스크립트로 변환해서 브라우저가 알아들을 수 있도록 해주는 것이다. 설치는 다음과같다. $ yarn add webpack webpack-cli$ yarn add extract-text-webpack-plugin@next$ yarn add css-loader postcss-loader sass-loader autoprefixer node-sass webpack은 파일에서 webpack을 사용하기 위함이고, we..

ESLint 무언가 틀린게있으면 가르쳐주는 친구

ESLint를 비쥬얼스튜디오에서 설치해보자 1. 만약에 npm으로 eslint 를 글로벌로 설치했었다면 지워보자 $ npm uninstall eslint -g 2. vscode에서 ESlint extension를 설치하자 3. 수동의 3개의 패키지를 설치한다.(eslint-config-airbnb-base, eslint, eslint-plugin-import) 3개의 패키지$ npm add eslint-config-airbnb-base eslint eslint-plugin-import 4. .eslintrc.js 파일을 만들고 다음과 같이 복사한다 module.exports = { env: { browser: true, es6: true, node: true }, extends: "airbnb-base"..