Develop Dairy/JavaScript, React 29

JS와 Webassembly의 차이점 (2021. 10. 23)

JS는 아래와같은 방식을 거칩니다. 인터프리터 : 코드를 한 줄씩 읽어, 한 줄씩 Bytecode로 변환 컴파일러 : 파일 전체를 읽은 뒤, 코드의 의미를 해석하고 파일 전체를 기계어로 컴파일해서 변환 Interpreter -> Byteocode 를 ingition이(구글이 명명) 실행 Optimising은 반복된 작업의 코드들을 최적화 해준다는 뜻. *Optimising로 해석된 Machine Code를 turbofan(구글이 명명)이 실행 * turbofan이 할 수 없으면 optimising을 취소하고 ingition이 다시 실행 됩니다. .wasm은 아래와같은 방식을 거칩니다. .wasm 파일 -> 구글의 V8 Liftoff 컴파일러로 실행 wasm은 많은 코드가 optimizing이 되고 취소되..

JS Variables let, const, var & Data Types

자바스크립트의 변수들과, 데이터 타입 1. 자바스크립트의 변수들 let으로 선언된 a변수에 주목해보자 let a = 22; let b = a - 5 ; a = 4; console.log(b, a) 를 했을경우 어떻게 나올까? 마지막에 a가 4로 바뀌어 진 것을 볼 수 있다. 즉 let은 변수가 바뀌는걸 허용한다고 볼 수 있다. const으로 선언된 a 변수는 어떨까? console창을 보면 에러가 난 것을 볼 수 있다. 이유는 a = 4에서 에러가 나는 것인데, const는 변수가 바뀌는걸 허용하지 않는다. var 은 let처럼 값을 바꿀 수 있다. 하지만 var과 let은 다른 부분이 있는데. https://developer.mozilla.org/ko/docs/Web/JavaScript/Referenc..

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을얻어봅니다.

인증기능 사용하기 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"..